/* ============================================================================
   KPR TUTORIAL KIT — shared design system for all product tutorials
   ----------------------------------------------------------------------------
   ONE visual language, reused by every tutorial in the app:
     · the flagship "Take the Tour" product tour (js/modals.js)
     · every per-section "Watch guide" walk-through (js/section-guides.js)

   The kit renders a *simulated screen-recording*: a real screenshot of the app
   on a cinematic stage, with a camera that pans and zooms, a natural cursor
   that moves and clicks, spotlight highlights, animated callouts, kinetic
   captions, branded intro/outro cards, and a soundtrack (recorded narration
   where available, tuned browser speech otherwise).

   Everything below is a *token* or a *component*. Author a new tutorial as
   data (see tutorials/README.md); never restyle per tutorial. That is what
   keeps every video looking like it belongs to the same product.

   Design tokens live on .tk-scope (applied to each stage's root), so a host
   page's own variables can never leak in and change the look of a tutorial.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
.tk-scope{
  /* Brand */
  --tk-brand:        #4f46e5;   /* indigo — primary accent               */
  --tk-brand-2:      #7c73f0;   /* lighter indigo for gradients          */
  --tk-brand-ink:    #ffffff;   /* text on brand                          */
  --tk-glow:         rgba(99,102,241,0.55);
  --tk-grad:         linear-gradient(90deg,#a5b4fc,#f0abfc);
  --tk-grad-deep:    linear-gradient(135deg,#4f46e5,#a855f7);

  /* Cinematic stage (always dark, so light + dark app themes match) */
  --tk-stage:        #0d1030;
  --tk-stage-2:      #141a3d;
  --tk-stage-edge:   rgba(255,255,255,0.07);
  --tk-scrim:        rgba(8,10,26,0.62);   /* spotlight backdrop dim      */

  /* On-stage text */
  --tk-on:           #f5f6ff;
  --tk-on-soft:      #c7ccf0;
  --tk-on-faint:     #9aa0cf;

  /* Callouts / captions (light chips on the dark stage) */
  --tk-chip:         rgba(255,255,255,0.96);
  --tk-chip-ink:     #1a1e3a;
  --tk-chip-soft:    #5b6183;

  /* Typography — reuse the app's loaded families */
  --tk-font-ui:      "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tk-font-display: "Manrope","Inter",-apple-system,sans-serif;
  --tk-font-mono:    "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type scale */
  --tk-fs-eyebrow:   11px;
  --tk-fs-caption:   15px;
  --tk-fs-callout:   14px;
  --tk-fs-chapter:   13px;
  --tk-fs-title:     40px;
  --tk-fs-tag:       15px;

  /* Radii + shadow */
  --tk-r-stage:      16px;
  --tk-r-chip:       12px;
  --tk-r-ring:       10px;
  --tk-shadow-chip:  0 8px 30px rgba(6,8,26,0.45);
  --tk-shadow-stage: 0 24px 70px -28px rgba(10,12,40,0.7);

  /* Motion — one timing system for the whole kit */
  --tk-ease:         cubic-bezier(0.22,0.61,0.36,1);   /* camera / cursor  */
  --tk-ease-soft:    cubic-bezier(0.33,0,0.2,1);       /* fades / chips    */
  --tk-t-fade:       0.45s;
  --tk-t-chip:       0.5s;
  --tk-t-ring:       0.35s;
}

/* ---- 2. STAGE ------------------------------------------------------------ */
.tk-stage{
  position:relative; width:100%; aspect-ratio:16/9;
  background:radial-gradient(120% 120% at 50% 0%,var(--tk-stage-2),var(--tk-stage) 70%);
  border-radius:var(--tk-r-stage); overflow:hidden;
  color:var(--tk-on); font-family:var(--tk-font-ui);
  box-shadow:inset 0 0 0 1px var(--tk-stage-edge), var(--tk-shadow-stage);
  isolation:isolate;
}
/* Subtle cinematic vignette so the screenshot sits *in* a frame, not on a slab */
.tk-stage::after{
  content:""; position:absolute; inset:0; z-index:20; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 90px 8px rgba(6,8,24,0.35);
}

/* ---- 3. SCREENSHOT LAYER (two images, cross-faded on a swap) ------------- */
.tk-canvas{position:absolute; inset:0; z-index:1; overflow:hidden; background:#0d1030}
.tk-shot{position:absolute; left:0; top:0; width:100%; display:block;
  transform-origin:0 0; will-change:transform; backface-visibility:hidden;
  image-rendering:auto;}
.tk-shot.b{opacity:0; transition:opacity var(--tk-t-fade) var(--tk-ease-soft)}
.tk-shot.b.on{opacity:1}
/* A hair of camera "breath" — the whole canvas can drift while held */
.tk-canvas.breathe .tk-shot{animation:tk-breathe 9s ease-in-out infinite alternate}
@keyframes tk-breathe{from{filter:none}to{filter:none}}

/* ---- 4. SPOTLIGHT (dim the screen, frame the focal region) --------------- */
.tk-spot{position:absolute; z-index:6; border-radius:var(--tk-r-ring);
  border:2px solid rgba(255,255,255,0.9);
  box-shadow:0 0 0 9999px var(--tk-scrim),
             0 0 22px 2px var(--tk-glow) inset,
             0 10px 30px -8px rgba(0,0,0,0.5);
  opacity:0; transition:opacity var(--tk-t-ring) var(--tk-ease-soft),
             left var(--tk-t-chip) var(--tk-ease), top var(--tk-t-chip) var(--tk-ease),
             width var(--tk-t-chip) var(--tk-ease), height var(--tk-t-chip) var(--tk-ease);
  pointer-events:none;}
.tk-spot.on{opacity:1}
.tk-spot::before{content:""; position:absolute; inset:-2px; border-radius:inherit;
  border:2px solid var(--tk-brand); opacity:0.9;
  animation:tk-spot-pulse 2.4s var(--tk-ease-soft) infinite}
@keyframes tk-spot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0.0)}
  50%    {box-shadow:0 0 0 4px rgba(99,102,241,0.28)}
}

