:root {
  --navy-950: #071426;
  --navy-900: #0b1f38;
  --navy-800: #12345a;
  --navy-700: #1b3a63;
  --blue: #3d7fca;
  --blue-soft: #84b7ec;
  --orange: #ff6b35;
  --orange-deep: #c9451a;
  --cream: #f7f1e7;
  --paper: #fffdf8;
  --ink: #10233c;
  --muted: #637285;
  --line: rgba(27, 58, 99, 0.16);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-bottom: 96px; /* réserve la place de la barre .player, fixe en bas */
  background: var(--cream);
  color: var(--ink);
  font-family:
    Calibri, "Segoe UI", Aptos, system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;
}

button,
a {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

/* Version originale : bandeau du haut en navy-950 sombre, transition vers
   le cream ensuite. Repris en clair partout — charte inerWeb Édu, jamais
   de thème sombre (F. Henninot) — la lisibilité prime sur l'effet
   « expérience immersive » du site d'origine. La légère lueur radiale est
   gardée, juste éclaircie pour rester perceptible sur fond clair. */
.experience {
  --scene-color: var(--blue);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 7%, rgba(61, 127, 202, 0.08), transparent 28rem),
    var(--cream);
  transition: --scene-color 500ms ease;
}

.theme-climat,
.theme-transition {
  --scene-color: var(--orange);
}

.theme-metier {
  --scene-color: #e8a23a;
}

.ambient {
  position: absolute;
  inset: 0 0 auto;
  height: 48rem;
  overflow: hidden;
  pointer-events: none;
}

/* Traits plus discrets sur fond clair qu'ils ne l'étaient sur fond sombre :
   même géométrie, opacité et couleurs adoucies pour rester un fond
   d'ambiance et ne jamais concurrencer le texte. */
.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.5;
  animation: drift 16s ease-in-out infinite alternate;
}

.orb-one {
  width: 24rem;
  height: 24rem;
  top: 4rem;
  right: -7rem;
  border: 1px solid rgba(27, 58, 99, 0.14);
}

.orb-two {
  width: 16rem;
  height: 16rem;
  top: 10rem;
  right: 6rem;
  border: 1px dashed rgba(255, 107, 53, 0.22);
  animation-delay: -5s;
}

.orb-three {
  width: 6rem;
  height: 6rem;
  top: 27rem;
  left: 8%;
  background: rgba(255, 107, 53, 0.08);
  animation-delay: -9s;
}

@keyframes drift {
  from {
    transform: translate3d(-1rem, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(1rem, 1.5rem, 0) rotate(10deg);
  }
}

.topbar,
.hero,
.story-shell,
.final-message,
.sources-panel,
footer {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy-700);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(27, 58, 99, 0.3);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(61, 127, 202, 0.18), rgba(255, 107, 53, 0.14));
  font-family: "Trebuchet MS", Calibri, sans-serif;
  font-size: 25px;
  font-style: italic;
}

.brand span:last-child {
  display: grid;
}

.brand strong {
  font-size: 14px;
  letter-spacing: 0.04em;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-toggle {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy-700);
  background: rgba(27, 58, 99, 0.03);
  cursor: pointer;
  padding: 0 15px;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.source-toggle:hover {
  border-color: var(--blue);
  color: var(--navy-900);
  background: rgba(27, 58, 99, 0.08);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 200px);
  align-items: center;
  min-height: auto;
  padding: 14px 0 18px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 800px;
  margin: 0;
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.hero h1 span {
  color: var(--orange);
  font-style: italic;
}

.hero-intro {
  max-width: 610px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.guide-wrap {
  position: relative;
  align-self: center;
  height: 88px;
}

.guide-halo {
  position: absolute;
  right: 9%;
  bottom: -10px;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(27, 58, 99, 0.14);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(61, 127, 202, 0.14), transparent 68%),
    repeating-radial-gradient(
      circle,
      transparent 0 38px,
      rgba(27, 58, 99, 0.035) 39px 40px
    );
}

.guide-image {
  position: absolute;
  z-index: 1;
  right: 12%;
  bottom: -1px;
  width: min(100%, 95px);
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32));
}

