/* Star Wars-style opening crawl: blue intro line, logo, then the yellow crawl.
   Static and readable by default (no JS / reduced motion). */

.crawl {
  --sw-yellow: #ffe81f;
  --sw-blue: #4bd5ee;
  --logo-scale: 3;
  --sw-font: 'News Cycle', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  position: relative;
  border: var(--border-px, 4px) solid var(--pink, #ff6ec7);
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27420%27 height=%27420%27%3E%3Ccircle cx=%27121%27 cy=%2788%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.95%27/%3E%3Ccircle cx=%27138%27 cy=%27316%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%27287%27 cy=%27267%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%27157%27 cy=%27297%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.51%27/%3E%3Ccircle cx=%27287%27 cy=%27197%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.39%27/%3E%3Ccircle cx=%2752%27 cy=%27215%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.87%27/%3E%3Ccircle cx=%27270%27 cy=%27243%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.80%27/%3E%3Ccircle cx=%27156%27 cy=%27141%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.94%27/%3E%3Ccircle cx=%2764%27 cy=%27125%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.57%27/%3E%3Ccircle cx=%27394%27 cy=%27234%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.54%27/%3E%3Ccircle cx=%2725%27 cy=%27115%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.92%27/%3E%3Ccircle cx=%27177%27 cy=%2781%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.68%27/%3E%3Ccircle cx=%27153%27 cy=%27145%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.39%27/%3E%3Ccircle cx=%27216%27 cy=%2770%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.95%27/%3E%3Ccircle cx=%27153%27 cy=%27178%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.53%27/%3E%3Ccircle cx=%27258%27 cy=%2798%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%27362%27 cy=%27267%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.65%27/%3E%3Ccircle cx=%27212%27 cy=%27289%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.69%27/%3E%3Ccircle cx=%27297%27 cy=%27105%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.61%27/%3E%3Ccircle cx=%27139%27 cy=%27164%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.58%27/%3E%3Ccircle cx=%2747%27 cy=%27344%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.92%27/%3E%3Ccircle cx=%2765%27 cy=%2733%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.61%27/%3E%3Ccircle cx=%27266%27 cy=%2761%27 r=%271.4%27 fill=%27%23fff%27 fill-opacity=%270.49%27/%3E%3Ccircle cx=%2758%27 cy=%27387%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.74%27/%3E%3Ccircle cx=%27372%27 cy=%27381%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.93%27/%3E%3Ccircle cx=%274%27 cy=%27104%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.53%27/%3E%3Ccircle cx=%27259%27 cy=%2797%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.35%27/%3E%3Ccircle cx=%27289%27 cy=%27100%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.67%27/%3E%3Ccircle cx=%27157%27 cy=%27376%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.50%27/%3E%3Ccircle cx=%271%27 cy=%27383%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.67%27/%3E%3Ccircle cx=%279%27 cy=%27378%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.95%27/%3E%3Ccircle cx=%27237%27 cy=%27285%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.98%27/%3E%3Ccircle cx=%2788%27 cy=%27237%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.49%27/%3E%3Ccircle cx=%27294%27 cy=%27300%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%2746%27 cy=%27386%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.37%27/%3E%3Ccircle cx=%27375%27 cy=%2716%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.80%27/%3E%3Ccircle cx=%27417%27 cy=%27401%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.91%27/%3E%3Ccircle cx=%27104%27 cy=%27306%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.62%27/%3E%3Ccircle cx=%2799%27 cy=%27170%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.61%27/%3E%3Ccircle cx=%27148%27 cy=%27261%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.71%27/%3E%3Ccircle cx=%27305%27 cy=%27178%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.57%27/%3E%3Ccircle cx=%27414%27 cy=%27418%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.55%27/%3E%3Ccircle cx=%27386%27 cy=%2784%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.92%27/%3E%3Ccircle cx=%27209%27 cy=%27234%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.44%27/%3E%3Ccircle cx=%27202%27 cy=%2779%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.96%27/%3E%3Ccircle cx=%27278%27 cy=%27219%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.46%27/%3E%3Ccircle cx=%27318%27 cy=%27152%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.68%27/%3E%3Ccircle cx=%27126%27 cy=%27228%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.37%27/%3E%3Ccircle cx=%27122%27 cy=%2799%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.82%27/%3E%3Ccircle cx=%2732%27 cy=%27325%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.63%27/%3E%3Ccircle cx=%27382%27 cy=%27286%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.95%27/%3E%3Ccircle cx=%27320%27 cy=%27252%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.37%27/%3E%3Ccircle cx=%2716%27 cy=%2757%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.93%27/%3E%3Ccircle cx=%2736%27 cy=%274%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.42%27/%3E%3Ccircle cx=%2781%27 cy=%2756%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.96%27/%3E%3Ccircle cx=%27102%27 cy=%27192%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.79%27/%3E%3Ccircle cx=%27283%27 cy=%27325%27 r=%271.4%27 fill=%27%23fff%27 fill-opacity=%270.62%27/%3E%3Ccircle cx=%2726%27 cy=%2797%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.62%27/%3E%3Ccircle cx=%2764%27 cy=%27389%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.98%27/%3E%3Ccircle cx=%2788%27 cy=%27253%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.43%27/%3E%3Ccircle cx=%27115%27 cy=%27272%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.40%27/%3E%3Ccircle cx=%27417%27 cy=%2732%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.66%27/%3E%3Ccircle cx=%272%27 cy=%273%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.55%27/%3E%3Ccircle cx=%2798%27 cy=%27388%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.41%27/%3E%3Ccircle cx=%27183%27 cy=%27359%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27278%27 cy=%27240%27 r=%271.4%27 fill=%27%23fff%27 fill-opacity=%270.87%27/%3E%3Ccircle cx=%27209%27 cy=%27208%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.61%27/%3E%3Ccircle cx=%27279%27 cy=%27266%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.82%27/%3E%3Ccircle cx=%27355%27 cy=%27415%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.92%27/%3E%3Ccircle cx=%27402%27 cy=%27410%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.67%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27677%27 height=%27677%27%3E%3Ccircle cx=%27545%27 cy=%27275%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.36%27/%3E%3Ccircle cx=%27445%27 cy=%27141%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.79%27/%3E%3Ccircle cx=%27654%27 cy=%27286%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.70%27/%3E%3Ccircle cx=%27198%27 cy=%27298%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.62%27/%3E%3Ccircle cx=%27649%27 cy=%27418%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27209%27 cy=%2777%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.99%27/%3E%3Ccircle cx=%2771%27 cy=%27500%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.46%27/%3E%3Ccircle cx=%2782%27 cy=%27310%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.62%27/%3E%3Ccircle cx=%27590%27 cy=%27335%27 r=%271.4%27 fill=%27%23fff%27 fill-opacity=%270.80%27/%3E%3Ccircle cx=%2776%27 cy=%27114%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.93%27/%3E%3Ccircle cx=%27368%27 cy=%27394%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.53%27/%3E%3Ccircle cx=%27360%27 cy=%27397%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.48%27/%3E%3Ccircle cx=%27598%27 cy=%27200%27 r=%271.4%27 fill=%27%23fff%27 fill-opacity=%270.48%27/%3E%3Ccircle cx=%27384%27 cy=%27328%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.49%27/%3E%3Ccircle cx=%278%27 cy=%27674%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.91%27/%3E%3Ccircle cx=%2776%27 cy=%27396%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.97%27/%3E%3Ccircle cx=%27236%27 cy=%27665%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.94%27/%3E%3Ccircle cx=%27386%27 cy=%2720%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.55%27/%3E%3Ccircle cx=%27301%27 cy=%27664%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.65%27/%3E%3Ccircle cx=%27264%27 cy=%27169%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.97%27/%3E%3Ccircle cx=%27387%27 cy=%27106%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.62%27/%3E%3Ccircle cx=%27600%27 cy=%27552%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.56%27/%3E%3Ccircle cx=%2758%27 cy=%27221%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.98%27/%3E%3Ccircle cx=%27352%27 cy=%27509%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.88%27/%3E%3Ccircle cx=%27448%27 cy=%2784%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.55%27/%3E%3Ccircle cx=%27294%27 cy=%27443%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.56%27/%3E%3Ccircle cx=%27297%27 cy=%27184%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.74%27/%3E%3Ccircle cx=%27393%27 cy=%2755%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.58%27/%3E%3Ccircle cx=%27582%27 cy=%27245%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.47%27/%3E%3Ccircle cx=%27512%27 cy=%27618%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.39%27/%3E%3Ccircle cx=%27201%27 cy=%2710%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.47%27/%3E%3Ccircle cx=%27577%27 cy=%27509%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.53%27/%3E%3Ccircle cx=%27550%27 cy=%27375%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.63%27/%3E%3Ccircle cx=%27132%27 cy=%27261%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.64%27/%3E%3Ccircle cx=%2789%27 cy=%27482%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.74%27/%3E%3Ccircle cx=%2740%27 cy=%27452%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.73%27/%3E%3Ccircle cx=%2727%27 cy=%27626%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.65%27/%3E%3Ccircle cx=%27636%27 cy=%27100%27 r=%271.4%27 fill=%27%23fff%27 fill-opacity=%270.59%27/%3E%3Ccircle cx=%27410%27 cy=%27202%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.85%27/%3E%3Ccircle cx=%27367%27 cy=%27341%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.66%27/%3E%3Ccircle cx=%27367%27 cy=%2782%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.46%27/%3E%3Ccircle cx=%27151%27 cy=%2741%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.52%27/%3E%3Ccircle cx=%27669%27 cy=%27460%27 r=%270.9%27 fill=%27%23fff%27 fill-opacity=%270.75%27/%3E%3Ccircle cx=%2724%27 cy=%27114%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.39%27/%3E%3Ccircle cx=%27360%27 cy=%2751%27 r=%270.55%27 fill=%27%23fff%27 fill-opacity=%270.59%27/%3E%3C/svg%3E");
  background-size: 420px 420px, 677px 677px;
  background-position: 0 0, 130px 90px;
  color: var(--sw-yellow);
  padding: var(--space-3, 16px);
  max-width: 100%;
  overflow: hidden;
}

.crawl__viewport {
  position: relative;
}

.crawl__intro {
  margin: 0 0 1.5em;
  font-family: var(--sw-font);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--sw-blue);
}

