:root {
  --cinema-copper: #df9c72;
  --cinema-nickel: #d3d6cf;
  --cinema-ease: cubic-bezier(.22, .64, .27, 1);
}

.cinema-loader {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  padding: 26px;
  color: #f7eee4;
  background: radial-gradient(ellipse at 58% 61%, #382a25 0%, #1a1c21 46%, #0e151c 82%);
  text-align: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .34s var(--cinema-ease), visibility 0s linear .34s;
}

html.cinema-entering:not(.cinema-ready, .cinema-motion-off) .cinema-loader {
  visibility: visible;
  opacity: 1;
  transition: none;
  animation: cinema-loader-timeout 1.75s step-end forwards;
}

.cinema-loader-mark {
  display: grid;
  gap: 7px;
  font: 800 clamp(1.72rem, 6.7vw, 5.4rem)/1 var(--sans);
  letter-spacing: .065em;
  text-transform: uppercase;
}

.cinema-loader-mark > span { white-space: nowrap; }
.cinema-loader-mark > small {
  color: var(--cinema-copper);
  font: 500 clamp(.63rem, 2.7vw, 1rem)/1.4 var(--mono);
  letter-spacing: .29em;
}

.cinema-loader-rule {
  display: block;
  width: min(58vw, 21rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cinema-copper) 32%, var(--cinema-nickel) 70%, transparent);
}

html.cinema-entering:not(.cinema-ready, .cinema-motion-off) .cinema-loader-mark {
  animation: cinema-mark-settle .57s var(--cinema-ease) both;
}

html.cinema-entering:not(.cinema-ready, .cinema-motion-off) .cinema-loader-rule {
  animation: cinema-rule-open .54s var(--cinema-ease) .08s both;
}

.cinema-loader-copy,
.cinema-loader-index {
  color: var(--cinema-nickel);
  font: 500 clamp(.62rem, 2.7vw, .74rem)/1.45 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cinema-loader-index {
  position: absolute;
  inset: auto max(26px, 3vw) max(26px, 3vw) auto;
  display: flex;
  gap: 12px;
  color: var(--cinema-copper);
}

.cinema-loader-index > span + span {
  padding-inline-start: 12px;
  border-inline-start: 1px solid #df9c725f;
}

.cinema-route-progress {
  position: fixed;
  z-index: 21;
  inset: 0 0 auto;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.cinema-route-progress::after {
  content: '';
  display: block;
  width: 46%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cinema-copper) 44%, #f6e8d7 79%, transparent);
  transform: translateX(-105%);
}

html.cinema-navigating:not(.cinema-motion-off) .cinema-route-progress {
  opacity: 1;
}

html.cinema-navigating:not(.cinema-motion-off) .cinema-route-progress::after {
  animation: cinema-route-sweep .62s var(--cinema-ease) both;
}

.motion-switch {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 28px;
  padding: 2px 7px;
  border: 1px solid #b3afa05c;
  border-radius: 2px;
  color: #f4e9dc;
  background: transparent;
  font: inherit;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
}

.cinema-enhanced .motion-switch { display: inline-flex; }
.motion-switch:hover { border-color: var(--cinema-copper); }
.motion-switch:focus-visible { outline-color: var(--cinema-copper); outline-offset: 2px; }
.motion-switch:disabled { cursor: default; }
.motion-switch::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cinema-copper);
}
.cinema-motion-off .motion-switch::before { background: var(--cinema-nickel); }

.cinema-hero { position: relative; isolation: isolate; }
.cinema-home { --cinema-pivot: 67% 53%; }
.cinema-archive { --cinema-pivot: 58% 49%; }
.cinema-network { --cinema-pivot: 62% 54%; }
.cinema-article { --cinema-pivot: 55% 52%; }
.cinema-error { --cinema-pivot: 63% 50%; }
.cinema-picture { transform-origin: var(--cinema-pivot, 60% 50%); }

