/* ==========================================================================
   Golf Memento — construction placeholder
   Standalone page shown before the app and site go live together.
   ========================================================================== */

:root {
  --ink:        #0C1F16;
  --ink-2:      #113022;
  --ink-deep:   #071510;
  --green-lit:  #24623E;
  --gold:       #D8A62A;
  --gold-light: #F0CE6A;
  --gold-deep:  #9C7314;
  --cream:      #F3EAD4;
  --muted:      #B9C8BB;
  --walnut:     #6B4A2F;
  --walnut-lit: #8A6238;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: #0C1F16;   /* matches meta theme-color, keeps overscroll on theme */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--cream);
  background-color: var(--ink-deep);
  background-image:
    /* restrained green light from above, deeper and less bright than before */
    radial-gradient(120% 78% at 50% -10%, rgba(34, 92, 59, .40), transparent 58%),
    /* the foot of the page falls into a much darker green instead of a gold glow */
    radial-gradient(95% 62% at 50% 112%, rgba(5, 20, 12, .70), transparent 66%),
    /* the faintest warmth remains, well short of yellow */
    radial-gradient(70% 40% at 50% 96%, rgba(190, 152, 74, .05), transparent 70%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 48%, var(--ink-deep) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  line-height: 1.65;
}

img { max-width: 100%; display: block; height: auto; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Ambient background
   Three fixed layers: a contour texture, a slow travelling light, and a vignette.
   Nothing bobs in place; the only movement crosses the whole screen once.
   -------------------------------------------------------------------------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient > span { position: absolute; display: block; }

/* Topographic contour field.
   The tile is periodic by construction, so translating it by exactly one tile
   width loops with no seam. Two layers at different scales and speeds drift in
   opposite directions, which reads as the map slowly shifting underfoot. */
.ambient__topo,
.ambient__topo-far {
  inset: -60%;                       /* slack so the drift never exposes an edge */
  background-image: url("../img/pattern-contour.webp");
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  will-change: transform;
}

.ambient__topo {
  background-size: 1000px 1000px;
  opacity: .085;
  animation: topo-near 150s linear infinite;
}
@keyframes topo-near {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1000px, -1000px, 0); }
}

.ambient__topo-far {
  background-size: 1560px 1560px;
  opacity: .05;
  animation: topo-far 240s linear infinite;
}
@keyframes topo-far {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(1560px, -1560px, 0); }
}

/* A wide band of warm light crossing the page, like a lamp panning a room */
.ambient__sweep {
  top: -35%;
  bottom: -35%;
  left: -45%;
  width: 55%;
  transform: rotate(14deg) translate3d(-40%, 0, 0);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214, 226, 199, .035) 30%,
    rgba(236, 243, 222, .065) 50%,
    rgba(214, 226, 199, .035) 70%,
    transparent 100%);
  filter: blur(30px);
  animation: sweep 40s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
}
@keyframes sweep {
  0%   { transform: rotate(14deg) translate3d(-60%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: rotate(14deg) translate3d(330%, 0, 0); opacity: 0; }
}

/* Keeps the edges dark so the centre reads as lit */
.ambient__vignette {
  inset: 0;
  background: radial-gradient(125% 92% at 50% 38%, transparent 46%, rgba(3, 12, 8, .60) 100%);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(.75rem, 1.6vw, 1.1rem) clamp(1.25rem, 5vw, 2.5rem);
}
.stage__inner { width: 100%; max-width: 760px; }

/* Wordmark ---------------------------------------------------------------- */
.mark {
  width: min(100%, 660px, 64vh);
  margin: 0 auto clamp(1.25rem, 3.4vh, 2.5rem);
  animation: mark-in 1.1s cubic-bezier(.2,.85,.3,1) both;
  position: relative;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55));
}

