/* Ocean layer: WebGL water, life canvas, intro, interactions */

body.theme-immersive { background: #020812; }

.ocean-gl,
.ocean-life {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ocean-gl { z-index: 0; }
.ocean-life { z-index: 1; }

.no-webgl body.theme-immersive {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(8, 72, 120, 0.55), transparent 60%),
    linear-gradient(#021a2f, #010307 80%);
  background-attachment: fixed;
}

.theme-immersive .grain { opacity: 0.06; mix-blend-mode: overlay; }

/* Readability over moving water */
.theme-immersive .chapter { border-top-color: rgba(127, 244, 255, 0.08); }
.theme-immersive .service-card,
.theme-immersive .work-panel {
  background: rgba(2, 14, 30, 0.42);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* Wordmark: same face + tracking as the logo lockup */
.theme-immersive .brand { gap: 14px; margin-left: 10px; }
.theme-immersive .brand img { width: 30px; height: auto; }
.theme-immersive .brand-text,
.theme-immersive .footer-brand .wordmark {
  font-family: "Montserrat", var(--font-display);
  font-weight: 400;
  letter-spacing: 0.62em;
  margin-right: -0.62em;
  text-transform: uppercase;
}
.theme-immersive .brand-text { font-size: 12px; }
.theme-immersive .footer-brand .wordmark { font-size: 18px; }

/* ---------- Intro ---------- */
html.intro body { overflow: hidden; }
html.intro .shell { opacity: 0; }
html.intro .site-header .brand img { opacity: 0; }
html.intro-exit .shell { opacity: 1; transition: opacity 0.9s ease 0.2s; }
.shell { transition: opacity 0.6s ease; }

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(80% 60% at 50% 45%, rgba(0, 40, 80, 0.25), rgba(1, 5, 12, 0.88) 70%),
    rgba(1, 6, 14, 0.55);
  transition: background 0.9s ease, opacity 0.6s ease;
  cursor: progress;
}
html.intro-exit .intro-screen {
  background: rgba(1, 6, 14, 0);
  pointer-events: none;
}
.intro-screen.is-gone { opacity: 0; }

.intro-screen__canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.intro-screen__word {
  position: absolute;
  left: 50%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, 14px);
  filter: blur(8px);
  letter-spacing: 0;
  transition: opacity 0.9s ease, transform 1.1s var(--ease-out), filter 0.9s ease;
}
.intro-screen.is-formed .intro-screen__word {
  opacity: 1;
  transform: translate(-50%, 0);
  filter: none;
}
html.intro-exit .intro-screen__word {
  opacity: 0;
  transform: translate(-50%, -8px);
  transition-duration: 0.5s;
}

.intro-screen__meta {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vw, 40px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 240, 255, 0.55);
  transition: opacity 0.4s ease;
}
.intro-screen__count {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.intro-screen__skip {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vw, 40px);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, opacity 0.4s ease;
}
.intro-screen__skip:hover { border-color: var(--cyan); color: #fff; }
html.intro-exit .intro-screen__meta,
html.intro-exit .intro-screen__skip { opacity: 0; }

/* ---------- Cursor ring ---------- */
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(127, 244, 255, 0.55);
  border-radius: 50%;
  z-index: 200;
  pointer-events: none;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out),
    background 0.35s ease, border-color 0.35s ease;
  mix-blend-mode: screen;
}
.cursor-ring.is-hot {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(127, 244, 255, 0.85);
}
.cursor-ring.is-down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
html.intro .cursor-ring { opacity: 0.4; }

/* ---------- Tilt cards + magnetic ---------- */
.tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out), border-color 0.35s ease, background 0.35s ease;
  will-change: transform;
}
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 229, 255, 0.14), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tilt:hover::after { opacity: 1; }
.tilt:hover { transition: transform 0.12s linear, border-color 0.35s ease, background 0.35s ease; }

.magnetic { transition: transform 0.45s var(--ease-out), background 0.3s ease, border-color 0.3s ease; }

/* Hero over water */
.stage-hero__title .dim { color: #fff; }
.stage-hero__title .accent { padding-bottom: 0.12em; margin-bottom: -0.12em; }
@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none; }
  .tilt, .magnetic { transform: none !important; }
}