/* HB Snooker Lounge — motion layer. Sits on top of the existing design; changes no colours or layout.
   Rules: transform/opacity only, short and purposeful, always visible if animation is unavailable. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* ---------- Page-to-page transition (supporting browsers only) ---------- */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--ease-out)}
::view-transition-group(site-header){animation-duration:0s}

/* ---------- Entrance: hero and page headers (CSS-only, content is visible by default) ---------- */
@keyframes hb-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Page-top text slides only (no fade) so it counts as painted on the first frame: keeps Largest Contentful Paint fast. */
@keyframes hb-slide{from{transform:translateY(14px)}to{transform:none}}
.hero .eyebrow,.hero h1,.hero .lead,.hero .actions,.hero-booking-details,.hero-intake-note,.hero-bottom,
.page-hero .breadcrumb,.page-hero .eyebrow,.page-hero h1,.page-hero p{animation:hb-slide 650ms var(--ease-out) backwards}
.hero .eyebrow,.page-hero .breadcrumb{animation-delay:40ms}
.hero h1,.page-hero .eyebrow{animation-delay:110ms}
.hero .lead,.page-hero h1{animation-delay:190ms}
.hero .actions,.page-hero p{animation-delay:270ms}
.hero-booking-details{animation-delay:340ms}.hero-intake-note{animation-delay:400ms}.hero-bottom{animation-delay:460ms}
@keyframes hb-settle{from{scale:1.07}to{scale:1}}
.hero-scene img{animation:hb-settle 2600ms var(--ease-out) both}
@keyframes hb-spin{to{rotate:360deg}}
.hero-seal{animation:hb-spin 60s linear infinite}
@keyframes hb-float{50%{translate:0 -12px}}
.page-hero .hero-dot{animation:hb-float 9s ease-in-out infinite}

