/* ==========================================================================
   Magic Narwhal — the dive (hidden)
   Below the waterline everything inverts: deep saturated water, warm-white
   card, acid yellow doing the celebrating.
   ========================================================================== */

.dive {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: var(--margin);
  gap: clamp(1rem, 3vh, 2.5rem);
  overflow: clip;
  background:
    radial-gradient(120% 90% at 50% 0%, #0B3E7A 0%, var(--abyss) 45%, var(--abyss-2) 100%);
  clip-path: circle(0% at 50% 42%);
  transition: clip-path .62s var(--ease-out);
}
.dive[data-state='in']  { clip-path: circle(150% at 50% 42%); }
.dive[data-state='out'] { clip-path: circle(0% at 50% 42%); }

/* the page above the water pulls back a touch while you are under */
body[data-diving] { overflow: hidden; }
/* .skip is excluded on purpose: it hides itself with a transform, and this
   rule would replace it and pop the skip link into view. */
body[data-diving] > :not(.dive):not(.skip) {
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
  transform: scale(.97);
  opacity: .35;
}

/* --- light shafts --------------------------------------------------------- */

.dive__shafts {
  position: absolute;
  inset: -20% -10% auto;
  height: 130%;
  pointer-events: none;
  background:
    linear-gradient(94deg,  transparent 18%, color-mix(in srgb, var(--cyan) 26%, transparent) 20%, transparent 23%),
    linear-gradient(88deg,  transparent 44%, color-mix(in srgb, var(--cyan) 18%, transparent) 47%, transparent 51%),
    linear-gradient(99deg,  transparent 70%, color-mix(in srgb, var(--acid) 14%, transparent) 72%, transparent 76%);
  animation: shafts 9s ease-in-out infinite alternate;
}
@keyframes shafts {
  from { opacity: .55; transform: translateX(-2%); }
  to   { opacity: 1;   transform: translateX(2%); }
}

.dive .bubbles { position: absolute; inset: 0; pointer-events: none; }
.dive .bubble { border-color: color-mix(in srgb, var(--cyan) 70%, var(--paper)); }

/* --- the breach ----------------------------------------------------------- */

.dive__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 34rem;
}
.dive__art .narwhal {
  width: min(100%, 30rem);
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--cyan) 45%, transparent));
}
.dive[data-state='in'] .dive__art { animation: breach 1s var(--snap) both; }

@keyframes breach {
  from { transform: translateY(38vh) rotate(-26deg) scale(.72); opacity: 0; }
  to   { transform: translateY(0)    rotate(0deg)   scale(1);   opacity: 1; }
}

/* the glint runs hot down here */
.dive__art .nw-glint { animation-duration: 2.6s; }

/* --- sparks --------------------------------------------------------------- */

.sparks {
  position: absolute;
  top: 26%;
  left: 62%;
  pointer-events: none;
}
.spark {
  position: absolute;
  width: 5px;
  height: 20px;
  background: var(--acid);
  animation: spark .95s var(--ease-out) forwards;
}
.spark:nth-child(3n)   { background: var(--cyan); }
.spark:nth-child(4n+1) { background: var(--coral); }

@keyframes spark {
  from { transform: translate(0, 0) rotate(var(--rot)) scaleY(.2); opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scaleY(1.4); opacity: 0; }
}

/* --- the card ------------------------------------------------------------- */

.dive__card {
  position: relative;
  z-index: 2;
  width: min(100%, 34rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 14px 14px 0 var(--acid);
  text-align: left;
}
.dive[data-state='in'] .dive__card { animation: slab .5s var(--snap) .55s both; }

@keyframes slab {
  from { transform: translateY(2rem) scale(.94); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

.dive__eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dive__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: .92;
  letter-spacing: -.04em;
}

.dive__name {
  margin: .45rem 0 1.15rem;
  display: inline-block;
  padding: .15rem .5rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: clamp(.8rem, 1.5vw, 1rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.dive__note {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  max-width: 40ch;
}

.dive__sign {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}

.dive__close {
  margin-top: 1.5rem;
  padding: .7rem 1.1rem;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s linear, color .12s linear;
}
.dive__close:hover,
.dive__close:focus-visible { background: var(--ink); color: var(--paper); }

@media (max-width: 48rem) {
  .dive { grid-template-rows: auto auto; align-content: center; }
  .dive__art .narwhal { width: min(78%, 18rem); }
  .sparks { left: 70%; top: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .dive { clip-path: none; opacity: 0; transition: opacity .01ms; pointer-events: none; }
  .dive[data-state='in'] { opacity: 1; pointer-events: auto; }
}