/* ================= Extra motion & hover layer ================= */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-a { to { --a: 360deg; } }

/* ---------- letter-by-letter headings ---------- */
.split .c { display: inline-block; transform: translateY(105%) rotateX(-80deg); transform-origin: 50% 100%; opacity: 0;
  transition: transform 1s var(--ease), opacity .6s, color .3s; transition-delay: calc(var(--i) * 22ms); }
.split.in .c { transform: none; opacity: 1; }
.split .line { perspective: 600px; }
/* gold words: gradient per letter so it survives the animation */
.split em { background: none; animation: none; color: inherit; }
.split em .c { background: var(--gold-grad); background-size: 400% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }
/* hover any letter: it hops and goes gold */
.split.in .c:hover { transform: translateY(-14%) rotate(-6deg); color: var(--gold-2); transition: transform .25s var(--ease), color .2s; transition-delay: 0s; }
.split .c.hop { animation: hop .6s var(--ease); }
.split em .c.hop { animation: hop .6s var(--ease), shine 5s linear infinite; }
@keyframes hop { 40% { transform: translateY(-18%) scale(1.06); } }

/* ---------- buttons: rolling text, fill wipe, lift ---------- */
.btn { --lift: 0px; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn__roll { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; z-index: 1; }
.btn__roll > span { display: block; transition: transform .55s var(--ease); }
.btn__roll > span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .btn__roll > span { transform: translateY(-100%); }
.btn--ghost { z-index: 0; }
.btn--ghost::before { content: ""; position: absolute; left: 50%; top: 100%; width: 140%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: var(--gold-grad); transform: translate(-50%, 0) scale(.2); transition: transform .7s var(--ease), top .7s var(--ease); }
.btn--ghost:hover::before { top: 50%; transform: translate(-50%, -50%) scale(1.2); }
.btn--ghost:hover { color: #120d04; border-color: transparent; box-shadow: 0 16px 40px -14px rgba(217,180,107,.7); }
.btn--gold { animation: btn-breathe 3.5s ease-in-out infinite; }
@keyframes btn-breathe { 50% { box-shadow: 0 10px 40px -6px rgba(217,180,107,.8), inset 0 1px 0 rgba(255,255,255,.5); } }

/* ---------- glowing animated border on every box ---------- */
.glow { position: relative; }
.glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 4;
  background: conic-gradient(from var(--a), transparent 0 55%, rgba(217,180,107,.2) 65%, var(--gold) 78%, #fff6dc 82%, var(--gold) 86%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s; animation: spin-a 3s linear infinite; }
.glow:hover::before { opacity: 1; }
.glow { transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s, background-color .4s !important; }
.glow:hover { box-shadow: 0 40px 70px -30px rgba(217,180,107,.45), 0 0 0 1px rgba(217,180,107,.15); }

/* shine sweep across photos */
.shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left 0s; }
.g-item:hover .shine::after, .prod:hover .shine::after { left: 130%; transition: left .9s var(--ease); }

/* ---------- gallery ---------- */
.g-item[data-reveal] { opacity: 1; filter: none; transform: none; clip-path: inset(100% 0 0 0 round 18px); transition: clip-path 1.2s var(--ease-io); transition-delay: var(--d, 0ms); }
.g-item[data-reveal].in { clip-path: inset(0 0 0 0 round 18px); }
.g-item[data-reveal] img { transform: scale(1.35); transition: transform 1.6s var(--ease), filter .6s; transition-delay: var(--d, 0ms); }
.g-item[data-reveal].in img { transform: scale(1); }
.g-item[data-reveal].in:hover img { transform: scale(1.12); transition-delay: 0s; }
.gallery:hover .g-item:not(:hover) img { filter: grayscale(.8) brightness(.5); }
.g-item figcaption::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--gold); color: #000; font-size: 16px; }

/* ---------- services rows ---------- */
.svc__row { padding-right: 8px; transition: padding .6s var(--ease); }
.svc__go { opacity: 0; scale: .4; rotate: -45deg; transition: opacity .3s, scale .6s var(--ease), rotate .6s var(--ease); pointer-events: none; }
.svc:hover .svc__go { opacity: 1; scale: 1; rotate: 0deg; }
.svc:hover .svc__row { padding-right: 84px; }
.svc:hover .svc__n { color: var(--gold); }
.svc__n { transition: color .3s; }
.svc:hover .svc__price { color: var(--gold-2); }
.svc__row::before { background: linear-gradient(90deg, rgba(217,180,107,.16), rgba(217,180,107,.03) 70%, transparent); }
.svc::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.svc:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- nav hover pill ---------- */
.nav__links { position: relative; }
.nav__pill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(217,180,107,.25);
  opacity: 0; pointer-events: none; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; }
