/* ==========================================================================
   VibeMagic — story.css
   #process (scroll-drawn timeline) · #about (rim-lit portrait + tool orbit)
   #learn (101 episodes: YouTube facade + prompt cards) · #faq (accordion)

   21st.dev components ported to vanilla CSS (+ js/story.js):
     · Timeline ............ Manu Arora (Aceternity UI)   rail + sticky title column + progress bar
                                                          drawn by scroll (offset start→end, scrubbed)
     · Orbiting Circles .... Dillion Verma (Magic UI)     rotate(θ) translateY(R) rotate(-θ), linear,
                                                          infinite; phase = negative delay; track ring
   Brand axis: gradients run yellow (left) → purple (right), never mirrored for RTL.
   ========================================================================== */

/* ==========================================================================
   1. #process — TIMELINE (Aceternity "Timeline", RTL: rail on the right)
   .timeline::before        the faint track (exists without JS)
   li.timeline__track       injected by JS: progress fill (scaleY) + sparkle head
   .tl.is-lit               the progress passed this row's dot (JS). Until JS arms
                            the list (.is-armed) every row renders lit (failsafe).
   ========================================================================== */
.process {
  --tl-rail-x: 30px;                          /* rail centre, measured from the list's start (right) edge */
  --tl-dot: 44px;
  --tl-top: 30vh;                             /* where the number column sticks */
  --tl-no-fs: clamp(4.4rem, 8.2vw, 8.6rem);
  --tl-dot-off: calc((var(--tl-no-fs) * .8 - var(--tl-dot)) / 2);
  --tl-track: rgba(255, 255, 255, .13);
  --tl-fill: linear-gradient(to top, #FFF4E0 0%, #FFA600 2.5%, #FFC46B 9%, #F7ACE2 22%, #FC38FE 42%, #C805FE 68%, rgba(200, 5, 254, .3) 100%);
  --tl-no-stroke: rgba(255, 255, 255, .24);
  --tl-no-grad: var(--grad-headline);
}
[data-theme="light"] .process {
  --tl-track: rgba(10, 10, 11, .12);
  --tl-fill: linear-gradient(to top, #F29A00 0%, #F7A64A 8%, #EE5FA8 26%, #C82AE8 52%, #9B00D6 78%, rgba(155, 0, 214, .28) 100%);
  --tl-no-stroke: rgba(10, 10, 11, .26);
  --tl-no-grad: var(--grad-text-light);       /* gold end stays >= 3:1 on white (core.css token) */
}

.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: clamp(8px, 2vw, 24px) 0 clamp(24px, 5vw, 72px);
}
.timeline::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--tl-rail-x) - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--tl-track);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
  pointer-events: none;
}

.tl {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--tl-rail-x) * 2) calc(var(--tl-no-fs) * 1.1) minmax(0, 1fr);
  column-gap: clamp(20px, 3.4vw, 56px);
  align-items: start;
  padding-block: clamp(18px, 2.6vw, 34px);
}

/* dot: socket disc that masks the rail + an inner core that ignites */
.tl__dot {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  position: sticky;
  top: calc(var(--tl-top) + var(--tl-dot-off));
  margin-top: var(--tl-dot-off);
  z-index: 2;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .6s var(--ease-out);
}
.tl__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform .7s var(--ease-spring), background .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
/* one-shot burst ring when a dot ignites */
.tl__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid #FC38FE;
  opacity: 0;
  pointer-events: none;
}

/* huge ghost number: outline until lit, then a gradient pours in from the bottom */
.tl__no {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  position: sticky;
  top: var(--tl-top);
  z-index: 1;
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: var(--tl-no-fs);
  line-height: .8;
  letter-spacing: -.045em;
  padding-inline-end: .06em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--tl-no-stroke);
  background: var(--tl-no-grad) no-repeat 0 100% / 100% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  transition: background-size 1.1s var(--ease-out), -webkit-text-stroke-color .8s var(--ease-out), filter .8s var(--ease-out);
}

