/* Triple Bogeys Club — motion, HUD, illustration and explorer styles (loaded after site.css) */

@keyframes sheen { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
.hero-gold::before, .page-hero::before, .cta-band::before, .plan.featured::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,242,205,.3) 50%, rgba(255,255,255,0) 100%);
  animation: sheen 8s ease-in-out infinite;
}
.plan.featured { position: relative; overflow: hidden; } .plan.featured > * { position: relative; z-index: 1; }
@keyframes floaty { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-16px,0) rotate(-1.5deg); } }
.mono-ghost { animation: floaty 10s ease-in-out infinite; will-change: transform; }
.parallax .mono-ghost { animation: none; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.live { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 2px solid var(--black); background: rgba(5,2,3,.08); font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--black); }
.live .dot { width: 10px; height: 10px; border-radius: 50%; background: #1fbf5f; box-shadow: 0 0 0 0 rgba(31,191,95,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,191,95,.6); } 70% { box-shadow: 0 0 0 10px rgba(31,191,95,0); } 100% { box-shadow: 0 0 0 0 rgba(31,191,95,0); } }
.plan { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(177,120,43,.28); z-index: 1; }
.card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.card:hover { transform: translateY(-4px); border-color: var(--gold-light); }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 22%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform: skewX(-20deg) translateX(-200%); transition: transform .6s ease; pointer-events: none; }
.btn:hover::after { transform: skewX(-20deg) translateX(700%); }
.gold-text.shimmer { background-size: 200% 100%; animation: shimmer 5s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* HUD (tech page + home) */
.hud { position: relative; overflow: hidden; background: #050203; border: 2px solid var(--gold); background-image: linear-gradient(rgba(177,120,43,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(177,120,43,.14) 1px, transparent 1px); background-size: 40px 40px; }
.hud .scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(212,162,76,.9), transparent); animation: scan 5s linear infinite; pointer-events: none; z-index: 2; }
@keyframes scan { from { top: 0; } to { top: 100%; } }
.hud-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--gold-light); }
.hud-head .rec { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.hud-head .rec i { width: 8px; height: 8px; border-radius: 50%; background: #e0452c; animation: blink 1.2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.hud-body { display: grid; grid-template-columns: 1.4fr 1fr; }
.hud-trace { padding: 22px; border-right: 1px solid var(--line); position: relative; }
.hud-trace svg { width: 100%; height: auto; display: block; }
.hud-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { padding: 20px 22px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.tile:nth-child(2n) { border-right: 0; }
.tile .k { font-family: var(--display); text-transform: uppercase; font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.tile .v { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 3vw, 44px); line-height: 1; margin-top: 6px; color: var(--cream); font-variant-numeric: tabular-nums; transition: color .3s; }
.tile.hot .v { color: var(--gold-light); }
.tile .u { font-family: var(--display); text-transform: uppercase; font-size: 12px; letter-spacing: .16em; color: var(--muted); }
.trace-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.trace-path.go { animation: trace 2s cubic-bezier(.3,.6,.2,1) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.trace-glow { opacity: 0; } .trace-glow.go { animation: glowin 2s ease forwards; }
@keyframes glowin { to { opacity: .16; } }
.hud-foot { padding: 12px 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--muted); }
.hud-foot .club { color: var(--gold-light); }

/* Overhead unit illustration */
.unit-wrap { position: relative; border: 2px solid var(--gold); background: radial-gradient(ellipse at 50% 20%, rgba(177,120,43,.18), rgba(5,2,3,0) 60%), #050203; overflow: hidden; }
.unit-wrap svg { width: 100%; height: auto; display: block; }
@keyframes beam { 0%, 100% { opacity: .18; } 50% { opacity: .55; } }
.beam { animation: beam 3s ease-in-out infinite; }
@keyframes ir { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.ir { animation: ir 1.4s ease-in-out infinite; } .ir.d2 { animation-delay: .5s; } .ir.d3 { animation-delay: 1s; }
@keyframes ring { 0% { r: 6; opacity: .9; } 100% { r: 70; opacity: 0; } }
.ring { animation: ring 2.6s ease-out infinite; } .ring.d2 { animation-delay: 1.3s; }
@keyframes swing { 0% { transform: rotate(-38deg); } 40% { transform: rotate(18deg); } 100% { transform: rotate(-38deg); } }
.club-swing { transform-origin: 300px 250px; animation: swing 2.6s cubic-bezier(.5,0,.2,1) infinite; }
.callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--gold); border-top: 0; }
.callouts > div { padding: 22px 24px; border-right: 1px solid var(--line); }
.callouts > div:last-child { border-right: 0; }
.callouts b { display: block; font-family: var(--display); text-transform: uppercase; font-size: 20px; letter-spacing: .04em; }
.callouts span { font-size: 15px; color: var(--muted); }

/* Shot Lab (three.js) */
.shotlab-wrap { position: relative; border: 2px solid var(--gold); background: #050203; overflow: hidden; }
.shotlab { width: 100%; height: clamp(420px, 52vw, 760px); cursor: grab; }
.shotlab:active { cursor: grabbing; }
.shotlab canvas { display: block; width: 100% !important; height: 100% !important; }
.lab-hud { position: absolute; left: 0; right: 0; display: flex; gap: 0; pointer-events: none; z-index: 2; }
.lab-hud-top { top: 0; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(177,120,43,.35); background: linear-gradient(180deg, rgba(5,2,3,.75), rgba(5,2,3,0)); font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--gold-light); }
.lab-hud-top .k { color: var(--muted); margin-right: 10px; }
.lab-hud-top .rec { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); }
.lab-hud-top .rec i { width: 8px; height: 8px; border-radius: 50%; background: #e0452c; animation: blink 1.2s infinite; }
.lab-hud-bottom { bottom: 0; background: linear-gradient(0deg, rgba(5,2,3,.85), rgba(5,2,3,0)); border-top: 1px solid rgba(177,120,43,.35); }
.lab-hud-bottom > div { flex: 1; padding: 16px 20px; border-right: 1px solid rgba(177,120,43,.25); display: flex; flex-direction: column; gap: 2px; }
.lab-hud-bottom > div:last-child { border-right: 0; }
.lab-hud-bottom .k { font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--muted); }
.lab-hud-bottom .v { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 40px); line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.lab-hud-bottom .hot .v { color: var(--gold-light); }
.lab-hud-bottom .u { font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--muted); }
.lab-hud-8 { flex-wrap: wrap; }
.lab-hud-8 > div { flex: 1 1 0; min-width: 0; padding: 12px 14px; }
.lab-hud-8 .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-hud-8 .v { font-size: clamp(20px, 1.9vw, 30px); }
@media (max-width: 1100px) { .lab-hud-8 > div { flex: 1 1 33.33%; min-width: 33.33%; border-bottom: 1px solid rgba(177,120,43,.25); } .lab-hud-8 > div:nth-child(3n) { border-right: 0; } }
.lab-hud-8 .v.roll { color: var(--gold-light); }
.lab-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--muted); font-size: 16px; }
.shotlab.ready + .lab-hud + .lab-hud + .lab-fallback, .shotlab-wrap:has(.shotlab.ready) .lab-fallback { display: none; }
@media (max-width: 860px) { .lab-hud-bottom > div { padding: 10px 12px; } .lab-hud-bottom .u { display: none; } .lab-hud-top { font-size: 11px; letter-spacing: .14em; } .lab-hud-8 > div { flex-basis: 33.33%; min-width: 33.33%; } .lab-hud-8 .v { font-size: 18px; } .shotlab { height: clamp(280px, 82vw, 420px); } }