.nav__links:hover .nav__pill { opacity: 1; }
.nav__links a:hover { background: none; }
.nav__links a { z-index: 1; }

/* ---------- hero extras ---------- */
.hero__spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(500px circle at var(--hx, 50%) var(--hy, 50%), rgba(217,180,107,.12), transparent 60%); }
.hero:hover .hero__spot { opacity: 1; }
.hero__bgword { position: absolute; left: 0; bottom: 4%; white-space: nowrap; pointer-events: none; font-family: var(--display); font-weight: 700;
  font-size: clamp(120px, 20vw, 320px); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(217,180,107,.12); will-change: transform; }
.chip { transition: scale .4s var(--ease), border-color .3s, background .3s; cursor: default; }
.chip:hover { scale: 1.08; border-color: rgba(217,180,107,.6); background: rgba(30,26,18,.85); }
.hero__arch { transition: box-shadow .6s var(--ease); }
.hero__arch:hover { box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 10px rgba(217,180,107,.08), 0 0 80px -10px rgba(217,180,107,.35); }
.hero__video { transition: transform 1.2s var(--ease); }
.hero__arch:hover .hero__video { transform: scale(1.06); }
.hero__stats li { padding: 10px 14px; margin: -10px -14px; border-radius: 16px; transition: background .3s, transform .5s var(--ease); }
.hero__stats li:hover { background: rgba(255,255,255,.04); transform: translateY(-4px); }

