/* Tidal Wave — rank 6. A black ocean lit from inside. */

[data-level="tidal-wave"] {
  --font-display: "Kaushan Script", "Brush Script MT", cursive;
  --rule-colour: color-mix(in srgb, var(--accent) 28%, transparent);
}

[data-level="tidal-wave"] .hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.05;
  padding-block: 0.12em;
  background: linear-gradient(
    168deg,
    #ffffff 0%, #d9fbff 22%, #74f0d6 48%, #2ac9ff 74%, #0d5f9e 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* background-clip:text rules out a stroke, so the rim is stacked passes of
     one tight white shadow — the same construction Antarctic Lights uses.
     The dark cast stays, but pushed wide and soft and offset downward, so it
     separates the title from dense water without laying a black line against
     the letterforms. Then the accent glow last. */
  filter:
    drop-shadow(0 0 1.5px #ffffff)
    drop-shadow(0 0 1.5px #ffffff)
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 3.5px rgba(217, 251, 255, 0.7))
    /* Beyond the white rim, not under it. Sampling the band this title
       occupies, the artwork peaks at 0.88 luminance where the letters cross
       the bright chevrons -- white on white, 1.13:1 -- while the mean is
       0.127 and looks perfectly safe. Each drop-shadow filters the result of
       the one before, so a tight dark pass here rings the white edge instead
       of sitting under the type, and the outline still reads white. */
    drop-shadow(0 0 7px rgba(1, 6, 12, 0.85))
    drop-shadow(0 0 14px rgba(1, 6, 12, 0.6))
    drop-shadow(0 8px 30px rgba(1, 6, 12, 0.55))
    drop-shadow(0 0 2.8rem color-mix(in srgb, var(--accent) 45%, transparent));
}

/* surge set-piece -------------------------------------------------------- */

.sig--surge {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  border-top: var(--rule) solid var(--rule-colour);
  background: linear-gradient(180deg, #04121f 0%, #03080f 78%);
}

.surge__swell {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -14%;
  height: 92%;
  background:
    radial-gradient(
      ellipse 60% 90% at 76% 100%,
      color-mix(in srgb, var(--accent) 42%, transparent) 0%,
      transparent 66%
    ),
    radial-gradient(
      ellipse 90% 70% at 30% 100%,
      color-mix(in srgb, var(--accent2) 22%, transparent) 0%,
      transparent 70%
    );
  pointer-events: none;
}

/* Long current bands sliding across the frame. */
.surge__current {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 70%, transparent) 22%,
    color-mix(in srgb, var(--accent2) 80%, transparent) 58%,
    transparent
  );
  opacity: 0.5;
  pointer-events: none;
}

/* Kept clear of the copy band — a current line behind a paragraph reads as
   an underline, not as water. */
.surge__current--1 { top: 9%; }
.surge__current--2 { top: 16%; height: 2px; opacity: 0.34; }
.surge__current--3 { top: 23%; }
.surge__current--4 { top: 74%; height: 2px; opacity: 0.36; }
.surge__current--5 { top: 81%; }

/* The moving band. Two copies of one tile, so sliding it never seams. */
.surge__band {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: clamp(9rem, 22vh, 16rem);
  pointer-events: none;
  filter: drop-shadow(0 -0.6rem 2.4rem color-mix(in srgb, var(--accent) 55%, transparent));
}

.surge__band svg {
  display: block;
  width: 100%;
  height: 100%;
}

.surge__copy {
  position: relative;
  z-index: 3;
}

.surge__line {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 6.4rem);
  line-height: 1.06;
  padding-block: 0.08em;
  margin: 0 0 var(--space-5);
  background: linear-gradient(160deg, #ffffff 0%, #74f0d6 46%, #2ac9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.surge__sub {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
  line-height: 1.7;
  text-shadow: 0 0 1.4rem #03080f, 0 0 2.4rem #03080f;
}