/* Membership explorer */
.explorer { display: grid; grid-template-columns: 1fr 1.7fr; gap: 24px; align-items: start; }
.plan-tabs { display: flex; flex-direction: column; gap: 10px; }
.plan-tab { text-align: left; width: 100%; background: var(--ink); border: 2px solid var(--line); color: var(--cream); padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--display); text-transform: uppercase; font-size: 22px; letter-spacing: .06em; transition: all .25s; }
.plan-tab:hover { border-color: var(--gold-light); transform: translateX(4px); }
.plan-tab[aria-selected="true"] { background: var(--gold-grad); color: var(--black); border-color: var(--gold); }
.plan-tab small { font-size: 13px; letter-spacing: .14em; opacity: .75; }
.explorer-panel { border: 2px solid var(--gold); padding: 32px 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; position: relative; overflow: hidden; }
.explorer-panel .full { grid-column: 1 / -1; }
.explorer-panel .row { border-bottom: 1px solid rgba(177,120,43,.3); padding-bottom: 14px; }
.explorer-panel .k { font-family: var(--display); text-transform: uppercase; font-size: 12px; letter-spacing: .2em; color: var(--gold-light); }
.explorer-panel .v { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 26px; line-height: 1.05; margin-top: 6px; }
.explorer-panel .n { font-size: 15px; color: var(--muted); margin-top: 4px; }
.explorer-panel .fade { animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.access-pill { display: inline-block; padding: 6px 12px; font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; border: 1px solid var(--gold); color: var(--gold-light); }
.plan.featured .access-pill { border-color: var(--black); color: var(--black); }

@media (max-width: 1100px) { .hud-body { grid-template-columns: 1fr; } .hud-trace { border-right: 0; border-bottom: 1px solid var(--line); } .explorer { grid-template-columns: 1fr; } .callouts { grid-template-columns: 1fr; } .callouts > div { border-right: 0; border-bottom: 1px solid var(--line); } .callouts > div:last-child { border-bottom: 0; } }
@media (max-width: 860px) { .explorer-panel { grid-template-columns: 1fr; padding: 24px; } .live { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .hero-gold::before, .page-hero::before, .cta-band::before, .plan.featured::before, .mono-ghost, .hud .scanline, .beam, .ir, .ring, .club-swing, .gold-text.shimmer { animation: none !important; } }

/* stats auto-columns: a stat hidden by the app's settings closes its gap on desktop */
@media (min-width: 1101px) { .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* Hero "open right now" strip: past two clubs it counts them, and "See them" opens every club with directions. */
.open-now { max-width: 100%; }
.open-now .live { max-width: 100%; flex-wrap: wrap; row-gap: 6px; }
.open-now .live b { font-weight: 600; }
.live-more { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-left: 2px solid var(--black); padding-left: 12px; margin-left: 2px; font-weight: 600; }
.live-more:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.live-more .chev { display: inline-block; transition: transform .3s; }
.live-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.open-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1); }
.open-drawer.open { grid-template-rows: 1fr; }
.open-drawer > div { overflow: hidden; min-height: 0; }
.open-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding-top: 10px; max-width: 720px; }
.open-loc { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: rgba(5,2,3,.86); color: var(--gold-pale); text-decoration: none;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; opacity: 0; transform: translateY(6px); transition: background .2s; }
.open-drawer.open .open-loc { animation: openIn .35s forwards; animation-delay: calc(var(--i) * 30ms); }
@keyframes openIn { to { opacity: 1; transform: none; } }
.open-loc:hover { background: var(--black); }
.open-loc .dot { width: 8px; height: 8px; border-radius: 50%; background: #1fbf5f; flex: none; }
.open-loc .arr { margin-left: auto; opacity: .6; transition: transform .2s, opacity .2s; }
.open-loc:hover .arr { transform: translateX(3px); opacity: 1; }
.loc-btns { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .open-grid { grid-template-columns: 1fr 1fr; } .open-loc { font-size: 12px; padding: 9px 10px; }
  .open-now .live { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
  .open-now .live-more { grid-column: 2; justify-self: start; border-left: 0; padding-left: 0; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .open-drawer { transition: none; } .open-loc { animation: none !important; opacity: 1; transform: none; } }