/* ---------- marquee hover ---------- */
.marquee span { transition: color .3s, -webkit-text-stroke-color .3s; }
.marquee:hover span { color: var(--gold); -webkit-text-stroke-color: var(--gold); }
.marquee i { display: inline-block; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- pills / tags ---------- */
.story__tags span, .rv-tags span, .cta__steps li { transition: background .3s, color .3s, transform .5s var(--ease), border-color .3s; cursor: default; }
.story__tags span:hover, .rv-tags span:hover { background: var(--gold-grad); color: #120d04; border-color: transparent; transform: translateY(-4px) rotate(-3deg); }
.cta__steps li:hover { transform: translateY(-6px) scale(1.04); border-color: rgba(217,180,107,.6); }

/* ---------- reviews ---------- */
.rv { transition: transform .6s var(--ease), border-color .4s, background .4s !important; }
.rv:hover { transform: translateY(-10px) rotate(-1.2deg); background: #17161a; }
.rv:hover .rv__stars { animation: stars .6s var(--ease); }
@keyframes stars { 40% { letter-spacing: .45em; } }
.rv__av { transition: transform .6s var(--ease); }
.rv:hover .rv__av { transform: rotate(360deg) scale(1.1); }

/* ---------- products ---------- */
.prod__img img:first-child { transition: opacity .6s, transform 1s var(--ease); }
.prod:hover .prod__img img + img { transform: scale(1.04); }
.prod__add { position: relative; overflow: hidden; z-index: 0; }
.prod__add::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-grad); transform: translateY(101%); transition: transform .45s var(--ease); }
.prod__add:hover::before { transform: none; }
.prod__add:hover { color: #120d04; border-color: transparent; }
.fly { position: fixed; z-index: 120; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 20px var(--gold); pointer-events: none; }
.deal { transition: transform .5s var(--ease), box-shadow .5s; }
.deal:hover { transform: scale(1.05) rotate(-1.5deg); box-shadow: 0 20px 50px -20px rgba(217,180,107,.6); }
.deal__b { animation: dealpulse 2.4s ease-in-out infinite; display: inline-block; }
@keyframes dealpulse { 50% { transform: scale(1.08); } }

/* ---------- visit ---------- */
.hours tr { transition: background .3s; }
.hours tr:hover td { color: var(--gold-2); }
.hours td { transition: padding .4s var(--ease), color .3s; }
.hours tr:hover td:first-child { padding-left: 10px; }
.visit__card { transition: transform .6s var(--ease) !important; }
.visit__map { transition: transform .6s var(--ease), box-shadow .6s; }
.visit__map:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -30px rgba(217,180,107,.4); }

/* ---------- kids ---------- */
.kids__fan img { transition: transform 1s var(--ease), translate .5s var(--ease), box-shadow .4s, scale .5s var(--ease); }
.kids__fan img:hover { scale: 1.12; box-shadow: 0 40px 80px -20px rgba(217,180,107,.5); }

/* ---------- before / after ---------- */
.ba__handle span { animation: ba-pulse 2s ease-in-out infinite; }
@keyframes ba-pulse { 50% { box-shadow: 0 0 0 12px rgba(217,180,107,.18), 0 10px 30px rgba(0,0,0,.5); } }

/* ---------- reveal variants ---------- */
[data-reveal="left"] { transform: translateX(-80px) rotate(-2deg); }
[data-reveal="right"] { transform: translateX(80px) rotate(2deg); }
[data-reveal="zoom"] { transform: scale(.85); }
[data-reveal].in { transform: none; }

/* ---------- CTA grows from a card to full-bleed as you scroll ---------- */
.cta__bg { clip-path: inset(calc(var(--k, 1) * 8%) calc(var(--k, 1) * 6%) round calc(var(--k, 1) * 48px)); }

/* ---------- footer wordmark lights up under the mouse ---------- */
.foot__word { position: relative; cursor: default;
  background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(243,220,164,.95), rgba(217,180,107,.35) 35%, transparent 65%), linear-gradient(180deg, rgba(244,240,232,.14), rgba(244,240,232,0) 85%); }
.foot a { position: relative; }
.foot p a::after, .row-link b::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.foot p a:hover::after { transform: scaleX(1); transform-origin: left; }
.row-link b { position: relative; }
.row-link:hover b::after { transform: scaleX(1); transform-origin: left; }

/* ---------- booking drawer hover ---------- */
.bk-svc:hover { border-color: rgba(217,180,107,.45); background: rgba(217,180,107,.05); }
.bk-svc img { transition: transform .5s var(--ease); }
.bk-svc:hover img { transform: scale(1.1) rotate(-3deg); }
.bk-time { transition: border-color .3s, background .3s, color .3s, transform .3s var(--ease); }
.bk-time:hover { transform: translateY(-3px); background: rgba(217,180,107,.1); }
.bk-day:hover { border-color: rgba(217,180,107,.5); }

/* ---------- filters ---------- */
.filters button:not(.is-on):hover { color: var(--ink); }

/* mobile: lighter versions */
@media (max-width: 860px) {
  .hero__bgword { bottom: auto; top: 40%; font-size: 34vw; }
  .svc:hover .svc__row { padding-right: 0; }
  .svc__go { display: none; }
  .gallery:hover .g-item:not(:hover) img { filter: none; }
}

/* ================= launch fixes ================= */
html, body { overflow-x: clip; }
/* failsafe: if scripts never run, the intro screen still gets out of the way */
.loader { animation: loader-failsafe 0s 7s forwards; }
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; } }
body.is-loading { animation: unlock 0s 7s forwards; }
@keyframes unlock { to { overflow: auto; } }
/* quick intro for repeat visits in the same session */
body.fast-load .loader__panel { transition-duration: .6s; }

