/* ============================================================
   The 19th Hole — shared motion layer
   Loaded by every page. Pure transform/opacity animations,
   reduced-motion aware, mobile-safe.
   ============================================================ */

/* ---------- cross-document view transitions ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: m-hole-out .32s cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(root) {
  animation: m-hole-in .44s cubic-bezier(.22, .9, .32, 1.12) both;
}
@keyframes m-hole-out { to { opacity: 0; transform: scale(.985); } }
@keyframes m-hole-in { from { opacity: 0; transform: scale(1.015); } }

/* persistent chrome glides instead of re-rendering; the gold
   active-tab highlight physically slides between pages */
a.brand-mark { view-transition-name: brand-mark; }
nav.tabs { view-transition-name: tabs; }
nav.tabs .tab.on { view-transition-name: active-tab; }
svg.badge { view-transition-name: badge; }
div.marquee { view-transition-name: marquee; }
div.grain { view-transition-name: grain; }

::view-transition-group(active-tab) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.22, .9, .32, 1.15);
}

/* ---------- mobile fixes ---------- */
div.marquee { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
button.alm-btn { width: 44px; height: 44px; }

/* ---------- HUD odometer digits ---------- */
.score b .odo-col {
  display: inline-block;
  height: 1.25em;
  line-height: 1.25em;
  overflow: hidden;
  vertical-align: bottom;
}
.score b .odo-strip {
  display: block;
  transition: transform .55s cubic-bezier(.22, .9, .3, 1.12);
  will-change: transform;
}
.score b .odo-strip span {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
}

/* ---------- stamp slam: screen shake + flash ---------- */
canvas.m-shake { animation: m-shake .32s linear both; }
@keyframes m-shake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 3px); }
  30% { transform: translate(4px, -4px); }
  45% { transform: translate(-3px, -2px); }
  60% { transform: translate(3px, 2px); }
  75% { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}
@media (max-width: 820px) {
  canvas.m-shake { animation-name: m-shake-sm; }
  @keyframes m-shake-sm {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(2px, -2px); }
    60% { transform: translate(-2px, 1px); }
    80% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
  }
}
#m-flash {
  position: fixed; inset: 0; z-index: 9; pointer-events: none;
  background: var(--accent); opacity: 0;
}
#m-flash.go { animation: m-flash .28s ease-out both; }
@keyframes m-flash { 0% { opacity: .14; } 100% { opacity: 0; } }

/* ---------- tap ripple (touch) ---------- */
.m-ripple {
  position: fixed; z-index: 30; pointer-events: none;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: m-ripple .45s cubic-bezier(.2, .7, .4, 1) both;
}
@keyframes m-ripple {
  0% { transform: scale(.25); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- custom ball cursor (index, fine pointers) ---------- */
@media (pointer: fine) {
  body[data-cursor="on"], body[data-cursor="on"] a,
  body[data-cursor="on"] button { cursor: none; }
  body[data-cursor="on"] input { cursor: text; }
}
#m-cursor {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #e8e2d0 70%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  transition: transform .18s cubic-bezier(.34, 1.4, .5, 1), opacity .2s ease;
  opacity: 0;
}
#m-cursor::after {
  /* dimples */
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background:
    radial-gradient(circle 1px at 30% 40%, rgba(0,0,0,.18) 0 1px, transparent 1px),
    radial-gradient(circle 1px at 60% 30%, rgba(0,0,0,.14) 0 1px, transparent 1px),
    radial-gradient(circle 1px at 55% 65%, rgba(0,0,0,.16) 0 1px, transparent 1px);
}
#m-cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 39; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid transparent;
  border-radius: 50%;
  transition: border-color .2s ease, transform .25s cubic-bezier(.34, 1.4, .5, 1);
  transform: scale(.6);
}
body[data-cursor-hover] #m-cursor-ring {
  border-color: var(--accent);
  transform: scale(1);
}
body[data-cursor-down] #m-cursor { transform: scale(.72); }

/* ---------- flyover course map ----------
   The map is the course, and the course is at dusk: the canvas underneath is
   drawn in night colours whatever page opened it. Custom properties inherit,
   so restating the NIGHT surface on the overlay puts every control inside it
   on the right ground — otherwise the paper pages hand it brass-on-black. */
#flyover {
  --ground:       #0A2A1C;
  --ground-deep:  #061A10;
  --ground-glow:  #10402A;
  --text:         #F4EFDF;
  --text-mute:    rgba(244, 239, 223, .70);
  --text-dim:     rgba(244, 239, 223, .55);
  --hair:         rgba(244, 239, 223, .18);
  --accent:       #FFC93C;
  --accent-hover: #FFD964;
  --on-accent:    #061A10;
  --coral:        #FF7A59;
  --green:        #7BD389;
  --panel:        rgba(6, 26, 16, .6);
  --panel-strong: rgba(6, 26, 16, .72);
  --display: "Futura", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --display-weight: 800;
  --display-tracking: .06em;
  color-scheme: dark;

  /* opaque: the canvas ground is 96% and a paper page behind it read as a
     watermark through the remaining 4% */
  background: var(--ground-deep);
  position: fixed; inset: 0; z-index: 60;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
