/* 02 — Midnight Couture: entrance-animation styling.
   Figma's own file includes a second frame ("Screen 01") that isn't a
   real second page -- it's a Smart-Animate rigging frame: 20 stepped
   variants of the headline (letter-by-letter), 4 stepped variants of the
   paragraph (line-by-line), a pre-entrance nav position, and opacity:0
   stat labels. That's Figma's authoring mechanism for an entrance
   animation on THIS page, not a separate screen -- so it's reproduced
   here as a real CSS/JS entrance sequence instead of being ported as a
   second static page. */

[data-node-id="3:2773"] {
  visibility: hidden;
}
[data-node-id="3:2773"].reveal {
  visibility: visible;
}
.typewriter-line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typewriter 0.6s steps(20, end) forwards;
}
.typewriter-line.line-2 {
  animation-delay: 0.65s;
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

[data-node-id="3:2756"] {
  opacity: 0;
  transform: translateY(6px);
  animation: line-in 0.5s ease forwards;
  animation-delay: 1.3s;
}
@keyframes line-in {
  to { opacity: 1; transform: translateY(0); }
}

[data-node-id="3:2757"],
[data-node-id="3:2770"] {
  opacity: 0;
  transform: translateY(10px);
  animation: rise-in 0.6s ease forwards;
  animation-delay: 2.1s;
}

[data-node-id="3:2776"],
[data-node-id="3:2791"] {
  opacity: 0;
  transform: translateY(16px);
  animation: rise-in 0.7s ease forwards;
}
[data-node-id="3:2776"] { animation-delay: 0.3s; }
[data-node-id="3:2791"] { animation-delay: 0.5s; }
@keyframes rise-in {
  to { opacity: 1; transform: translateY(0); }
}

[data-node-id="3:2825"],
[data-node-id="3:2831"] {
  opacity: 0;
  animation: fade-in 0.8s ease forwards;
  animation-delay: 2.3s;
}
@keyframes fade-in {
  to { opacity: 1; }
}

/* This element also carries Tailwind's -translate-x-1/2 (for centering);
   animating `transform` here would replace that centering transform
   entirely. `translate` is a separate CSS property and composes with it
   instead of overwriting it. */
[data-node-id="3:2818"] {
  translate: 0 -16px;
  opacity: 0;
  animation: nav-in 0.5s ease forwards;
}
@keyframes nav-in {
  to { translate: 0 0; opacity: 1; }
}