/* Guided-tour ("premium narrated walkthrough") overlay — self-contained, opt-in.
   Loaded by index.html; does NOTHING until "Take the tour" is clicked.
   Safe to remove: delete the <link>, the <script> in index.html + this folder. */

/* ---- launch button pinned to the top-right corner (home view only) ---- */
.tour-launch{
  position:fixed;top:12px;right:16px;z-index:50;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:color-mix(in srgb,var(--acc,#7fd8c4) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--acc,#7fd8c4) 40%,transparent);
  color:var(--ink,#f4f1e8);font:600 12.5px var(--sans,system-ui);
  border-radius:999px;padding:7px 13px;cursor:pointer;transition:.16s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tour-launch:hover{border-color:var(--acc,#7fd8c4);transform:translateY(-1px)}
.tour-launch svg{width:15px;height:15px}
.tour-launch.hide{display:none}                 /* hidden while running / off-home */
@media(max-width:760px){.tour-launch .tl-txt{display:none}}

/* ---- root overlay (hidden unless .on) ---- */
#tour-root{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
#tour-root.on{display:block}

/* dim layer for centre steps (no target) */
#tour-mask{position:fixed;inset:0;pointer-events:auto;background:rgba(6,9,11,.72);
  opacity:0;z-index:1;transition:opacity .4s ease}

/* spotlight ring: the big shadow dims everything except the target, and a bright
   glow + inner light make even a dark element read as illuminated */
#tour-ring{position:fixed;border-radius:14px;pointer-events:none;opacity:0;z-index:2;
  box-shadow:0 0 0 9999px rgba(6,9,11,.7),
             0 0 0 2px color-mix(in srgb,var(--acc,#7fd8c4) 90%,#fff),
             0 0 26px 6px color-mix(in srgb,var(--acc,#7fd8c4) 55%,transparent),
             0 0 0 10px color-mix(in srgb,var(--acc,#7fd8c4) 16%,transparent),
             inset 0 0 34px color-mix(in srgb,var(--acc,#7fd8c4) 15%,transparent);
  transition:left .5s cubic-bezier(.22,1,.36,1),top .5s cubic-bezier(.22,1,.36,1),
             width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),opacity .3s ease}
#tour-ring::after{content:"";position:absolute;inset:-2px;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--acc,#7fd8c4) 45%,transparent);
  animation:tourPulse 2.1s ease-out infinite}
@keyframes tourPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc,#7fd8c4) 45%,transparent)}
  70%,100%{box-shadow:0 0 0 18px color-mix(in srgb,var(--acc,#7fd8c4) 0%,transparent)}
}

/* small animated caret that points at the element being referred to */
#tour-caret{position:fixed;z-index:6;pointer-events:none;opacity:0;color:var(--acc,#7fd8c4);
  transition:opacity .3s ease,top .35s cubic-bezier(.22,1,.36,1),left .35s cubic-bezier(.22,1,.36,1)}
#tour-caret.up{transform:rotate(180deg)}
#tour-caret svg{width:30px;height:30px;display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));animation:caretBob 1.05s ease-in-out infinite}
@keyframes caretBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}

/* the active element zooms in and lifts above the dimmed page */
.tour-zoom{transform:scale(1.06)!important;transform-origin:center center;position:relative;z-index:1;
  transition:transform .42s cubic-bezier(.22,1,.36,1)!important}

/* ---- inline "inside a track" panel (real series from catalog.json) ---- */
#tour-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(760px,94vw);z-index:3;pointer-events:auto;opacity:0;visibility:hidden;
  background:linear-gradient(180deg,var(--card,#1e2b26),var(--bg-2,#141f1a));
  border:1px solid var(--line,rgba(244,241,232,.14));border-radius:20px;
  padding:22px 24px;box-shadow:0 40px 110px rgba(0,0,0,.66);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
#tour-panel.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
#tour-panel .tp-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
#tour-panel .tp-kicker{font:700 10px var(--sans,system-ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--acc,#7fd8c4)}
#tour-panel .tp-head h3{margin:0;color:var(--ink,#f4f1e8);font:700 22px var(--sans,system-ui)}
#tour-panel .tp-lede{margin:-6px 0 8px;color:var(--muted,#9fb0a8);font:400 13px/1.45 var(--sans,system-ui);max-width:56ch}
#tour-panel .tp-count{margin:0 0 18px;color:var(--muted,#9fb0a8);font:400 13px var(--sans,system-ui)}
#tour-panel .tp-count b{color:var(--soft,#c7d0c8);font-weight:700}
#tour-panel .tp-series{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tp-card{display:flex;flex-direction:column;border:1px solid var(--line,rgba(244,241,232,.13));
  border-radius:16px;padding:18px 20px;background:var(--card,rgba(255,255,255,.02));transition:.2s}
.tp-card-t{margin:0 0 12px;color:var(--ink,#f4f1e8);font:600 18px/1.25 var(--sans,system-ui)}
.tp-arts{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:3px}
.tp-arts li{display:flex;gap:9px;align-items:flex-start;color:var(--soft,#c7d0c8);font:400 13.5px/1.35 var(--sans,system-ui);padding:3px 0}
.tp-n{flex:0 0 auto;color:var(--acc,#7fd8c4);font:600 13.5px var(--sans,system-ui);font-variant-numeric:tabular-nums}
.tp-acts{margin-top:auto;padding-top:12px;border-top:1px solid var(--line,rgba(244,241,232,.13));display:flex;align-items:center;gap:18px}
.tp-act{display:inline-flex;align-items:center;gap:6px;color:var(--acc,#7fd8c4);font:600 13px var(--sans,system-ui)}
.tp-act.watch{color:var(--soft,#c7d0c8)}
.tp-act svg{width:15px;height:15px}

/* element highlight used inside the panel (no cutout there) */
.tour-hi{position:relative;border-radius:12px;
  outline:2px solid var(--acc,#7fd8c4);outline-offset:3px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--acc,#7fd8c4) 22%,transparent),
             0 14px 40px rgba(0,0,0,.4);animation:tourHi 2.1s ease-in-out infinite}
@keyframes tourHi{
  0%,100%{box-shadow:0 0 0 5px color-mix(in srgb,var(--acc,#7fd8c4) 22%,transparent),0 14px 40px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc,#7fd8c4) 8%,transparent),0 14px 40px rgba(0,0,0,.4)}
}

/* ---- CC subtitle bar: slim, single line, bottom-centre ---- */
#tour-cc{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  z-index:5;pointer-events:auto;opacity:0;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:min(900px,94vw);
  transition:opacity .4s ease,transform .4s ease}
#tour-cc.in{opacity:1;transform:translateX(-50%) translateY(0)}
.cc-controls{display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb,var(--bg,#141d19) 50%,transparent);
  backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(244,241,232,.08);border-radius:999px;
  padding:8px 12px;box-shadow:0 10px 30px rgba(0,0,0,.42)}
.cc-text{color:#eef2ee;font:400 14.5px/1.35 var(--sans,system-ui);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(900px,92vw)}
.cc-text.hide{display:none}
.cc-dots{display:inline-flex;gap:4px;flex-wrap:nowrap}
.cc-dot{width:5px;height:5px;border-radius:50%;background:rgba(244,241,232,.2);transition:.25s}
.cc-dot.done{background:color-mix(in srgb,var(--acc,#7fd8c4) 50%,transparent)}
.cc-dot.on{background:var(--acc,#7fd8c4);transform:scale(1.5)}
.cc-btn{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(244,241,232,.12);background:rgba(255,255,255,.04);
  color:var(--soft,#c7d0c8);font:600 12.5px var(--sans,system-ui);border-radius:999px;
  cursor:pointer;transition:.15s}
.cc-btn:hover{border-color:var(--acc,#7fd8c4);color:var(--ink,#f4f1e8)}
.cc-pause{width:32px;height:32px;padding:0}
.cc-pause svg{display:block}
.cc-nav{width:32px;height:32px;padding:0}
.cc-nav svg{display:block}
.cc-skip{padding:7px 15px}
.cc-speed{padding:7px 11px;min-width:46px;font-variant-numeric:tabular-nums}
.cc-toggle{padding:7px 11px;font-weight:700;letter-spacing:.03em}
.cc-toggle.off{opacity:.5;text-decoration:line-through}

@media(max-width:640px){
  #tour-cc{max-width:96vw;gap:8px}
  .cc-controls{padding:7px 10px;gap:9px}
  .cc-text{max-width:92vw;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  #tour-mask,#tour-ring,#tour-cc,#tour-caret{transition:none}
  #tour-ring::after,.tour-hi,#tour-caret svg{animation:none}
  .tour-zoom{transform:none!important}
}