/* review badge */
.rv__stars { letter-spacing: .08em; font-size: 12px; font-weight: 700; text-transform: uppercase; }
@keyframes stars { 40% { letter-spacing: .2em; } }
.chip--a b { letter-spacing: .08em; }

/* hero video pause */
.hero__pause { position: absolute; top: 18px; right: 18px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10,10,11,.5); backdrop-filter: blur(10px); border: 1px solid var(--line-2); opacity: .7; transition: opacity .3s, transform .4s var(--ease); }
.hero__pause:hover { opacity: 1; transform: scale(1.1); }
.hero__pause svg { width: 14px; height: 14px; }

/* map: click to load */
.map-load { position: relative; width: 100%; height: 100%; min-height: 420px; display: grid; place-content: center; justify-items: center; gap: 8px; overflow: hidden; text-align: center; }
.map-load img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.35) saturate(1.2); transform: scale(1.1); transition: transform 1s var(--ease), filter .6s; }
.map-load:hover img { transform: scale(1.18); filter: blur(2px) brightness(.45) saturate(1.3); }
.map-load > *:not(img) { position: relative; }
.map-load__pin { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: #120d04; margin-bottom: 6px;
  box-shadow: 0 0 0 0 rgba(217,180,107,.5); animation: pin-ping 2.2s infinite; transition: transform .5s var(--ease); }
.map-load:hover .map-load__pin { transform: translateY(-6px) scale(1.08); }
@keyframes pin-ping { 0% { box-shadow: 0 0 0 0 rgba(217,180,107,.5); } 100% { box-shadow: 0 0 0 26px rgba(217,180,107,0); } }
.map-load__pin svg { width: 28px; height: 28px; }
.map-load b { font-family: var(--display); font-size: 22px; font-weight: 600; }
.map-load small { color: var(--muted); font-size: 13px; }

/* footer legal */
.foot__legal { display: flex; gap: 22px; }
.foot__legal a:hover { color: var(--gold-2); }
.bk-small a { color: var(--gold); text-decoration: underline; }

/* announcement bar (set SHOP.notice in js/data.js) */
.notice { position: fixed; top: 0; left: 0; right: 0; z-index: 85; padding: 8px 16px; text-align: center; font-size: 14px; font-weight: 600; color: #120d04; background: var(--gold-grad); }
body.has-notice .nav { top: 50px; }
body.has-notice .hero { padding-top: 160px; }

/* phones: no sideways heading drift */
@media (max-width: 860px) {
  .sec-head h2, .transform__copy h2, .kids__copy h2 { translate: none !important; }
  .map-load, .visit__map iframe { min-height: 320px; }
}

/* ---------- story slideshow: shown smaller so the (small) source photos stay crisp,
   with a light film texture + vignette. Swap in full-size originals to enlarge again. ---------- */
.story__grid { grid-template-columns: 1.35fr .65fr; }
.story__stack { width: min(100%, 380px); max-height: 62vh; }
.story__img img { filter: contrast(1.06) saturate(1.08); }
.story__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; }
.story__img figcaption { z-index: 1; }
@media (max-width: 860px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__stack { width: min(100%, 300px); }
}

/* Chrome autofill paints inputs light blue; keep them on-brand */
.bk-form input:-webkit-autofill, .bk-form input:-webkit-autofill:hover, .bk-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #1b1a17 inset; box-shadow: 0 0 0 1000px #1b1a17 inset;
  transition: background-color 9999s ease-out 0s; border-color: rgba(217,180,107,.5); }
.bk-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #1b1a17 inset, 0 0 0 4px rgba(217,180,107,.14); }