/* content card */
.tl__body {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  max-width: 760px;
  padding: clamp(22px, 2.5vw, 34px) clamp(22px, 2.8vw, 38px);
  border-radius: var(--radius-l);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}
.tl__body .h3 { margin-bottom: .45em; }
.tl__body p { color: var(--text-2); max-width: 54ch; }
/* gradient hairline that sweeps in from the start (right) edge when the row ignites */
.tl__body::before {
  content: '';
  position: absolute;
  top: -1px;
  inset-inline: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 calc(12px * var(--glow-a)) rgba(252, 56, 254, calc(.7 * var(--glow-a)));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 1s var(--ease-out) .1s;
}

/* lit state (default until the list is armed by JS, so nothing depends on JS) */
.timeline:not(.is-armed) .tl__dot,
.tl.is-lit .tl__dot {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-strong) 55%, transparent), 0 0 calc(22px * var(--glow-a)) rgba(200, 5, 254, calc(.35 * var(--glow-a)));
}
.timeline:not(.is-armed) .tl__dot::before,
.tl.is-lit .tl__dot::before {
  transform: scale(1.18);
  background: radial-gradient(circle at 35% 35%, #FFF4E0 0%, #FFA600 30%, #FF9E6E 60%, #FC38FE 100%);
  box-shadow: 0 0 calc(10px * var(--glow-a)) rgba(255, 166, 0, calc(.9 * var(--glow-a))), 0 0 calc(24px * var(--glow-a)) rgba(252, 56, 254, calc(.65 * var(--glow-a))), 0 0 0 calc(3px * (1 - var(--glow-a))) rgba(200, 5, 254, .14);
}
.tl.is-lit .tl__dot::after { animation: tl-burst 1s var(--ease-out) both; }
.timeline:not(.is-armed) .tl__no,
.tl.is-lit .tl__no {
  background-size: 100% 100%;
  -webkit-text-stroke-color: transparent;
  filter: drop-shadow(0 0 calc(18px * var(--glow-a)) rgba(215, 41, 255, calc(.4 * var(--glow-a))));
}
.timeline:not(.is-armed) .tl__body::before,
.tl.is-lit .tl__body::before { transform: scaleX(1); }
.tl.is-lit .tl__body { border-color: color-mix(in srgb, var(--accent-strong) 22%, var(--card-border)); }

@keyframes tl-burst {
  0% { opacity: .9; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* injected progress: li.timeline__track > .timeline__fill + .timeline__head */
.timeline__track {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--tl-rail-x);
  width: 0;
  list-style: none;                           /* no z-index: fill sits under the dots, head above */
  pointer-events: none;
}
.timeline__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--tl-fill);
  z-index: 1;
  transform-origin: 50% 0;
  transform: scaleY(0);
  box-shadow: 0 0 calc(8px * var(--glow-a)) rgba(252, 56, 254, calc(.75 * var(--glow-a))), 0 0 calc(20px * var(--glow-a)) rgba(200, 5, 254, calc(.4 * var(--glow-a)));
  will-change: transform;
}
.timeline__head {
  position: absolute;
  top: -15px;
  inset-inline-start: -15px;
  z-index: 3;
  width: 30px;
  height: 30px;
  opacity: 0;
  will-change: transform, opacity;
}
.timeline__head::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 207, 120, calc(.55 * var(--glow-a))), rgba(252, 56, 254, calc(.22 * var(--glow-a))) 55%, transparent);
}
[data-theme="light"] .timeline__head::before {
  inset: -18px;
  background: radial-gradient(closest-side, rgba(252, 215, 137, .95), rgba(230, 150, 249, .5) 55%, transparent);
}
.timeline__head .sparkle { position: relative; width: 100%; height: 100%; font-size: 30px; }
.timeline:not(.is-active) .timeline__head .sparkle { animation-play-state: paused; }

/* reduced motion / finished: everything drawn and lit */
.timeline.is-static .timeline__fill { transform: none; }
.timeline.is-static .timeline__head { display: none; }

