/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Hero intro */
.js .hero h1 .line > span { transform: translateY(105%); animation: rise 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
.js .hero .intro { opacity: 0; transform: translateY(16px); animation: fadeUp 0.9s var(--ease) forwards; animation-delay: var(--d, 0.5s); }
.js .logo-big .n-a { transform: translate(-60px, 40px); opacity: 0; animation: slashIn 1s var(--ease) 0.2s forwards; }
.js .logo-big .n-b { transform: translate(40px, -60px); opacity: 0; animation: slashIn 1s var(--ease) 0.45s forwards; }
.js .logo-big .n-c { transform: translate(50px, 50px); opacity: 0; animation: slashIn 1s var(--ease) 0.7s forwards; }
.js .hero-art .slash { transform: rotate(32deg) scaleY(0); transform-origin: top; animation: slashLine 1.4s var(--ease) 0.9s forwards; }
.logo-big { animation: float 7s ease-in-out 2s infinite; }

@keyframes rise { to { transform: none; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes slashIn { to { transform: none; opacity: 1; } }
@keyframes slashLine { to { transform: rotate(32deg) scaleY(1); } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }

/* Page transition slash */
.page-slash { position: fixed; inset: 0; z-index: 200; background: var(--accent); pointer-events: none; clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); }
.page-slash.is-leaving { transition: clip-path 0.5s var(--ease); clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); }
.js .page-slash.is-entering { animation: slashOut 0.7s var(--ease) forwards; clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); }
@keyframes slashOut { to { clip-path: polygon(120% 0, 120% 0, 100% 100%, 120% 100%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .hero .intro, .js .hero h1 .line > span, .js .logo-big .n-a, .js .logo-big .n-b, .js .logo-big .n-c { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .page-slash { display: none; }
}