:root {
  color-scheme: dark;
  --canvas: #000;
  --foreground: #fff;
  --muted: #a5ada6;
  --accent: #8fb560;
  color: var(--foreground);
  background: var(--canvas);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: clamp(24px, 7svh, 80px);
}

.splash {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 5svh, 48px);
}

.logo {
  position: relative;
  width: min(80vw, 600px);
  aspect-ratio: 603 / 59;
  margin: 0;
  overflow: hidden;
}

/* Preserve the original asset, framing its 603 × 59 visible wordmark. */
.logo img {
  position: absolute;
  width: 160.53068%;
  height: auto;
  left: -28.85572%;
  top: -452.54237%;
}

.trailer-reveal {
  position: relative;
  width: min(100%, 1600px);
}

.trailer-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Feather the original panorama into the black canvas without cropping it. */
.trailer-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--canvas), transparent 14%, transparent 86%, var(--canvas)),
    linear-gradient(90deg, var(--canvas), transparent 5%, transparent 95%, var(--canvas));
}

.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 16px;
  color: var(--muted);
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-underline-offset: 5px;
}

.contact-link:hover {
  color: var(--accent);
}

.contact-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* One short entrance, then a still page. Reduced motion is the default. */
@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: fade-in 850ms ease-out both;
  }

  .trailer-reveal {
    animation: trailer-in 1800ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }

  .contact-link {
    animation: fade-in 800ms ease-out 500ms both;
    transition: color 180ms ease-out;
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes trailer-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}