/* ===========================================================================
   OpenPathshala — animated "See it in action" showcase
   Pure CSS/SVG keyframe scenes, each on a self-contained looping timeline.
   =========================================================================== */

.howto-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 1.2rem; }
.htab {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1rem; font-weight: 600; font-size: .88rem; color: var(--ink-soft);
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.htab:hover { border-color: var(--saffron); }
.htab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.stage {
  background: linear-gradient(180deg, #0f1622, #131d2e);
  border: 1px solid #24314a; border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.stage svg { display: block; width: 100%; height: auto; }
.scene { display: none; }
.scene.active { display: block; }

.stage-caption {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1rem; font-size: .95rem; color: var(--ink-soft);
}
.stage-caption .pill {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  background: var(--green-soft); color: var(--green); border: 1px solid #bfe0cc;
  padding: .2rem .55rem; border-radius: 6px;
}

/* ---- shared SVG tokens (used inside scenes) ---- */
.s-paper { fill: #f7f3ea; }
.s-paper-edge { fill: #e7ddcd; }
.s-ink { stroke: #2b3a67; stroke-width: 3; stroke-linecap: round; fill: none; }
.s-ink-soft { stroke: #93a0bd; stroke-width: 3; stroke-linecap: round; fill: none; }
.s-card { fill: #1b2740; stroke: #2f3e5e; }
.s-label { fill: #aab6d0; font: 600 14px Inter, sans-serif; }
.s-label-sm { fill: #7e8aa6; font: 500 12px Inter, sans-serif; }
.s-mono { fill: #cdd7ee; font: 500 13px "JetBrains Mono", monospace; }
.s-accent { fill: #e8722a; }
.s-green { fill: #2ea372; }
.s-red { fill: #e0654f; }

/* ===================== shared keyframes =====================
   Each scene plays its build-up ONCE and HOLDS the final state (fill: both),
   so content never disappears. Only the scan line / pulses loop continuously. */
/* NB: animations use the INDIVIDUAL transform properties (scale/translate)
   so they COMPOSE with each SVG element's positioning transform="translate()"
   attribute instead of overriding it. */
@keyframes scanSweep { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { translate: 0 150px; opacity: 0; } }
@keyframes typeIn { 0% { width: 0; } 100% { width: var(--w, 80px); } }
@keyframes popIn { 0% { scale: 0; opacity: 0; } 70% { scale: 1.2; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes fadeUp { 0% { opacity: 0; translate: 0 10px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes flow { 0% { stroke-dashoffset: 60; opacity: .25; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes flash { 0%,55%,100% { opacity: 0; } 70%,85% { opacity: .85; } }
@keyframes grow { 0% { scale: 1 0; } 100% { scale: 1 1; } }
@keyframes drawBox { 0% { stroke-dashoffset: 320; } 100% { stroke-dashoffset: 0; } }
@keyframes alertBlink { 0% { opacity: 0; scale: .5; } 60% { opacity: 1; scale: 1.15; } 75% { opacity: .6; } 100% { opacity: 1; scale: 1; } }
@keyframes bubbleIn { 0% { opacity: 0; translate: 0 8px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes countSpin { 0% { opacity: 0; scale: .7; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes shutter { 0%,55% { scale: 1; } 62% { scale: .94; } 70%,100% { scale: 1; } }

/* Active scene: each element builds once over ~0.9s (after its stagger delay)
   and holds. Hidden scenes are display:none so re-showing restarts the build. */
.scene.active .anim {
  animation-duration: .9s; animation-iteration-count: 1;
  animation-fill-mode: both; animation-timing-function: ease-out;
}

.scene.active .a-type   { animation-name: typeIn; animation-duration: 1.1s; animation-timing-function: steps(20, end); overflow: hidden; }
.scene.active .a-pop,
.scene.active .a-pop2,
.scene.active .a-pop3   { animation-name: popIn; }
.scene.active .a-fade   { animation-name: fadeUp; }
.scene.active .a-flow   { animation-name: flow; stroke-dasharray: 60; }
.scene.active .a-flash  { animation-name: flash; animation-duration: 1.6s; }
.scene.active .a-grow   { animation-name: grow; animation-duration: 1s; transform-origin: bottom; }
.scene.active .a-box    { animation-name: drawBox; animation-duration: 1s; stroke-dasharray: 320; }
.scene.active .a-alert  { animation-name: alertBlink; animation-duration: 1.2s; }
.scene.active .a-bubble { animation-name: bubbleIn; }
.scene.active .a-count  { animation-name: countSpin; animation-duration: 1s; }
.scene.active .a-shutter{ animation-name: shutter; animation-duration: 1.6s; }

/* scale around each element's own box, not the SVG viewport origin */
.scene.active .a-pop, .scene.active .a-pop2, .scene.active .a-pop3,
.scene.active .a-count, .scene.active .a-alert, .scene.active .a-shutter {
  transform-box: fill-box; transform-origin: center;
}
.scene.active .a-grow { transform-box: fill-box; transform-origin: bottom; }

/* continuously looping elements (independent of the one-shot build) */
.scene.active .a-scan  { animation: scanSweep 2.8s ease-in-out infinite; }
.scene.active .a-pulse { animation: pulse 1.4s ease-in-out infinite; }
.scene.active .a-dash  { animation: dash 1s linear infinite; stroke-dasharray: 6 6; }

/* per-element stagger (sequences the one-shot build) */
.d1 { animation-delay: .15s !important; } .d2 { animation-delay: .45s !important; }
.d3 { animation-delay: .8s !important; } .d4 { animation-delay: 1.15s !important; }
.d5 { animation-delay: 1.5s !important; } .d6 { animation-delay: 1.9s !important; }
/* pulses keep their own staggering small */
.scene.active .a-pulse.d2 { animation-delay: .2s !important; }
.scene.active .a-pulse.d3 { animation-delay: .4s !important; }

@media (prefers-reduced-motion: reduce) {
  .scene.active .anim { animation: none !important; }
  .scene.active .a-type { width: var(--w, 80px) !important; }
}