:root {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #eeede8; background: #0b151b; color-scheme: dark; font-synthesis: none;
  --gutter: clamp(24px, 4.25vw, 84px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }
button { font: inherit; }
::selection { background: #b2d8d4; color: #0b151b; }
.page { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; }
.seascape { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.scene { position: absolute; left: 50%; top: 50%; width: max(100%, calc(100svh * 1.40548)); aspect-ratio: 1487 / 1058; transform: translate(-50%, -50%) scale(1.015); }
.terrain { display: block; width: 100%; height: 100%; object-fit: cover; }
.survey-return { position: absolute; inset: 0; mask-image: url('./swath.png'); mask-size: 145% 36%; mask-position: 50% -50%; mask-repeat: no-repeat; animation: survey-return 13s linear infinite; animation-delay: -3s; opacity: .9; }
.survey-return img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(2.5) saturate(.6); animation: sounding-return 1.3s ease-out infinite; }
.survey-light { display: none; position: absolute; left: -22.5%; top: -32%; width: 145%; height: 36%; mix-blend-mode: screen; animation: survey-pass 13s linear infinite; animation-delay: -3s; }
.survey-light img { display: block; width: 100%; height: 100%; object-fit: fill; opacity: .28; animation: acoustic-ping 1.3s ease-out infinite; }
.header { padding: clamp(26px, 4.1vh, 60px) var(--gutter) 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { display: block; width: 106px; height: 62px; object-fit: contain; margin-left: -16px; }
.brand span { font-size: clamp(15px, 1.25vw, 22px); font-weight: 400; letter-spacing: .31em; text-transform: uppercase; white-space: nowrap; }
.intro { margin: auto 0; padding: 12vh var(--gutter) 19vh; max-width: 1080px; }
h1 { margin: 0 0 30px -5px; font-size: clamp(72px, 8vw, 145px); line-height: 1.05; font-weight: 250; letter-spacing: -.05em; }
.intro p { margin: 0; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.48; font-weight: 300; letter-spacing: .014em; }
.header, .intro, .footer { animation: arrive 1.3s ease both; }
.intro { animation-delay: .1s; }
.footer { animation-delay: .2s; }
.footer { margin: 0 var(--gutter); padding: 20px 0 max(60px, env(safe-area-inset-bottom)); border-top: 1px solid #d6d8d491; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; line-height: 1.5; letter-spacing: .14em; }
.footer-brand { text-transform: uppercase; letter-spacing: .24em; }
.domain { font-size: 13px; }
.scan-controls { display: flex; gap: 16px; align-items: center; }
.scan-control { position: relative; isolation: isolate; overflow: hidden; border: 1px solid transparent; border-radius: 2px; padding: 9px 12px; margin: -10px 0; color: #b9c6c7; background: transparent; font-size: 11px; letter-spacing: .06em; cursor: pointer; transition: color .25s, border-color .25s, background-color .25s, transform .25s; }
.scan-control::before { content: ''; position: absolute; inset: -45% -80%; z-index: -1; background: url('./swath.png') center / 100% 100% no-repeat; opacity: 0; transform: translateX(-50%); transition: opacity .25s, transform .7s cubic-bezier(.2,.7,.2,1); }
.scan-control:hover, .scan-control:focus-visible { color: #e1fffc; border-color: #82c4be70; background-color: #17353a70; transform: translateY(-1px); }
.scan-control:hover::before, .scan-control:focus-visible::before { opacity: .6; transform: translateX(15%); }
.scan-control:active { transform: translateY(0); }
.scan-control:focus-visible { outline: 1px solid #c4eeea; outline-offset: 3px; }
[data-motion="paused"] .survey-return img, .page.is-hidden .survey-return img, [data-motion="paused"] .survey-return, [data-motion="paused"] .survey-light, [data-motion="paused"] .survey-light img, .page.is-hidden .survey-return, .page.is-hidden .survey-light, .page.is-hidden .survey-light img { animation-play-state: paused; }
@keyframes survey-return { 0% { mask-position: 50% -50%; opacity: 0; } 12% { opacity: .9; } 82% { opacity: .9; } 100% { mask-position: 50% 155%; opacity: 0; } }
@keyframes survey-pass { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(365%); opacity: 0; } }
@keyframes acoustic-ping { 0%,100% { opacity: .09; } 12% { opacity: .42; } 35% { opacity: .22; } 70% { opacity: .12; } }
@keyframes arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1800px) { .intro { max-width: 1400px; } }
@media (max-width: 700px) {
  .header { padding-top: max(26px, env(safe-area-inset-top)); }
  .brand { gap: 12px; } .brand-mark { width: 74px; height: 46px; margin-left: -10px; } .brand span { font-size: 14px; letter-spacing: .25em; }
  .scene { left: 39%; opacity: .58; } .intro { padding-top: 18vh; padding-bottom: 20vh; }
  h1 { font-size: clamp(50px, 12vw, 83px); letter-spacing: -.055em; margin: 0 0 22px -2px; }
  .intro p { max-width: 350px; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
  .footer { display: grid; grid-template-columns: 1fr auto; gap: 22px 12px; padding: 18px 0 max(24px, env(safe-area-inset-bottom)); font-size: 10px; }
  .domain { font-size: 11px; letter-spacing: .05em; }
  .scan-controls { grid-column: 1 / -1; grid-row: 2; gap: 20px; margin-left: -12px; }
  .scan-control { font-size: 11px; min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
}
@media (max-height: 500px) and (min-width: 701px) { .header { padding-top: 20px; } .brand-mark { height: 42px; } .intro { padding-top: 40px; padding-bottom: 40px; } h1 { font-size: 72px; margin-bottom: 18px; } .footer { padding-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .header, .intro, .footer { animation: none; } .scan-control, .scan-control::before { transition: none; } }

@keyframes sounding-return { 0%,100% { opacity: .3; } 12% { opacity: .9; } 40% { opacity: .52; } 75% { opacity: .35; } }