/* ============================================================
   MYSTERY EXPERIENCE — motion and interaction layer

   Everything here is additive. Delete this file and motion.js and
   the site still works exactly as before — the base stylesheet is
   untouched.

   Rules this layer keeps to:
     · Gold and dark only. No new hues, no neon, no gradients that
       read as decoration rather than light.
     · Nothing hides content. Sealed states are applied by JS only
       after it confirms it can un-seal them again.
     · Every animation stops under prefers-reduced-motion.
     · No layout shift. Transforms and opacity only.
   ============================================================ */

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

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
::view-transition-old(root){animation-name:vt-out}
::view-transition-new(root){animation-name:vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- numbers that count up ---------- */
.counting{font-variant-numeric:tabular-nums}

/* ============================================================
   WHOLE-CARD SELECTION

   The button inside each package card stretches invisibly over the
   entire card, so clicking anywhere on "The Duo" books the Duo.
   The real link is still the only link — so the accessible name,
   the focus ring and the keyboard path are all unchanged.
   ============================================================ */
.pkg,.member{position:relative;cursor:pointer}
/* site.css positions every direct child of .pkg to sit above the gold bloom.
   The button has to opt out of that, or its stretched overlay contains to the
   button instead of the card. The bloom is pointer-events:none, so the button
   painting beneath it costs nothing. */
.pkg > .btn{position:static}
.pkg > .btn::after,
.member .btn::after{
  content:"";position:absolute;inset:0;z-index:5;border-radius:var(--r);
}
/* the card reacts as one piece, wherever the pointer is on it */
.pkg:hover .btn-gold,.member:hover .btn-gold{
  transform:translateY(-2px);box-shadow:0 12px 34px rgba(232,163,61,.34);
}
.pkg:hover .btn-ghost,.member:hover .btn-ghost{
  border-color:var(--gold);background:var(--gold-glow);transform:translateY(-2px);
}
/* keep the focus ring on the button itself, not the whole card */
.pkg > .btn:focus-visible::after{outline:2px solid var(--gold);outline-offset:-3px;border-radius:var(--r)}

/* sample-night cards select the same way — tap anywhere to unlock */
.nights-ready [data-night]{cursor:pointer}

/* ============================================================
   LIVING MARKS

   motion.js inlines each package mark so the centre glyph can move
   on its own. The ring never changes — that is the brand rule — so
   only the centre responds.
   ============================================================ */
.pkg-mark .mark-centre{
  transform-box:view-box;transform-origin:60px 60px;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.pkg:hover .pkg-mark[data-v="duo"] .mark-centre{transform:scale(1.18)}
.pkg:hover .pkg-mark[data-v="group"] .mark-centre{transform:rotate(60deg)}
.pkg:hover .pkg-mark[data-v="special"] .mark-centre{transform:rotate(90deg) scale(1.12)}
.member:hover .pkg-mark[data-v="member"] .mark-centre{transform:scale(1.1)}

/* ---------- step cards: a gold edge that draws itself ---------- */
.step{overflow:hidden}
.step::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(232,163,61,.15));
  transform:scaleY(0);transform-origin:0 0;
  transition:transform 1.05s var(--ease) .12s;
}


/* ============================================================
   SIGNATURE INTERACTION — sealed nights

   The whole product is "you find out as it unfolds". These cards
   let you feel that: the shape of an evening arrives one stop at
   a time, and never names a venue.

   The sealed state is applied by JS (html.nights-ready) so that
   with JS off — or if motion.js fails to load — every stop is
   simply visible and nothing is lost.
   ============================================================ */

.night-stops{
  list-style:none;margin:18px 0 0;padding:0;
  border-top:1px solid var(--line-soft);
}
.night-stops li{
  display:flex;gap:14px;align-items:baseline;
  padding:13px 0 0;font-size:.92rem;color:var(--mist);
}
.night-stops li .t{
  flex:0 0 62px;font-family:var(--serif);font-size:.95rem;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.night-stops li .d{flex:1}

.night-seal{display:none}

/* --- states below only exist once JS is ready --- */
/* two rows beside the keyhole, so a long label never wraps mid-phrase
   in a narrow card */
.nights-ready .night-seal{
  display:grid;grid-template-columns:auto 1fr;gap:3px 14px;align-items:center;
  width:100%;margin-top:18px;padding:14px 4px 2px;border-top:1px solid var(--line-soft);
  text-align:left;color:var(--mist);transition:color .3s;
}
.nights-ready .night-seal .keyhole{grid-row:1 / span 2;align-self:center}
.nights-ready .night-seal .sl{grid-column:2;grid-row:1}
.nights-ready .night-seal .sh{grid-column:2;grid-row:2}
.nights-ready .night-seal:hover{color:var(--cream)}
.nights-ready .night-seal .keyhole{
  width:26px;height:26px;flex:0 0 auto;color:var(--gold);
  transition:transform .5s var(--ease),opacity .3s;opacity:.75;
}
.nights-ready .night-seal:hover .keyhole{transform:rotate(-14deg);opacity:1}
.nights-ready .night-seal .sl{font-size:.95rem;letter-spacing:.01em;line-height:1.25}
.nights-ready .night-seal .sh{
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-text);
  line-height:1.3;
}

