@font-face {
  font-family: "DarkTerm";
  src: url("uploads/terminator%20real%20nfi.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #08090d;
  --acid: #c7b8c3;
  --acid-soft: #8a7385;
  --paper: #f2ecf0;
  --line: rgba(199, 184, 195, 0.2);
  --font: "DarkTerm", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; font: inherit; }

.sea-page { position: relative; width: 100%; height: 100dvh; min-height: 520px; overflow: hidden; isolation: isolate; background: var(--ink); }
#sea-stage, #sea-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#sea-stage { z-index: -3; }
#sea-stage canvas { display: block; }
.sea-shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90% 82% at 50% 54%, transparent 45%, rgba(5,7,10,.18) 76%, rgba(5,7,10,.68) 100%),
    linear-gradient(180deg, rgba(5,7,10,.62), transparent 27%, transparent 78%, rgba(5,7,10,.48));
}

.sea-footer { position: absolute; left: 30px; right: 30px; display: flex; align-items: center; z-index: 5; text-transform: uppercase; font-size: 9px; letter-spacing: .22em; }
.sea-footer { bottom: max(22px, env(safe-area-inset-bottom)); justify-content: flex-end; color: rgba(232,236,217,.5); text-align: right; }

.sea-intro { position: absolute; left: 4vw; top: 12%; z-index: 2; pointer-events: none; }
.sea-intro p { margin: 0 0 16px; color: var(--acid); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; }
.sea-intro h1 { margin: 0; color: rgba(232,236,217,.62); font-family: var(--font); font-size: clamp(58px, 7.2vw, 142px); font-weight: 400; letter-spacing: .015em; line-height: .88; }

.sea-links { position: absolute; left: 50%; top: 51%; z-index: 4; width: min(860px, 92vw); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.sea-link {
  position: relative; width: max-content; max-width: 100%;
  display: flex; align-items: baseline; justify-content: center; gap: .65em;
  padding: 7px 0; border: 0; background: transparent; text-decoration: none; text-align: center;
  pointer-events: auto; cursor: pointer; white-space: nowrap;
  text-shadow: 0 1px 7px rgba(5,7,10,.96), 0 0 2px rgba(5,7,10,.9);
  transition: transform .35s cubic-bezier(.16,1,.3,1), color .35s, opacity .35s;
}
.sea-link span, .sea-link em, .sea-link strong { font-style: normal; font-weight: 400; text-transform: uppercase; }
.sea-link span, .sea-link em { font-size: clamp(8px, .68vw, 11px); letter-spacing: .16em; color: rgba(232,236,217,.66); }
.sea-link strong { font-size: clamp(14px, 1.12vw, 19px); color: rgba(239,244,222,.94); letter-spacing: .1em; }
.sea-link em { color: var(--acid-soft); }
.sea-link span::after, .sea-link strong::after { content: "/"; margin-left: .65em; color: rgba(199,184,195,.42); }
.sea-link::after { display: none; }
.sea-link:hover, .sea-link:focus-visible { transform: translateX(8px); color: var(--paper); outline: none; }
.sea-link:active { transform: translateX(4px) scale(.985); }

@media (max-width: 720px) {
  .sea-page { min-height: 600px; }
  .sea-footer { left: 16px; right: 16px; }
  .sea-footer { justify-content: flex-end; font-size: 7px; }
  .sea-footer span { display: block; width: min(270px, 76vw); margin-left: auto; text-align: right; line-height: 1.45; }
  .sea-intro { left: 16px; right: 16px; top: 11%; }
  .sea-intro p { margin-bottom: 11px; font-size: 7px; }
  .sea-intro h1 { font-size: clamp(38px, 13.2vw, 58px); color: rgba(232,236,217,.58); line-height: .94; }
  .sea-links { left: 16px; right: 16px; top: 47%; width: auto; transform: none; display: flex; gap: 0; align-items: center; }
  .sea-link, .sea-link:nth-child(n) {
    width: auto; min-width: 0; min-height: 30px; transform: none;
    display: flex; align-items: center; gap: .55em; padding: 5px 0;
  }
  .sea-link span { display: none; }
  .sea-link strong { font-size: clamp(10px, 2.9vw, 12px); }
  .sea-link em { font-size: clamp(6px, 1.8vw, 8px); }
  .sea-link strong::after { display: inline; }
  .sea-link:hover, .sea-link:focus-visible { transform: translateX(4px); }
  .sea-link:active { transform: scale(.985); }
}

@media (max-height: 680px) and (max-width: 720px) {
  .sea-intro { top: 10%; }
  .sea-intro h1 { font-size: 36px; }
  .sea-links { top: 39%; }
  .sea-link, .sea-link:nth-child(n) { min-height: 27px; padding-block: 3px; }
}

@media (prefers-reduced-motion: reduce) { .sea-link { transition: none; } }