.mark-wrap {
  display: block;
  width: min(100%, 660px, 64vh);
  margin-inline: auto;
}
@keyframes mark-in {
  from { opacity: 0; transform: translateY(-18px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

/* Copy -------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
  animation: rise .8s ease .25s both;
}
.stage h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.05rem);
  line-height: 1.14;
  margin: 0 0 .55rem;
  color: #fff;
  animation: rise .8s ease .35s both;
}
.stage p {
  color: var(--muted);
  font-size: clamp(.98rem, .95rem + .25vw, 1.06rem);
  max-width: 78ch;
  margin: 0 auto .8em;
  animation: rise .8s ease .45s both;
}
/* Two short sentences, each guaranteed to hold a single line at any width.
   The original wording ran to 74 characters, which needs 542px; a 390px phone
   offers 350px, so keeping it as one line would have meant ~10px type. */
.stage p.stage__meta {
  /* One line at every width. The wording is trimmed to 52 characters because a
     longer sentence cannot hold a single line on a phone at a readable size. */
  white-space: nowrap;
  font-size: min(1em, 3.3vw);
  margin: clamp(2rem, 8.5vh, 5.25rem) auto 0;   /* sits below the case and caption */
  animation-delay: .65s;                          /* arrives last in the sequence */
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Progress: a display case filling one memento at a time
   -------------------------------------------------------------------------- */
.progress {
  margin: clamp(1.75rem, 7vh, 4.25rem) auto 0;
  max-width: 380px;
  animation: rise .8s ease .55s both;
}

.case {
  width: clamp(150px, 34vw, 196px);
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--walnut-lit), var(--walnut) 45%, #4A321E);
  box-shadow:
    0 22px 44px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 2px rgba(0,0,0,.25);
}

.case__slot {
  position: relative;
  border-radius: 8px;
  background: radial-gradient(120% 120% at 30% 20%, #3E2A18, #241608);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.65);
  display: grid;
  place-items: center;
}

/* The ball that arrives in each slot */
.case__slot::before {
  content: "";
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, #FFFDF6 0%, #F0E7D2 42%, #C9BCA0 78%, #A2957B 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset -3px -5px 9px rgba(120,105,80,.45);
  opacity: 0;
  transform: translateY(-26px) scale(.55);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,1.3,.4,1);
}
/* The course emblem on each ball */
.case__slot::after {
  content: "";
  width: 22%;
  aspect-ratio: 1;
  border-radius: 2px;
  position: absolute;
  opacity: 0;
  transition: opacity .45s ease .12s;
}
.case__slot:nth-child(1)::after { background: #B2382F; clip-path: polygon(0 0, 100% 22%, 0 44%); width: 26%; }
.case__slot:nth-child(2)::after { background: #1E7A46; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 92%,50% 70%,21% 92%,32% 57%,2% 35%,39% 35%); }
.case__slot:nth-child(3)::after { background: #23406B; border-radius: 50%; clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%, 42% 50%); }
.case__slot:nth-child(4)::after { background: #D8A62A; clip-path: polygon(50% 8%, 100% 62%, 82% 62%, 50% 34%, 18% 62%, 0 62%); }

.case__slot.is-filled::before { opacity: 1; transform: none; }
.case__slot.is-filled::after  { opacity: 1; }

/* Progress: the gold rule traces itself around the case -------------------- */
.case-wrap {
  position: relative;
  width: clamp(126px, 24vw, 144px);
  margin: 0 auto;
  aspect-ratio: 1;
  margin-bottom: clamp(.95rem, 2.4vw, 1.25rem);   /* clears the traced rule */
}
.case-wrap .case { margin: 0; width: 100%; height: 100%; }

.readout {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-light);
  min-height: 1.2em;
}

.trace {
  --fill: 0;
  position: absolute;
  inset: -13%;
  width: 126%;
  height: 126%;
  overflow: visible;
}
.trace rect {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.trace__track { stroke: rgba(240, 206, 106, .16); }
.trace__fill {
  stroke: url(#traceGold);
  stroke-dasharray: 100;
  /* Starts at the top centre and travels clockwise */
  stroke-dashoffset: calc(100 - var(--fill));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .85s cubic-bezier(.3, .8, .3, 1);
  filter: drop-shadow(0 0 6px rgba(240, 206, 106, .45));
}

/* When the case is full the whole frame gives one quiet pulse */
.progress.is-complete .trace__fill { animation: trace-pulse 1.6s ease-out; }
@keyframes trace-pulse {
  0%   { filter: drop-shadow(0 0 6px rgba(240, 206, 106, .45)); }
  35%  { filter: drop-shadow(0 0 18px rgba(255, 236, 176, .95)); }
  100% { filter: drop-shadow(0 0 6px rgba(240, 206, 106, .45)); }
}
.progress.is-complete .case {
  box-shadow:
    0 22px 44px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 2px rgba(0,0,0,.25),
    0 0 34px rgba(240, 206, 106, .28);
}

/* Footer ------------------------------------------------------------------ */
.foot {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: .9rem 1.25rem 1.1rem;
  font-size: .87rem;
  color: var(--muted);
  border-top: 1px solid rgba(240,206,106,.16);
}
.foot p { margin: 0; }
.foot a { color: var(--gold-light); text-decoration: none; font-weight: 600; }
.foot a:hover { color: #fff; text-decoration: underline; }

/* Motion preferences ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ambient__sweep { display: none; }
  .ambient__topo, .ambient__topo-far { animation: none; }
}