/* ============ Scroll reveal system ============
   r4-style: transform + opacity only, with a resting character tilt.
   Any element can set --tilt (e.g. style="--tilt:-1.2deg") to land at a
   permanent playful angle; reveals start over-rotated and settle onto it
   with a bouncy overshoot curve. */
.reveal-element {
  opacity: 0;
  transform: translateY(44px) rotate(calc(var(--tilt, 0deg) * 2));
  transition:
    opacity 0.7s ease var(--rd, 0ms),
    transform 0.9s var(--ease-bounce) var(--rd, 0ms);
}
.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, 0deg));
}

.reveal-left {
  opacity: 0;
  transform: translateX(-56px) rotate(calc(var(--tilt, 0deg) - 2deg));
  transition:
    opacity 0.7s ease var(--rd, 0ms),
    transform 0.9s var(--ease-bounce) var(--rd, 0ms);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0) rotate(var(--tilt, 0deg));
}

.reveal-right {
  opacity: 0;
  transform: translateX(56px) rotate(calc(var(--tilt, 0deg) + 2deg));
  transition:
    opacity 0.7s ease var(--rd, 0ms),
    transform 0.9s var(--ease-bounce) var(--rd, 0ms);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0) rotate(var(--tilt, 0deg));
}

/* Pop — scales up from small with an extra-juicy overshoot */
.reveal-scale {
  opacity: 0;
  transform: scale(0.78) rotate(var(--tilt, 0deg));
  transition:
    opacity 0.55s ease var(--rd, 0ms),
    transform 0.7s cubic-bezier(0.34, 1.66, 0.44, 1) var(--rd, 0ms);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1) rotate(var(--tilt, 0deg));
}

/* Drift — long lazy slides for big framed imagery */
.reveal-drift-left {
  opacity: 0;
  transform: translate(-90px, 18px) rotate(var(--tilt, 0deg));
  transition:
    opacity 0.8s ease var(--rd, 0ms),
    transform 1.2s var(--ease-bounce) var(--rd, 0ms);
}
.reveal-drift-right {
  opacity: 0;
  transform: translate(90px, 18px) rotate(var(--tilt, 0deg));
  transition:
    opacity 0.8s ease var(--rd, 0ms),
    transform 1.2s var(--ease-bounce) var(--rd, 0ms);
}
.reveal-drift-left.revealed,
.reveal-drift-right.revealed {
  opacity: 1;
  transform: translate(0, 0) rotate(var(--tilt, 0deg));
}

/* Clip-path curtain reveal for images */
.reveal-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-out-expo);
}
.reveal-clip.revealed {
  clip-path: inset(0 0 0 0);
}

/* Stagger delays — scoped to the reveal transition via --rd */
.reveal-delay-1 { --rd: 0.08s; }
.reveal-delay-2 { --rd: 0.16s; }
.reveal-delay-3 { --rd: 0.24s; }
.reveal-delay-4 { --rd: 0.32s; }
.reveal-delay-5 { --rd: 0.4s; }
.reveal-delay-6 { --rd: 0.48s; }

/* Ink brush underline — draws in vermillion */
.ink-underline {
  position: relative;
  display: inline-block;
}
.ink-underline::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vermillion), var(--gold));
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.ink-underline.revealed::after {
  width: 64px;
}

/* ============ Hero title letter stagger ============ */
.hero-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em) rotate(6deg);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-bounce);
  transition-delay: calc(var(--i) * 70ms + 200ms);
}
.hero-title.revealed .char {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* ============ Keyframe library ============ */
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes ken-burns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1.5%, 1%); }
  100% { transform: scale(1) translate(0, 0); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translateY(-11px) rotate(calc(var(--tilt, 0deg) + 1.6deg)); }
}

@keyframes scroll-drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes ping-ring {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes steam-rise {
  0%   { transform: translateY(6px) scaleX(1); opacity: 0; }
  28%  { opacity: 0.85; }
  70%  { opacity: 0.55; }
  100% { transform: translateY(-26px) scaleX(1.25); opacity: 0; }
}

/* Lightbox pop — r4-style entrance */
@keyframes lb-pop {
  from { transform: scale(0.82) rotate(-1.5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Rotating circular badge */
.spin-badge {
  animation: spin-slow 22s linear infinite;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-element,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-drift-left,
  .reveal-drift-right,
  .reveal-clip {
    opacity: 1 !important;
    transform: rotate(var(--tilt, 0deg)) !important;
    filter: none !important;
    clip-path: none !important;
  }
}