/* ============================================================================
   AION Experience Tour — website hero walkthrough layer
   Reuses aion.css (tokens, device frame, screens) + aion-promo.css (section
   screens: Personalize / Picks / Analyze / Sources / History / Learning / More).
   This file adds: the clean hero stage, the animated tap cursor, the tap ripple,
   and the screen-to-screen transition treatment.
   ============================================================================ */

/* ---- hero stage (1920×1080, JS-scaled, letterboxed) ---- */
#reel-viewport{position:fixed;inset:0;background:#000;overflow:hidden;}
#reel{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(200,163,92,.05), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, #14111a 0%, #0d0b0f 42%, var(--obsidian) 76%);
  color:var(--alabaster);font-family:var(--f-inter);overflow:hidden;}
#reel-ambient{position:absolute;left:50%;top:50%;width:1180px;height:1180px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(200,163,92,.16) 0%, rgba(200,163,92,.05) 36%, transparent 64%);
  filter:blur(8px);pointer-events:none;will-change:transform,opacity;}
#reel-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 120% at 50% 50%, transparent 52%, rgba(0,0,0,.62) 100%);}
#reel-grain{position:absolute;inset:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image: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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* faint corner wordmark — subtle brand presence, not a label */
#tour-mark{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  font-family:var(--f-cinzel);font-size:26px;letter-spacing:.42em;color:rgba(244,239,230,.34);padding-left:.42em;}
#tour-mark .i{color:rgba(200,163,92,.85);}

/* ---- phone placement (centered) ---- */
#reel-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  transform-origin:center center;will-change:transform,opacity;}

/* the device screen clips transitions; each screen slides within it */
.device .screen{overflow:hidden;}

/* ---- touch layer: tap cursor + ripple (inside the screen, scales with it) ---- */
#touch{position:absolute;inset:0;z-index:90;pointer-events:none;}
#cursor{position:absolute;left:0;top:0;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%, rgba(255,255,255,.95), rgba(255,255,255,.42) 44%, rgba(255,255,255,0) 72%);
  box-shadow:0 3px 14px rgba(0,0,0,.4), 0 0 0 1.5px rgba(255,255,255,.28), 0 0 22px rgba(200,163,92,.25);
  opacity:0;will-change:transform,left,top,opacity;}
#ripple{position:absolute;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  border:2.5px solid var(--aurum);opacity:0;will-change:transform,opacity;
  box-shadow:0 0 18px rgba(200,163,92,.5);}

/* press feedback handled inline by the engine (transform: scale) */

/* ── Embed mode · hide review chrome when the tour lives inside the marketing iframe ── */
#controls,
#tour-mark,
#reel-vignette,
#reel-grain { display: none !important; }
/* Trim stage background to a tight halo so the iframe blends with the marketing page */
#reel { background: var(--obsidian) !important; }
#reel-ambient { width: 700px !important; height: 700px !important; opacity: .55 !important; }