.intro-tk-particles {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.glass-mark.is-arriving[data-intro-particles="ready"] > .polished-vector {
  visibility: hidden;
}
.glass-mark.is-arriving[data-intro-particles="ready"] > .intro-tk-particles {
  display: block;
}

/* The intro uses the reference's midnight, silver and champagne palette in
   both site themes. These overrides never recolour the normal page. */
html[data-brand-intro] {
  --cinema-midnight: #0d1828;
  --cinema-blue: #101c2d;
  --cinema-cyan: #c99b5e;
  --cinema-silver: #dce6f3;
}
html[data-brand-intro="pending"]::before,
.cinema-intro .cinema-intro-scene {
  background: radial-gradient(ellipse at 24% 44%, #162437 0, transparent 65%),
    linear-gradient(125deg, #101c2d, #0d1828 64%, #07101d);
}
.cinema-intro .cinema-intro-atmosphere {
  background: radial-gradient(ellipse at 18% 15%, rgba(171,193,217,.055), transparent 58%),
    radial-gradient(ellipse at 50% 95%, rgba(201,155,94,.045), transparent 56%),
    linear-gradient(113deg, transparent 28%, rgba(7,16,29,.38) 48%, rgba(171,193,217,.055) 48.15%, transparent 69%);
}
.cinema-intro .cinema-intro-atmosphere::before {
  background: linear-gradient(113deg, transparent 19%, rgba(171,193,217,.02) 32%,
    rgba(220,230,243,.075) 42%, rgba(201,155,94,.02) 50%, transparent 65%);
}
.cinema-intro .cinema-intro-light {
  background: linear-gradient(113deg, transparent 34%, rgba(201,155,94,.025) 45%,
    rgba(224,189,140,.24) 45.12%, rgba(201,155,94,.04) 45.3%, transparent 59%);
}
.cinema-intro .cinema-intro-light i {
  background: linear-gradient(113deg, transparent 54%, rgba(201,155,94,.025) 60%,
    rgba(220,230,243,.25) 60.1%, transparent 60.35%);
}
.cinema-intro .cinema-intro-picture::after {
  background: linear-gradient(90deg, rgba(13,24,40,.94), rgba(16,28,45,.66) 50%,
    rgba(171,193,217,.08) 80%, transparent);
}
.cinema-intro .cinema-intro-picture video { filter: saturate(.58) brightness(.72); }
.cinema-intro .cinema-intro-tone {
  background: linear-gradient(90deg, transparent 27%, rgba(13,24,40,.20) 41%, transparent 64%),
    linear-gradient(0deg, rgba(7,16,29,.78), transparent 38%),
    linear-gradient(180deg, rgba(13,24,40,.20), transparent 26%);
}
.cinema-intro .cinema-outro-blade::before {
  background: linear-gradient(145deg, #1d2c3f, #101c2d 54%, #0d1828);
}
.cinema-intro .cinema-outro-blade::after {
  background: linear-gradient(165deg, rgba(171,193,217,.48), rgba(201,155,94,.34) 52%, rgba(13,24,40,.94));
}
.cinema-intro::after { border-color: rgba(171,193,217,.12); }
.cinema-intro .cinema-intro-progress i {
  background: linear-gradient(90deg, #9b784a, #c99b5e, #dce6f3);
}
.cinema-intro .cinema-intro-progress i::after { box-shadow: 0 0 9px rgba(201,155,94,.5); }
html[data-brand-intro] .polished-mark.is-arriving {
  --polish-shade: #8e9caf;
  --polish-mid: #c8d6e8;
  --polish-light: #eef4fc;
  --polish-edge-accent: #c99b5e;
  --polish-reflection-accent: #e0bd8c;
}

/* Keep the animated TK in its existing header anchor, but hide all menu UI,
   including the glass shell, until the intro attribute is removed at finish. */
html[data-brand-intro] .site-header .header-inner > :not(.brand-link) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}
html[data-brand-intro] .site-header .header-inner::before,
html[data-brand-intro] .site-header .header-inner::after {
  visibility: hidden !important;
}
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .cinema-intro .cinema-intro-tone {
    background: linear-gradient(180deg, rgba(13,24,40,.12) 20%, rgba(13,24,40,.22) 42%,
      rgba(13,24,40,.55) 75%, rgba(7,16,29,.82));
  }
}