.crawl__logo {
  margin: 0 0 1.5em;
  text-align: center;
  font-family: 'Archivo Black', Impact, 'Arial Black', sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
  -webkit-text-stroke: 2px var(--sw-yellow);
  paint-order: stroke fill;
  text-shadow: 0 0 6px var(--sw-yellow);
}

.crawl__content {
  font-family: var(--sw-font);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.45;
  text-align: justify;
  overflow-wrap: break-word;
  color: var(--sw-yellow);
}
.crawl__content:focus-visible {
  outline: 3px solid var(--focus, #fff);
  outline-offset: 4px;
}
.crawl__content p {
  margin: 0 0 1.1em;
}
.crawl__episode {
  margin: 0 0 0.2em !important;
  text-align: center;
  text-transform: uppercase;
}
.crawl__title {
  margin: 0 0 1.4em;
  font: inherit;
  font-size: 1.15em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.crawl__start {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.crawl__skip {
  display: block;
  margin: var(--space-3, 16px) auto 0;
}
.crawl__skip[hidden] { display: none; }

/* Static mode: bounded, scrollable, extra breathing room around the text */
.crawl--static,
.crawl:not(.crawl--js) {
  padding: calc(var(--space-3, 16px) + 50px);
}
@media (max-width: 480px) {
  .crawl--static,
  .crawl:not(.crawl--js) { padding: calc(var(--space-3, 16px) + 12px); }
}
.crawl--static .crawl__content,
.crawl:not(.crawl--js) .crawl__content {
  max-height: 60vh;
  overflow: auto;
}

/* Animated mode */
.crawl--js:not(.crawl--static) {
  --crawl-h: clamp(380px, 72vh, 720px);
}
.crawl--js:not(.crawl--static) .crawl__viewport {
  height: var(--crawl-h);
  overflow: hidden;
  perspective: 380px;
  perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
}
.crawl--js:not(.crawl--static) .crawl__intro,
.crawl--js:not(.crawl--static) .crawl__logo {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.crawl--js:not(.crawl--static) .crawl__intro {
  transform: translateY(-50%);
  max-width: 22em;
  margin-inline: auto;
  font-size: 1.9rem;
}
.crawl--js:not(.crawl--static) .crawl__logo {
  transform: translateY(-50%) scale(var(--logo-scale, 3));
}
.crawl--js:not(.crawl--static) .crawl__content {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 0;
  padding: var(--crawl-h) 0 calc(var(--crawl-h) * 0.3);
  max-height: none;
  overflow: visible;
  font-size: 2.3rem;
  transform-origin: 50% var(--crawl-h);
  transform: rotateX(27deg) translateY(0);
  will-change: transform;
}

.crawl--playing:not(.crawl--static) .crawl__intro {
  animation: crawl-intro 6s linear forwards;
}
.crawl--playing:not(.crawl--static) .crawl__logo {
  animation: crawl-logo 7s ease-out 5.5s forwards;
}
.crawl--playing:not(.crawl--static) .crawl__content {
  animation: crawl-scroll 70s linear 9.5s forwards;
}
.crawl--paused .crawl__intro,
.crawl--paused .crawl__logo,
.crawl--paused .crawl__content {
  animation-play-state: paused;
}

@keyframes crawl-intro {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes crawl-logo {
  0%   { opacity: 1; transform: translateY(-50%) scale(var(--logo-scale, 3)); }
  65%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) scale(0.04); }
}
@keyframes crawl-scroll {
  from { transform: rotateX(27deg) translateY(0); }
  to   { transform: rotateX(27deg) translateY(-100%); }
}

@media (max-width: 480px) {
  .crawl { --logo-scale: 1.7; }
  .crawl__intro,
  .crawl--js:not(.crawl--static) .crawl__intro { font-size: 1.3rem; }
  .crawl__logo { font-size: 2rem; }
  .crawl--js:not(.crawl--static) .crawl__content {
    left: 4%;
    right: 4%;
    font-size: 1.6rem;
  }
  .crawl--js:not(.crawl--static) .crawl__logo { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .crawl { padding: calc(var(--space-3, 16px) + 50px); }
  .crawl .crawl__intro,
  .crawl .crawl__logo {
    position: static !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .crawl .crawl__content {
    position: static !important;
    animation: none !important;
    transform: none !important;
    max-height: 60vh !important;
    overflow: auto !important;
    padding: 0 !important;
  }
  .crawl .crawl__viewport {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    perspective: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: visible !important;
  }
  .crawl__skip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 480px) {
  .crawl { padding: calc(var(--space-3, 16px) + 12px); }
}