/* thin accent ring variant (no scrim) — used for quick emphasis */
.tk-ring{position:absolute; z-index:6; border:2px solid var(--tk-brand);
  border-radius:var(--tk-r-ring); opacity:0; pointer-events:none;
  box-shadow:0 0 18px 1px var(--tk-glow);
  transition:opacity var(--tk-t-ring) var(--tk-ease-soft)}
.tk-ring.on{opacity:1}

/* ---- 5. CURSOR (natural pointer + click ripple + press) ------------------ */
.tk-cursor{position:absolute; left:0; top:0; z-index:12; width:26px; height:26px;
  pointer-events:none; opacity:0; transform:translate(-2px,-2px);
  transition:opacity 0.3s var(--tk-ease-soft);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.5));}
.tk-cursor.on{opacity:1}
.tk-cursor.press .tk-cursor-svg{transform:scale(0.86)}
.tk-cursor-svg{display:block; transition:transform 0.12s var(--tk-ease-soft)}
/* soft focus halo that trails the pointer for visibility on busy screens */
.tk-cursor-halo{position:absolute; left:50%; top:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:50%; background:radial-gradient(circle,var(--tk-glow),transparent 70%);
  opacity:0.0; transition:opacity 0.25s}
.tk-cursor.on .tk-cursor-halo{opacity:0.5}
/* click ripple — retriggered by toggling .go */
.tk-click{position:absolute; left:0; top:0; z-index:11; width:0; height:0; pointer-events:none}
.tk-click.go::after{content:""; position:absolute; left:-19px; top:-19px; width:38px; height:38px;
  border-radius:50%; border:2px solid var(--tk-brand); background:rgba(99,102,241,0.16);
  animation:tk-click 0.62s var(--tk-ease-soft) forwards}
@keyframes tk-click{from{transform:scale(0.28); opacity:1} to{transform:scale(1.3); opacity:0}}

/* ---- 6. CALLOUT (bubble with a connector to the focal point) ------------- */
.tk-callout{position:absolute; z-index:14; max-width:min(46%,320px);
  background:var(--tk-chip); color:var(--tk-chip-ink); border-radius:var(--tk-r-chip);
  padding:11px 14px; box-shadow:var(--tk-shadow-chip);
  font-family:var(--tk-font-ui); opacity:0; transform:translateY(8px) scale(0.98);
  transition:opacity var(--tk-t-chip) var(--tk-ease-soft), transform var(--tk-t-chip) var(--tk-ease);
  pointer-events:none;}
.tk-callout.on{opacity:1; transform:translateY(0) scale(1)}
.tk-callout .tk-co-eyebrow{font-size:var(--tk-fs-eyebrow); font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--tk-brand); margin-bottom:3px; display:block}
.tk-callout .tk-co-text{font-size:var(--tk-fs-callout); line-height:1.4; font-weight:500}
/* little diamond pointer; side set via data-arrow */
.tk-callout::after{content:""; position:absolute; width:12px; height:12px; background:var(--tk-chip);
  transform:rotate(45deg); box-shadow:var(--tk-shadow-chip)}
