/* TOUR PROLOGUE — the full-screen scenes before the product tour (tour-prologue.js). Fog scenes are muted grey-blue
   with slow drifting layers; the last scene clears to a soft blue sky. Colours are mixes of the existing tokens only.
   The tour card, spotlight and progress styles stay in styles.css. */
.tour-scene{
  position:fixed;
  inset:0;
  z-index:80;
  overflow:hidden;
  display:grid;
  place-items:center;
  color:var(--text);
  background:linear-gradient(170deg,color-mix(in srgb,var(--muted) 22%,var(--bg)) 0%,var(--surface-2) 55%,
    color-mix(in srgb,var(--muted) 14%,var(--bg)) 100%);
  animation:scene-in .5s ease both;
}
.tour-scene.sky{
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 38%,#fff) 0%,color-mix(in srgb,var(--blue) 14%,#fff) 60%,
    var(--surface) 100%);
}
/* drifting fog layers */
.scene-fog{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.9;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(ellipse 55% 45% at 75% 65%,color-mix(in srgb,var(--muted) 28%,transparent),transparent 70%),
    radial-gradient(ellipse 70% 35% at 50% 90%,rgba(255,255,255,.6),transparent 70%);
  animation:fog-drift 38s ease-in-out infinite alternate;
}
.scene-fog.b{animation-duration:52s;animation-direction:alternate-reverse;opacity:.7;transform:scale(1.2)}
.scene-fog.c{animation-duration:66s;opacity:.55;transform:scale(1.4) rotate(8deg)}
.tour-scene.sky .scene-fog{
  background:
    radial-gradient(ellipse 50% 30% at 25% 25%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(ellipse 45% 25% at 70% 40%,rgba(255,255,255,.7),transparent 70%);
  animation:fog-lift 2.4s ease-out both;
}
/* the copy */
.scene-inner{
  position:relative;
  width:min(760px,calc(100vw - 80px));
  background:color-mix(in srgb,var(--surface) 84%,transparent);
  border:1.5px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 70px rgba(14,39,64,.22);
  padding:var(--space-10) var(--space-12) var(--space-8);
  backdrop-filter:blur(6px);
}
.tour-scene.sky .scene-inner{border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.scene-k{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted)}
.tour-scene.sky .scene-k{color:var(--blue)}
.tour-scene h2{margin:10px 0 14px;font-size:var(--text-xl);line-height:1.1;font-weight:900;color:var(--navy)}
.scene-lead{margin:0 0 18px;font-size:var(--text-lg);line-height:1.45;color:var(--text)}
.scene-lines{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.scene-lines li{
  padding:11px 14px 11px 40px;
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--muted) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  font-size:var(--text-base);
  line-height:1.4;
  position:relative;
}
.scene-lines li::before{
  content:'?';
  position:absolute;
  left:13px;
  top:10px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:color-mix(in srgb,var(--muted) 30%,var(--surface));
  color:var(--navy);
  font-weight:900;
  font-size:13px;
  display:grid;
  place-items:center;
}
.tour-scene.sky .scene-lines li{background:color-mix(in srgb,var(--blue) 7%,var(--surface));border-color:var(--blue-bd)}
.tour-scene.sky .scene-lines li::before{content:'';background:var(--blue);width:10px;height:10px;left:18px;top:15px}
.scene-quote{margin:0;padding:6px 0 0}
.scene-quote p{margin:0;font-size:22px;line-height:1.4;font-weight:500;color:var(--navy)}
.scene-quote footer{margin-top:14px;font-size:var(--text-sm);color:var(--muted);font-weight:600}
.scene-brand{margin:22px 0 0;padding:16px 20px;border:1px solid color-mix(in srgb,var(--navy) 18%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--navy) 6%,transparent);display:flex;flex-direction:column;gap:4px}
.scene-brand b{font-size:24px;font-weight:900;letter-spacing:-.01em;color:var(--navy)}
.scene-brand span{font-size:var(--text-base);font-weight:600;color:var(--text)}
.scene-close{margin:18px 0 0;font-size:var(--text-base);line-height:1.5;color:var(--text);font-weight:500}
.scene-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-8);gap:var(--space-3)}
.scene-nav .row{display:flex;gap:8px;align-items:center}
.scene-dots{display:flex;gap:5px;margin-top:var(--space-4)}
.scene-dots span{flex:1;height:5px;border-radius:3px;background:var(--border)}
.scene-dots span.done{background:var(--accent);opacity:.45}
.scene-dots span.on{background:var(--accent)}
.scene-keys{font-size:11px;color:var(--muted);margin-top:8px}
/* staggered reveal: every line waits for its own --d */
.scene-lead,.scene-lines li,.scene-quote,.scene-brand,.scene-close{animation:line-in .6s ease both;animation-delay:var(--d,0s)}
@keyframes line-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes scene-in{from{opacity:0}to{opacity:1}}
@keyframes fog-drift{from{transform:translate3d(-4%,-2%,0)}to{transform:translate3d(4%,3%,0)}}
@keyframes fog-lift{from{opacity:.9;transform:translateY(0)}to{opacity:.25;transform:translateY(-18%)}}
@media (prefers-reduced-motion:reduce){
  .scene-fog,.scene-lead,.scene-lines li,.scene-quote,.scene-brand,.scene-close,.tour-scene{animation:none}
}