/* HYPagotchi — FINAL POLISH LAYER (motion + reveal system)
   Techniques: split-text masks · scroll reveals · sticky/stacked cards · lerp parallax ·
   pixel reveal · easing tokens · magnetic CTAs · splash. Mobile-first, reduced-motion safe. */

:root{
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-back: cubic-bezier(.34,1.56,.64,1);
  --ease-inout-soft: cubic-bezier(.65,0,.35,1);
  --reveal-dur: .9s;
  --reveal-stagger: 70ms;
}

/* ── split-text mask reveal (chars/lines get wrapped by polish.js) ── */
.sp-line{ display:block; overflow:hidden; }
.sp-line > .sp-inner{ display:block; transform:translateY(110%); }
.sp-char{ display:inline-block; overflow:hidden; vertical-align:top; }
.sp-char > .sp-inner{ display:inline-block; transform:translateY(115%); }
.sp-done .sp-inner{ transform:none; }
/* no-JS / reduced-motion safety: text never stays hidden */
@media (prefers-reduced-motion: reduce){
  .sp-line > .sp-inner, .sp-char > .sp-inner{ transform:none !important; }
}

/* ── viewport reveal (useInView equivalent) ── */
[data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].in{ opacity:1; transform:none;
  transition:opacity var(--reveal-dur) var(--ease-out-expo), transform var(--reveal-dur) var(--ease-out-expo); }
[data-reveal="left"]{ transform:translateX(-30px); }
[data-reveal="right"]{ transform:translateX(30px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].in[data-reveal="left"], [data-reveal].in[data-reveal="right"], [data-reveal].in[data-reveal="scale"]{ transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── mask-on-scroll (clip reveal for media blocks) ── */
[data-mask-reveal]{ clip-path:inset(12% 12% 12% 12% round 18px); transform:scale(1.06); }
[data-mask-reveal].in{ clip-path:inset(0 0 0 0 round 0px); transform:scale(1);
  transition:clip-path 1.1s var(--ease-inout-soft), transform 1.1s var(--ease-inout-soft); }
@media (prefers-reduced-motion: reduce){
  [data-mask-reveal]{ clip-path:none !important; transform:none !important; } }

/* ── stacked cards (sticky deck) ── */
.stack-deck{ position:relative; }
.stack-deck > .stack-card{ position:sticky; top:calc(88px + var(--stack-i,0) * 14px);
  transform-origin:top center; will-change:transform; }
@media (max-width:760px){ .stack-deck > .stack-card{ position:relative; top:auto; } }

/* ── lerp parallax targets ── */
[data-parallax]{ will-change:transform; }

/* ── 3D DOM tilt (cards) ── */
.tilt-wrap{ perspective:900px; }
[data-tilt]{ transform-style:preserve-3d; transition:transform .35s var(--ease-out-expo); }

/* ── pixel reveal (on-brand pixel-art dissolve for imgs) ── */
[data-pixel-reveal]{ image-rendering:pixelated; filter:none; }
[data-pixel-reveal].px-0{ filter:blur(0); transform:scale(1); }

/* ── magnetic CTA + sheen already in site-motion (m142); add press feel ── */
.btn{ touch-action:manipulation; }
.btn:active{ transform:translateY(1px) scale(.99); }

/* ── splash (once per session, fast) ── */
#polish-splash{ position:fixed; inset:0; z-index:99999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; background:var(--bg,#FDF5F0);
  transition:opacity .45s var(--ease-inout-soft), visibility .45s; }
#polish-splash.done{ opacity:0; visibility:hidden; pointer-events:none; }
#polish-splash img{ width:88px; height:88px; image-rendering:pixelated;
  animation:splashBob 1s var(--ease-inout-soft) infinite alternate; }
#polish-splash .splash-bar{ width:150px; height:8px; border:2px solid var(--ink,#1A202C); background:#fff; overflow:hidden; }
#polish-splash .splash-bar i{ display:block; height:100%; width:20%; background:var(--teal,#4FD1C5);
  animation:splashFill .9s var(--ease-inout-soft) forwards; }
@keyframes splashBob{ from{ transform:translateY(-4px);} to{ transform:translateY(4px);} }
@keyframes splashFill{ to{ width:100%; } }
@media (prefers-reduced-motion: reduce){ #polish-splash{ display:none !important; } }

/* ── scroll-scrub video section ── */
.scrub-wrap{ position:relative; }
.scrub-wrap video{ width:100%; display:block; }

/* ── universal mobile hardening ── */
html, body{ overflow-x:clip; }
img, video, canvas, svg, iframe{ max-width:100%; }
@media (max-width:760px){
  .btn{ min-height:44px; }                    /* tap targets */
  h1{ overflow-wrap:break-word; }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:420px){
  .container{ padding-left:16px !important; padding-right:16px !important; }
}