.nights-ready [data-night] .night-stops{
  overflow:hidden;max-height:0;margin-top:0;border-top-color:transparent;
  transition:max-height .8s var(--ease),margin-top .5s var(--ease);
}
/* JS sets an exact max-height inline; this is the fallback if it can't */
.nights-ready [data-night].open .night-stops{
  max-height:600px;margin-top:18px;border-top-color:var(--line-soft);
}
.nights-ready [data-night].open .night-seal .keyhole{transform:rotate(90deg);opacity:1}

/* each stop arrives on its own beat, with a gold pass across it */
.nights-ready [data-night] .night-stops li{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.nights-ready [data-night].open .night-stops li{opacity:1;transform:none}
.nights-ready [data-night].open .night-stops li:nth-child(1){transition-delay:.10s}
.nights-ready [data-night].open .night-stops li:nth-child(2){transition-delay:.42s}
.nights-ready [data-night].open .night-stops li:nth-child(3){transition-delay:.74s}
.nights-ready [data-night].open .night-stops li:nth-child(4){transition-delay:1.06s}

.nights-ready [data-night].open .night-stops li .t{
  animation:goldpass 1.1s var(--ease) both;
}
.nights-ready [data-night].open .night-stops li:nth-child(1) .t{animation-delay:.10s}
.nights-ready [data-night].open .night-stops li:nth-child(2) .t{animation-delay:.42s}
.nights-ready [data-night].open .night-stops li:nth-child(3) .t{animation-delay:.74s}
.nights-ready [data-night].open .night-stops li:nth-child(4) .t{animation-delay:1.06s}
@keyframes goldpass{
  0%{color:var(--cream);text-shadow:0 0 14px rgba(232,163,61,.85)}
  100%{color:var(--gold);text-shadow:none}
}

/* the card itself warms as it unlocks */
.nights-ready [data-night].open{border-color:var(--line)}
.nights-ready [data-night].open .exp-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 100%,rgba(232,163,61,.20),transparent 62%);
  animation:warm .9s var(--ease) both;
}
@keyframes warm{from{opacity:0}to{opacity:1}}

/* ---------- booking confirmation: the seal turns ---------- */
.js .conf .seal{animation:sealturn 1.5s var(--ease) both}
@keyframes sealturn{
  0%{transform:rotate(-38deg) scale(.82);opacity:0}
  55%{opacity:1}
  100%{transform:none;opacity:1}
}
.js .conf .ref{animation:refin .7s var(--ease) .55s both}
@keyframes refin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.js .conf .tl li{animation:tlin .6s var(--ease) both}
.js .conf .tl li:nth-child(1){animation-delay:.75s}
.js .conf .tl li:nth-child(2){animation-delay:.9s}
.js .conf .tl li:nth-child(3){animation-delay:1.05s}
.js .conf .tl li:nth-child(4){animation-delay:1.2s}
@keyframes tlin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---------- booking step change ---------- */
.js .pane.on{animation:panein .45s var(--ease) both}
@keyframes panein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- selected package pulses once ---------- */
.opt.sel .om{animation:marklock .55s var(--ease)}
@keyframes marklock{
  0%{transform:scale(1)}
  45%{transform:scale(1.14) rotate(-8deg)}
  100%{transform:scale(1)}
}

/* ============================================================
   REDUCED MOTION — everything above goes quiet.
   Sealed nights fall open and stay open.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  @view-transition { navigation: none; }
  .step::after{transform:scaleY(1);transition:none}
  .nights-ready .night-seal{display:none}
  .nights-ready [data-night] .night-stops{max-height:none;margin-top:18px;
    border-top-color:var(--line-soft);transition:none}
  .nights-ready [data-night] .night-stops li{opacity:1;transform:none;transition:none;animation:none}
  .js .conf .seal,.js .conf .ref,.js .conf .tl li,.js .pane.on,.opt.sel .om{animation:none}
}

/* ---------- coarse pointers: no tilt, no torch, bigger tap targets ---------- */
@media (hover:none){
  .nights-ready .night-seal{padding:16px 4px 4px}
}

/* ---------- confirmation countdown ----------
   The wait is the product. Rather than describing it, count it. */
.conf-count{
  display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:0 0 24px;padding:12px 22px;border-radius:12px;
  border:1px solid var(--line-soft);background:rgba(14,20,40,.5);
}
.conf-count b{
  font-family:var(--serif);font-size:1.45rem;color:var(--gold);font-weight:400;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
}
.conf-count span{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-text);
}
.conf-count:empty{display:none}
.js .conf .conf-count{animation:refin .7s var(--ease) .68s both}
@media (max-width:430px){ .conf-count b{font-size:1.2rem} }