/* Omnitrix dive: scroll-driven intro for DigiWeek 2026 (from omnitrix-dive, scoped to the site).
   Fonts and colour tokens come from the site stylesheet. Without JS or with reduced motion the
   dive is hidden and the page starts at the regular hero. */

.dive { display: none; position: relative; --dive-lime: var(--accent); }
.dive-on .dive { display: block; height: 420svh; }

.dive__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.dive__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dive__flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fbfff5 0%, var(--dive-lime) 38%, rgba(142, 226, 58, 0.6) 70%, rgba(60, 120, 20, 0.4) 100%);
  mix-blend-mode: screen;
}

.dive__eyebrow {
  color: var(--dive-lime);
  font: 600 0.95rem/1.4 var(--display); letter-spacing: 0.18em; text-transform: uppercase;
}
.dive__title { margin-top: 12px; line-height: 0.9; }
.dive__word {
  display: block;
  font: 700 clamp(3.4rem, 1.5rem + 7.4vw, 7.5rem)/0.9 var(--display);
  letter-spacing: 0.02em;
}
.dive__year {
  display: block; margin-top: 6px;
  color: var(--dive-lime);
  font: 700 clamp(1.6rem, 1rem + 2.6vw, 3.2rem)/1 var(--display);
  letter-spacing: 0.32em;
}
.dive__meta { margin-top: 20px; color: var(--text-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }

.dive__intro {
  position: absolute; left: clamp(20px, 6vw, 96px); bottom: clamp(88px, 16vh, 168px);
  max-width: 46vw;
  will-change: transform, opacity;
}
.dive__hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  color: var(--text-2); font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.dive__mouse {
  position: relative; width: 22px; height: 34px; border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.dive__mouse span {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: var(--dive-lime);
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

.dive__outro {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: 0 20px;
  opacity: 0; visibility: hidden;
  will-change: transform, opacity;
}
.dive__outro.is-live { visibility: visible; }
.dive__outro::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 45% at 50% 50%, rgba(7, 9, 8, 0.85), transparent 75%);
}
.dive__big {
  margin-top: 12px;
  font: 700 clamp(2.8rem, 1.4rem + 6.4vw, 7rem)/0.95 var(--display);
  letter-spacing: -0.01em;
  text-shadow: 0 0 40px rgba(142, 226, 58, 0.35);
}

/* "Skip intro" in the site header (shown by dive.js while the dive is in progress) */
.header__skip { padding: 8px 12px; border-radius: 8px; color: var(--text-2); font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.header__skip:hover { color: var(--text); background: var(--surface); }

@media (max-width: 800px) {
  .dive__intro { left: 20px; right: 20px; bottom: 96px; max-width: none; }
}
@media (max-width: 900px) {
  .header__skip { margin-left: auto; }
  .header__skip:not([hidden]) ~ .menu { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dive__mouse span { animation: none; }
}