/* ToneGrid landing — motion (transitions.dev): texts reveal (18) + card hover tilt (19).
   Loaded only on pages that opt in. The reveal's hidden state is gated behind
   .motion-ready (added by an inline head script) so copy stays visible if JS is
   off or fails. display:block is intentionally omitted from .t-stagger-line here
   because it is applied to elements that carry their own display (block / flex). */
:root{
  /* texts reveal */
  --stagger-dur:600ms; --stagger-distance:14px; --stagger-stagger:90ms;
  --stagger-blur:4px; --stagger-ease:cubic-bezier(0.22,1,0.36,1);
  /* card hover tilt */
  --tilt-perspective:1000px;
  --tilt-return:1000ms; --tilt-return-ease:cubic-bezier(0.22,1,0.36,1);
  --tilt-follow:400ms;  --tilt-follow-ease:cubic-bezier(0.22,1,0.36,1);
  --tilt-glare-opacity:0.26; --tilt-glare-fade:300ms; --tilt-glare-ease:cubic-bezier(0.22,1,0.36,1);
}

/* ---- Texts reveal (only active once JS arms .motion-ready) ---- */
.motion-ready .t-stagger-line{
  opacity:0;
  transform:translateY(var(--stagger-distance));
  filter:blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change:transform, opacity, filter;
}
.motion-ready .t-stagger-line--2{ transition-delay:var(--stagger-stagger); }
.motion-ready .t-stagger-line--3{ transition-delay:calc(var(--stagger-stagger) * 2); }
.motion-ready .t-stagger-line--4{ transition-delay:calc(var(--stagger-stagger) * 3); }
.motion-ready .t-stagger.is-shown .t-stagger-line{
  opacity:1; transform:translateY(0); filter:blur(0);
}

/* ---- Card hover tilt ---- */
.t-tilt{ touch-action:none; }
.t-tilt-card{
  position:relative;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style:preserve-3d;
  transition:transform var(--tilt-return) var(--tilt-return-ease);
  will-change:transform;
}
.t-tilt-card.is-tilting{ transition:transform var(--tilt-follow) var(--tilt-follow-ease); }
.t-tilt-glare{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  border-radius:inherit; mix-blend-mode:screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.40), rgba(255,255,255,0.05) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.18), rgba(255,255,255,0.03) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.08), rgba(255,255,255,0) 88%);
  transition:opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}
.t-tilt.is-hover .t-tilt-glare{ opacity:var(--tilt-glare-opacity); }

@media (prefers-reduced-motion: reduce){
  .motion-ready .t-stagger-line{
    transition:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
  .t-tilt-card{ transform:none !important; transition:none !important; }
}