@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/silkscreen-latin.woff2") format("woff2");
}

:root {
  --yellow: #ffdc00;
  --black: #000000;
  font-family: "Silkscreen", "Courier New", monospace;
  background: var(--black);
  color: var(--black);
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { color: var(--yellow); background: var(--black); }
.island { position: relative; min-height: 100svh; height: 100svh; overflow: hidden; background: var(--yellow); isolation: isolate; }
#palm-scene { display: block; position: absolute; width: 100%; height: 100%; inset: 0; image-rendering: pixelated; }
.welcome-copy { position: absolute; z-index: 2; top: 25%; left: 50%; width: 76%; max-width: 1400px; transform: translateX(-50%); text-align: center; }
h1 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 span { display: block; font-size: clamp(22px, 2.7vw, 42px); line-height: 1.5; letter-spacing: .08em; margin-bottom: 17px; }
h1 strong { display: block; font-weight: 400; font-size: clamp(40px, 7.2vw, 118px); line-height: 1.12; letter-spacing: -.06em; text-shadow: 3px 3px 0 #ffdc00; }
.island::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, #00000007 3px 4px); }
#cursor-trail { position: fixed; z-index: 50; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; mix-blend-mode: difference; }
.motion-toggle { position: absolute; z-index: 5; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 36px; height: 36px; padding: 8px; border: 1px solid #ffdc0070; background: #000000; color: var(--yellow); cursor: pointer; display: grid; place-items: center; }
.motion-toggle:hover { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.motion-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; }
.motion-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.play-icon, .motion-toggle[aria-pressed="false"] .pause-icon { display: none; }
.motion-toggle[aria-pressed="false"] .play-icon { display: block; }

@media (max-width: 600px) {
  .welcome-copy { top: 8%; width: 82%; }
  h1 span { font-size: 20px; margin-bottom: 14px; letter-spacing: .02em; }
  h1 strong { max-width: 410px; margin-inline: auto; font-size: 12vw; line-height: 1.25; letter-spacing: -.065em; }
  .motion-toggle { right: 16px; bottom: 16px; }
}

@media (max-height: 450px) and (min-width: 601px) {
  .welcome-copy { top: 17%; }
  h1 span { font-size: 20px; margin-bottom: 8px; }
  h1 strong { font-size: 6vw; }
}