/* ============================================================
   MYSTERY EXPERIENCE — LIVE

   The client has asked five times for the site to feel obviously
   alive: every touch reactive, every scroll noticeable. The brand
   sheet asks for restraint; the owner has overridden that
   repeatedly and explicitly. This file is that decision.

   Everything here is loud on purpose. It is the LAST stylesheet
   loaded, so it wins. Delete this one file and the restrained
   version is back, untouched.
   ============================================================ */

/* ---------- 1. THE TORCH ----------
   A real cone of light that follows the cursor across the whole
   page, not just the hero. Strong enough to see clearly. It only
   ADDS light — it never darkens anything — so text contrast is
   never reduced anywhere. */
.torchlight{
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  transition: opacity .5s ease;
  background:
    radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
      rgb(232 163 61 / .20), rgb(232 163 61 / .09) 42%, transparent 68%),
    radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
      rgb(255 214 150 / .16), transparent 70%);
}
.torch-on .torchlight{ opacity: 1; }

/* ---------- 2. THE PAGE OPENS ----------
   First load irises open from the centre, like a lock turning.
   Once per visit, then never again. */
@keyframes iris{
  0%   { clip-path: circle(0% at 50% 42%); opacity:.4 }
  100% { clip-path: circle(150% at 50% 42%); opacity:1 }
}
.iris main,
.iris header.nav{ animation: iris 1100ms cubic-bezier(.22,.61,.36,1) both; }

/* ---------- 3. CARDS REACT HARD ----------
   Lift, glow, gold border, and a light that tracks the pointer.
   You should not be able to miss that a card is alive. */
.pkg, .card, .exp, .step, .member-card, .note{
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    box-shadow .38s ease,
    border-color .38s ease,
    background-color .38s ease;
}
@media (hover:hover) and (pointer:fine){
  .pkg:hover, .card:hover, .exp:hover, .step:hover, .member-card:hover, .note:hover{
    transform: translateY(-10px) scale(1.014);
    border-color: var(--gold) !important;
    box-shadow:
      0 26px 60px rgb(0 0 0 / .55),
      0 0 0 1px rgb(232 163 61 / .5),
      0 0 44px rgb(232 163 61 / .22);
    background-color: rgb(33 44 82 / .78);
  }
  /* a bright pool inside the card, wherever the pointer is */
  .pkg::after, .card::after, .exp::after, .step::after, .member-card::after{
    background: radial-gradient(320px circle at var(--cx,50%) var(--cy,50%),
      rgb(232 163 61 / .16), transparent 70%) !important;
    opacity: 0; transition: opacity .35s ease;
  }
  .pkg:hover::after, .card:hover::after, .exp:hover::after,
  .step:hover::after, .member-card:hover::after{ opacity: 1; }
}

/* the package marks get a real glow when their card is live */
.pkg:hover .pkg-mark, .member:hover .pkg-mark{
  filter: drop-shadow(0 0 14px rgb(232 163 61 / .75));
  transition: filter .35s ease;
}

/* ---------- 4. BUTTONS ----------
   Bigger, brighter, and they answer every press. */
.btn{ transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease,
                  background .22s ease, border-color .22s ease, color .22s ease; }
.btn-gold:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 44px rgb(232 163 61 / .5), 0 0 30px rgb(232 163 61 / .35);
}
.btn-ghost:hover{
  transform: translateY(-3px) scale(1.03);
  border-color: var(--gold);
  background: rgb(232 163 61 / .16);
  box-shadow: 0 0 26px rgb(232 163 61 / .22);
}
.btn:active{ transform: translateY(0) scale(.975); }

/* ---------- 5. EVERY TAP ANSWERS ----------
   A gold ring expands from the exact point you touched. Works for
   mouse and thumb alike. */
