/* AFK Maker · Motion kit v6.3 "Crystal Night · Light Slash"
   Reusable motion for the website. Pair with afk-motion.js (data-afk-* hooks).
   Rules kept from the CI: colour comes only from light, the crystal is the one magic object,
   one gradient button per screen, nothing loops fast enough to pull the eye off the copy.
   Every animation stops under prefers-reduced-motion. */

:root{
  --afk-void:#05071A; --afk-navy:#0A0E1F; --afk-blue:#3B82F6; --afk-cyan:#00E5FF;
  --afk-violet:#A78BFA; --afk-pink:#F680FF; --afk-light:#E9EEFF;
  --afk-grad:linear-gradient(90deg,#6FB6FF 0%,#8E8BFF 55%,#B49CFF 100%);
  --afk-ease:cubic-bezier(.22,.8,.24,1);
  --afk-ease-io:cubic-bezier(.65,0,.35,1);
}

/* 1 · Scroll reveal ------------------------------------------------------ */
/* hidden only while the motion script runs (<html class="afk-js">: layout sets it, and removes it after 4 s unless
   AFK.init finished), so a blocked or failed script never leaves content invisible (Red, store R2/R3) */
.afk-js [data-afk-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--afk-ease),transform .8s var(--afk-ease);transition-delay:var(--afk-delay,0s)}
.afk-js [data-afk-reveal].is-in{opacity:1;transform:none}

/* 2 · Line-light sweep (section labels, dividers) ------------------------- */
.afk-sweep{position:relative;display:inline-block}
.afk-sweep::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;
  background:linear-gradient(90deg,transparent,#CFE0FF,transparent);background-size:40% 100%;background-repeat:no-repeat;
  background-position:-40% 0;opacity:.0}
.is-in .afk-sweep::after,.afk-sweep.is-in::after{animation:afk-sweep 1.6s var(--afk-ease) .2s forwards}
@keyframes afk-sweep{0%{background-position:-40% 0;opacity:1}100%{background-position:140% 0;opacity:.35}}

/* 3 · Button shimmer + magnet ------------------------------------------- */
.afk-shimmer{position:relative;overflow:hidden;isolation:isolate}
.afk-shimmer::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%);animation:afk-shine 5.5s var(--afk-ease-io) 1.2s infinite}
@keyframes afk-shine{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
[data-afk-magnet]{transition:transform .35s var(--afk-ease)}

/* 4 · Tilt card with a light rim that follows the pointer ----------------- */
[data-afk-tilt]{--mx:50%;--my:0%;--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--afk-ease),border-color .3s,box-shadow .3s;transform-style:preserve-3d;will-change:transform}
[data-afk-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(170,180,255,.22),transparent 60%);}
[data-afk-tilt]:hover::after{opacity:1}
[data-afk-tilt].is-tilting{transition:transform .08s linear,border-color .3s,box-shadow .3s}

/* 5 · Charge pulse (ประจุ) — a ring of light that breathes out of the crystal */
.afk-charge{position:relative}
.afk-charge::before,.afk-charge::after{content:"";position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(190,200,255,.55);transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
  animation:afk-charge 3.6s var(--afk-ease) infinite}
.afk-charge::after{animation-delay:1.8s}
@keyframes afk-charge{0%{transform:translate(-50%,-50%) scale(.55);opacity:.0}15%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}

/* 6 · Crystal glow breathing (place over the crystal in any art) ---------- */
.afk-glow{position:absolute;width:var(--size,180px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.75) 0,rgba(201,194,255,.45) 18%,rgba(124,108,255,.16) 45%,transparent 70%);
  mix-blend-mode:screen;animation:afk-breathe 4.8s ease-in-out infinite}