.tk-callout[data-arrow="down"]::after{left:24px; bottom:-6px}
.tk-callout[data-arrow="up"]::after{left:24px; top:-6px}
.tk-callout[data-arrow="left"]::after{top:18px; left:-6px}
.tk-callout[data-arrow="right"]::after{top:18px; right:-6px}
.tk-callout[data-arrow="none"]::after{display:none}

/* ---- 7. CAPTION (kinetic lower-third) + CHAPTER label -------------------- */
.tk-lower{position:absolute; left:0; right:0; bottom:0; z-index:9;
  padding:44px 22px 20px; pointer-events:none;
  background:linear-gradient(180deg,rgba(9,11,30,0) 0%,rgba(9,11,30,0.55) 55%,rgba(9,11,30,0.9) 100%);}
.tk-lower .tk-eyebrow{font-size:var(--tk-fs-eyebrow); font-weight:700; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--tk-on-soft); margin-bottom:4px;
  opacity:0; transform:translateY(6px); transition:opacity 0.4s var(--tk-ease-soft),transform 0.4s var(--tk-ease)}
.tk-lower .tk-caption{font-size:var(--tk-fs-caption); line-height:1.4; font-weight:500;
  color:var(--tk-on); max-width:44em; text-shadow:0 1px 8px rgba(0,0,0,0.4);
  opacity:0; transform:translateY(8px); transition:opacity 0.45s var(--tk-ease-soft) 0.05s,transform 0.45s var(--tk-ease) 0.05s}
.tk-lower.on .tk-eyebrow,.tk-lower.on .tk-caption{opacity:1; transform:translateY(0)}

.tk-chapter{position:absolute; left:0; right:0; top:0; z-index:9; padding:11px 16px;
  font-size:var(--tk-fs-chapter); font-weight:700; letter-spacing:0.05em; color:#fff;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,rgba(9,11,30,0.85),rgba(9,11,30,0));
  opacity:0; transform:translateY(-6px); transition:opacity 0.35s var(--tk-ease-soft),transform 0.35s var(--tk-ease);
  pointer-events:none;}
.tk-chapter.on{opacity:1; transform:translateY(0)}
.tk-chapter .tk-chapter-dot{width:7px; height:7px; border-radius:50%; background:var(--tk-grad-deep);
  background:var(--tk-brand); box-shadow:0 0 10px 1px var(--tk-glow); flex:none}

/* ---- 8. INTRO + OUTRO branded cards -------------------------------------- */
.tk-card{position:absolute; inset:0; z-index:16; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px; gap:8px;
  background:radial-gradient(130% 130% at 50% 15%,var(--tk-stage-2),var(--tk-stage) 72%);
  opacity:0; transition:opacity 0.5s var(--tk-ease-soft); pointer-events:none;}
.tk-card.on{opacity:1}
/* animated logo mark */
.tk-logo{display:inline-flex; align-items:center; gap:11px; margin-bottom:6px;
  opacity:0; transform:translateY(10px) scale(0.96); animation:tk-rise 0.7s var(--tk-ease) forwards}
.tk-logo-mark{width:44px; height:44px; border-radius:12px; background:var(--tk-grad-deep);
  display:grid; place-items:center; color:#fff; font-family:var(--tk-font-display); font-weight:800;
  font-size:22px; box-shadow:0 10px 30px -6px var(--tk-glow), inset 0 0 0 1px rgba(255,255,255,0.18);}
