/* CREST Guided Tour — entrance choreography & "living" motion.
   Layered on top of tour-styles.css. Every reveal is gated on the ACTIVE slide
   (.tour-slot[data-active]) so it REPLAYS each time you land on a card — that's
   what makes the walkthrough feel guided rather than static.

   All motion sits inside @media (prefers-reduced-motion: no-preference) and uses
   animation-fill-mode: backwards, so:
     • reduced-motion / print  → content is simply visible (no pre-hidden state)
     • after a reveal finishes  → element returns to its base CSS, so :hover lifts,
       tilts and other interactions keep working.
   Infinite decorative loops are intentionally avoided — every cue is a one-shot. */

/* ── Slide-transition depth ──────────────────────────────────────────────────
   In horizontal-slide mode, off-stage cards sit slightly back; the incoming card
   zooms to full size as it becomes active. Transform isn't set inline in slide
   mode, so this is safe and rides the slot's existing transform transition. */
@media (prefers-reduced-motion: no-preference) {
  .tour-trans-slide .tour-slot      { transform: scale(0.93); }
  .tour-trans-slide .tour-slot[data-active] { transform: scale(1); }
}

/* ── Shared keyframes ───────────────────────────────────────────────────── */
@keyframes tRise   { from { opacity: 0; transform: translateY(18px); }
                     to   { opacity: 1; transform: none; } }
@keyframes tRiseSm { from { opacity: 0; transform: translateY(10px); }
                     to   { opacity: 1; transform: none; } }
@keyframes tPop    { from { opacity: 0; transform: translateY(14px) scale(.96); }
                     to   { opacity: 1; transform: none; } }
@keyframes tMockIn { from { opacity: 0; transform: translateY(26px) scale(.94); }
                     to   { opacity: 1; transform: none; } }
@keyframes tFade   { from { opacity: 0; } to { opacity: 1; } }