.ripple{
  position: fixed; z-index: 90; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 1.5px solid rgb(232 163 61 / .85);
  animation: ripple 620ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ripple{
  0%   { transform: scale(1);  opacity: .9 }
  100% { transform: scale(16); opacity: 0 }
}

/* ---------- 6. WHOLE-CARD SELECTION, MADE OBVIOUS ----------
   The entire card is the button. It says so on hover. */
.pkg, .member{ cursor: pointer; }
.pkg:hover .btn-gold, .member:hover .btn-gold{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 44px rgb(232 163 61 / .5);
}
.pkg:hover .btn-ghost, .member:hover .btn-ghost{
  border-color: var(--gold); background: rgb(232 163 61 / .16);
}
/* a hairline frame that closes around the card you're about to pick */
.pkg::before{
  content:""; position:absolute; inset:0; border-radius:var(--r);
  border:1px solid transparent; pointer-events:none; z-index:4;
  transition: border-color .3s ease;
}
.pkg:hover::before{ border-color: rgb(232 163 61 / .55); }

/* ---------- 7. SECTIONS ARRIVE ----------
   Bigger, more obvious entrance than a fade. */
.js .lift{
  opacity: 0;
  transform: translateY(46px) scale(.985);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .lift.shown{ opacity: 1; transform: none; }

/* ---------- 8. NAV ----------
   The links answer the pointer too. */
.nav-links a:not(.btn){ transition: color .25s ease, transform .25s ease; }
.nav-links a:not(.btn):hover{ color: var(--gold); transform: translateY(-2px); }

/* ---------- calm everything down when asked ---------- */
@media (prefers-reduced-motion: reduce){
  .torchlight{ display:none }
  .iris main, .iris header.nav{ animation:none }
  .ripple{ display:none }
  .pkg:hover, .card:hover, .exp:hover, .step:hover, .member-card:hover, .note:hover{
    transform:none; box-shadow:none;
  }
  .btn-gold:hover, .btn-ghost:hover{ transform:none; box-shadow:none }
  .js .lift{ opacity:1; transform:none; transition:none }
}
/* no torch or tilt on a touch screen — the ripple is the feedback there */
@media (hover:none){
  .torchlight{ display:none }
}

/* ---------- 9. THE MARK IN 3D ----------
   A real solid object, rendered by mark3d.js on a canvas. It only
   replaces the flat SVG once the canvas is actually drawing, so a
   browser without canvas keeps the original mark. */
.mark3d{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; display:block; pointer-events:none;
  filter: drop-shadow(0 0 26px rgb(232 163 61 / .28));
}
.hero-art.has-3d > svg{ opacity:0; visibility:hidden; }   /* the flat one steps aside */
.hero-art.has-3d .halo{ opacity:.85 }
.oops-art{position:relative;width:190px;height:190px;margin:0 auto 30px}
.oops-art > svg{width:100%;height:100%}
.oops-art.has-3d > svg{opacity:0;visibility:hidden}

/* ---------- 10. TURN THE LOCK ----------
   The one gesture on the site. Grab the 3D mark and turn it; turn
   it far enough and it opens, and something appears that was not
   there before. Once per visit. */
.lock-prompt{
  position:absolute; left:50%; bottom:2%; transform:translateX(-50%);
  z-index:5; margin:0; pointer-events:none;
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--slate-text); white-space:nowrap;
  transition:opacity .5s ease;
}
.lock-prompt span{
  display:inline-block;
  animation:nudge 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes nudge{
  0%,62%,100%{transform:translateX(0);opacity:.55}
  76%{transform:translateX(9px);opacity:1}
}
.hero-art.turning .lock-prompt,
.hero-art.unlocked .lock-prompt{opacity:0}

/* what is behind the lock.
   On unlock the mark makes room rather than being written over —
   it lifts and shrinks, and the copy takes the space beneath it. */
.hero-art.unlocked .mark3d{
  transform:scale(.62) translateY(-20%);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.lock-opened{
  position:absolute; inset:auto 0 2% 0; z-index:6;
  text-align:center; opacity:0; transform:translateY(14px);
  pointer-events:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) .35s,
             transform .7s cubic-bezier(.22,.61,.36,1) .35s;
}
.hero-art.unlocked .lock-opened{opacity:1;transform:none;pointer-events:auto}
.lock-opened .lo-line{
  font-family:var(--serif); font-size:1.06rem; color:var(--cream);
  margin:0 0 2px;
}
.lock-opened .lo-sub{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px;
}
.lock-opened .btn{padding:11px 24px;font-size:.88rem}

/* the moment it gives way */
.hero-art.unlocked .mark3d{
  animation:unlockflash 900ms cubic-bezier(.22,.61,.36,1) 1;
}
@keyframes unlockflash{
  0%  {filter:drop-shadow(0 0 26px rgb(232 163 61 / .28))}
  22% {filter:drop-shadow(0 0 70px rgb(255 214 150 / .95))}
  100%{filter:drop-shadow(0 0 26px rgb(232 163 61 / .28))}
}
.hero-art.unlocked .halo{opacity:1;transition:opacity .8s ease}

/* The panel has to stay OUT of the grid flow. .hero-art is an aspect-ratio:1
   grid and the canvas is pinned at inset:0, so a static child takes a row of
   its own and lands squarely on the mark — which also pushed the flat SVG into
   a second row and out of the square. Room is made the way the desktop does
   it: the mark shrinks and lifts, harder here because the box is smaller. */
@media (max-width:1000px){
  .lock-opened{inset:auto 0 0 0}
  .hero-art.unlocked .mark3d{transform:scale(.52) translateY(-30%)}
  .lock-prompt{bottom:-6%}
}
@media (prefers-reduced-motion:reduce){
  /* the turn is disabled here, so the lock can never be opened — show what is
     behind it from the start, but in the place the unlocked layout puts it */
  .lock-prompt{display:none}
  /* pointer-events too: the host never gets .unlocked here, so without this
     the revealed CTA would be visible but untappable */
  .lock-opened{opacity:1;transform:none;transition:none;pointer-events:auto}
  .hero-art .mark3d{transform:scale(.62) translateY(-20%);transition:none}
  .hero-art.unlocked .mark3d{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:1000px){
  .hero-art .mark3d{transform:scale(.52) translateY(-30%)}
}

/* ---------- 11. TOUCH TARGETS ----------
   Measured on a 390px screen: footer links, the "more" links and
   the contact email links were all around 22px tall — well under
   the 44px that a thumb needs. They now have real height without
   changing how they look. */
@media (max-width:760px){
  .f-grid li a,
  .more,
  .card .mail,
  .f-bot a{
    display:inline-flex; align-items:center;
    min-height:44px;
  }
  .f-grid li{margin-bottom:2px}
  .nav-links a:not(.btn){min-height:48px;display:flex;align-items:center}
}
/* pointer users get a slightly larger hit area too, without the layout moving */
.f-grid li a{position:relative}
.f-grid li a::after{content:"";position:absolute;inset:-8px -6px}

/* ---------- 12. LAUNCH LIST ----------
   The one thing the site was missing: a way for an interested
   person to leave their name. Netlify Forms, so it needs no
   backend and no build step. */
.signup{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin:0 auto; max-width:560px;
}
.signup input[type=email]{
  flex:1 1 260px; min-width:0;
  padding:15px 18px; border-radius:100px;
  background:rgba(14,20,40,.75); border:1px solid var(--line-soft);
  color:var(--cream); font-size:1rem;
  transition:border-color .25s, box-shadow .25s;
}
.signup input[type=email]::placeholder{color:var(--slate-text)}
.signup input[type=email]:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow);
}
.signup button{flex:0 0 auto}
.signup .hp{position:absolute;left:-9999px}   /* honeypot, hidden from people */
.signup-note{
  margin:16px auto 0; max-width:52ch;
  font-size:.82rem; color:var(--slate-text); text-align:center;
}
@media (max-width:560px){
  .signup input[type=email], .signup button{width:100%}
}

/* the last two measured under-size targets on a 390px screen */
.lockup{min-height:44px}
.rv-stage{min-height:44px; display:flex; align-items:center}
.rv-stage:last-child{justify-content:flex-end}
@media (max-width:760px){
  .restart{min-height:44px; display:inline-flex; align-items:center}
  .card .mail, .f-bot a{min-height:44px}
}

/* ---------- 13. STEP CARDS LEAD SOMEWHERE ----------
   Each of the four steps on the home page now opens its own step on
   the full walkthrough — four different destinations, not four links
   to one page. The label is visible so it is obvious the card is
   clickable, and it is a real <a>, so the keyboard reaches it. */
.step{cursor:pointer}
.step-go{
  display:inline-flex; align-items:center; gap:2px; margin-top:18px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-text); font-weight:600;
  transition:color .3s ease, transform .3s ease;
}
.step:hover .step-go{ color:var(--gold); transform:translateX(3px); }
/* stretch the link over its whole card */
.step-go::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:var(--r); }
.step-go:focus-visible::after{ outline:2px solid var(--gold); outline-offset:-3px; }

/* the sticky header must not cover the step you just jumped to */
#step-choose, #step-vibe, #step-plan, #step-show{ scroll-margin-top:112px; }

/* founder profile link on the team card */
.member-link{
  display:inline-block; margin-top:10px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-text); font-weight:600;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.member-link:hover{ color:var(--gold); border-bottom-color:var(--gold); }