.guide-badge {
  display: none;
}

.guide-badge strong {
  color: white;
  font-size: 13px;
}

.guide-badge span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}

.story-shell {
  margin-top: -14px;
  color: var(--ink);
}

.story-stage {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow:
    0 28px 80px rgba(7, 20, 38, 0.22),
    inset 0 1px 0 white;
}

.thread-legend {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-item i {
  width: 26px;
  height: 3px;
  border-radius: 99px;
}

.legend-item.ozone i {
  background: var(--blue);
}

.legend-item.climate i {
  background: var(--orange);
}

.timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 5px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 58, 99, 0.3) transparent;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(78px, 1fr));
  min-width: 900px;
  min-height: 76px;
  align-items: start;
}

.timeline-track {
  position: absolute;
  top: 30px;
  left: 5%;
  height: 2px;
  border-radius: 2px;
}

.track-base {
  right: 5%;
  background: rgba(27, 58, 99, 0.15);
}

.track-progress {
  max-width: 90%;
  background: linear-gradient(90deg, var(--blue), var(--scene-color));
  box-shadow: 0 0 12px color-mix(in srgb, var(--scene-color) 32%, transparent);
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timeline-thread {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 3px;
  border-radius: 99px;
  pointer-events: none;
}

.ozone-thread {
  top: 2px;
  right: 46%;
  background: linear-gradient(90deg, var(--blue), rgba(61, 127, 202, 0.18));
}

.climate-thread {
  top: 12px;
  left: 46%;
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.18), var(--orange));
}

.timeline-event {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  min-width: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  padding: 19px 5px 0;
  text-align: center;
}

.event-dot {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(27, 58, 99, 0.18);
  border-radius: 50%;
  background: var(--paper);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.event-dot i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(27, 58, 99, 0.28);
  transition:
    transform 220ms ease,
    background 220ms ease;
}

.timeline-event:hover .event-dot,
.timeline-event:focus-visible .event-dot {
  transform: translateY(-3px);
  border-color: var(--scene-color);
}

.timeline-event.active .event-dot {
  transform: scale(1.15);
  border-color: var(--scene-color);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--scene-color) 10%, transparent),
    0 8px 22px color-mix(in srgb, var(--scene-color) 18%, transparent);
}

.timeline-event.active .event-dot i,
.timeline-event.past .event-dot i {
  background: var(--scene-color);
}

.timeline-event.active .event-dot i {
  transform: scale(1.35);
}

.event-year {
  margin-top: 12px;
  color: var(--navy-700);
  font-size: 13px;
  font-weight: 850;
}

.event-label {
  max-width: 106px;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.timeline-event.active .event-label {
  color: var(--scene-color);
}

.narration-card {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--cream);
}

.narration-meta {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 16px;
  color: white;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--scene-color) 70%, var(--navy-900)), var(--navy-900));
}

.narration-meta::after {
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
}

/* La date est la référence d'une frise temporelle : c'est elle qu'on doit
   retenir en un coup d'œil, pas le numéro d'étape (déjà visible sur la
   frise au-dessus). Le numéro passe donc en second, petit et discret. */
.narration-meta > div {
  order: 1;
}

