/* ============================================================
   byjawalli — Motion & reveal system
   ============================================================ */

/* ---------- Scroll reveals ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease-out), transform 1.3s var(--ease-out), filter 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="blur"]  { filter: blur(6px); }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(.98); }
[data-reveal="none"]  { transform: none; }
[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out);
}
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1)  { transition-delay: .05s; }
[data-stagger].in > *:nth-child(2)  { transition-delay: .13s; }
[data-stagger].in > *:nth-child(3)  { transition-delay: .21s; }
[data-stagger].in > *:nth-child(4)  { transition-delay: .29s; }
[data-stagger].in > *:nth-child(5)  { transition-delay: .37s; }
[data-stagger].in > *:nth-child(6)  { transition-delay: .45s; }
[data-stagger].in > *:nth-child(7)  { transition-delay: .53s; }
[data-stagger].in > *:nth-child(8)  { transition-delay: .61s; }
[data-stagger].in > *:nth-child(9)  { transition-delay: .69s; }
[data-stagger].in > *:nth-child(10) { transition-delay: .77s; }
[data-stagger].in > *:nth-child(11) { transition-delay: .85s; }
[data-stagger].in > *:nth-child(12) { transition-delay: .93s; }

/* ---------- Split-word mask reveal (JS wraps words) ---------- */
[data-split] .w {
  display: inline-block; overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em; margin-bottom: -.08em; /* keep descenders visible */
}
[data-split] .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.3s var(--ease-out);
  transition-delay: calc(var(--wi) * 55ms + var(--d, 0s));
  will-change: transform;
}
[data-split].in .w > span { transform: translateY(0); }

/* ---------- Hero entrance helpers ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }


/* ---------- Meters ---------- */
.meter .track { height: 2px; background: var(--line); overflow: hidden; }
.meter .fill {
  height: 100%; width: 0;
  background: var(--accent-deep, var(--gold));
  transition: width 1.6s var(--ease-out) .2s;
}
.meter.in .fill { width: var(--val); }

/* ---------- View-transition page fade ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .45s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .65s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
}

/* ---------- Reduced motion: everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > *, [data-split] .w > span, .img-reveal img { opacity: 1 !important; transform: none !important; filter: none !important; }
}