/* ---------- Scroll reveal (JS marks only elements that start below the fold) ---------- */
.mo-reveal{opacity:0;transform:translateY(22px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.mo-reveal.mo-in{opacity:1;transform:none}

/* ---------- Header depth once scrolled ---------- */
.site-header{transition:box-shadow 300ms ease,background-color 300ms ease}
.site-header.mo-scrolled{box-shadow:0 10px 30px -12px #000a}

/* ---------- Buttons, cards (mouse only for hover; press feedback everywhere) ---------- */
.button-gold{position:relative;overflow:hidden;isolation:isolate}
.button-gold::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff66 50%,transparent 70%);transform:translateX(-120%);transition:transform 700ms var(--ease-out)}
.plan-card,.learn-card,.amenity,.policy-card,.address-card{transition:transform 400ms var(--ease-out),box-shadow 400ms var(--ease-out),border-color 400ms ease}
@media(hover:hover) and (pointer:fine){
  .button-gold:hover::after{transform:translateX(120%)}
  .plan-card:hover,.learn-card:hover,.policy-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px #0007}
  .amenity:hover{transform:translateY(-3px)}
  .learn-card:hover{border-color:#d7b474}
  .site-nav>a:not(.button){background:linear-gradient(var(--gold),var(--gold)) left bottom/0 1px no-repeat;transition:background-size 350ms var(--ease-out),color .2s;padding-bottom:4px}
  .site-nav>a:not(.button):hover,.site-nav>a[aria-current=page]{background-size:100% 1px}
}

/* ---------- Mobile menu ---------- */
@keyframes hb-menu{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes hb-link{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media(max-width:860px){
  .site-nav.is-open{animation:hb-menu 260ms var(--ease-out)}
  .site-nav.is-open>*{animation:hb-link 380ms var(--ease-out) backwards}
  .site-nav.is-open>*:nth-child(1){animation-delay:30ms}.site-nav.is-open>*:nth-child(2){animation-delay:70ms}.site-nav.is-open>*:nth-child(3){animation-delay:110ms}
  .site-nav.is-open>*:nth-child(4){animation-delay:150ms}.site-nav.is-open>*:nth-child(5){animation-delay:190ms}.site-nav.is-open>*:nth-child(6){animation-delay:230ms}.site-nav.is-open>*:nth-child(7){animation-delay:270ms}
}

/* ---------- FAQ ---------- */
@keyframes hb-faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
details[open]>*:not(summary){animation:hb-faq 320ms var(--ease-out)}
summary::after{transition:transform 300ms var(--ease-out)}
details[open] summary::after{transform:rotate(180deg)}

/* ---------- Form fields ---------- */
input,select,textarea{transition:border-color 200ms ease,box-shadow 200ms ease,background-color 200ms ease}
input:focus,select:focus,textarea:focus{border-color:#b39358;box-shadow:0 0 0 4px #d7b47433}
@keyframes hb-shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.field.mo-shake{animation:hb-shake 380ms var(--ease-out)}
.form-panel .button[type=submit]{transition:transform 140ms var(--ease-out),background-color .2s,color .2s}
.form-panel .button[data-done]::before{content:'✓';display:inline-block;margin-right:10px;animation:hb-pop 450ms var(--ease-out) backwards}
@keyframes hb-pop{from{transform:scale(0);opacity:0}60%{transform:scale(1.25)}to{transform:scale(1);opacity:1}}

/* ---------- Form success: the pot ---------- */
.win{display:grid;justify-items:center;gap:6px;margin:26px 0 6px;padding:22px 16px 18px;border-radius:4px;background:linear-gradient(180deg,#f2ede0,#fffdf7);border:1px solid #e0d6bd;text-align:center;position:relative;overflow:hidden}
.win-stage{position:relative;width:min(320px,100%)}
.win-scene{display:block;width:100%;height:auto;overflow:visible}
.win .win-felt{fill:#1b5a40;stroke:#4a2f1a;stroke-width:6}
.win .win-baulk{stroke:#ffffff44;stroke-width:1}
.win .win-pocket{fill:#050a07}
.win .win-ring{fill:none;stroke:#d7b474;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:hb-ring 700ms 1050ms var(--ease-out) forwards}
.win .win-cue,.win .win-red{transform-box:fill-box;transform-origin:center}
.win .win-cue{fill:#f6f1e6;transform:translateX(150px);animation:hb-cue 650ms 120ms var(--ease-out) backwards}
.win .win-red{fill:#c2463a;opacity:0;transform:translateX(86px) scale(.2);animation:hb-red 900ms 640ms var(--ease-in-out) backwards}
.win .win-shine{fill:#fff;opacity:.55}
@keyframes hb-cue{from{transform:translateX(0)}}
@keyframes hb-red{0%{transform:translateX(0) scale(1);opacity:1}72%{transform:translateX(86px) scale(1);opacity:1}100%{transform:translateX(86px) scale(.2);opacity:0}}
@keyframes hb-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.win .win-red{animation-fill-mode:both}
.win-badge{width:58px;height:58px;margin-top:2px}
.win-badge circle{fill:#183a2b;transform-box:fill-box;transform-origin:center;animation:hb-badge 520ms 1150ms var(--ease-out) backwards}
.win-badge path{fill:none;stroke:#d7b474;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:0;animation:hb-draw 420ms 1500ms var(--ease-out) backwards}
@keyframes hb-badge{from{transform:scale(0)}60%{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes hb-draw{from{stroke-dashoffset:34;opacity:0}2%{opacity:1}}
.win-title{font-family:var(--serif);font-size:1.5rem;line-height:1.1;color:var(--ink);margin:4px 0 0;animation:hb-rise 500ms 1550ms var(--ease-out) backwards}
.win-sub{font-size:.8rem;color:var(--muted);margin:0;animation:hb-rise 500ms 1650ms var(--ease-out) backwards}
.win-confetti{position:absolute;left:92.5%;top:50%;width:0;height:0;pointer-events:none}
.win-confetti i{position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--c);opacity:0;animation:hb-burst 1100ms calc(1050ms + var(--d)) var(--ease-out) forwards}
@keyframes hb-burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4) rotate(var(--r))}}

/* ---------- Reading progress (Learn guides) ---------- */
.reading-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}

/* ---------- Scorecard numbers pop when they change ---------- */
@keyframes hb-bump{40%{transform:scale(1.14)}}
.practice-scorecard-stats dd.mo-bump{display:inline-block;animation:hb-bump 380ms var(--ease-out)}

@media(prefers-reduced-motion:reduce){
  .mo-reveal{opacity:1!important;transform:none!important}
  .win-confetti{display:none}
}