/* ============================================================
   SDX MOTION LAYER: Wave 2 (flagship-polish port, sdx- scoped)
   Loaded on the 14 core pages only. Never imported by styles.css,
   never referenced by generated silo pages.
   Guardrails: prefers-reduced-motion kill block at the bottom;
   pointer:fine gating lives in js/motion.js.
   z-plan: veil 9999 > cursor dot 9997 > cursor ring 9996 >
   bookmodal 200 > chat 150 > scrollbar 100 > grain 90 > content.
   ============================================================ */

/* 1 · intro veil: 5-petal sand-dollar rosette stroke-draw ------ */
.sdx-veil{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 42%,#0c5263,#06323d 58%,#04242d 100%);
  transition:opacity .7s ease,visibility .7s ease}
.sdx-veil[hidden]{display:none}
.sdx-veil.is-gone{opacity:0;visibility:hidden;pointer-events:none}
html.sdx-veil-lock{overflow:hidden}
.sdx-veil__mark{width:96px;height:96px;overflow:visible}
.sdx-veil__ring{fill:none;stroke:var(--sun,#ffc24a);stroke-width:2.5;stroke-dasharray:245;stroke-dashoffset:245;animation:sdxDraw .9s cubic-bezier(.2,.7,.2,1) forwards .1s}
.sdx-veil__petal{fill:rgba(255,253,246,.92);opacity:0;transform-box:fill-box;transform-origin:center;animation:sdxPop .45s cubic-bezier(.2,.7,.2,1) forwards}
.sdx-veil__mark g:nth-of-type(1) .sdx-veil__petal{animation-delay:.65s}
.sdx-veil__mark g:nth-of-type(2) .sdx-veil__petal{animation-delay:.75s}
.sdx-veil__mark g:nth-of-type(3) .sdx-veil__petal{animation-delay:.85s}
.sdx-veil__mark g:nth-of-type(4) .sdx-veil__petal{animation-delay:.95s}
.sdx-veil__mark g:nth-of-type(5) .sdx-veil__petal{animation-delay:1.05s}
.sdx-veil__core{fill:var(--coral,#ff6a3d);opacity:0;transform-box:fill-box;transform-origin:center;animation:sdxPop .45s cubic-bezier(.2,.7,.2,1) forwards 1.15s}
.sdx-veil__word{font-family:var(--display,system-ui,sans-serif);font-weight:700;font-size:1.35rem;color:var(--paper,#fffdf6);opacity:0;animation:sdxFade .5s ease forwards 1.2s}
.sdx-veil__sub{font-family:var(--script,cursive);font-size:1rem;color:var(--sun-2,#ffd982);opacity:0;animation:sdxFade .5s ease forwards 1.35s}
@keyframes sdxDraw{to{stroke-dashoffset:0}}
@keyframes sdxPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes sdxFade{to{opacity:1}}

/* 2 · grain overlay --------------------------------------------- */
.sdx-grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Wave-2 recorded decision: grain off on small screens so mobile
   scroll stays flawless (fixed + mix-blend-mode is compositor-heavy). */
@media (max-width:760px){.sdx-grain{display:none}}

/* 3 · custom cursor (pointer:fine only, class set by motion.js) - */
html.sdx-cursor-on,html.sdx-cursor-on *{cursor:none!important}
#sdxCursor,#sdxCursorDot{position:fixed;top:0;left:0;pointer-events:none;border-radius:50%;opacity:0;will-change:transform}
#sdxCursor{z-index:9996;width:34px;height:34px;margin-left:-17px;margin-top:-17px;border:1.6px solid var(--aqua,#1ec8d8);transition:width .22s,height .22s,margin .22s,background .22s,opacity .3s}
#sdxCursorDot{z-index:9997;width:6px;height:6px;margin-left:-3px;margin-top:-3px;background:var(--coral,#ff6a3d);transition:opacity .3s}
#sdxCursor.is-show,#sdxCursorDot.is-show{opacity:1}
#sdxCursor.is-big{width:61px;height:61px;margin-left:-31px;margin-top:-31px;background:rgba(30,200,216,.14)}

/* 4 · heading clip reveal (Chrome IO parent-fix in motion.js) --- */
.js .sdx-clip{clip-path:inset(0 0 102% 0);transform:translateY(14px);transition:clip-path .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.js .sdx-clip.is-in{clip-path:inset(0 0 -12% 0);transform:none}

/* 5 · 3D tilt + mouse-tracking sheen ---------------------------- */
.sdx-tilt{will-change:transform;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.sdx-sheen{position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--sdx-mx,50%) var(--sdx-my,50%),rgba(255,194,74,.22),transparent 46%)}
.sdx-tilt:hover .sdx-sheen,.sdx-sheen-host:hover .sdx-sheen{opacity:1}
/* sheen hosts that lack position:relative in their own sheets */
.occtile,.tk-occ__card{position:relative}

/* 6 · magnetic buttons ------------------------------------------ */
.sdx-magnetic{transition:transform .25s cubic-bezier(.2,.7,.2,1)}

/* 7 · tiki stat band (body.tk scope only: nothing leaks) ------- */
body.tk .tk-stats{padding-top:clamp(34px,4vw,50px);padding-bottom:0}
body.tk .tk-stats__row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(30px,8vw,90px);flex-wrap:wrap;text-align:center}
body.tk .tk-stats__n{display:block;font-family:var(--display,system-ui,sans-serif);font-weight:800;font-size:clamp(2rem,4.5vw,2.9rem);line-height:1;color:var(--tk-coral,#ff6a3d)}
body.tk .tk-stats__l{display:block;margin-top:6px;font-size:.95rem;font-weight:600;color:var(--tk-ink,#243a3e);opacity:.75}

/* GUARDRAILS: reduced motion kills everything ------------------ */
@media (prefers-reduced-motion:reduce){
  .sdx-veil{display:none!important}
  html.sdx-veil-lock{overflow:auto}
  #sdxCursor,#sdxCursorDot{display:none!important}
  html.sdx-cursor-on,html.sdx-cursor-on *{cursor:auto!important}
  .sdx-clip{clip-path:none!important;transform:none!important;transition:none!important}
  .sdx-tilt,.sdx-magnetic{transition:none!important}
  .sdx-veil__ring,.sdx-veil__petal,.sdx-veil__core,.sdx-veil__word,.sdx-veil__sub{animation:none!important}
}