/* Home splash: the wind tunnel (js/splash.js) behind the name and epigraph. Full screen above the
   site; the sidebar waits off-canvas until it scrolls away (see body.splash-active below). */

:root { --clay: #b5805a; }
[data-theme="dark"] { --clay: #9c7355; }

.splash {
  --gutter: clamp(16px, 4vw, 56px);
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-primary);
}

.splash__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Vertical swipes still scroll the page on phones; drags stir the air. */
  touch-action: pan-y;
}

/* The copy sits left of centre and the wake develops across the rest of the screen. The solver
   reads these boxes to place the obstacles, so the name shrinks to its glyphs (fit-content). */
.splash__copy {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(46%, 640px);
  display: grid;
  gap: 0.6rem;
  pointer-events: none;
}

.splash__name {
  width: fit-content;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.25rem, 11vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.splash__name .w { display: inline-block; }

.splash__epigraph {
  margin: 0;
  max-width: 42ch;
  text-wrap: balance;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.splash__readout {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(20px, 4svh, 36px);
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-tertiary);
  pointer-events: none;
}

.splash__cue {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(20px, 4svh, 36px);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.splash__cue:hover,
.splash__cue:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 640px) {
  .splash__copy { top: 44%; max-width: 68vw; }
  .splash__readout { max-width: 60vw; }
}

/* Portrait phones turn the tunnel: air from the top, the name centred near it, and the wake
   trailing down the long side of the screen. Matches wantRot() in splash.js. */
@media (max-width: 640px) and (orientation: portrait) {
  .splash__copy {
    top: 13%;
    left: 0;
    right: 0;
    transform: none;
    max-width: none;
    justify-items: center;
    text-align: center;
  }

  .splash__name .w { display: block; }
  .splash__epigraph { max-width: 24ch; }
}

/* While the splash is on screen the sidebar waits off-canvas at every width, and the menu button
   (the phone one) reaches it; main.js drops the class once the splash scrolls away. */
body.splash-active .sidebar { transform: translateX(-100%); padding-top: calc(var(--space-8) + 52px); }
body.splash-active .sidebar.open { transform: translateX(0); }
body.splash-active .menu-toggle { display: flex; }
body.splash-active .sidebar-overlay { display: block; }

/* On desktop the sidebar pushes the tunnel instead of covering it: the splash gives up the
   sidebar's width whenever the sidebar is showing (opened from the menu, or after scrolling), and
   splash.js resizes the solver cell for cell as it goes, so the name and the flow are shoved right
   and the air enters from the sidebar's edge. */
@media (min-width: 1025px) {
  .splash {
    margin-left: var(--sidebar-width);
    transition: margin-left 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  body.splash-active:not(.sidebar-open) .splash { margin-left: 0; }

  body.splash-active .sidebar {
    transition: transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color var(--transition-normal);
  }

  body.splash-active .sidebar-overlay { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash,
  body.splash-active .sidebar { transition: none; }
}