.tk-logo-word{font-family:var(--tk-font-display); font-weight:800; font-size:26px; letter-spacing:-0.02em;
  background:var(--tk-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.tk-feature{font-family:var(--tk-font-display); font-weight:800; font-size:var(--tk-fs-title);
  letter-spacing:-0.03em; line-height:1.05; color:var(--tk-on); max-width:16em;
  opacity:0; transform:translateY(12px); animation:tk-rise 0.7s var(--tk-ease) 0.12s forwards;}
.tk-lede{font-size:var(--tk-fs-tag); color:var(--tk-on-soft); max-width:26em; line-height:1.5;
  opacity:0; transform:translateY(12px); animation:tk-rise 0.7s var(--tk-ease) 0.22s forwards;}
.tk-underline{width:56px; height:3px; border-radius:3px; background:var(--tk-grad); margin-top:6px;
  opacity:0; transform:scaleX(0); transform-origin:left; animation:tk-line 0.6s var(--tk-ease) 0.32s forwards;}
.tk-outro-url{font-size:var(--tk-fs-tag); color:var(--tk-on); font-weight:600; letter-spacing:0.01em;
  opacity:0; transform:translateY(10px); animation:tk-rise 0.6s var(--tk-ease) 0.2s forwards;}
.tk-outro-tag{font-size:13px; color:var(--tk-on-faint);
  opacity:0; animation:tk-fade 0.6s var(--tk-ease) 0.34s forwards;}
@keyframes tk-rise{to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes tk-fade{to{opacity:1}}
@keyframes tk-line{to{opacity:1; transform:scaleX(1)}}

/* ---- 9. PROGRESS + TRANSPORT --------------------------------------------- */
.tk-progress{position:absolute; left:0; right:0; bottom:0; z-index:18; height:3px;
  background:rgba(255,255,255,0.14)}
.tk-progress-fill{height:100%; width:0; background:var(--tk-grad)}
/* segmented progress (per-step, for guides) sits just above the bottom edge */
.tk-segs{position:absolute; left:0; right:0; bottom:0; z-index:18; display:flex; gap:3px; padding:8px}
.tk-seg{flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,0.28); overflow:hidden; cursor:pointer}
.tk-seg-fill{height:100%; width:0; background:#fff; border-radius:99px}
.tk-seg.done .tk-seg-fill{width:100%}

.tk-controls{display:flex; align-items:center; gap:8px; margin-top:11px; padding:0 2px; flex-wrap:wrap}
.tk-btn{background:var(--surface-alt,#f2f3f8); color:var(--ink,#1b1f3a); border:1px solid var(--border,#e4e6ef);
  border-radius:9px; padding:7px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:border-color 0.15s, background 0.15s; line-height:1}
@media (hover:hover) and (pointer:fine){
.tk-btn:hover{border-color:var(--tk-brand); color:var(--tk-brand)}
}
body.dark .tk-btn{background:#232744; border-color:#33385c; color:#e9ebf5}
.tk-scrub{flex:1 1 160px; min-width:120px; height:22px; display:flex; align-items:center;
  cursor:pointer; touch-action:none; position:relative}
.tk-scrub-track{position:relative; width:100%; height:6px; border-radius:99px; background:var(--border,#e4e6ef)}
body.dark .tk-scrub-track{background:#33385c}
.tk-scrub-fill{position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--tk-brand); width:0}
.tk-scrub-knob{position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:#fff; border:2px solid var(--tk-brand); box-shadow:0 1px 5px rgba(0,0,0,0.28); left:0;
  transition:transform 0.12s}
.tk-scrub.dragging .tk-scrub-knob{transform:scale(1.18)}
@media (hover:hover) and (pointer:fine){
.tk-scrub:hover .tk-scrub-knob{transform:scale(1.18)}
}
.tk-scrub-marks{position:absolute; left:0; right:0; top:50%; height:6px; margin-top:-3px; pointer-events:none}
.tk-scrub-marks i{position:absolute; top:0; width:2px; height:6px; background:#fff; opacity:0.85}
.tk-time{font-size:12px; color:var(--muted,#6b7191); font-variant-numeric:tabular-nums; white-space:nowrap}
.tk-note{font-size:12px; color:var(--muted,#6b7191); text-align:center; margin-top:8px}
.tk-voicelbl{font-size:11px; color:var(--muted,#6b7191); font-style:italic}

/* ---- 10. RESPONSIVE ------------------------------------------------------ */
@media (max-width:640px){
  .tk-scope{--tk-fs-title:26px; --tk-fs-caption:13.5px; --tk-fs-callout:13px}
  /* Phone screenshots are portrait — give the stage a portrait box so the UI
     the viewer actually has fills the frame instead of letterboxing. */
  .tk-stage{aspect-ratio:3/4}
  .tk-callout{max-width:min(66%,260px)}
  .tk-lower{padding:32px 14px 16px}
  .tk-controls{gap:6px}
  .tk-btn{padding:6px 9px; font-size:12px}
}
@media (min-width:641px) and (max-width:820px){
  .tk-stage{aspect-ratio:16/10}
}

/* ---- 11. REDUCED MOTION -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tk-shot{transition:none !important}
  .tk-spot::before{animation:none}
  .tk-click.go::after{display:none}
  .tk-logo,.tk-feature,.tk-lede,.tk-underline,.tk-outro-url,.tk-outro-tag{animation-duration:0.01s}
  .tk-canvas.breathe .tk-shot{animation:none}
}