:root {
  --void: #090a09;
  --mist: #efece4;
  --dim: #9a958c;
  --line: #232423;
  --hot: #d4c7a5;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--mist);
  font-family: Manrope, system-ui, sans-serif;
}

.hero-zoom img {
  animation: heroZoom 22s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

.veil {
  background: linear-gradient(180deg, rgba(9,10,9,0.25) 0%, rgba(9,10,9,0.15) 40%, rgba(9,10,9,0.88) 100%);
}

#index-panel {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#index-panel.open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.band-img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.band:hover .band-img { transform: scale(1.04); }

.rise {
  opacity: 0;
  transform: translateY(28px);
  animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.r2 { animation-delay: 0.15s; }
.r3 { animation-delay: 0.3s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.inview {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.inview.on { opacity: 1; transform: none; }

.bar-fill { transform: scaleX(0); transform-origin: left; }
.bar-fill.on { animation: grow 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes grow { to { transform: scaleX(1); } }

.hour:hover { background: var(--mist); color: var(--void); }

.cookie-box {
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-box.show { transform: none; }

.field:focus { outline: none; border-color: var(--mist); }

.schematic-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: dash 1.6s ease forwards 0.2s;
}
@keyframes dash { to { stroke-dashoffset: 0; } }

body.locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .inview { opacity: 1; transform: none; }
  .hero-zoom img { transform: none; }
}