@media (max-width: 720px) {
  .process {
    --tl-rail-x: 15px;
    --tl-dot: 30px;
    --tl-top: 34vh;
    --tl-dot-off: 20px;
  }
  .timeline { padding-block: 4px 32px; }
  .tl {
    grid-template-columns: calc(var(--tl-rail-x) * 2) minmax(0, 1fr);
    column-gap: 12px;
    padding-block: 9px;
  }
  /* compact: the dot stays beside its title instead of gliding (cards are short on phones) */
  .tl__dot { position: relative; top: auto; }
  .tl__dot::before { width: 10px; height: 10px; }
  .tl__body {
    grid-column: 2;
    padding: 20px 20px 22px;
    border-radius: var(--radius);
  }
  .tl__body .h3 { padding-inline-end: 3.2rem; }
  .tl__body::before { inset-inline: 20px; }
  /* the number becomes a ghost watermark in the card's top-left (end) corner */
  .tl__no {
    grid-column: 2;
    position: absolute;
    top: 21px;
    inset-inline-end: 16px;
    font-size: 3rem;
    line-height: .8;
    -webkit-text-stroke-width: 1.2px;
    pointer-events: none;
  }
}

/* ==========================================================================
   2. #about — RIM-LIT PORTRAIT + ORBITING TOOLS (Magic UI "Orbiting Circles")
   .about__orbit is a size container: the radius is --rp % of the stage (cqi).
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  /* capped: on wide screens a bigger gap only squeezes the title into 3 lines */
  gap: clamp(40px, 5vw, 80px);
}

