/* Maddlink — the gate and the dive (EXPERIENCE §3; DECISIONS D21): before the first paint the head script sets
   html.is-diving on the home page; the directory waits off-screen, the earth below the screen; the hook, the line that
   says what the site is and « Entrer » arrive first. The page stays until the visitor enters. */

.dive { display: none; }

html.is-diving .dive {
  /* the words in the middle of the screen; a large earth rises behind their lower half (js/dive.js, D29). A soft halo
     of paper keeps them read over the lands and seas; the earth stays the visitor's to turn (no pointer here) */
  display: grid; justify-items: center; align-content: center; gap: clamp(20px, 3.2vh, 32px); position: fixed; inset: 0;
  z-index: calc(var(--z-header) - 1); pointer-events: none; padding: 0 var(--gutter);
}
html.is-diving .dive::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(1200px, 120vw); height: min(560px, 72vh);
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 92%, transparent) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 55%, transparent 100%);
  transition: opacity 0.6s var(--ease-out);
}
html.is-leaving .dive::before { opacity: 0; }
html.is-diving .panel--explore { visibility: hidden; transform: translateX(-104%); }
/* the map waits unseen until the earth rises (js/dive.js moves it; no CSS transition fights the script) */
html.is-diving .stage .map { opacity: 0; transition: none; }
@media (min-width: 1128px) { html.is-diving .proto-pill { left: 16px; } }
html.is-diving .modes--header { opacity: 0; }
/* the gate holds only the essential (D28): no bar, no pill — they come with the descent (js/dive.js) */
html.is-diving .site-header { opacity: 0; transform: translateY(-16px); pointer-events: none; }
html.is-diving .proto-pill { opacity: 0; pointer-events: none; }
html.is-diving :is(.map-area-search, .map-ui) { display: none; } /* nothing of the map's tools over the gate */

.dive-copy { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: min(92vw, 1100px); }
.dive-symbol { width: 52px; height: 52px; margin-bottom: 4px; }
.dive-title {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.025em;
  font-size: clamp(2.3rem, 0.9rem + 3.7vw, 4.6rem); line-height: 1.02; text-wrap: balance;
}
@media (min-width: 768px) { .dive-title { white-space: nowrap; } }
.dive-lede { max-width: 46ch; color: var(--ink-soft); font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); line-height: 1.5; text-wrap: balance; }
.dive-counters { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; color: var(--ink-muted); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.dive-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); }
.dive-nearest { color: var(--ink); font-size: var(--step-0); max-width: 40ch; }

/* the one way in: a large solid button, the only cyan surface of the page */
.dive-enter-wrap { pointer-events: auto; }
.dive-enter { min-height: 58px; padding: 0 28px 0 36px; gap: 12px; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 12px 32px -14px rgba(0, 153, 173, 0.6); }
.dive-enter .icon { width: 20px; height: 20px; transition: transform 0.5s var(--ease-out); }
.dive-enter:hover .icon { transform: translateX(4px); }

/* the words arrive first, one after the other, before the earth rises (simple and calm: a rise and a fade) */
html.is-diving .dive-copy > *, html.is-diving .dive-enter-wrap { animation: gate-in 1s var(--ease-out) both; }
html.is-diving .dive-symbol { animation-delay: 0.05s; }
html.is-diving .dive-title { animation-delay: 0.15s; }
html.is-diving .dive-lede { animation-delay: 0.3s; }
html.is-diving .dive-counters { animation-delay: 0.42s; }
html.is-diving .dive-enter-wrap { animation-delay: 0.55s; }
@keyframes gate-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* the honest line after landing when nobody is near the visitor */
.explore-nearest { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-weight: 600; max-width: 44ch; }
.explore-nearest .icon { color: var(--cyan-deep); margin-top: 3px; }
.explore-nearest[hidden] { display: none; }

@media (max-width: 767px) {
  html.is-diving .dive { gap: 18px; }
  html.is-diving .dive::before { height: 44vh; width: 130vw; }
  .dive-symbol { width: 40px; height: 40px; }
  .dive-enter { min-height: 54px; font-size: 1rem; }
  .dive-counters { gap: 4px 10px; font-size: 0.8125rem; }
}