/* Broadcast scan sweep — a light band wipes down the phone on arrival */
@keyframes tScan {
  0%   { transform: translateY(-130%); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(130%);  opacity: 0; }
}
/* Glass glint — a diagonal light streak rakes across the tablet on arrival. */
@keyframes tShine {
  0%   { transform: translateX(-135%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(135%);  opacity: 0; }
}
/* One-shot "ping" ring removed (see note below) */

/* Tap-hint cursor near the tab row — two gentle presses, then rest */
@keyframes tTap {
  0%, 60%, 100% { transform: scale(1);   opacity: .9; }
  12%, 42%      { transform: scale(.62); opacity: 1; }
}
@keyframes tTapFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ── Hero (replays on every visit, not just first load) ─────────────────── */
  .hero-inner > * { opacity: 1; transform: none; animation: none !important; }
  .tour-slot[data-active] .hero-inner > * {
    opacity: 1;
    animation: tRise .7s cubic-bezier(.2,.8,.25,1) backwards !important;
  }

  /* ── Module step choreography ───────────────────────────────────────────── */
  /* Phone mock leads, then the explainer cards / note / actions cascade in. */
  .tour-slot[data-active] .mod-mock-wrap {
    animation: tMockIn .72s cubic-bezier(.2,.85,.25,1) .06s backwards;
  }
  .tour-slot[data-active] .mod-eyebrow {
    animation: tRiseSm .5s ease .04s backwards;
  }
  .tour-slot[data-active] .mod-exp-title {
    animation: tRise .6s cubic-bezier(.2,.8,.25,1) .12s backwards;
  }
  .tour-slot[data-active] .mod-exp-intro {
    animation: tRiseSm .55s ease .2s backwards;
  }
  .tour-slot[data-active] .mod-exp-card {
    animation: tPop .58s cubic-bezier(.2,.8,.25,1) backwards;
  }
  .tour-slot[data-active] .mod-exp-card:nth-child(1) { animation-delay: .28s; }
  .tour-slot[data-active] .mod-exp-card:nth-child(2) { animation-delay: .36s; }
  .tour-slot[data-active] .mod-exp-note {
    animation: tRiseSm .55s ease .44s backwards;
  }
  .tour-slot[data-active] .mod-actions {
    animation: tRiseSm .55s ease .5s backwards;
  }

  /* Scan sweep — SYNTHETIC mocks: the stage IS the device, so sweep it directly. */
  .mod-mock-stage:not(:has(.scrn))::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 5;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(147,197,253,0.10) 46%,
      rgba(147,197,253,0.30) 50%,
      rgba(147,197,253,0.10) 54%,
      transparent 100%);
    transform: translateY(-130%);
    opacity: 0;
  }
  .tour-slot[data-active] .mod-mock-stage:not(:has(.scrn))::after {
    animation: tScan 1.5s ease-out .3s 1;
  }

  /* Sheen — SCREENSHOT mocks: a diagonal glass glint rakes across the tablet on
     arrival. Rendered on .scrn-bezel::before so it is clipped to the rounded
     screen frame (realistic light rake, not a flat vertical wipe). */
  .scrn-bezel::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 5;
    border-radius: inherit;
    background: linear-gradient(105deg,
      transparent 38%,
      rgba(255,255,255,0.10) 47%,
      rgba(255,255,255,0.32) 50%,
      rgba(255,255,255,0.10) 53%,
      transparent 62%);
    transform: translateX(-135%);
    opacity: 0;
    mix-blend-mode: screen;
  }
  .tour-slot[data-active] .scrn-bezel::before {
    animation: tShine 1.5s cubic-bezier(.35,.1,.25,1) .35s 1;
  }

  /* Tap-hint cursor — sits over the phone's tab strip, demonstrates "tap me".
     Lively mode only; one short two-press cycle on arrival. */
  .mod-tap-hint {
    position: absolute;
    top: 13%; left: 50%;
    width: 30px; height: 30px;
    margin-left: -4px;
    border-radius: 50%;
    border: 2px solid rgba(147,197,253,0.9);
    background: radial-gradient(circle at 50% 42%, rgba(147,197,253,0.5), rgba(147,197,253,0.12) 60%, transparent 72%);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 4px rgba(147,197,253,0.12);
    pointer-events: none;
    z-index: 6;
    opacity: 0;
  }
  .anim-lively .tour-slot[data-active] .mod-tap-hint {
    animation: tTap 1.8s ease-in-out .9s 1, tTapFade 2.7s ease .9s 1;
  }

  /* ── Finish card cascade ────────────────────────────────────────────────── */
  .tour-slot[data-active] .finish-eyebrow  { animation: tRiseSm .5s ease .06s backwards; }
  .tour-slot[data-active] .finish-title    { animation: tRise   .65s cubic-bezier(.2,.8,.25,1) .14s backwards; }
  .tour-slot[data-active] .finish-body     { animation: tRiseSm .55s ease .24s backwards; }
  .tour-slot[data-active] .finish-actions  { animation: tRiseSm .55s ease .32s backwards; }
  .tour-slot[data-active] .finish-test-hint{ animation: tFade   .6s  ease .5s  backwards; }
  .tour-slot[data-active] .finish-map-head { animation: tRiseSm .5s ease .2s backwards; }
  .tour-slot[data-active] .finish-tile     { animation: tPop .5s cubic-bezier(.2,.8,.25,1) backwards; }
  .tour-slot[data-active] .finish-tile:nth-child(1) { animation-delay: .30s; }
  .tour-slot[data-active] .finish-tile:nth-child(2) { animation-delay: .36s; }
  .tour-slot[data-active] .finish-tile:nth-child(3) { animation-delay: .42s; }
  .tour-slot[data-active] .finish-tile:nth-child(4) { animation-delay: .48s; }
  .tour-slot[data-active] .finish-tile:nth-child(5) { animation-delay: .54s; }
  .tour-slot[data-active] .finish-tile:nth-child(6) { animation-delay: .60s; }
  .tour-slot[data-active] .finish-tile:nth-child(7) { animation-delay: .66s; }
  .tour-slot[data-active] .finish-tile:nth-child(8) { animation-delay: .72s; }
  .tour-slot[data-active] .finish-tagline  { animation: tFade .7s ease .8s backwards; }

  /* ── Calm mode — keep reveals but soften: shorter travel, no tap cursor ──── */
  .anim-calm .tour-slot[data-active] .mod-mock-wrap { animation-name: tFade; animation-duration: .55s; }
}

/* ── Live-screen ping ring removed — it could drift off the phone on wider
   (tablet) layouts and read as a stray glow. Scan-sweep + tap-hint carry the
   "live screen" cue instead. */