.cinema-home .hero-shade {
  background: linear-gradient(90deg, #101820f5 0%, #101820b8 36%, #10182028 76%),
    linear-gradient(0deg, #0b151cd1, transparent 58%);
}

.cinema-network .hero-shade {
  background: linear-gradient(90deg, #101820 7%, #101820e8 32%, #10182075 75%, #10182022),
    linear-gradient(0deg, #101820a6, transparent 72%);
}

.cinema-article-media {
  position: relative;
  overflow: hidden;
  background: #19232a;
}

.cinema-article-media > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 690px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cinema-article-copy h1 { overflow-wrap: anywhere; }

.cinema-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cinema-loader::before,
.cinema-frame::before {
  --frame-line: #e4c6ad9c;
  --frame-size: clamp(9px, 2vw, 19px);
  content: '';
  position: absolute;
  inset: clamp(8px, 1.3vw, 20px);
  background:
    linear-gradient(var(--frame-line), var(--frame-line)) left top / var(--frame-size) 1px,
    linear-gradient(var(--frame-line), var(--frame-line)) left top / 1px var(--frame-size),
    linear-gradient(var(--frame-line), var(--frame-line)) right top / var(--frame-size) 1px,
    linear-gradient(var(--frame-line), var(--frame-line)) right top / 1px var(--frame-size),
    linear-gradient(var(--frame-line), var(--frame-line)) left bottom / var(--frame-size) 1px,
    linear-gradient(var(--frame-line), var(--frame-line)) left bottom / 1px var(--frame-size),
    linear-gradient(var(--frame-line), var(--frame-line)) right bottom / var(--frame-size) 1px,
    linear-gradient(var(--frame-line), var(--frame-line)) right bottom / 1px var(--frame-size);
  background-repeat: no-repeat;
}

.cinema-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(103deg, transparent 24%, #bc7c4a00 37%, #e5aa7747 48%, #eee1c549 50%, #af7b5040 53%, transparent 67%);
}

.cinema-frame-index,
.cinema-frame-note { display: none; }

.cinema-error .cinema-frame::before { --frame-line: #a24e345c; }

html.cinema-enhanced.cinema-ready:not(.cinema-motion-off) .cinema-hero .cinema-picture {
  animation: cinema-image-settle 2.65s var(--cinema-ease) both;
}

html.cinema-enhanced.cinema-ready:not(.cinema-motion-off) .cinema-frame::after {
  animation: cinema-frame-pass 1.38s var(--cinema-ease) both;
}

html.cinema-enhanced.cinema-ready:not(.cinema-motion-off) .cinema-copy > * {
  animation: cinema-copy-settle .48s var(--cinema-ease) both;
  animation-delay: var(--cinema-stagger, .09s);
}

.cinema-copy > :nth-child(2) { --cinema-stagger: .15s; }
.cinema-copy > :nth-child(3) { --cinema-stagger: .22s; }
.cinema-copy > :nth-child(4) { --cinema-stagger: .29s; }
.cinema-copy > :nth-child(n+5) { --cinema-stagger: .36s; }

/* Keep the timeout separate from the opacity and visibility used for the normal fade. */
@keyframes cinema-loader-timeout { to { clip-path: inset(50%); } }
@keyframes cinema-mark-settle {
  from { opacity: .52; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cinema-rule-open { from { transform: scaleX(0); } }
@keyframes cinema-route-sweep { to { transform: translateX(225%); } }
@keyframes cinema-image-settle { from { transform: scale(1.057); } to { transform: scale(1); } }
@keyframes cinema-frame-pass {
  from { opacity: 0; transform: translateX(-62%); }
  34% { opacity: .58; }
  to { opacity: 0; transform: translateX(62%); }
}
@keyframes cinema-copy-settle {
  from { opacity: .88; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1100px) {
  .cinema-frame-index,
  .cinema-frame-note {
    position: absolute;
    inset-inline-end: clamp(24px, 2.25vw, 40px);
    display: block;
    max-width: 10rem;
    padding: 4px 6px;
    color: #f7e6d8;
    background: #101820b5;
    font: 500 .55rem/1.35 var(--mono);
    letter-spacing: .085em;
    text-align: end;
    text-transform: uppercase;
  }
  .cinema-frame-index { inset-block-start: clamp(24px, 2.25vw, 40px); }
  .cinema-frame-note { inset-block-start: calc(clamp(24px, 2.25vw, 40px) + 21px); }
}

@media (max-width: 700px) {
  .cinema-home .hero-shade,
  .cinema-network .hero-shade {
    background: linear-gradient(90deg, #101820f1, #10182084),
      linear-gradient(0deg, #101820b5, transparent 75%);
  }
  .utility-inner { gap: .45rem; }
  .motion-switch { padding-inline: 5px; gap: 4px; }
}

@media (max-width: 440px) {
  .cinema-article-copy h1 { font-size: clamp(2.3rem, 10.6vw, 2.9rem); }
}

.cinema-motion-off .cinema-loader,
.cinema-motion-off .cinema-route-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cinema-loader,
  .cinema-route-progress { display: none; }
  .motion-switch::before { background: var(--cinema-nickel); }
  html.cinema-enhanced.cinema-ready:not(.cinema-motion-off) .cinema-hero .cinema-picture,
  html.cinema-enhanced.cinema-ready:not(.cinema-motion-off) .cinema-frame::after,
  html.cinema-enhanced.cinema-ready:not(.cinema-motion-off) .cinema-copy > * { animation: none; }
}