.scene-number {
  order: 2;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.narration-meta p {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.narration-meta strong {
  display: block;
  color: white;
  font-family: "Trebuchet MS", Calibri, sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.narration-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px clamp(16px, 2.4vw, 30px);
  overflow-y: auto;
}

.narration-copy h2 {
  margin: 0;
  color: var(--navy-800);
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.narration-copy > p {
  max-width: 790px;
  margin: 10px 0 0;
  color: #435369;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
}

.takeaway {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 760px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--navy-700);
  font-size: 14px;
  line-height: 1.5;
}

.takeaway span {
  color: var(--scene-color);
  font-size: 19px;
  line-height: 1;
}

/* Disposition façon diapositive : image d'un côté, texte de l'autre, les deux
   calés sur la même hauteur pour tenir sur un seul écran sans défilement. */
.slide {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  height: 236px;
}

/* Illustration de la scène : une image, fondu d'apparition géré en JS via
   la classe .is-visible. Tant qu'aucune image n'est fournie (404), le bloc
   se masque tout seul (voir onerror dans le JS) au lieu d'afficher une icône
   d'image cassée. */
.scene-visual {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 8px;
  background: var(--navy-800);
  box-shadow: 0 14px 30px rgba(3, 10, 22, 0.35);
}

/* Le lecteur vit DANS .story-shell, dont le z-index 1 crée un contexte
   d'empilement : sans ce relèvement, .final-message (z-index 1 aussi,
   plus tard dans le document) peignait PAR-DESSUS le lecteur fixe et
   avalait ses clics — constaté par F. Henninot le 14/08. */
.story-shell { z-index: 2; }

/* Ancré en bas de l'écran, toujours visible : F. Henninot (28/07) a
   trouvé les commandes de navigation trop discrètes, cachées en bas
   d'une page qu'il fallait faire défiler pour les atteindre. Fixe,
   ça marche quelle que soit la hauteur de la scène ou du navigateur. */
.player {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(600px, calc(100% - 24px));
  padding: 10px 20px 8px;
  background: rgba(255, 253, 248, 0.97);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7, 20, 38, 0.28);
  backdrop-filter: blur(6px);
}

.player-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(27, 58, 99, 0.1);
}

.player-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transition: width 500ms ease;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.player button {
  border: 0;
  cursor: pointer;
}

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line) !important;
  border-radius: 50%;
  color: var(--navy-700);
  background: transparent;
  font-size: 18px;
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.play-button {
  min-width: 200px;
  min-height: 42px;
  border-radius: 999px;
  color: white;
  background: var(--navy-800);
  box-shadow: 0 10px 25px rgba(27, 58, 99, 0.17);
  font-weight: 760;
  padding: 0 21px;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.play-button:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--scene-color) 35%, var(--navy-800));
}

.play-button span {
  display: inline-block;
  min-width: 22px;
  margin-right: 5px;
}

.replay-button {
  min-height: 38px;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  padding: 0 13px;
}

.replay-button:hover {
  color: var(--navy-700);
  background: rgba(27, 58, 99, 0.05);
}

.player-status {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  color: #8993a0;
  font-size: 11px;
}

.speech-warning {
  margin: 16px 0 0;
  border-left: 3px solid var(--orange);
  color: var(--muted);
  background: rgba(255, 107, 53, 0.06);
  padding: 11px 14px;
  font-size: 13px;
}

.final-message {
  padding: 115px 0 100px;
  color: var(--navy-900);
  text-align: center;
}

