/* ============================================================
   MAGIC — the chosen on-brand effects for Adelaide Magic Theatre.
   Sam's picks: follow-spot cursor, gold magic-dust, ticket-tear
   CTAs, riffle reviews, 404 vanishing act, and the abracadabra
   50%-off easter egg. All gated behind html.magic-on (added by
   magic.js only when motion is allowed). Curtain intro untouched.
============================================================ */
:root{ --mg-gold:#C9A84C; --mg-gold-hi:#e8c866; --mg-velvet:#8d1f2d; }

/* ---- 1. Follow-spot cursor (hero) ---------------------------------------
   A soft gold light trails the cursor over the hero — a follow-spot in a
   darkened room. Subtle: it brightens, never dims the copy. */
html.magic-on .hero .mg-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,38%),
    rgba(201,168,76,0.16), rgba(201,168,76,0.05) 45%, transparent 70%);
  opacity:0; transition:opacity .6s ease; mix-blend-mode:screen;
}
html.magic-on .hero:hover .mg-spot{ opacity:1; }
@media (hover:none){ html.magic-on .hero .mg-spot{ display:none; } }

/* ---- 2. Gold magic-dust (ambient, fixed over the page) ------------------ */
html.magic-on .mg-dust{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:3; opacity:.7;
}

/* ---- 3. Book button hover — a clean, normal lift ----------------------- */
html.magic-on .mg-ticket{
  transition:transform .22s ease, box-shadow .22s ease;
}
html.magic-on .mg-ticket:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(201,168,76,.32);
}
html.magic-on .mg-ticket:active{ transform:translateY(0); }

/* ---- 4. Riffle reviews --------------------------------------------------
   When the reviews section enters view, the cards riffle into place from a
   stacked deck, dealt in fast succession. */
html.magic-on .reviews-grid.mg-deck .review-card{
  opacity:0;
  transform:translate(var(--rf-x,0), 26px) rotate(var(--rf-r,0deg)) scale(.94);
  transition:opacity .45s ease, transform .6s var(--mg-spring,cubic-bezier(.34,1.56,.64,1));
}
html.magic-on .reviews-grid.mg-deck .review-card.mg-in{ opacity:1; transform:none; }
html.magic-on .review-card{ transition:transform .4s var(--mg-spring,cubic-bezier(.34,1.56,.64,1)), box-shadow .3s ease; }
html.magic-on .review-card:hover{ transform:translateY(-6px) rotate(-1deg); }

/* ---- 5. 404 vanishing act ---------------------------------------------- */
html.magic-on .nf-title{ cursor:pointer; transition:opacity .6s ease, filter .6s ease, transform .6s ease; }
html.magic-on .nf-title.mg-gone{ opacity:0; filter:blur(6px); transform:scale(1.04); }
.mg-smoke{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

/* ---- 6. Abracadabra → 50% off reveal ----------------------------------- */
.mg-rabbit{ position:fixed; bottom:64px; left:-70px; font-size:46px; z-index:9998; pointer-events:none; }
.mg-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(6,5,8,.72); backdrop-filter:blur(4px); opacity:0; transition:opacity .4s ease; }
.mg-modal.show{ opacity:1; }
.mg-card{ position:relative; width:min(92vw,420px); text-align:center; padding:34px 30px 30px;
  background:linear-gradient(#181119,#0f0b12); border:1px solid var(--mg-gold);
  border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(201,168,76,.15);
  color:#f3efe6; font-family:'Playfair Display',Georgia,serif;
  transform:translateY(16px) scale(.96); transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.mg-modal.show .mg-card{ transform:none; }
.mg-card .mg-kick{ font-family:Inter,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.24em;
  font-size:11px; color:var(--mg-gold); margin:0 0 10px; }
.mg-card h3{ font-weight:700; font-size:1.7rem; margin:0 0 6px; }
.mg-card .mg-sub{ font-family:Inter,system-ui,sans-serif; color:#b7b1bd; font-size:.92rem; margin:0 0 20px; line-height:1.5; }
.mg-code{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 18px; }
.mg-code code{ font-family:'Courier New',monospace; font-size:1.5rem; letter-spacing:.12em; color:var(--mg-gold-hi);
  background:#0a080c; border:1px dashed var(--mg-gold); border-radius:10px; padding:12px 18px; }
.mg-code button{ font-family:Inter,system-ui,sans-serif; font-size:.8rem; cursor:pointer; color:#f3efe6;
  background:transparent; border:1px solid #3a3540; border-radius:8px; padding:11px 12px; transition:all .2s ease; }
.mg-code button:hover{ border-color:var(--mg-gold); color:var(--mg-gold); }
.mg-card .mg-book{ display:inline-block; font-family:Inter,system-ui,sans-serif; font-weight:600; text-decoration:none;
  background:var(--mg-gold); color:#0d0a10; padding:13px 26px; border-radius:10px; transition:background .2s ease; }
.mg-card .mg-book:hover{ background:var(--mg-gold-hi); }
.mg-card .mg-x{ position:absolute; top:12px; right:14px; background:none; border:none; color:#8a8590;
  font-size:22px; cursor:pointer; line-height:1; }
.mg-card .mg-x:hover{ color:#f3efe6; }
.mg-card .mg-fine{ font-family:Inter,system-ui,sans-serif; font-size:.72rem; color:#7a7580; margin:16px 0 0; }

@media (prefers-reduced-motion: reduce){
  html.magic-on .hero .mg-spot,
  html.magic-on .mg-dust{ display:none !important; }
  html.magic-on .reviews-grid.mg-deck .review-card{ opacity:1 !important; transform:none !important; }
  .mg-rabbit{ display:none; }
}