*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1b1f24; color: #f2f4f5; }
body { font-family: "Noto Sans TC", ui-sans-serif, system-ui, sans-serif; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; }

/* the background itself — reusable on any page */
.storm-sea { position: absolute; inset: 0; z-index: -2; background: #6f7a83; }
.storm-sea__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.storm-sea--fallback {
  background:
    linear-gradient(180deg, #3b414c 0%, #6b737d 30%, #b2b9bf 41%, #6d8790 43%, #2e4a52 70%, #1d3138 100%);
}
.storm-sea__hud {
  position: absolute; left: 12px; bottom: 62px; z-index: 5; font: 12px/1.4 ui-monospace, monospace;
  background: rgba(0,0,0,.55); padding: 4px 8px; border-radius: 4px; color: #cfe;
}

/* filmic grade: vignette + fine grain, done in CSS to keep the GPU budget for the sea */
.storm-sea__grade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 55% 45%, transparent 55%, rgba(10, 14, 18, .45) 100%);
}
.storm-sea__grade::after {
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero__content {
  position: relative; max-width: 720px; padding: clamp(28px, 7vw, 96px) clamp(20px, 6vw, 80px);
  text-shadow: 0 1px 18px rgba(10, 16, 22, .45);
}
.hero__eyebrow { margin: 0 0 14px; font: 600 12px/1 ui-sans-serif, system-ui; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.hero__title { margin: 0; font-family: "Noto Serif TC", serif; font-weight: 600; font-size: clamp(34px, 6vw, 60px); line-height: 1.15; }
.hero__deck { margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.8; max-width: 34em; opacity: .9; }

.hero__controls { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; }
/* sound toggle, bottom-left: speaker with waves when on, crossed out when off */
.hero__sound { position: absolute; left: 18px; bottom: 18px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; }
.hero__sound svg .on { display: none; }
.hero__sound[aria-pressed="true"] svg .on { display: inline; }
.hero__sound[aria-pressed="true"] svg .off { display: none; }
.hero__pause {
  font: 500 13px/1 ui-sans-serif, system-ui;
  color: #f2f4f5; background: rgba(20, 26, 32, .45); border: 1px solid rgba(255,255,255,.35);
  padding: 9px 14px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px);
}
.hero__pause:hover { background: rgba(20, 26, 32, .65); }
.hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }