/* ==========================================================================
   Animations: keyframes, scroll reveals, view transitions, reduced motion
   Scroll-linked motion (parallax, spin, tilt) lives in js/effects.js.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes archIn { from { transform: translateY(5px) scaleY(.2); opacity: 0; } }
@keyframes nameIn { from { transform: translateX(-8px); opacity: 0; } }
@keyframes brandIn {
  from { clip-path: inset(-10px 100% -10px 0); }
  to   { clip-path: inset(-10px -10px -10px 0); }
}
@keyframes flowOut {
  from { transform: translateX(-56px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes ribbonIn {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes fl1 { 50% { transform: translate(36px, -18px) scale(1.03); } }
@keyframes fl2 { 50% { transform: translate(-30px, 14px) scale(1.02); } }
@keyframes fl3 { 50% { transform: translate(20px, 26px) scale(1.04); } }
@keyframes bar { from { transform: scaleX(0); } }

/* ---------- Word reveal ([data-words]) ----------
   Headlines are split into words by js/reveal.js. Each word slides up out of
   a mask with a slight tilt. Padding keeps descenders and tight tracking from
   clipping. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .14em .08em .22em;
  margin: -.14em -.08em -.22em;
}
.w > span { display: inline-block; }
.js .w > span {
  transform: translateY(115%) rotate(6deg);
  transform-origin: 0 100%;
  transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i) * var(--word-stagger));
}
.js .in .w > span { transform: none; }

/* ---------- Generic reveal ([data-r]) ----------
   data-r          fade + rise + unblur
   data-r="left"   from the left
   data-r="right"  from the right
   data-r="scale"  grows out of a clipped frame
   style="--d:200" delays by 200ms */
.js [data-r] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  filter: blur(var(--reveal-blur));
  transition:
    opacity 1s var(--ease-out) calc(var(--d, 0) * 1ms),
    transform var(--dur-reveal) var(--ease-out) calc(var(--d, 0) * 1ms),
    filter 1s var(--ease-out) calc(var(--d, 0) * 1ms),
    clip-path 1.4s var(--ease-out) calc(var(--d, 0) * 1ms);
}
.js [data-r="left"]  { transform: translateX(calc(var(--reveal-distance) * -1)); }
.js [data-r="right"] { transform: translateX(var(--reveal-distance)); }
.js [data-r="scale"] {
  transform: scale(.94);
  filter: none; /* blur on large areas is expensive, clip instead */
  clip-path: inset(6% 6% 6% 6%);
}
.js [data-r].in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* ---------- View transitions (browser demo layout changes) ---------- */
.o-strip { view-transition-name: vt-strip; }
.o-tab:nth-child(1) { view-transition-name: vt-t1; }
.o-tab:nth-child(2) { view-transition-name: vt-t2; }
.o-tab:nth-child(3) { view-transition-name: vt-t3; }
.o-tab:nth-child(4) { view-transition-name: vt-t4; }
.o-rail { view-transition-name: vt-side; }
.o-head { view-transition-name: vt-head; }
.o-tool { view-transition-name: vt-tool; }
.o-omni { view-transition-name: vt-omni; }
.o-page { view-transition-name: vt-page; }
::view-transition-group(*) {
  animation-duration: .7s;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* ---------- Reduced motion ----------
   Only applies when js/config.js has respectReducedMotion: true and the
   visitor's system asks for less motion (utils.js adds the class). */
html.reduce-motion {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-r], .js .w > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .js .item:not(.in)::after, .js .divider:not(.in)::before { transform: none !important; }
  .mark path, .brand span { animation: none !important; } /* no logo intro with reduced motion */
}