/* ==========================================================================
   Magic Narwhal — page shell, type, ocean
   ========================================================================== */

/* --- layout --------------------------------------------------------------- */

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  /* the extra bottom padding is the beach: it keeps the footer out of the
     water, where navy ink on deep blue would stop being readable */
  padding: var(--margin) var(--margin) calc(var(--margin) + var(--water));
  gap: var(--stack);
}

/* --- top bar -------------------------------------------------------------- */

.bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: var(--rule) solid var(--ink);
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bar__mark { font-weight: 700; }

.bar__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.pulse {
  width: .5rem; height: .5rem;
  background: var(--coral);
  border: 1.5px solid var(--ink);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   background: var(--coral); }
  50%      { transform: scale(1.5); background: var(--acid); }
}

@media (max-width: 40rem) {
  .bar__status { display: none; }
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
}

.hero__type {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

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

.hero__head {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: .88;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero__line { display: block; }

/* the one bold move: the promise is airy, the outcome is stamped down */
.slab {
  background: var(--coral);
  color: var(--ink);
  padding: 0 .12em .04em;
  margin-left: -.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__body {
  margin: 0;
  max-width: 32ch;
  font-weight: 500;
  line-height: 1.45;
}

.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

@media (max-width: 48rem) {
  /* the tight display leading starts to collide once the lines get short */
  .hero__head { line-height: .95; }
}

@media (max-width: 62rem) {
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(1.5rem, 6vw, 3rem);
  }
  .hero__stage { justify-items: start; }
}

/* --- ocean ---------------------------------------------------------------- */

.ocean {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
}

.waves {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: var(--water);
}

/* fills carry the colour, crests carry the ink — keeping the closing edges
   unstroked is what stops a seam appearing where the tile repeats */
.waves__fill { stroke: none; }
.waves__crest { fill: none; stroke: var(--ink); stroke-width: 3; }
.waves__layer--far  .waves__fill { fill: var(--cyan); }
.waves__layer--near .waves__fill { fill: var(--blue); }

.waves__layer--far  { animation: drift 26s linear infinite; }
.waves__layer--near { animation: drift 17s linear infinite reverse; }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-1440px); }
}

/* --- bubbles -------------------------------------------------------------- */
/* They belong to the narwhal, not to the page — kept inside its stage so
   they never read as stray dots over the headline or the footer rule. */

.bubbles {
  position: absolute;
  inset: -6% 4% -16%;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -2vh;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cyan) 55%, transparent);
  animation: rise linear infinite;
}
.bubble--acid { background: color-mix(in srgb, var(--acid) 70%, transparent); }

@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  14%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { transform: translate3d(var(--sway, 2rem), -42vh, 0) scale(1.12); opacity: 0; }
}

/* --- footer --------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .9rem;
  border-top: var(--rule) solid var(--ink);
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* the hint is a real button so keyboard users can reach it, but it only
   ever whispers — the reward is for people who type the word. */
.hint {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: help;
  opacity: .55;
  transition: opacity .3s var(--ease-out);
}
.hint:hover, .hint:focus-visible { opacity: 1; }

.hint__dots { display: inline-flex; gap: .3rem; }

.hint__dot {
  width: .45rem; height: .45rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background .12s linear, transform .18s var(--snap);
}
.hint__dot[data-on] {
  background: var(--acid);
  transform: scale(1.35);
}

@media (max-width: 30rem) {
  .foot__cell { display: none; }
  .foot { justify-content: center; }
}

/* --- pointer parallax ------------------------------------------------------ */
/* Anything tagged [data-depth] drifts with the pointer. Kept on wrappers so it
   never collides with the keyframe transforms running on their children. */

[data-depth] {
  transform: translate3d(var(--shift-x, 0), var(--shift-y, 0), 0);
  transition: transform .45s var(--ease-out);
  will-change: transform;
}