.final-message > p {
  margin: 0 0 18px;
  color: var(--orange-deep);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.final-message h2 {
  max-width: 960px;
  margin: auto;
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  font-size: clamp(39px, 5.5vw, 68px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.final-message h2 span {
  color: var(--orange-deep);
  font-style: italic;
}

.final-pillars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 45px;
  color: var(--navy-700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.final-pillars span,
.final-pillars strong {
  border: 1px solid rgba(27, 58, 99, 0.18);
  border-radius: 999px;
  padding: 12px 17px;
}

.final-pillars strong {
  border-color: var(--orange);
  color: white;
  background: var(--orange-deep);
}

.final-pillars i {
  color: var(--orange-deep);
  font-family: "Trebuchet MS", Calibri, sans-serif;
  font-size: 20px;
}

.commencer-button {
  display: block;
  min-width: 260px;
  min-height: 52px;
  margin: 34px auto 0;
  border: 0;
  border-radius: 999px;
  color: white;
  background: var(--orange-deep);
  box-shadow: 0 14px 30px rgba(201, 69, 26, 0.28);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.commencer-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(201, 69, 26, 0.34);
}

.sources-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 55px;
  margin-bottom: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  padding: 44px;
}

.sources-panel h2 {
  margin: 0;
  color: var(--navy-800);
  font-family: "Trebuchet MS", Calibri, sans-serif;
  font-size: 38px;
  font-weight: 500;
}

.sources-panel ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sources-panel a {
  color: var(--navy-700);
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
}

.sources-panel a:hover {
  color: var(--orange-deep);
}

footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(27, 58, 99, 0.14);
  color: var(--muted);
  padding: 26px 0 34px;
  font-size: 12px;
}

footer button {
  border: 0;
  color: var(--navy-700);
  background: transparent;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding-bottom: 105px;
  }

  .hero-copy {
    padding-top: 20px;
  }

  .guide-wrap {
    position: absolute;
    right: -18px;
    bottom: 24px;
    width: 210px;
    height: 235px;
    opacity: 0.72;
  }

  .guide-halo {
    right: 0;
    width: 210px;
    height: 210px;
  }

  .guide-badge {
    display: none;
  }

  .hero-intro {
    max-width: calc(100% - 120px);
  }

  .story-stage {
    padding: 22px;
  }

  .slide {
    grid-template-columns: 1fr;
    height: auto;
  }

  .scene-visual {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .narration-card {
    grid-template-columns: 1fr;
    height: auto;
  }

  .narration-meta {
    min-height: 110px;
    flex-direction: row;
    align-items: flex-end;
  }

  .narration-meta strong {
    font-size: 26px;
  }

  .sources-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 620px) {
  .topbar,
  .hero,
  .story-shell,
  .final-message,
  .sources-panel,
  footer {
    width: min(100% - 24px, 1180px);
  }

  .topbar {
    min-height: 72px;
  }

  .brand small {
    display: none;
  }

  .source-toggle {
    padding-inline: 12px;
  }

  .hero {
    min-height: 430px;
    padding-top: 40px;
  }

  .hero h1 {
    font-size: clamp(48px, 15vw, 68px);
  }

  .hero-intro {
    max-width: 100%;
    font-size: 16px;
  }

  .guide-wrap {
    display: none;
  }

  .story-shell {
    margin-top: -32px;
  }

  .story-stage {
    padding: 14px;
  }

  .thread-legend {
    justify-content: flex-start;
    padding: 8px 3px 0;
  }

  .narration-meta {
    padding: 23px 21px;
  }

  .narration-copy {
    padding: 28px 22px;
  }

  .narration-copy h2 {
    font-size: 36px;
  }

  .narration-copy > p {
    font-size: 16px;
  }

  .player-controls {
    flex-wrap: wrap;
  }

  .play-button {
    min-width: calc(100% - 108px);
  }

  .replay-button {
    width: 100%;
  }

  .keyboard-hint {
    display: none;
  }

  .final-message {
    padding: 80px 0 70px;
  }

  .final-pillars {
    gap: 8px;
  }

  .final-pillars i {
    display: none;
  }

  .sources-panel {
    padding: 28px 22px;
  }

  footer {
    gap: 20px;
  }
}

/* Filet sur print, JAMAIS sur prefers-reduced-motion, qui supprimerait la
   démonstration à l'écran sur toute machine aux effets d'animation Windows
   désactivés. */
@media print {
  .ambient {
    display: none;
  }
}

/* Complément pour le script de comparaison "nouveau script" : ses thèmes et
   sa construction de timeline utilisent des noms de classes différents du
   fichier d'origine, ajoutés ici pour un rendu comparable. */
.theme-alternatives {
  --scene-color: #2fae6b;
}

.theme-responsabilite {
  --scene-color: #e8a23a;
}

.timeline-node {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  min-width: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  padding: 14px 5px 0;
  text-align: center;
}

.node-badge {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(27, 58, 99, 0.18);
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy-700);
  font-size: 11px;
  font-weight: 850;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.timeline-node:hover .node-badge,
.timeline-node:focus-visible .node-badge {
  transform: translateY(-3px);
  border-color: var(--scene-color);
}

.timeline-node.is-active .node-badge {
  transform: scale(1.15);
  border-color: var(--scene-color);
  background: var(--scene-color);
  color: white;
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--scene-color) 10%, transparent),
    0 8px 22px color-mix(in srgb, var(--scene-color) 18%, transparent);
}

.node-label {
  max-width: 106px;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.timeline-node.is-active .node-label {
  color: var(--scene-color);
}

.scene-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.scene-visual-img.is-visible {
  opacity: 1;
}

@media print {
  .scene-visual {
    display: none;
  }
}