/* ================= phones: calmer sizing (less "zoomed in") ================= */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .eyebrow { font-size: 11px; letter-spacing: .2em; margin-bottom: 14px; }
  h2 { font-size: clamp(28px, 8.4vw, 36px); }
  .sec-head { margin-bottom: 30px; }
  .services, .work, .transform, .kids, .products, .reviews, .visit { padding: 64px 0; }

  /* hero */
  .hero { padding: 96px 0 60px; min-height: auto; }
  .hero__title { font-size: clamp(32px, 10vw, 42px); margin-bottom: 18px; }
  .hero__lead { font-size: 15px; margin-bottom: 24px; }
  .hero__cta { gap: 8px; margin-bottom: 30px; }
  .hero__cta .btn { height: 48px; padding: 0 14px; font-size: 14px; gap: 6px; }
  .hero__cta .btn svg { width: 15px; height: 15px; }
  .hero__stats b { font-size: 26px; }
  .hero__stats li > span { font-size: 18px; }
  .hero__stats small { font-size: 12px; }
  .hero__media { width: min(280px, 72%); }
  .hero__bgword { font-size: 28vw; }

  /* marquee + story */
  .marquee { padding: 18px 0; }
  .marquee span { font-size: 24px; }
  .story__pin { padding: 64px 0; }
  .story__words { font-size: 20px; line-height: 1.25; }
  .story__tags span, .rv-tags span { font-size: 13px; padding: 6px 12px; }
  .story__stack { width: min(100%, 260px); }

  /* services */
  .svc__row { grid-template-columns: 52px 1fr auto; gap: 12px; padding: 16px 0; }
  .svc__thumb { width: 52px; height: 52px; border-radius: 12px; }
  .svc__name { font-size: 18px; }
  .svc__name small { font-size: 13px; margin-top: 4px; }
  .svc__tag { font-size: 10.5px; padding: 3px 8px; margin-left: 6px; }
  .svc__mins { font-size: 12.5px; margin-top: -6px; }
  .svc__price { font-size: 22px; }
  .svc-note { font-size: 14px; }

  /* gallery, before/after, kids */
  .filters button { padding: 7px 12px; font-size: 13px; }
  .g-item { border-radius: 14px; }
  .transform__copy p:not(.eyebrow) { margin: 16px 0 20px; font-size: 15px; }
  .ba { border-radius: 20px; width: 100%; max-width: 340px; justify-self: center; }
  .ba__handle span { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .kids__fan { height: 220px; }
  .kids__fan img { width: 40%; border-width: 4px; border-radius: 14px; }
  .kids__copy > p:not(.eyebrow) { margin: 16px 0; font-size: 15px; }
  blockquote { font-size: 16px; margin-bottom: 22px; }

  /* products */
  .deal { font-size: 15px; padding: 8px 14px; gap: 10px; }
  .prod__body { padding: 12px 12px 14px; }
  .prod__body h4 { font-size: 16px; }
  .prod__body small { font-size: 11.5px; }
  .prod__add { margin: 0 12px 12px; height: 36px; font-size: 13px; }

  /* reviews */
  .big-num { font-size: 76px; }
  .reviews__head h2 { font-size: 26px; }
  .rv { width: 270px; padding: 18px; gap: 12px; }
  .rv q { font-size: 15px; }

  /* visit + cta + footer */
  .visit__card { padding: 22px; }
  .visit__status b { font-size: 20px; }
  .hours { font-size: 14.5px; }
  .visit__where h3 { font-size: 21px; margin-bottom: 16px; }
  .row-link { font-size: 14px; padding: 10px 0; }
  .cta { padding: 90px 0; }
  .cta h2 { font-size: 42px; }
  .cta__steps { margin: 26px 0; gap: 8px; }
  .cta__steps li { font-size: 14px; padding: 9px 14px; }
  .btn--lg { height: 52px; font-size: 15px; }
  .foot { padding-top: 56px; }
  .foot__logo { height: 56px; }
  .foot p { font-size: 14px; }

  /* booking drawer */
  .bk__head h3 { font-size: 24px; }
  .bk-svc { grid-template-columns: 52px 1fr auto; gap: 12px; padding: 8px 14px 8px 8px; }
  .bk-svc img { width: 52px; height: 52px; }
  .bk-svc b { font-size: 15.5px; }
  .bk-svc .pr { font-size: 19px; }
  .bk-day { width: 56px; padding: 10px 0; }
  .bk-day b { font-size: 19px; }
  .bk-time { height: 40px; font-size: 14px; }
}