.about__visual {
  position: relative;
  isolation: isolate;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-inline: auto;
}
/* halo behind the portrait (dark: violet haze + gold/magenta flares, light: pastel blobs) */
.about__visual::before {
  content: '';
  position: absolute;
  inset: 2%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(42% 42% at 26% 58%, rgba(203, 146, 3, .32), transparent 72%),
    radial-gradient(42% 42% at 76% 46%, rgba(252, 56, 254, .26), transparent 72%),
    radial-gradient(closest-side, rgba(109, 4, 160, .5), rgba(42, 8, 69, .32) 60%, transparent);
  filter: blur(18px);
  pointer-events: none;
}
[data-theme="light"] .about__visual::before {
  inset: -4%;
  background:
    radial-gradient(40% 40% at 26% 60%, #FFE2A5, transparent 74%),
    radial-gradient(44% 44% at 72% 42%, #F5C9FC, transparent 74%),
    radial-gradient(closest-side, rgba(249, 227, 252, .9), transparent);
  filter: blur(26px);
}

.about__portrait {
  /* the mask clips to the border box, so the padding gives the rim glow room */
  --pad: 46px;
  position: absolute;
  inset-inline: calc(7% - var(--pad));
  bottom: 0;
  z-index: 1;
  width: calc(86% + var(--pad) * 2);
  max-width: none;
  height: auto;
  padding: var(--pad) var(--pad) 0;
  /* bottom fade + a short fade on the left edge, where the source cut-out ends at the
     sleeve (otherwise a hard vertical line); the band stays well clear of the face */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 76%, transparent 98%),
    linear-gradient(to right, transparent var(--pad), #000 calc(var(--pad) + 10%));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 76%, transparent 98%),
    linear-gradient(to right, transparent var(--pad), #000 calc(var(--pad) + 10%));
  mask-composite: intersect;
  /* poster 3 rim light: gold on the left, magenta on the right, violet bloom */
  filter:
    drop-shadow(-5px 0 7px rgba(255, 167, 10, calc(.6 * var(--glow-a))))
    drop-shadow(6px -2px 9px rgba(245, 36, 253, calc(.55 * var(--glow-a))))
    drop-shadow(0 0 26px rgba(109, 4, 160, calc(.55 * var(--glow-a))));
  transform-origin: 50% 60%;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
[data-theme="light"] .about__portrait {
  filter: drop-shadow(0 18px 28px rgba(80, 10, 120, .16));
}

.about__orbit {
  --rp: 46;                                   /* orbit radius in % of the stage */
  --size: clamp(40px, 10.4cqi, 58px);
  --dur: 56s;
  --chip-bg: rgba(19, 11, 31, .82);
  --ring: rgba(255, 255, 255, .2);
  position: absolute;
  inset: 0;
  z-index: 2;
  container-type: inline-size;
  pointer-events: none;
}
[data-theme="light"] .about__orbit {
  --chip-bg: rgba(255, 255, 255, .9);
  --ring: rgba(10, 10, 11, .22);
}
/* faint dashed track (the original's SVG circle) */
.about__orbit::before {
  content: '';
  position: absolute;
  inset: calc((50 - var(--rp)) * 1%);
  border-radius: 50%;
  border: 1px dashed var(--ring);
}
/* a gold → magenta comet riding the track */
.about__orbit::after {
  content: '';
  position: absolute;
  inset: calc((50 - var(--rp)) * 1% - 1px);
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, rgba(255, 166, 0, .1) 270deg, #FFA600 318deg, #FC38FE 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 calc(6px * var(--glow-a)) rgba(252, 56, 254, calc(.9 * var(--glow-a))));
  animation: about-spin calc(var(--dur) / 4) linear infinite;
}
[data-theme="light"] .about__orbit::after {
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, rgba(242, 154, 0, .15) 270deg, #F29A00 318deg, #C82AE8 352deg, transparent 360deg);
}

.about__tool {
  --phase: calc(var(--a) * 45deg);
  --orbit-r: calc(var(--rp) * -1cqi);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: var(--chip-bg);
  border: 1px solid var(--card-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent), 0 0 0 4px color-mix(in srgb, var(--bg) 35%, transparent), 0 0 calc(18px * var(--glow-a)) rgba(255, 166, 0, calc(.28 * var(--glow-a))), var(--shadow);
  /* static placement = the same transform the keyframes use (reduced motion / no animation) */
  transform: rotate(var(--phase)) translateY(var(--orbit-r)) rotate(calc(var(--phase) * -1));
  animation: about-orbit var(--dur) linear infinite;
  animation-delay: calc(var(--dur) * var(--a) / -8);
  will-change: transform;
}
.about__tool:nth-child(even) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent), 0 0 0 4px color-mix(in srgb, var(--bg) 35%, transparent), 0 0 calc(18px * var(--glow-a)) rgba(252, 56, 254, calc(.32 * var(--glow-a))), var(--shadow);
}
.about__tool .i { width: 44%; height: 44%; }

@keyframes about-orbit {
  from { transform: rotate(0deg) translateY(var(--orbit-r)) rotate(0deg); }
  to { transform: rotate(360deg) translateY(var(--orbit-r)) rotate(-360deg); }
}
@keyframes about-spin { to { transform: rotate(360deg); } }

.about__orbit.is-paused::after,
.about__orbit.is-paused .about__tool { animation-play-state: paused; }

/* text column */
.about__text {
  display: grid;
  justify-items: start;
  gap: clamp(16px, 1.8vw, 24px);
}
.about__text > p:not(.lead) { color: var(--text-2); max-width: 58ch; }
.about__text .lead { max-width: 34em; }

.about__stats {
  list-style: none;
  padding: 0;
  margin-top: clamp(6px, 1vw, 14px);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  padding-top: clamp(20px, 2.4vw, 30px);
}
.about__stats::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--grad-hairline);
  opacity: .9;
}
[data-theme="light"] .about__stats::before { background: var(--grad-swoosh); opacity: .55; }
.about__stats li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-inline: clamp(12px, 1.8vw, 26px);
}
.about__stats li:first-child { padding-inline-start: 0; }
.about__stats li + li::before {
  content: '';
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #FFE4B2 30%, #E979EC 70%, transparent);
  box-shadow: 0 0 calc(10px * var(--glow-a)) rgba(233, 121, 236, calc(.45 * var(--glow-a)));
  opacity: .8;
}
[data-theme="light"] .about__stats li + li::before { background: linear-gradient(to bottom, transparent, #F29A00 30%, #C82AE8 70%, transparent); opacity: .5; }
.about__stats b {
  justify-self: start;
  font-size: clamp(2.6rem, 4.6vw, 4.1rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 calc(14px * var(--glow-a)) rgba(215, 41, 255, calc(.45 * var(--glow-a))));
  padding-block: .04em;
}
[data-theme="light"] .about__stats b {
  background-image: var(--grad-text-light);
}
.about__stats span {
  font-size: .92rem;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 8vw, 56px); }
  .about__visual { width: min(100%, 440px); }
}
@media (max-width: 720px) {
  .about__visual { width: min(88%, 360px); }
  .about__orbit { --rp: 45; --dur: 46s; }
  .about__portrait { --pad: 34px; }
  .about__stats b { font-size: clamp(2.3rem, 11vw, 2.9rem); }
  .about__stats span { font-size: .84rem; }
  .about__stats li { padding-inline: 12px; }
}

