/* ==========================================================================
   animations.css — keyframes & scroll-reveal classes
   Elements with [data-reveal] start hidden and animate in when
   js/main.js adds .is-in (IntersectionObserver).
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), clip-path 1.2s var(--ease-io), filter 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="up"] { transform: translateY(46px); }
.js [data-reveal="left"] { transform: translateX(-56px); }
.js [data-reveal="right"] { transform: translateX(56px); }
.js [data-reveal="scale"] { transform: scale(0.92); }
.js [data-reveal="blur"] { filter: blur(12px); transform: translateY(20px); }
.js [data-reveal="image"] { opacity: 1; overflow: hidden; }
.js [data-reveal="image"] img { clip-path: inset(100% 0 0 0); transform: scale(1.25); transition: transform 1.8s var(--ease), clip-path 1.2s var(--ease-io); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js [data-reveal="image"].is-in img { transform: scale(1); clip-path: inset(0 0 0 0); }

/* Line-by-line text reveal: wrap words in .line > span */
.js [data-split] .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.js [data-split] .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--l, 0) * 110ms + 100ms); }
.js [data-split].is-in .line > span { transform: none; }

/* Hero entrance — 1 bg · 2 road · 3 Urbania · 4 label · 5 headline · 6 text · 7 buttons · 8 particles */
.js .hero__bg, .js .hero__road, .js .hero__vehicle, .js .hero__label, .js .hero__text, .js .hero__actions .btn, .js .hero__particles, .js .hero__trails { opacity: 0; }
.js .hero__title .line > span { transform: translateY(110%); }
.hero.is-ready .hero__bg { opacity: 1; animation: heroFade 1.4s ease-out both; }
.hero.is-ready .hero__road { opacity: 1; animation: heroRoad 1.4s var(--ease) 0.35s backwards; }
.hero.is-ready .hero__vehicle { opacity: 1; animation: heroDrive 2.2s var(--ease) 0.6s backwards; }
.hero.is-ready .hero__trails { opacity: 1; animation: heroFade 1.2s ease-out 1.6s backwards; }
.hero.is-ready .hero__label { opacity: 1; animation: heroLeft 1s var(--ease) 1.25s backwards; }
.hero.is-ready .hero__title .line > span { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--l, 0) * 130ms + 1.45s); }
.hero.is-ready .hero__text { opacity: 1; animation: heroUp 1s var(--ease) 2s backwards; }
.hero.is-ready .hero__actions .btn { opacity: 1; animation: heroUp 0.9s var(--ease) backwards; animation-delay: calc(2.2s + var(--b, 0) * 140ms); }
.hero.is-ready .hero__particles { opacity: 1; animation: heroFade 2s ease-out 2.4s backwards; }

@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroRoad { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes heroDrive { from { opacity: 0; transform: translate3d(9%, 1.5%, 0) scale(0.97); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes heroLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes trail { 0% { opacity: 0; transform: translateX(-110%); } 10% { opacity: var(--o, 0.8); } 75% { opacity: var(--o, 0.8); } 100% { opacity: 0; transform: translateX(calc(100vw + 10%)); } }
@keyframes drift { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 15% { opacity: 0.8; } 85% { opacity: 0.5; } 100% { opacity: 0; transform: translate3d(24px, -140px, 0); } }

@keyframes road { from { background-position: 0 0, 0 0; } to { background-position: 0 120px, 0 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.15); } }
@keyframes bloom { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes cue { 0% { top: -40%; } 100% { top: 100%; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes textRise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes barFill { from { width: 0; } to { width: 100%; } }
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: translateY(var(--py, 0)) scale(1.04); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Marquee ribbon */
.ribbon { overflow: hidden; background: var(--coral); color: var(--ink); padding: 11px 0; }
.ribbon__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.ribbon__track span {
  display: inline-flex; align-items: center; gap: 28px; padding-right: 28px;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(0.85rem, 1.3vw, 1.05rem); white-space: nowrap;
}
.ribbon__track span::after { content: ""; width: 7px; height: 7px; background: var(--ink); transform: rotate(45deg); }

/* Magnetic buttons (desktop) */
[data-magnetic] { transition: transform 0.5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal="image"], .js [data-split] .line > span,
  .js .hero__bg, .js .hero__road, .js .hero__vehicle, .js .hero__label, .js .hero__text, .js .hero__actions .btn, .js .hero__particles, .js .hero__trails, .js .hero__title .line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  .js [data-reveal="image"] img { clip-path: none !important; transform: none !important; }
  .hero__trails, .hero__particles { display: none; }
  .ribbon__track { animation: none; }
}