/* Redbird Golf — single-page static site */

:root {
  /* Declares the page as natively dark, so browsers and dark-mode extensions
     leave it alone instead of "fixing" it. Paired with <meta
     name="color-scheme"> and <meta name="darkreader-lock"> in the HTML. */
  color-scheme: dark;

  --ink:        #f2f6f5;
  --ink-soft:   #a7b8b8;
  --ink-faint:  #6d8181;
  --red:        #e0394d;
  --sky-top:    #050a10;
  --sky-mid:    #0b1a26;
  --sky-low:    #1b3a4a;
  /* Width-proportional, so `slice` crops a near-constant sliver off the top
     at any window size instead of swinging wildly with aspect ratio. */
  --scene-h:    clamp(240px, 34vw, 58vh);
  --font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
          system-ui, "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--sky-top);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- sky ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -3;
  /* Base dawn wash only. The sun, horizon bloom and haze live inside the
     scene SVG so they stay locked to the horizon at every viewport size.
     The flat colour underneath is a deliberate fallback: anything that strips
     gradients (dark-mode extensions, print, ancient engines) then lands on a
     sky tone rather than on the body's near-black. */
  background-color: #12293a;
  background-image: linear-gradient(180deg,
    var(--sky-top) 0%,
    #05101b       22%,
    var(--sky-mid) 42%,
    #14303f       62%,
    var(--sky-low) 82%,
    #24485a      100%);
}

/* ---------- landscape ---------- */

.scene {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  height: var(--scene-h);
  pointer-events: none;
  /* `slice` crops the top of the artwork by an amount that depends on the
     window's aspect ratio. Dissolving the top edge means whatever the crop
     lands on — sky glow, tree tops — melts into the sky instead of ending
     on a hard horizontal line. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 54px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 54px);
}

.scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

.scene .screen { mix-blend-mode: screen; }

.flag {
  transform-origin: 945px 203px;
  animation: flutter 5.2s ease-in-out infinite;
}

@keyframes flutter {
  0%,  100% { transform: skewY(0deg)    scaleX(1);    }
  28%       { transform: skewY(-1.6deg) scaleX(0.965);}
  56%       { transform: skewY(1.2deg)  scaleX(1.015);}
  78%       { transform: skewY(-0.5deg) scaleX(0.99); }
}

/* ---------- overlays ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130vw 110vh at 50% 42%,
    rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.42) 100%);
}

/* ---------- content ---------- */

main {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 4rem 1.5rem calc(var(--scene-h) * 0.86);
}

.brand {
  text-align: center;
  max-width: 34rem;
  animation: rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.mark {
  width: clamp(76px, 12vw, 104px);
  height: auto;
  display: block;
  margin: 0 auto 1.4rem;
  filter: drop-shadow(0 2px 10px rgba(224, 57, 77, 0.35));
}

h1 {
  margin: 0;
  font-size: clamp(1.6rem, 5.4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.tagline {
  margin: 1.15rem 0 0;
  font-size: clamp(0.9rem, 2.1vw, 1.05rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.rule {
  display: block;
  width: 54px;
  height: 1px;
  margin: 1.9rem auto 1.4rem;
  background: linear-gradient(90deg,
    transparent, rgba(224, 57, 77, 0.85), transparent);
}

.meta {
  margin: 0;
  font-size: clamp(0.62rem, 1.5vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The 404 carries no landscape, so its sky must not fade up to the pale
   horizon tones that only make sense with turf underneath them. */
.plain .sky {
  background-color: #0c2331;
  background-image: linear-gradient(180deg,
    var(--sky-top) 0%,
    #061420      48%,
    #0c2331     100%);
}

.plain main { padding-bottom: 6rem; }

.meta a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 57, 77, 0.5);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.meta a:hover,
.meta a:focus-visible {
  color: var(--ink);
  border-color: var(--red);
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1.5rem 1.6rem;
  text-align: center;
  pointer-events: none;
}

footer p {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 246, 244, 0.42);
}

/* ---------- responsive / motion ---------- */

@media (max-height: 620px) {
  :root { --scene-h: clamp(220px, 46vh, 320px); }
  main { padding-top: 2.5rem; padding-bottom: calc(var(--scene-h) * 0.8); }
}

@media (max-width: 520px) {
  :root { --scene-h: clamp(260px, 42vh, 400px); }
  h1 { letter-spacing: 0.22em; text-indent: 0.22em; }
}

@media (prefers-reduced-motion: reduce) {
  .flag, .brand { animation: none !important; }
}