@font-face { font-family: Doto; src: url("assets/doto.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #000; color: #e0faff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; min-height: 100%; background: #000; }
body { min-height: 100svh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.stage { position: relative; z-index: 1; height: 70svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: max(20px, env(safe-area-inset-top)) 24px 24px; pointer-events: none; }
.film { width: min(34.2vw, 369px); display: flex; justify-content: center; align-items: center; animation: appear 1.4s ease both; mix-blend-mode: screen; pointer-events: auto; }
video { display: block; width: 100%; max-height: 42svh; object-fit: contain; border: 0; outline-offset: 8px; cursor: pointer; background: #000; dynamic-range-limit: no-limit; }
h1 { margin: 0; font-family: Doto, monospace; font-variation-settings: "ROND" 100; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.5; letter-spacing: .16em; padding-left: .16em; text-transform: uppercase; color: #74deec; background: linear-gradient(180deg, #c0f9ff, #32cce8 55%, #1685bd); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: appear 1.4s .2s ease both; }
/* At rest .8333 of 36svh is water: the bottom 30% of the screen.
   The transparent-looking black headroom lets crests rise naturally. */
.water-stage { position: fixed; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 36svh; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: linear-gradient(to top, #04315f 0%, #06b6d4 80%, #a5f3fc 83.3%, #000 84%); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.water-stage.is-touching { cursor: grabbing; }
.water-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; dynamic-range-limit: no-limit; background: linear-gradient(to top, #04315f 0%, #06b6d4 80%, #a5f3fc 83.3%, #000 84%); }
.water-stage .splashes { pointer-events: none; z-index: 1; background: transparent; }
:focus-visible { outline: 2px solid #a5f3fc; outline-offset: 6px; }
.water-stage:focus-visible { outline-offset: -5px; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .stage { padding-inline: 16px; gap: 18px; } .film { width: min(70%, 336px); } video { max-height: 40svh; } h1 { font-size: clamp(18px, 5.6vw, 24px); letter-spacing: .12em; } }
@media (max-height: 500px) and (orientation: landscape) { .stage { padding-block: 12px; gap: 10px; } .film { max-height: 42svh; } video { max-height: 42svh; } h1 { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (color-gamut: p3) { h1 { color: color(display-p3 .78 .86 .88); } }