/* ==========================================================================
   3. #learn — 101 EPISODES (YouTube facade + prompt cards)
   ========================================================================== */
.episodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  align-items: stretch;
}
/* flex columns: the cards are stretched to the same height, and each card's bottom link
   (.ep__live) is pinned to the bottom so the shorter card does not end in empty space */
.ep {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1vw, 14px);
  border-radius: var(--radius-l);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

/* video facade (button → div.is-playing with the iframe) */
.ep__video {
  position: relative;
  isolation: isolate;
  display: block;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius-l) - 10px);
  background: #0A0612;
  -webkit-tap-highlight-color: transparent;
}
.ep__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease-out);
}
.ep__video::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  /* light touch: the auto-frames are already busy and dark, a heavy vignette made them murky */
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(10, 6, 18, 0), rgba(10, 6, 18, .22)),
    linear-gradient(to top, rgba(42, 8, 69, .35), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: opacity .5s var(--ease-out);
}
.ep__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  width: clamp(62px, 6.4vw, 82px);
  height: clamp(62px, 6.4vw, 82px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #FDFDFD;
  border: 2px solid transparent;
  background: linear-gradient(#0A0612, #0A0612) padding-box, var(--grad-cta) border-box;
  box-shadow: -12px 0 30px -6px rgba(250, 169, 13, .55), 12px 0 30px -6px rgba(217, 22, 227, .6), 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .6s var(--ease-spring), box-shadow .5s var(--ease-out);
}
.ep__play .i { width: 40%; height: 40%; translate: 7% 0; }
/* soft ping while the section is on screen (paused otherwise) */
.ep__play::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(252, 56, 254, .7);
  opacity: 0;
  animation: ep-ping 2.8s var(--ease-out) infinite;
  animation-play-state: paused;
}
.learn.is-live .ep__play::before { animation-play-state: running; }
@keyframes ep-ping {
  0% { opacity: .75; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}
@media (hover: hover) and (pointer: fine) {
  .ep__video:hover img { transform: scale(1.045); }
  .ep__video:hover .ep__play { transform: scale(1.1); box-shadow: -16px 0 40px -4px rgba(250, 169, 13, .7), 16px 0 40px -4px rgba(217, 22, 227, .75), 0 10px 30px rgba(0, 0, 0, .45); }
}
.ep__video:focus-visible { outline-offset: 4px; border-radius: calc(var(--radius-l) - 10px); }
.ep__video:active .ep__play { transform: scale(.94); }

[data-theme="light"] .ep__video::after {
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(10, 6, 18, 0), rgba(10, 6, 18, .3)),
    linear-gradient(to top, rgba(109, 4, 160, .28), transparent 55%);
}
.ep__video.is-playing::after { opacity: 0; }
.ep__video.is-playing iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.ep__body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2vw, 26px) clamp(8px, 1.2vw, 16px) clamp(8px, 1vw, 12px);
}
.ep__no {
  align-self: start;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .32em;
  color: var(--accent);
  direction: ltr;
  text-shadow: 0 0 calc(10px * var(--glow-a)) rgba(224, 138, 247, calc(.6 * var(--glow-a)));
}
.ep__body .h3 { margin-top: -6px; }

