/* Cosmic endpoints feed the original mode clock. Cinema endpoints stay in the
   existing sheets, so reversing the toggle preserves the same crossfade. */
body.cosmic-ready {
  --electric-blue: #35aaff;
  --electric-pink: #ff46e8;
  --disco-violet: #7348ff;
  --disco-platinum: #e8eff9;
  --disco-line: #328affaa;
  --disco-progress: calc(var(--cosmic-strength, 0) * 100%);
}

#top > .hero .spotlight-name > span:is(.given-name,.family-name) > .spotlight-ink {
  background-image:
    radial-gradient(ellipse at 9% 110%, #f8a5ff90, transparent 43%),
    radial-gradient(ellipse at 90% 105%, #eaa4ff70, transparent 41%),
    linear-gradient(164deg, #fff0 22%, #eff8ff65 39%, #28384f23 55%, #fff0 75%),
    linear-gradient(180deg, #f6fbff 1%, #bdcfe4 18%, #edf3fa 31%,
      #858e9e 48%, #b4bbc7 59%, #f4f5fa 74%, #aeb0bf 90%, #e5d6ee 100%) !important;
  background-color: transparent !important;
  -webkit-text-stroke: .8px rgb(239 248 255 / calc(.82 * var(--cosmic-strength)));
}
#top > .hero .disciplines span::after {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* This layer is already invisible in Cinema. Keep its mask and photo geometry. */
#top > .hero .director-lighting::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 24% 32%,#147fe68f 0%,#0752a158 13%,#0928532c 25%,transparent 42%);
}
#top > .hero .director-lighting :is(.eclipse-corona,.eclipse-rays,.eclipse-core,.eclipse-ghost) { opacity: 0; }
#top > .hero .director-lighting .spotlight-subject::before { opacity: 0; }
#top > .hero .anamorphic-band {
  height: 8px;
  background: radial-gradient(ellipse at 52% 50%,#2995ed62 0%,#2e7bc533 22%,transparent 64%);
}
#top > .hero .anamorphic-band::after {
  inset: 3px 0;
  background: radial-gradient(ellipse at 55% 50%,#77c9ff68,transparent 61%);
}
@media(max-width:650px) {
  #top > .hero .director-lighting::before {
    background: radial-gradient(ellipse at 34% 37%,#147fe668 0%,#0752a146 20%,#09285320 35%,transparent 56%);
  }
}

/* Use the existing viewfinder geometry. The glints are deliberately off-center. */
body.cosmic-ready #top > .hero .director-frame-guides::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #ccecff, inset 0 0 5px #006cff, 0 0 3px 1px #3b8cff, 0 0 10px #005dffed, 0 0 24px #124aff8c;
  background:
    radial-gradient(ellipse 9% 6px at 8% 0%,#fff 0%,#ff24fc 28%,transparent 90%),
    radial-gradient(ellipse 13% 6px at 21% 0%,#fff 0%,#21d2ff 29%,transparent 90%),
    radial-gradient(ellipse 15% 6px at 90% 100%,#fff 0%,#ff24fc 24%,transparent 90%),
    radial-gradient(ellipse 10% 5px at 13% 100%,#64daff,transparent);
  opacity: var(--cosmic-strength,0);
}
/* The broad spill sits behind the bright filament and fades on the same clock. */
body.cosmic-ready #top > .hero .director-frame-guides::after {
  content: "";
  position: absolute;
  inset: -13px -9px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 9% 14px at 9% 13px, #f928ff9e, transparent 82%),
    radial-gradient(ellipse 12% 17px at 23% 13px, #00c8ff9e, transparent 82%),
    radial-gradient(ellipse 7% 13px at 96% 13px, #d81fff87, transparent 82%),
    radial-gradient(ellipse 13% 16px at 89% calc(100% - 13px), #ec24ffb3, transparent 82%),
    radial-gradient(ellipse 11% 13px at 12% calc(100% - 13px), #00c7ff94, transparent 82%);
  filter: blur(3px);
  opacity: var(--cosmic-strength,0);
}
body.cosmic-ready #top > .hero::before {
  --rail-fuchsia: rgb(250 43 255 / var(--cosmic-strength,0));
  --rail-silver: rgb(255 219 255 / var(--cosmic-strength,0));
  background-image:
    radial-gradient(ellipse 100% 2px at 6% 14%, var(--rail-silver), var(--rail-fuchsia) 47%, transparent),
    radial-gradient(ellipse 110% 10px at 0% 14%, rgb(228 16 255 / calc(.69 * var(--cosmic-strength,0))), transparent),
    radial-gradient(ellipse 100% 2px at 8% 33%, var(--rail-silver), var(--rail-fuchsia) 50%, transparent),
    radial-gradient(ellipse 110% 10px at 0% 33%, rgb(236 20 255 / calc(.65 * var(--cosmic-strength,0))), transparent),
    radial-gradient(ellipse 100% 2px at 8% 67%, var(--rail-silver), var(--rail-fuchsia) 49%, transparent),
    radial-gradient(ellipse 110% 13px at 0% 67%, rgb(220 29 255 / calc(.72 * var(--cosmic-strength,0))), transparent),
    repeating-linear-gradient(to bottom, transparent 0 24px,
      color-mix(in srgb,#91a9b54d,var(--electric-blue) var(--disco-progress)) 24px 25px,
      #040a1166 25px 33px,
      color-mix(in srgb,#a5b9c07a,var(--electric-blue) var(--disco-progress)) 33px 34px,
      transparent 34px 61px) !important;
  border-left-color: color-mix(in srgb,#c7d7d341,var(--electric-blue) var(--disco-progress)) !important;
  filter: drop-shadow(0 0 4px rgb(35 160 255 / calc(.5 * var(--cosmic-strength,0)))) !important;
}
body.cosmic-ready #top > .hero::after {
  border-right-color: color-mix(in srgb,#c7d7d341,var(--disco-violet) var(--disco-progress)) !important;
  filter: drop-shadow(0 0 4px rgb(95 88 255 / calc(.45 * var(--cosmic-strength,0)))) !important;
}
body.cosmic-ready #top .poster-card:nth-child(even) { --guide-accent:var(--electric-blue) !important; }
body.cosmic-ready #top .poster-card:nth-child(7n + 3) { --guide-accent:var(--electric-pink) !important; }

body.cosmic-ready #top > .hero .hero-links button.reel-button.reel-button[class],
body.cosmic-ready #about button.about-reel-button.about-reel-button[class] {
  color: color-mix(in srgb,#f2bddf,var(--disco-platinum) var(--disco-progress)) !important;
  border-color: color-mix(in srgb,#9dbed4,var(--electric-blue) var(--disco-progress)) !important;
}
body.cosmic-ready #top > .hero .hero-links button.reel-button.reel-button[class] {
  box-shadow: inset 0 0 0 1px rgb(36 57 75 / calc(.38 * (1 - var(--cosmic-strength,0)))),
    0 0 14px rgb(38 137 255 / calc(.35 * var(--cosmic-strength,0))),
    4px 2px 11px rgb(155 47 255 / calc(.26 * var(--cosmic-strength,0))) !important;
}

body.cosmic-disco #top :is(.recognition,.recognition-item,.poster-card,.poster-image,
  .representation-card,.short-form-card,.volition-episode,.acclaim-award,.acclaim-fresh,
  .home-bts-grid,.open-reviews) {
  border-color: var(--disco-line) !important;
  box-shadow: 0 0 12px #298cff25;
}
body.cosmic-disco #top :is(.recognition-item:nth-child(2),.open-reviews) {
  box-shadow: 0 0 13px #6571ff31;
}
body.cosmic-disco #top .recognition-item:nth-child(2) strong { color: var(--electric-blue) !important; }
body.cosmic-disco #top :is(.recognition-item span,.section-heading p,.poster-description,
  .about-copy p,.volition-story p,.representation-card p) {
  color:#d6dfea !important;
}
body.cosmic-disco #top :is(.short-form-artist,.acclaim-award>span,.acclaim-fresh small) {
  color:var(--electric-pink) !important;
}
body.cosmic-disco #top :is(.short-form-play,.screening-choice,.volition-actions button,
  .volition-actions a,.poster-actions a,.bts-pagination button,.representation-card a) {
  border-color:var(--disco-line) !important;
}
body.cosmic-disco #top :is(.poster-image,.short-form-image,.volition-episode,
  .open-reviews,.contact-direct):is(:hover,:focus-visible) {
  border-color:var(--electric-pink) !important;
  box-shadow:0 0 14px #bc55ff3b;
}
body.cosmic-disco .header nav a:is(:hover,:focus-visible) {
  color:var(--electric-blue) !important;
  text-shadow:0 0 10px #319dff77;
}
body.cosmic-disco :is(.film-dialog,.bts-lightbox,.volition-review-dialog,#tds-contact) {
  border-color:var(--disco-line) !important;
  box-shadow:0 0 25px #2b85ff35;
}
body.cosmic-disco .screening-choice { border-color:var(--disco-line); }
body.cosmic-disco .screening-choice:is(:hover,:focus-visible) {
  border-color:var(--electric-pink); color:var(--disco-platinum);
}
body.cosmic-disco :is(a,button):focus-visible { outline-color:#88cdff; }

/* Match the illuminated edge in the reference using a core and coloured spill.
   Keep the overlay on the existing fade, including when returning to Cinema. */
body.cosmic-ready #top :is(.hero .hero-links button.reel-button.reel-button[class],
  #about button.about-reel-button.about-reel-button[class]) {
  position: relative;
}
body.cosmic-ready #top :is(.hero .hero-links button.reel-button.reel-button[class],
  #about button.about-reel-button.about-reel-button[class])::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(135deg,#bdeaff 0%,#368eff 44%,#8155ff 72%,#ff4ff1 100%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box exclude, linear-gradient(#fff 0 0);
  opacity: var(--cosmic-strength,0) !important;
}
body.cosmic-ready #top :is(.hero .hero-links button.reel-button[class],
  #about button.about-reel-button[class]) .play-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 12px;
  font-size: 0;
  vertical-align: middle;
  color: color-mix(in srgb,#8cdcff,var(--electric-pink) var(--disco-progress)) !important;
}
body.cosmic-ready #top :is(.hero .hero-links button.reel-button[class],
  #about button.about-reel-button[class]) .play-icon::before {
  content: "";
  inline-size: 7px;
  block-size: 8px;
  background: currentColor;
  clip-path: polygon(0 0,100% 50%,0 100%);
}
body.cosmic-ready #top #about button.about-reel-button.about-reel-button[class] {
  min-block-size: calc(41px + 5px * var(--cosmic-strength,0));
  box-shadow: 0 0 14px rgb(38 137 255 / calc(.35 * var(--cosmic-strength,0))),
    4px 2px 11px rgb(155 47 255 / calc(.26 * var(--cosmic-strength,0))) !important;
}
@media (max-width:700px) {
  body.cosmic-ready #top #about button.about-reel-button.about-reel-button[class] {
    min-block-size: calc(41px + 1px * var(--cosmic-strength,0));
  }
}
/* A single gradient spans the whole wordmark. Blend its stops from Cinema
   using the shared mode clock so no word changes ahead of the others. */