#flyover.on { opacity: 1; pointer-events: auto; }
#flyover canvas { position: absolute; inset: 0; touch-action: none; }
#flyover .fo-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; z-index: 2;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 18px; line-height: 1;
  color: rgba(244, 239, 223, .75);
  background: rgba(6, 26, 16, .7);
  border: 1px solid rgba(244, 239, 223, .25);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
#flyover .fo-close:hover { color: var(--accent); border-color: rgba(244, 239, 223, .6); }
#flyover .fo-tour {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 2;
  height: 44px; padding: 0 18px;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 11px; letter-spacing: .22em;
  color: rgba(244, 239, 223, .8);
  background: rgba(6, 26, 16, .7);
  border: 1px solid rgba(244, 239, 223, .25);
  cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
#flyover .fo-tour:hover { color: var(--accent); border-color: rgba(244, 239, 223, .6); }
@media (max-width: 640px) {
  #flyover .fo-tour { left: auto; right: 72px; transform: none; padding: 0 10px; font-size: 10px; }
}
#flyover .fo-card {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: min(250px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  background: rgba(6, 26, 16, .92);
  border: 1px solid rgba(244, 239, 223, .3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
#flyover .fo-card.on { opacity: 1; pointer-events: auto; }
#flyover .fo-card p { margin: 0; }
#flyover .fo-card-eyebrow {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 9px; letter-spacing: .24em; color: var(--accent);
}
#flyover .fo-card-name {
  margin-top: 5px;
  font-family: "Futura", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -.01em;
  color: var(--text); text-transform: uppercase;
}
#flyover .fo-card-tag {
  margin-top: 6px;
  font-family: "Iowan Old Style", "Palatino", "Georgia", serif;
  font-style: italic; font-size: 13px; line-height: 1.45;
  color: rgba(244, 239, 223, .7);
}
#flyover .fo-card-stats {
  margin-top: 9px;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 10px; letter-spacing: .16em;
  color: rgba(255, 201, 60, .8);
}
#flyover .fo-card-play {
  margin-top: 11px; width: 100%; min-height: 40px;
  font-family: "Futura", "Avenir Next Condensed", sans-serif;
  font-weight: 800; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase;
  color: #061A10; background: var(--accent);
  border: 1.5px solid var(--accent); cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
#flyover .fo-card-play:hover { background: var(--accent-hover); }
#flyover .fo-card-play:active { transform: translateY(1px); }
#flyover .fo-card-play:disabled {
  background: transparent; color: rgba(255, 201, 60, .8); cursor: default;
}
#flyover .fo-hint {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 2; pointer-events: none;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244, 239, 223, .55);
  white-space: nowrap;
}

/* keep the "signed" confirmation card at its natural width in the flex column */
p.signed { align-self: flex-start; }

/* ---------- hero set pieces (index) ---------- */
#hero-ball {
  position: fixed; z-index: 5; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #e6e0cd 75%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  opacity: 0;
}
#hero-ball i {
  position: absolute; left: 50%; top: 18%;
  width: 18%; height: 18%; border-radius: 50%;
  background: rgba(0, 0, 0, .22);
}
.cup-flag {
  position: absolute; left: 50%; bottom: .12em; z-index: 3;
  width: .05em; height: 0; pointer-events: none;
  background: var(--text);
  transition: height .35s cubic-bezier(.22, .9, .32, 1.25);
  transform-origin: bottom center;
}
.cup-flag.up { height: .62em; }
.cup-flag::before {
  content: ""; position: absolute; top: 0; left: 100%;
  border-style: solid; border-width: .09em 0 .09em .26em;
  border-color: transparent transparent transparent var(--coral);
  transform-origin: left center;
  animation: flag-wave 2.4s ease-in-out .4s infinite;
}
@keyframes flag-wave {
  0%, 100% { transform: scaleX(1) skewY(0deg); }
  50% { transform: scaleX(.86) skewY(-4deg); }
}

/* ---------- almanac page-turn (index) ---------- */
section.almanac { perspective: 700px; }
section.almanac .alm-fact {
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
}
section.almanac .alm-fact.turn-out { transform: rotateX(-68deg); opacity: 0; }
section.almanac .alm-fact.turn-in { transition: none; transform: rotateX(52deg); opacity: 0; }

/* ---------- reduced motion: everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .score b .odo-strip { transition: none; }
  canvas.m-shake { animation: none; }
  #m-flash.go { animation: none; }
  .m-ripple { animation-duration: .01s; }
  .cup-flag::before { animation: none; }
  section.almanac .alm-fact { transition: none; }
  #flyover { transition: none; }
}