/* prompt card: code-like, Hebrew prompt, copy button */
.prompt {
  --prompt-bg: rgba(4, 2, 7, .55);
  position: relative;
  border-radius: 18px;
  background: var(--prompt-bg);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .4s var(--ease-out), box-shadow .5s var(--ease-out);
}
[data-theme="light"] .prompt { --prompt-bg: #F8F4FB; }
.prompt__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 8px;
  padding-inline: 16px 8px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.prompt__head > span {
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.prompt__head > span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 calc(8px * var(--glow-a)) var(--yellow), 11px 0 0 #F524FD, 11px 0 calc(8px * var(--glow-a)) #F524FD;
  margin-inline-end: 11px;
}
[data-theme="light"] .prompt__head > span::before { background: #F29A00; box-shadow: 11px 0 0 #C82AE8; }
.prompt__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  transition: color .3s, border-color .3s, background-color .3s, transform .4s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.prompt__copy .i { width: 1.05em; height: 1.05em; transition: transform .4s var(--ease-spring), opacity .3s; }
.prompt__copy:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) {
  .prompt__copy:hover { color: var(--accent); border-color: var(--accent-strong); }
}
.prompt__copy.is-copied {
  color: var(--accent-gold);
  border-color: color-mix(in srgb, var(--accent-gold) 70%, transparent);
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
}
.prompt__copy.is-copied .i { display: none; }
.prompt.is-copied {
  border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
  box-shadow: 0 0 calc(26px * var(--glow-a)) rgba(255, 166, 0, calc(.18 * var(--glow-a)));
}
.prompt__text {
  padding: 14px 18px 16px;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--text);
}
.prompt__text::before {
  content: '✦';
  content: '✦' / '';                          /* decorative: not part of the read-out prompt */
  display: inline-block;
  margin-inline-end: .55em;
  font-size: .85em;
  color: var(--accent-gold);
  text-shadow: 0 0 calc(10px * var(--glow-a)) rgba(255, 166, 0, calc(.8 * var(--glow-a)));
}
/* blinking caret at the end, only while hovered (no idle loops) */
.prompt__text::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 3px;
  vertical-align: -.16em;
  border-radius: 1px;
  background: linear-gradient(#FFA600, #FC38FE);
  opacity: .8;
}
@media (hover: hover) and (pointer: fine) {
  .prompt:hover .prompt__text::after { animation: prompt-caret 1s steps(1) infinite; }
}
@keyframes prompt-caret { 50% { opacity: 0; } }

.ep__live {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: auto;
  padding-block: 4px;
  font-weight: 700;
  color: var(--accent);
  background: linear-gradient(currentColor 0 0) 100% 100% / 0 1.5px no-repeat;
  transition: background-size .5s var(--ease-out), color .3s;
}
.ep__live .i { width: 1.05em; height: 1.05em; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ep__live:hover { background-size: 100% 1.5px; }
  .ep__live:hover .i { transform: translate(-3px, -3px); }
}

.learn__channel {
  display: flex;
  width: fit-content;
  margin: clamp(36px, 5vw, 64px) auto 0;
}
.learn__channel .i { color: #FF0033; }

/* touch: 44px targets without changing the drawn pill (the hit area grows into the head's padding) */
@media (pointer: coarse) {
  .prompt__copy { position: relative; }
  .prompt__copy::after { content: ''; position: absolute; inset: -5px -4px; }
  .ep__live { min-height: 44px; }
}

@media (max-width: 820px) {
  .episodes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .prompt__text { font-size: .95rem; padding: 12px 15px 14px; }
  .prompt__head { padding-inline: 14px 6px; }
}

/* ==========================================================================
   4. #faq — STICKY HEAD + ACCORDION CARDS
   Cards are [data-spotlight] (services.css paints the hover effect); this file
   does layout, type and the open/close motion:
     · modern engines: ::details-content + interpolate-size (pure CSS, works with
       the native name="faq" exclusive group)
     · otherwise js/story.js animates .faq__a with WAAPI and adds .faq--js
   ========================================================================== */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 104px);
  align-items: start;
}
.faq__head {
  position: sticky;
  top: calc(var(--nav-h) + 48px);
  margin-bottom: 0;
}
.faq__list {
  display: grid;
  gap: 12px;
  counter-reset: faq;
}
.faq__item {
  --faq-px: clamp(18px, 2vw, 26px);
  --faq-gap: clamp(12px, 1.4vw, 18px);
  --faq-no: 24px;
  --faq-chev: 38px;
  counter-increment: faq;
  border-radius: var(--radius);
}
.faq__item summary {
  display: flex;
  align-items: center;
  gap: var(--faq-gap);
  padding: clamp(18px, 1.8vw, 24px) var(--faq-px);
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
  font-weight: 700;
  font-size: clamp(1.04rem, 1.25vw, 1.2rem);
  line-height: 1.4;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }
