/* «Historias destacadas» (web/js/stories.js): the stages of SFL as Instagram-style highlight rings, and the story viewer
   they open — a 9:16 card, full screen on a phone and centred on a computer: the moment's frame on top with the bars,
   the stage's colour below with the fan's line, the real quote in a bubble and «Ver el momento». */
.highlights { margin-block: 0 clamp(1.8rem, 4vw, 2.8rem); }
.highlights ul { display: flex; gap: clamp(.9rem, 2.5vw, 1.6rem); list-style: none; overflow-x: auto; padding: .4rem .25rem .6rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.highlights li { flex: none; scroll-snap-align: start; }
.highlight { display: grid; justify-items: center; gap: .5rem; inline-size: clamp(5.2rem, 4.2rem + 3vw, 6.6rem); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
/* Unseen: a ring in the stage's colour running into the show's yellow; seen: a quiet grey ring, as on Instagram. */
.highlight-ring { display: grid; inline-size: 100%; aspect-ratio: 1; padding: 4px; border-radius: 50%; background: conic-gradient(from 200deg, var(--era), var(--yellow), var(--era)); }
.highlight.is-seen .highlight-ring { background: oklch(78% .012 270); }
.highlight-face { display: grid; place-items: center; overflow: clip; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 3px var(--paper); }
.highlight-face img { inline-size: 76%; block-size: 76%; object-fit: contain; rotate: -6deg; }
.highlight-face img[src*='ytimg'] { inline-size: 100%; block-size: 100%; object-fit: cover; rotate: none; }
.highlight-label { max-inline-size: 100%; font-size: .9rem; font-weight: 800; line-height: 1.15; text-align: center; text-wrap: balance; }
.highlight:focus-visible { outline: none; }
.highlight:focus-visible .highlight-ring { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .highlight:hover .highlight-ring { scale: 1.04; } }
@media (prefers-reduced-motion: no-preference) { .highlight-ring { transition: scale 200ms var(--ease-out); } .highlight:active .highlight-ring { scale: .97; } }

.story { inline-size: 100vw; max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; padding: 0; border: 0; background: transparent; }
.story[open] { display: grid; place-items: center; }
.story::backdrop { background: oklch(22% .045 276 / .9); backdrop-filter: blur(6px); }
.story-card {
  --w: min(100vw, 27rem, calc(100dvh * 9 / 16));
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; inline-size: var(--w); block-size: min(100dvh, calc(var(--w) * 16 / 9));
  overflow: clip; padding-block-start: 3.9rem; border-radius: 18px; background: var(--era); color: var(--ink); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7);
}
/* A phone gets the whole screen, as Instagram does. */
@media (max-width: 30rem) { .story-card { inline-size: 100vw; block-size: 100dvh; border-radius: 0; } }
.story-bars { position: absolute; inset: .7rem .8rem auto; z-index: 3; display: flex; gap: 4px; }
.story-bars i { flex: 1; block-size: 3px; overflow: hidden; border-radius: 2px; background: rgb(35 38 79 / .22); }
.story-bars b { display: block; inline-size: 0; block-size: 100%; background: var(--ink); }
.story-bars .is-done b, .story-bars .is-now b { inline-size: 100%; }
.story-head { position: absolute; inset: 1.15rem .55rem auto 1rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.story-era { font-weight: 850; font-size: .95rem; }
.story-close { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 50%; background: rgb(35 38 79 / .1); color: var(--ink); cursor: pointer; }
.story-close svg { inline-size: 1.2rem; block-size: 1.2rem; }
.story-close:focus-visible, .story-watch:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* The programme's whole cover, never cropped (its printed title would be cut), pasted like a photo in a fan's album. */
.story-media { position: relative; margin: .2rem 1.1rem 0; rotate: -1.6deg; }
.story-photo { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 6px solid var(--sheet); border-radius: 6px; background: var(--ink); box-shadow: 0 10px 22px -12px rgb(35 38 79 / .6); }
/* The stage's sticker slapped on the photo's corner. */
.story-sticker { position: absolute; inset: auto -.6rem -1.9rem auto; z-index: 2; inline-size: clamp(4.4rem, 24%, 5.8rem); aspect-ratio: 1; rotate: 9deg; filter: drop-shadow(0 4px 6px rgb(35 38 79 / .3)); pointer-events: none; }
.story-sticker img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.story-beat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin: 0; padding: 1.5rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom)); }
.story-when { padding: .15rem .6rem; border-radius: 6px; background: var(--ink); color: var(--sheet); font-size: .8rem; font-weight: 800; }
.story-title { margin-inline-end: 3.2rem; font-size: clamp(1.8rem, 1.4rem + 2.2vw, 2.3rem); font-weight: 900; font-stretch: 106%; line-height: 1.02; text-wrap: balance; }
.story-line { font-size: 1.1rem; line-height: 1.45; text-wrap: pretty; }
/* The real words in a bubble: what someone said on air, never the fan's paraphrase. */
.story-quote { position: relative; align-self: stretch; margin: .3rem 0 .1rem; padding: .75rem .95rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--sheet); }
.story-quote::after { content: ''; position: absolute; inset: auto auto -9px 1.4rem; inline-size: 14px; block-size: 14px; border: 2px solid var(--ink); border-block-start: 0; border-inline-start: 0; background: var(--sheet); rotate: 45deg; }
.story-quote p { font-size: 1.08rem; font-weight: 750; line-height: 1.35; }
.story-quote cite { display: inline-block; margin-block-start: .35rem; font-style: normal; font-size: .8rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.story-watch { position: relative; z-index: 2; }
/* «Ver el momento» sits at the foot of the card, where a story keeps its link. */
.story-watch { margin-block-start: auto; }
/* Tap zones as on Instagram: the left third goes back, the rest goes on. Under the link and the close button. */
.story-step { position: absolute; inset-block: 3.4rem 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
.story-prev { inset-inline: 0 70%; }
.story-next { inset-inline: 30% 0; }
/* Focused from a keyboard (or hovered with a mouse), a zone shows its arrow at the card's edge instead of a frame. */
.story-step::after { content: ''; position: absolute; inset-block-start: 38%; display: grid; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%;
  background: var(--sheet) no-repeat center / 1.1rem; box-shadow: 0 0 0 2px var(--ink); opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323264f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.story-prev::after { inset-inline-start: .5rem; scale: -1 1; }
.story-next::after { inset-inline-end: .5rem; }
.story-step:focus-visible { outline: none; }
.story-step:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .story-step:hover::after { opacity: .9; } }

@media (prefers-reduced-motion: no-preference) {
  .story-bars .is-now b { inline-size: 0; animation: story-fill linear forwards; }
  .story.is-paused .story-bars .is-now b { animation-play-state: paused; }
  .story-beat > *, .story-sticker { animation: story-in .45s var(--ease-out) backwards; }
  .story-beat > :nth-child(2) { animation-delay: .05s; }
  .story-beat > :nth-child(3) { animation-delay: .1s; }
  .story-beat > :nth-child(4) { animation-delay: .16s; }
  .story-beat > :nth-child(5) { animation-delay: .22s; }
  .story-sticker { animation: story-slap .5s var(--ease-pop, var(--ease-out)) .12s backwards; }
}
@keyframes story-fill { to { inline-size: 100%; } }
@keyframes story-in { from { opacity: 0; translate: 0 .6rem; } }
@keyframes story-slap { from { opacity: 0; scale: 1.6; rotate: -10deg; } }