@keyframes afk-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* 7 · Light beam shimmer (a thin vertical beam with a travelling spark) --- */
.afk-beam{position:absolute;width:2px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(233,238,255,.55) 20%,rgba(233,238,255,.55) 80%,transparent);mix-blend-mode:screen}
.afk-beam::after{content:"";position:absolute;left:50%;width:6px;height:70px;transform:translateX(-50%);border-radius:6px;
  background:linear-gradient(180deg,transparent,#fff,transparent);filter:blur(1px);animation:afk-beam 3.2s var(--afk-ease-io) infinite}
@keyframes afk-beam{0%{top:-10%;opacity:0}20%{opacity:1}100%{top:100%;opacity:0}}

/* 8 · Crystal loader ---------------------------------------------------- */
.afk-loader{width:var(--size,44px);aspect-ratio:1;position:relative;perspective:200px}
.afk-loader i{position:absolute;inset:0;transform-style:preserve-3d;animation:afk-spin 2.4s var(--afk-ease-io) infinite}
.afk-loader i::before,.afk-loader i::after{content:"";position:absolute;left:25%;width:50%;height:50%;
  clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(90deg,#F4FBFF 50%,#B8D4FF 50%);filter:drop-shadow(0 0 6px #8E8BFF)}
.afk-loader i::after{top:50%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(90deg,#8E9BFF 50%,#7A5CF0 50%)}
@keyframes afk-spin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* 9 · Portal transition (diamond iris) ---------------------------------- */
.afk-portal{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;place-items:center}
.afk-portal i{width:30vmax;aspect-ratio:1;transform:rotate(45deg) scale(0);
  background:radial-gradient(circle,#fff 0,#C9C2FF 12%,#3B2EAA 40%,var(--afk-void) 64%);
  box-shadow:0 0 80px 20px rgba(140,140,255,.5)}
.afk-portal.is-on i{animation:afk-iris .9s var(--afk-ease-io) forwards}
@keyframes afk-iris{0%{transform:rotate(45deg) scale(0)}55%{transform:rotate(45deg) scale(4.2)}100%{transform:rotate(45deg) scale(4.2);opacity:0}}

/* 10 · Number coin (count-up pops) -------------------------------------- */
[data-afk-count]{font-variant-numeric:tabular-nums}
[data-afk-count].is-done{animation:afk-coin .6s var(--afk-ease)}
@keyframes afk-coin{0%{text-shadow:0 0 0 rgba(160,170,255,0)}40%{text-shadow:0 0 22px rgba(160,170,255,.9)}100%{text-shadow:0 0 0 rgba(160,170,255,0)}}

/* 11 · Crystal logo (inline AFK from AFK.logo / data-afk-logo) ----------
   facets crystallise left to right, the crystal in A pops, one glint sweeps the letters */
.afk-logo-draw .f{opacity:0;transform:translateY(7px) scale(.94);transform-box:fill-box;transform-origin:center}
.afk-logo-draw.is-in .f{animation:afk-facet .75s var(--afk-ease) forwards;animation-delay:var(--d,0s)}
.afk-logo-draw .c{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
.afk-logo-draw.is-in .c{animation:afk-pop .7s var(--afk-ease) .75s forwards}
.afk-logo-draw .gl{transform:translateX(-30px) skewX(-18deg)}
.afk-logo-draw.is-in .gl{animation:afk-glint 1.2s var(--afk-ease-io) 1.1s forwards}
@keyframes afk-facet{to{opacity:1;transform:none}}
@keyframes afk-pop{60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes afk-glint{to{transform:translateX(290px) skewX(-18deg)}}

/* 12 · Toast + fly-to-cart spark ----------------------------------------- */
.afk-toast{position:fixed;left:50%;bottom:28px;z-index:9000;transform:translate(-50%,30px);opacity:0;
  padding:12px 20px;border-radius:14px;background:rgba(10,14,40,.92);border:1px solid rgba(178,194,255,.34);color:var(--afk-light);
  box-shadow:0 10px 40px rgba(60,80,200,.4);transition:all .45s var(--afk-ease);font-size:14px;backdrop-filter:blur(8px)}
.afk-toast.is-on{transform:translate(-50%,0);opacity:1}
.afk-spark{position:fixed;z-index:9001;width:14px;height:14px;pointer-events:none;transform:rotate(45deg);
  background:linear-gradient(135deg,#fff,#A78BFA);box-shadow:0 0 16px #8E8BFF,0 0 4px #fff;border-radius:2px}
.afk-bump{animation:afk-bump .5s var(--afk-ease)}
@keyframes afk-bump{40%{transform:scale(1.35)}}

/* 13 · Light slash (AFK.slash) — thin crisp cuts, a bright head, a short afterglow, all at the same moment */
.afk-slash{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:6}
.afk-slash.is-fixed{position:fixed;z-index:9998}
.afk-slash line{fill:none;stroke-linecap:butt}
.afk-slash .co{stroke:#fff;stroke-width:1.6;stroke-dasharray:.26 2;stroke-dashoffset:.26}
.afk-slash .sh{stroke:rgba(159,216,255,.55);stroke-width:5;stroke-dasharray:.26 2;stroke-dashoffset:.26}
.afk-slash .tr{stroke-width:1.2;stroke-dasharray:1 1;stroke-dashoffset:1;mix-blend-mode:screen}

/* 14 · Ignite — where the slashes cross: a crisp diamond flash and one charge ring */
.afk-ignite{position:absolute;z-index:7;width:0;height:0;pointer-events:none}
.afk-ignite.is-fixed{position:fixed;z-index:9998}
.afk-ignite b{position:absolute;left:0;top:0;width:var(--afk-ignite,46px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg) scale(.2);
  border:1.5px solid #fff;opacity:0;animation:afk-ig 0.75s var(--afk-ease) forwards}
.afk-ignite b+b{background:linear-gradient(135deg,#fff,#C9C2FF 60%,transparent 61%);border:0;width:calc(var(--afk-ignite,46px)*.45);animation-duration:.5s}
.afk-ignite s{position:absolute;left:0;top:0;width:calc(var(--afk-ignite,46px)*2.2);aspect-ratio:1;border-radius:50%;border:1px solid rgba(207,224,255,.9);
  transform:translate(-50%,-50%) scale(.3);opacity:0;animation:afk-ring 1.2s var(--afk-ease) .05s forwards}
@keyframes afk-ig{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(2.4)}}
@keyframes afk-ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}

/* 15 · Intro hold — hero copy and the logo wait until the slashes cross the crystal */
.afk-js.afk-hold [data-afk-intro] [data-afk-reveal],.afk-js.afk-hold [data-afk-intro] [data-afk-reveal].is-in{opacity:0;transform:translateY(22px);transition:none}
.afk-hold .afk-logo-draw .f,.afk-hold .afk-logo-draw .c,.afk-hold .afk-logo-draw .gl{animation-play-state:paused!important}

/* 16 · Slash wipe — a heading is cut in along one diagonal */
.afk-js [data-afk-slash]{position:relative;clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}
.afk-js [data-afk-slash].is-in{animation:afk-wipe .52s cubic-bezier(.7,0,.25,1) forwards}
.afk-js [data-afk-slash].is-slashed{clip-path:none;animation:none}
@keyframes afk-wipe{to{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}}

/* 17 · Button slash — one cut sweeps the button on hover / focus */
.afk-slash-btn{position:relative;overflow:hidden;isolation:isolate}
.afk-slash-btn::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-12%;width:2px;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff 30%,#CFE0FF 70%,transparent);box-shadow:-6px 0 0 -2px rgba(255,255,255,.35);
  transform:skewX(-24deg);opacity:0}
.afk-slash-btn:hover::after,.afk-slash-btn:focus-visible::after{animation:afk-btnslash .5s cubic-bezier(.7,0,.25,1)}
@keyframes afk-btnslash{0%{left:-12%;opacity:1}100%{left:112%;opacity:1}}

/* 18 · Crystal focus ring (keyboard) — chamfered cut corners + four diamond studs, no glow blur */
.afk-focus{position:absolute;z-index:9997;pointer-events:none;opacity:0;transition:opacity .15s}
.afk-focus.is-on{opacity:1}
.afk-focus svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.afk-focus polygon{fill:none;stroke:#CFE0FF;stroke-width:1.5;stroke-dasharray:6 0}
.afk-focus.is-on polygon{animation:afk-facetdraw .35s var(--afk-ease)}
.afk-focus i{position:absolute;width:7px;height:7px;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(135deg,#fff,#A78BFA)}
.afk-focus i:nth-of-type(1){left:50%;top:0}.afk-focus i:nth-of-type(2){left:100%;top:50%}
.afk-focus i:nth-of-type(3){left:50%;top:100%}.afk-focus i:nth-of-type(4){left:0;top:50%}
@keyframes afk-facetdraw{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.afk-js :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none}

/* ===== Adaptive layer (afk-adaptive.js) ===== */
/* 19 · 3D crystal canvas sits on the painted crystal */
canvas[data-afk-crystal3d]{position:absolute;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .6s}
canvas[data-afk-crystal3d].is-on{opacity:1}
/* 20 · tilt permission chip (iOS only) */
[data-afk-tilt-ask]{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 14px;border-radius:999px;font-size:13px;
  color:var(--afk-light);background:rgba(10,14,40,.6);border:1px solid rgba(178,194,255,.34)}
[data-afk-tilt-ask]::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,#fff,#A78BFA)}
[data-afk-tilt-ask][hidden]{display:none}
/* 21 · charge dock — the crystal fills one facet band per section passed */
.afk-dock{position:fixed;right:18px;top:50%;z-index:60;transform:translateY(-50%);width:46px;padding:6px 3px 4px;border-radius:14px;cursor:pointer;
  background:rgba(8,12,34,.55);border:1px solid rgba(158,176,255,.22);display:flex;flex-direction:column;align-items:center;gap:4px;color:#9AA3C7}
.afk-dock svg{width:34px;height:auto;overflow:visible}
.afk-dock .band{fill:rgba(158,176,255,.08);stroke:rgba(178,194,255,.28);stroke-width:.6;transition:fill .5s var(--afk-ease)}
.afk-dock .band.on{fill:url(#afkDockG)}
.afk-dock .rim{fill:none;stroke:#CFE0FF;stroke-width:1}
.afk-dock .ridge{fill:none;stroke:rgba(255,255,255,.45);stroke-width:.6}
.afk-dock-n{font:400 10px/1 'Jost',sans-serif;letter-spacing:.1em}
.afk-dock.pulse svg{animation:afk-dockpop .55s var(--afk-ease)}
@keyframes afk-dockpop{40%{transform:scale(1.18)}}
.afk-dock.full{border-color:rgba(242,168,255,.6)}
.afk-dock.full .rim{stroke:#fff;stroke-width:1.4}
.afk-dock-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(8px,-50%);white-space:nowrap;opacity:0;pointer-events:none;
  padding:8px 14px;border-radius:12px;background:rgba(10,14,40,.92);border:1px solid rgba(178,194,255,.34);color:#E9EEFF;font-size:13px;transition:all .35s var(--afk-ease)}
.afk-dock.tip .afk-dock-tip{opacity:1;transform:translate(0,-50%)}
@media (max-width:640px){
  .afk-dock{top:auto;bottom:18px;right:12px;transform:none;width:40px}
  .afk-dock svg{width:28px}
  .afk-dock-tip{top:auto;bottom:0;transform:translate(8px,0);width:max-content;max-width:calc(100vw - 90px);white-space:normal}
  .afk-dock.tip .afk-dock-tip{transform:none}
}
.is-charged .afk-charge::before,.is-charged .afk-charge::after{animation-duration:1.6s;border-color:rgba(242,168,255,.8)}
/* 22 · portal walk — the hero sticks while scrolling walks the camera through the arch */
[data-afk-walk].is-walk{height:190vh;height:190svh}
[data-afk-walk].is-walk>:first-child{position:sticky;top:0;height:100vh;height:100svh}
/* the gate: nested cut-crystal outlines open from the arch (width grows, so the lines stay thin and crisp) */
.afk-gate{position:absolute;z-index:3;width:22vmin;aspect-ratio:1;pointer-events:none;opacity:0;transform:translate(-50%,-50%) rotate(45deg);
  border:1.5px solid #fff;background:rgba(201,194,255,.10)}
.afk-gate::before,.afk-gate::after{content:"";position:absolute;inset:18%;border:1px solid rgba(207,224,255,.85)}
.afk-gate::after{inset:38%;border-color:rgba(242,168,255,.9);background:rgba(255,255,255,.08)}
.afk-walk-flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(180deg,#C9C2FF,#8E8BFF 60%,#05071A)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  [data-afk-reveal]{opacity:1;transform:none;filter:none}
  [data-afk-slash]{clip-path:none}
  .afk-logo-draw .f,.afk-logo-draw .c{transform:none;opacity:1}
}