.faq__item summary::before {
  content: counter(faq, decimal-leading-zero);
  flex: none;
  width: var(--faq-no);
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--accent);
  direction: ltr;
  text-align: right;
  transition: color .4s;
}
.faq__item summary > span { flex: 1; min-width: 0; }
.faq__item summary .i {
  flex: none;
  width: var(--faq-chev);
  height: var(--faq-chev);
  padding: 9px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text);
  overflow: visible;
  transition: transform .6s var(--ease-out), background-color .35s, border-color .35s, color .35s, box-shadow .5s;
}
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover .i { border-color: var(--accent-strong); color: var(--accent); }
}
.faq__item summary:focus-visible { outline-offset: -3px; border-radius: inherit; }
.faq__item[open] summary .i {
  transform: rotate(180deg);
  color: #0A0A0B;
  background: var(--yellow);
  border-color: transparent;
  box-shadow: 0 0 calc(18px * var(--glow-a)) rgba(255, 166, 0, calc(.5 * var(--glow-a)));
}
.faq__item[open] {
  border-color: color-mix(in srgb, var(--accent-strong) 30%, var(--card-border));
}
.faq__a {
  padding-block: 0 clamp(20px, 2vw, 26px);
  padding-inline: calc(var(--faq-px) + var(--faq-no) + var(--faq-gap)) calc(var(--faq-px) + var(--faq-chev) + var(--faq-gap));
  color: var(--text-2);
  transition: opacity .5s var(--ease-out) .08s, translate .6s var(--ease-out);
}
.faq__a p { max-width: 60ch; }

/* CSS path: animate the details content box itself */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .faq:not(.faq--js) { interpolate-size: allow-keywords; }
  .faq:not(.faq--js) .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .55s var(--ease-out), content-visibility .55s allow-discrete;
  }
  .faq:not(.faq--js) .faq__item[open]::details-content { block-size: auto; }
  .faq:not(.faq--js) .faq__item:not([open]) .faq__a { opacity: 0; translate: 0 -8px; transition-delay: 0s; }
  @starting-style {
    .faq:not(.faq--js) .faq__item[open] .faq__a { opacity: 0; translate: 0 -8px; }
  }
}
/* JS path (WAAPI height) */
.faq--js .faq__a { overflow: hidden; }

@media (max-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq__head { position: static; margin-bottom: clamp(32px, 6vw, 56px); }
}
@media (max-width: 720px) {
  .faq__item { --faq-chev: 34px; --faq-no: 20px; }
  .faq__item summary .i { padding: 8px; }
  .faq__a { padding-inline-end: var(--faq-px); }
}

/* ==========================================================================
   Reduced motion: final states, no loops
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .about__tool,
  .about__orbit::after,
  .ep__play::before,
  .timeline__head .sparkle { animation: none !important; }
  .about__orbit::after { transform: rotate(140deg); }
}
/* ?rm=1 (VM.reduced without the media query): js/story.js adds .is-still */
.about__orbit.is-still::after,
.about__orbit.is-still .about__tool,
.learn.is-still .ep__play::before { animation: none !important; }
.about__orbit.is-still::after { transform: rotate(140deg); }