body.cosmic-ready .header .wordmark {
  --wordmark-ivory: #ebf1f8;
  background-image: linear-gradient(103deg,
    color-mix(in srgb,var(--wordmark-ivory),#3bb4ff var(--disco-progress)),
    color-mix(in srgb,var(--wordmark-ivory),#c8eaff var(--disco-progress)) 17%,
    color-mix(in srgb,var(--wordmark-ivory),#a478ff var(--disco-progress)) 32%,
    color-mix(in srgb,var(--wordmark-ivory),#ff66e4 var(--disco-progress)) 48%,
    color-mix(in srgb,var(--wordmark-ivory),#f0f4ff var(--disco-progress)) 64%,
    color-mix(in srgb,var(--wordmark-ivory),#52c6ff var(--disco-progress)) 78%,
    color-mix(in srgb,var(--wordmark-ivory),#ff54df var(--disco-progress)));
  background-clip: text;
}
body.cosmic-ready .header .wordmark .disco-word {
  -webkit-text-fill-color: transparent;
}
body.cosmic-ready .header > a.tds-vip-link.tds-vip-link {
  color: color-mix(in srgb,#d6a5cd,#ff46da var(--disco-progress)) !important;
  text-shadow: 0 -0.5px 2px rgb(242 234 255 / calc(.42 * var(--cosmic-strength,0))),
    0 0 8px rgb(255 39 221 / calc(.56 * var(--cosmic-strength,0)));
}
body.cosmic-ready .header > a.tds-vip-link.tds-vip-link:is(:hover,:focus-visible) {
  color: color-mix(in srgb,#f1c8e8,#ff8ae6 var(--disco-progress)) !important;
}
body.cosmic-ready .header > a.tds-vip-link.tds-vip-link svg {
  color: color-mix(in srgb,currentColor,#f1edf8 calc(.1 * var(--disco-progress)));
  filter: drop-shadow(0 0 3px rgb(255 52 219 / calc(.58 * var(--cosmic-strength,0))));
}
body.cosmic-disco #top .recognition-item {
  border-color: #479dff !important;
  box-shadow: inset 0 0 0 1px #bce6ff26,0 0 10px #006bff78;
}
body.cosmic-disco #top .recognition-item:first-child {
  border-left-color: var(--electric-pink) !important;
  box-shadow: -3px 0 10px #db2cfa62,2px 0 10px #0677ff60;
}
body.cosmic-disco #top .recognition-item:last-child {
  border-right-color: var(--electric-pink) !important;
  box-shadow: 3px 0 10px #db2cfa62,-2px 0 10px #0677ff60;
}

/* The host-page player chrome, credits and selectors. Embedded providers
   continue to own the playback UI inside their iframes. */
body.cosmic-disco :is(.film-dialog,.film-dialog-shell,.film-dialog .dialog-caption,
  .review-reader,.bts-viewer,.bts-expanded-lightbox,#tds-contact) {
  background-color:#030308 !important;
  color:var(--disco-platinum);
}
body.cosmic-disco .film-dialog :is(.dialog-video,.dialog-caption,.screening-choice) {
  border-color:var(--disco-line) !important;
}
body.cosmic-disco .film-dialog .dialog-video {
  box-shadow:0 0 15px #005eff3d;
}
body.cosmic-disco .film-dialog :is(.dialog-caption h2,.player-caption-cast>span:first-child) {
  color:var(--electric-blue) !important;
}
body.cosmic-disco .film-dialog :is(.player-caption-artist,.player-caption-category,
  .player-caption-director) {
  color:var(--electric-pink) !important;
}
body.cosmic-disco .film-dialog .music-production-credit {
  color:var(--disco-platinum) !important;
}
body.cosmic-disco .film-dialog .screening-choice strong { color:var(--electric-blue); }
body.cosmic-disco .film-dialog .screening-choice :is(small,span) { color:var(--disco-platinum); }
body.cosmic-disco .film-dialog .screening-choice:is(:hover,:focus-visible) {
  border-color:var(--electric-pink) !important;
  box-shadow:0 0 14px #a627f063;
}
body.cosmic-disco :is(.film-dialog .dialog-close,.bts-close,.bts-prev,.bts-next,
  .review-reader button,.tds-contact-close,.tds-contact-send) {
  border-color:var(--electric-blue) !important;
  color:var(--disco-platinum) !important;
  background-color:#050810 !important;
  box-shadow:0 0 9px #005eff45;
}
body.cosmic-disco :is(.film-dialog .dialog-close,.bts-close,.bts-prev,.bts-next,
  .review-reader button,.tds-contact-close,.tds-contact-send):is(:hover,:focus-visible) {
  border-color:var(--electric-pink) !important;
  box-shadow:0 0 12px #e52cff60;
}

body.cosmic-disco #volition :is(.open-reviews,.volition-episode,.acclaim-award,
  .acclaim-fresh,.volition-actions a,.volition-actions button,.webisode-card) {
  border-color:var(--disco-line) !important;
}
body.cosmic-disco #volition :is(.acclaim-review-title,.acclaim-award strong,
  .acclaim-fresh strong,.volition-episode-action,.volition-episode-number) {
  color:var(--electric-blue) !important;
}
body.cosmic-disco #volition :is(.acclaim-kicker,.acclaim-award>span,.acclaim-fresh small,
  .volition-episode-title) {
  color:var(--electric-pink) !important;
}
body.cosmic-disco #volition :is(.open-reviews,.volition-episode,.volition-actions a,
  .volition-actions button):is(:hover,:focus-visible) {
  border-color:var(--electric-pink) !important;
  box-shadow:0 0 16px #9e2cff62;
}
body.cosmic-disco :is(.review-reader-index,.review-reader-source,.bts-video-indicator) {
  color:var(--electric-blue) !important;
}
body.cosmic-disco :is(.review-reader-byline,.review-reader-count) {
  color:var(--electric-pink) !important;
}
body.cosmic-disco #top :is(.bts-pagination button,.poster-actions a):is(:hover,:focus-visible) {
  border-color:var(--electric-blue) !important;
  box-shadow:0 0 14px #006cff60;
}

body.cosmic-disco #top :is(.poster-image,.short-form-image,.volition-episode,.acclaim-award),
body.cosmic-disco :is(.film-dialog,.review-reader,.bts-viewer) {
  box-shadow: inset 0 0 0 1px #b5dfff25, 0 0 7px #3085ff65,
    0 0 21px #1045ff3b, 3px 2px 14px #bd30ff30;
}

/* Carry the hero's reflected silver and coloured light into the page below. */
body.cosmic-ready {
  --nebula-silver: rgb(226 243 255 / var(--cosmic-strength,0));
  --nebula-cyan: rgb(0 184 255 / var(--cosmic-strength,0));
  --nebula-fuchsia: rgb(247 43 229 / var(--cosmic-strength,0));
  --nebula-violet: rgb(117 74 255 / var(--cosmic-strength,0));
}
/* Keep the original divider visible underneath the fading reflection. */
body.cosmic-ready #top .section-heading::before {
  background-image:
    linear-gradient(90deg,var(--nebula-cyan),var(--nebula-silver) 14%,
      var(--nebula-cyan) 29%,var(--nebula-violet) 62%,var(--nebula-fuchsia) 84%,
      var(--nebula-silver) 91%,var(--nebula-cyan)),
    linear-gradient(90deg,#92d6f4,#d69dcf) !important;
}
body.cosmic-disco #volition :is(.acclaim-award strong,.acclaim-fresh strong) {
  background-image: linear-gradient(165deg,#d8f4ff 2%,#70cbff 19%,
    #f4faff 38%,#a0b9d5 54%,#e8f4ff 70%,#67c5ff 87%,#d595ff 100%);
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 5px #168bff77);
  text-shadow:none !important;
}
/* Keep gradient layers present in both modes and fade their alpha with the
   same clock as the hero. Switching background-image on the mode class snaps. */
body.cosmic-ready #top .recognition-item {
  --award-blue: rgb(27 101 226 / calc(59 / 255 * var(--cosmic-strength)));
  --award-accent: rgb(173 28 195 / calc(55 / 255 * var(--cosmic-strength)));
  background-image: radial-gradient(ellipse at 18% 0%,var(--award-blue),transparent 65%),
    radial-gradient(ellipse at 96% 100%,var(--award-accent),transparent 68%) !important;
  border-radius: calc(8px * var(--cosmic-strength));
}
body.cosmic-disco #top .recognition-item {
  box-shadow:inset 0 1px 0 #94ccffb3,0 0 11px #006bff65;
}
body.cosmic-ready #top .recognition-item:nth-child(2) {
  --award-blue: rgb(100 119 255 / calc(77 / 255 * var(--cosmic-strength)));
  --award-accent: rgb(0 124 255 / calc(56 / 255 * var(--cosmic-strength)));
  background-image:radial-gradient(ellipse at 72% 0%,var(--award-blue),transparent 66%),
    radial-gradient(ellipse at 4% 100%,var(--award-accent),transparent 70%) !important;
}
body.cosmic-ready #top .recognition-item strong {
  background-image: linear-gradient(165deg,
    color-mix(in srgb,currentColor,#d8f4ff var(--disco-progress)) 2%,
    color-mix(in srgb,currentColor,#70cbff var(--disco-progress)) 19%,
    color-mix(in srgb,currentColor,#f4faff var(--disco-progress)) 38%,
    color-mix(in srgb,currentColor,#a0b9d5 var(--disco-progress)) 54%,
    color-mix(in srgb,currentColor,#e8f4ff var(--disco-progress)) 70%,
    color-mix(in srgb,currentColor,#67c5ff var(--disco-progress)) 87%,
    color-mix(in srgb,currentColor,#d595ff var(--disco-progress)) 100%);
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 5px rgb(22 139 255 / calc(119 / 255 * var(--cosmic-strength))));
}
body.cosmic-disco #top .recognition-item strong { text-shadow:none !important; }
body.cosmic-ready #contact .representation-card.cosmic-surface {
  background-image:radial-gradient(ellipse 65% 115% at 4% 0%,rgb(20 87 189 / calc(38 / 255 * var(--cosmic-strength))),transparent),
    radial-gradient(ellipse 48% 100% at 96% 100%,rgb(150 29 171 / calc(34 / 255 * var(--cosmic-strength))),transparent),
    var(--cosmic-base,none) !important;
}
body.cosmic-disco #top :is(.open-reviews,.acclaim-award,
  .volition-episode-meta,.other-work-tile),
body.cosmic-disco :is(.film-dialog .dialog-caption,.review-reader-head) {
  background-image:radial-gradient(ellipse 65% 115% at 4% 0%,#1457bd26,transparent),
    radial-gradient(ellipse 48% 100% at 96% 100%,#961dab22,transparent) !important;
}
body.cosmic-disco #top :is(.poster-image,.short-form-image,.volition-episode,.acclaim-award) {
  box-shadow: inset 0 1px 0 #d3eaff47,0 0 9px #248dff59,
    3px 1px 17px #893aff31;
}

/* Repeat the reflected light across every homepage section while leaving
   the centre dark for copy, media and imagery. */
body.cosmic-ready #top > :is(.about-section,.films,.volition-section,.home-bts-section,
  .other-work-section,.contact-section).cosmic-surface {
  --section-blue: 9% 8%;
  --section-magenta: 98% 91%;
  background-image:
    radial-gradient(ellipse 31% 19% at var(--section-blue),rgb(0 95 232 / calc(.22 * var(--cosmic-strength,0))),transparent),
    radial-gradient(ellipse 23% 16% at var(--section-magenta),rgb(183 26 240 / calc(.18 * var(--cosmic-strength,0))),transparent),
    linear-gradient(rgb(0 0 0 / var(--cosmic-strength)),rgb(0 0 0 / var(--cosmic-strength))),
    var(--cosmic-base,none) !important;
}
body.cosmic-ready #top > :is(.films,.home-bts-section,.contact-section).cosmic-surface {
  --section-blue: 91% 7%;
  --section-magenta: 3% 82%;
}
body.cosmic-disco #top :is(.bts-pagination button,.representation-card a,
  .volition-actions button,.volition-actions a,.short-form-play,.poster-actions a):focus-visible,
body.cosmic-disco #top :is(.bts-pagination button,.representation-card a,
  .volition-actions button,.volition-actions a,.short-form-play,.poster-actions a):hover {
  box-shadow:0 0 6px #75c6ff75,0 0 17px #b33bff4c;
}
body.cosmic-disco #top :is(.bts-page-indicator,.volition-episode-number,.short-form-artist,
  .representation-card>span) {
  text-shadow:0 0 10px #8e64ff68;
}
body.cosmic-ready #shandy-easter-egg .divider::before,
body.cosmic-ready #shandy-easter-egg .divider::after {
  background:linear-gradient(90deg,var(--nebula-cyan),var(--nebula-silver) 30%,
    var(--nebula-violet) 65%,var(--nebula-fuchsia)),#8ba4b647;
}