@font-face {
  font-family: "Bay";
  src: url("fonts/alegreya-sc-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bay";
  src: url("fonts/alegreya-sc-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root { --ink: #000; --paper: #fff; color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); }
body { font-family: "Bay", "Palatino Linotype", Palatino, serif; }
::selection { background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--paper); outline-offset: 8px; }
.bay {
  position: relative;
  isolation: isolate;
  min-height: 420px;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
.identity { position: absolute; z-index: 2; left: clamp(40px, 7.1vw, 140px); top: 20%; }
h1 { margin: 0; font-size: clamp(66px, 6.95vw, 132px); font-weight: 700; letter-spacing: 0; line-height: 1.04; }
h1 span { display: block; }
.games { display: flex; align-items: center; gap: clamp(26px, 3.2vw, 60px); margin-top: clamp(48px, 10.5vh, 120px); }
.games a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(25px, 2.15vw, 38px); font-weight: 500; letter-spacing: 0.02em; }
.games a::after { position: absolute; content: ""; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 350ms ease; }
.games a:hover::after, .games a:focus-visible::after { transform: scaleX(1); }
.pier { position: absolute; z-index: 1; display: block; width: min(70vw, 1260px); height: auto; right: -7.5vw; bottom: -14vw; pointer-events: none; }
.water { position: absolute; inset: 49% 0 0; pointer-events: none; }
.water-strokes { display: block; width: 100%; height: 100%; }
.ripple { fill: var(--paper); opacity: var(--opacity); }
.socials { position: absolute; z-index: 3; top: 36px; right: clamp(30px, 3.75vw, 72px); display: flex; gap: 4px; }
.social { display: grid; place-items: center; width: 44px; height: 44px; }
.social svg { width: 18px; height: 18px; transition: opacity 300ms ease; }
.social:hover svg { opacity: 0.65; }
.grain { position: absolute; z-index: 4; inset: -12px; opacity: 0.035; pointer-events: none; background-image: url("assets/grain.svg"); background-size: 180px 180px; }
@media (prefers-reduced-motion: no-preference) {
  .gull-high { animation: drift-high 23s ease-in-out infinite; }
  .gull-low { animation: drift-low 29s ease-in-out -9s infinite; }
  .gull-right { animation: drift-high 27s ease-in-out -15s infinite; }
  .lamp-near { animation: lamp-near 19s linear -4s infinite; }
  .lamp-middle { animation: lamp-middle 31s linear -12s infinite; }
  .lamp-far { animation: lamp-far 37s linear -7s infinite; }
  .lamp-distant { animation: lamp-middle 43s linear -21s infinite; }
  .ripple-field { animation: water-drift var(--duration) ease-in-out var(--delay) infinite alternate; }
  .grain { animation: grain-shift 7s steps(1, end) infinite; }
}
@keyframes drift-high { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-12px, 6px) rotate(-0.5deg); } }
@keyframes drift-low { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(9px, -5px); } }
@keyframes lamp-near { 0%, 68%, 70%, 74%, 100% { opacity: 1; } 69% { opacity: 0.45; } 72% { opacity: 0.7; } }
@keyframes lamp-middle { 0%, 36%, 39%, 100% { opacity: 1; } 37.5% { opacity: 0.6; } }
@keyframes lamp-far { 0%, 81%, 84%, 100% { opacity: 1; } 82.5% { opacity: 0.65; } }
@keyframes water-drift { from { transform: translateX(-4px); } to { transform: translateX(7px); } }
@keyframes grain-shift { 0%, 100% { transform: translate(0, 0); } 28% { transform: translate(-3px, 1px); } 57% { transform: translate(2px, -2px); } 82% { transform: translate(-1px, 3px); } }
@media (min-width: 1800px) { .identity { top: 22%; } .pier { right: -90px; bottom: -210px; } }
@media (max-width: 900px) and (orientation: portrait) {
  .bay { min-height: 480px; }
  .identity { left: 30px; right: 24px; top: 13%; }
  h1 { font-size: clamp(44px, 10.5vw, 78px); line-height: 1.04; }
  .games { margin-top: 36px; gap: 30px; }
  .games a { font-size: 26px; }
  .pier { width: min(155vw, 85svh); max-width: 850px; right: -26vw; bottom: -15vw; }
  .water { inset: 53% 0 0; }
  .socials { top: max(18px, env(safe-area-inset-top)); right: 19px; }
  .social svg { width: 16px; height: 16px; }
}
@media (max-height: 650px) and (min-aspect-ratio: 1/1) {
  .bay { min-height: 320px; }
  .identity { top: 14%; }
  h1 { font-size: clamp(52px, 6.7vw, 90px); }
  .games { margin-top: 32px; }
  .pier { width: min(60vw, 790px); bottom: -16vw; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 900px) and (orientation: portrait) and (max-height: 700px) {
  .identity { top: 10%; }
  .games { margin-top: 26px; }
  .pier { width: min(155vw, 75svh); right: -20vw; bottom: -10vw; }
}