/* loader.css — site-open loader (motion pass 2026-09-02, tweak 2026-09-03).
   Variant is set by data-loader="reel|knot|flame|aff" on the overlay.
   Once per 24h (localStorage), never under prefers-reduced-motion. */
.ldr{position:fixed;inset:0;z-index:2147483000;background:var(--bone,#fff);color:var(--ink,#141414);
  display:grid;place-items:center;place-content:center;overflow:hidden;
  transition:transform .6s var(--ease-out,cubic-bezier(.16,1,.3,1)),opacity .45s ease;}
.ldr.out{transform:translateY(-100%);pointer-events:none;}
.ldr.out--fade{transform:none;opacity:0;pointer-events:none;}
html.ldr-lock,html.ldr-lock body{overflow:hidden!important;}
.ldr__inner{display:grid;justify-items:center;align-items:center;gap:1.4rem;padding:1rem;
  width:min(100%,42rem);margin-inline:auto;text-align:center;}

/* ---------- 1. Slot reel: HEAL / EQUIP / SEND ---------- */
.ldr--reel{--cell:clamp(52px,11vw,104px);}
.ldr--reel .row{display:flex;gap:.06em;justify-content:center;}
.ldr--reel .cell{width:var(--cell);height:var(--cell);overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);}
.ldr--reel .reel{display:grid;grid-auto-rows:var(--cell);will-change:transform;transform:translateY(0);}
.ldr--reel.go .reel{animation:ldr-reel 1.15s cubic-bezier(.2,.9,.25,1) forwards;animation-delay:var(--d,0s);}
.ldr--reel .reel > *{width:var(--cell);height:var(--cell);display:grid;place-items:center;
  font-family:var(--font-display,"Proxima Nova",system-ui,sans-serif);font-weight:700;font-size:calc(var(--cell) * .8);line-height:1;letter-spacing:-.03em;color:var(--ink,#141414);}
.ldr--reel .reel img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);}
.ldr--reel .reel .ph{position:relative;padding:0;}
.ldr--reel .reel .ph::after{content:"";position:absolute;inset:0;background:var(--flame,#FF8F1C);mix-blend-mode:multiply;opacity:.7;}
@keyframes ldr-reel{
  0%{transform:translateY(0);filter:blur(0)}
  25%{filter:blur(5px)}
  70%{filter:blur(4px)}
  100%{transform:translateY(calc(-1 * var(--n) * var(--cell)));filter:blur(0)}
}
.ldr__mark{width:clamp(40px,7vw,64px);height:auto;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--ease-out,cubic-bezier(.16,1,.3,1));}
.ldr.marked .ldr__mark{opacity:1;transform:none;}
.ldr--reel .ldr__inner{gap:.7rem;}
.ldr--reel .row{gap:.03em;}
.ldr--reel .reel > *{letter-spacing:-.05em;}

/* ---------- 4. AFF: one big row lands on the initials, the model fades in under it ---------- */
.ldr--aff{--cell:clamp(88px,22vw,190px);}
.ldr--aff .ldr__inner{gap:1rem;}
.ldr--aff.go .reel{animation-duration:1.25s;animation-delay:calc(var(--d,0s) * 1.3);}
.ldr--aff .reel > *{font-size:calc(var(--cell) * .86);}
.ldr__tag{display:flex;gap:.9em;font-family:var(--font-body,system-ui);font-weight:600;font-size:clamp(.72rem,1.6vw,1rem);letter-spacing:.22em;text-transform:uppercase;color:var(--ink,#141414);}
.ldr__tag span{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s var(--ease-out,cubic-bezier(.16,1,.3,1));transition-delay:calc(var(--k,0) * .12s);}
.ldr__tag span:nth-child(2){color:var(--flame,#FF8F1C);}
.ldr.marked .ldr__tag span{opacity:1;transform:none;}
.ldr--aff .ldr__mark{transition-delay:.35s;}

/* ---------- 2. Knot draw, then wordmark (no second knot) ---------- */
@property --ldr-p{syntax:"<percentage>";inherits:false;initial-value:0%;}
.ldr--knot .ldr__inner{gap:1.1rem;}
.ldr--knot .ldr__knot{--ldr-p:0%;width:clamp(96px,18vw,180px);height:auto;
  -webkit-mask:conic-gradient(from -30deg,#000 var(--ldr-p),transparent 0);mask:conic-gradient(from -30deg,#000 var(--ldr-p),transparent 0);
  transition:--ldr-p .95s var(--ease-out,cubic-bezier(.16,1,.3,1));}
.ldr--knot.go .ldr__knot{--ldr-p:100%;}
.ldr--knot .ldr__wide{width:clamp(200px,38vw,360px);height:auto;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease 1s,transform .6s var(--ease-out,cubic-bezier(.16,1,.3,1)) 1s;}
.ldr--knot.go .ldr__wide{opacity:1;transform:none;}

/* ---------- 3. Flame rise through the wordmark ---------- */
.ldr--flame .ldr__maskbox{width:clamp(220px,44vw,420px);aspect-ratio:720/243;position:relative;
  -webkit-mask:url(/assets/AFF_Logo_Wide_ColorBlack-3.png) center/contain no-repeat;mask:url(/assets/AFF_Logo_Wide_ColorBlack-3.png) center/contain no-repeat;
  background:color-mix(in oklch,var(--ink,#141414) 14%,transparent);}
.ldr--flame .ldr__fill{position:absolute;inset:0;background:var(--flame,#FF8F1C);transform:translateY(101%);}
.ldr--flame.go .ldr__fill{animation:ldr-rise .75s cubic-bezier(.2,.9,.25,1) forwards;}
@keyframes ldr-rise{to{transform:translateY(0)}}
.ldr--flame .ldr__fill2{position:absolute;inset:0;background:var(--ink,#141414);transform:translateY(101%);}
.ldr--flame.go .ldr__fill2{animation:ldr-rise .55s cubic-bezier(.2,.9,.25,1) .55s forwards;}

/* ---------- demo switcher (loader playground / loader-demo) ---------- */
.ldr-demo{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147483001;
  display:flex;gap:.4rem;padding:.5rem;border-radius:999px;background:var(--ink,#141414);box-shadow:0 18px 50px -20px rgba(0,0,0,.6);}
.ldr-demo a,.ldr-demo button{font:600 .8rem/1 var(--font-body,system-ui);letter-spacing:.04em;color:var(--bone,#fff);
  padding:.6rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;text-decoration:none;cursor:pointer;min-height:36px;}
.ldr-demo a[aria-current="true"]{background:var(--flame,#FF8F1C);color:#111;border-color:transparent;}

@media (prefers-reduced-motion:reduce){ .ldr{display:none!important;} }