/* ============================================================
   MYSTERY EXPERIENCE — THE APERTURE

   One idea, expressed everywhere.

   The whole site is lit through a keyhole. A single inherited
   number, --ap (aperture, 0 → 1), governs every pool of gold
   light and every hairline on the page. Scroll, hover, tap and
   focus are all the same verb at different scales: widen the
   opening.

   What you have passed is lit. Where you are is lit. One stop
   ahead is a dim doorway. Past that is dark until you go there —
   which is exactly what the product sells.

   THE RULE THAT KEEPS IT HONEST
   --ap only ever drives decoration: gold light, hairline alpha
   and the angle of a key. It never touches the colour, size or
   position of body text. Measured: dimming text would need
   slate-text held at 98% opacity on Deep Navy just to stay at
   WCAG AA, so text is never dimmed at all. An unlit section is
   not a greyed-out section — it is a section with the lamps off.

   THIS FILE REPLACES, IT DOES NOT ADD. The torchlight, the
   scroll progress bar, the card tilt, the magnetic buttons, the
   per-card bloom and the headline word-stagger are all deleted
   in motion.css/motion.js. Six behaviours out, one in.
   ============================================================ */

/* The registration is what makes --ap interpolable, so a gradient
   radius and an alpha can transition. initial-value:1 is the
   safety net: with no JS, no support, or a failed script, every
   stop is fully open and the site is simply finished. */
@property --ap {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root{
  --ap-line: rgb(232 163 61 / calc(.05 + .17 * var(--ap)));   /* lands on .22 = --line at full */
  --ap-soft: rgb(155 163 188 / calc(.06 + .12 * var(--ap)));
  --route: 0;                                                  /* opened stops ÷ total */
}

/* ============================================================
   STOPS
   Every section is a stop on the route. Opened stops never close
   again — you don't un-visit a place you've been.
   ============================================================ */

[data-stop]{ position: relative; }
[data-stop] > *{ position: relative; z-index: 1; }

/* the pool of light. One per stop, aimable with the pointer. */
[data-stop]::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(
    calc(200px + 620px * var(--ap)) circle at var(--kx, 50%) var(--ky, 16%),
    rgb(232 163 61 / calc(.12 * var(--ap))),
    transparent 72%);
}

/* THE OPENING BEAT.
   A thin gold rule draws outward from the centre as each stop opens —
   the aperture, made literal, once per section. Thin gold rules are
   the brand's own vocabulary, so this reads as the house style rather
   than as an effect. It is the most visible thing the system does. */
[data-stop]::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  pointer-events:none;
  background: linear-gradient(90deg,
    transparent, rgb(232 163 61 / .55) 22%, rgb(232 163 61 / .55) 78%, transparent);
  transform: scaleX(var(--ap));
  transform-origin: 50% 0;
}
/* the hero is the top of the page — no rule needed above it */
.hero[data-stop]::after{ display:none; }

/* Only once JS has proven it can open them does anything close. */
.aperture [data-stop]{
  --ap: 0;
  transition: --ap 620ms cubic-bezier(.22,.61,.36,1);
}
.aperture [data-stop].ahead{ --ap: .28; }   /* the doorway: something is there */
.aperture [data-stop].open { --ap: 1; }

/* ============================================================
   HAIRLINES
   Gold rules ignite as their stop opens. This is where most of
   the feeling lives — it is nearly invisible and completely
   legible at the same time.
   ============================================================ */

.aperture [data-stop] .step,
.aperture [data-stop] .pkg,
.aperture [data-stop] .card,
.aperture [data-stop] .exp,
.aperture [data-stop] .member-card,
.aperture [data-stop] .note,
.aperture [data-stop] .table-scroll,
.aperture [data-stop] .cmp-stage,
.aperture [data-stop] .rv-wrap{
  border-color: var(--ap-line);
}
.aperture [data-stop] .faq,
.aperture [data-stop] .q,
.aperture [data-stop] .hero-meta,
.aperture [data-stop] .night-stops,
.aperture [data-stop] .night-seal{
  border-color: var(--ap-soft);
}
.aperture [data-stop] .rule{
  background: linear-gradient(90deg, transparent, var(--ap-line), transparent);
}
/* the gold counter on the numbered steps brightens with its stop */
.aperture [data-stop] .step::before{
  color: rgb(232 163 61 / calc(.10 + .22 * var(--ap)));
}
/* and the drawn edge is the aperture, not a separate animation */
.aperture [data-stop] .step::after{
  transform: scaleY(var(--ap));
  transition: transform 760ms cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   AIMING THE LIGHT
   Hover, focus and touch are the same verb as scrolling: they
   widen an opening. Nothing tilts, nothing lifts, nothing pulls
   toward the cursor — a magnet is not a keyhole.
   ============================================================ */

[data-ap]{ position: relative; }

@media (hover:hover) and (pointer:fine){
  /* look at one thing and it opens, even in a stop you haven't reached */
  .aperture [data-ap]:hover{
    --ap: 1;
    transition: --ap 260ms cubic-bezier(.22,.61,.36,1);   /* quick in */
  }
  .aperture [data-ap]{
    transition: --ap 420ms cubic-bezier(.22,.61,.36,1);   /* slow out */
  }
}

/* keyboard opens the site in exactly the same way walking it does */
.aperture [data-ap]:focus-visible,
.aperture [data-ap]:focus-within{
  --ap: 1;
  transition: --ap 260ms cubic-bezier(.22,.61,.36,1);
}

/* the thumb is the key: the tumbler catches, then seats */
.aperture [data-ap].pressing{
  --ap: .62;
  transition: --ap 90ms linear;
}

/* gold buttons widen their own pool rather than chasing the pointer */
.btn-gold{ position: relative; overflow: hidden; }
.btn-gold::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(
    calc(40px + 56px * var(--ap)) circle at var(--kx, 50%) var(--ky, 50%),
    rgb(255 255 255 / calc(.16 * var(--ap))), transparent 70%);
}

/* ============================================================
   THE KEY IN THE NAV
   The route indicator. It turns as you move through the page and
   is upright again at the top. It replaces the progress bar,
   because a bar measures a document and a key measures a night.
   Capped well short of a full quarter turn so it reads as
   deliberate rather than as a glyph bug.
   ============================================================ */
.nav .mark .mark-centre{
  transform-box: view-box;
  transform-origin: 60px 60px;
  transform: rotate(calc(70deg * var(--route)));
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   404 — the one door that never opens
   ============================================================ */
.aperture .oops[data-stop]{ --ap: .28 !important; }
.oops .sealed-note{
  display:block; margin-top:26px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--slate-text);
}

/* ============================================================
   REDUCED MOTION / NO JS / NO @property SUPPORT
   All three land in the same place: --ap is 1 everywhere, nothing
   transitions, every hairline is gold and the key is turned. That
   is not a degraded variant — it is the finished state of a route
   already walked, and it is the calmest the site ever looks.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .aperture [data-stop],
  .aperture [data-stop].ahead,
  .aperture [data-stop].open,
  .aperture [data-ap]{
    --ap: 1 !important;
    transition: none !important;
  }
  .aperture .oops[data-stop]{ --ap: 1 !important; }
  .aperture [data-stop] .step::after{ transform: scaleY(1); transition: none; }
  .nav .mark .mark-centre{ transform: none; transition: none; }
}