/*
 * Narnia article: looping refraction background, CSS only.
 * Animated AVIF (24 fps, 1152x1728, ~0.7 MB) transcoded from refract3.mp4.
 * Scoped to this article via its body entry id. Loaded through the page's CDN CSS field.
 */

/* Fixed, viewport-sized decorative layer behind all page content. */
.page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"])::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh; /* no resize/jump when mobile toolbars collapse */
  pointer-events: none;
  /* poster underneath shows while the AVIF loads and where AVIF is unsupported */
  background:
    url("https://tudumext.com/projects/narnia-test-background/narnia-refraction.avif") center / cover no-repeat,
    url("https://tudumext.com/projects/narnia-test-background/narnia-refraction-poster.jpg") center / cover no-repeat,
    #000;
}

@media (prefers-reduced-motion: reduce) {
  .page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"])::before {
    background: url("https://tudumext.com/projects/narnia-test-background/narnia-refraction-poster.jpg") center / cover no-repeat, #000;
  }
}

body:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"]) {
  background: #000;
}

/* Shakti declares these surfaces with !important inside @layer shakti, so override in that layer. */
@layer shakti {
  .page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"]),
  .page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"]) > section,
  .page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"]) .articleHero [data-uia="card"] {
    background: transparent !important;
    color: #fff !important;
    --text-color: #fff;
    --text-color-rgb: 255, 255, 255;
    --page-background-color: #000;
  }
}

/* The hero logo artwork has a black matte: screen-blend it so the background shows through. */
.page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"]) .articleHero > div {
  mix-blend-mode: screen;
}

/*
 * Typography from Ordinary Time_NEW, October 14_Desktop (896:17430).
 * ABOUT: Amarante 45px. Only the direct heading before the ABOUT drawer group
 * gets custom typography; article questions and drawer headings keep Netflix Sans.
 * Do not target the first body heading: CAST was removed and that position now
 * belongs to an article question on staging.
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 */
@font-face {
  font-family: "Narnia Amarante";
  src: url("https://tudumext.com/projects/ordinary-time/fonts/Amarante-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

[data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"] {
  --narnia-font-section: "Narnia Amarante", Palatino, serif;
}

/* ABOUT is the direct body heading immediately before its drawer group. */
[data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"] > h3[data-sel="heading"]:has(+ [data-uia="drawer-group"]) {
  font-family: var(--narnia-font-section);
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-variation-settings: normal;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}

[data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"] > h3[data-sel="heading"]:has(+ [data-uia="drawer-group"]) {
  font-size: clamp(36px, 4.5vw, 45px);
  line-height: 1.55;
  margin: 64px 0 24px;
}

/* Preserve compact spacing on the TEST layout, where ABOUT is the first body heading. */
@media (max-width: 767px) {
  [data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"] > h3[data-sel="heading"]:first-of-type:has(+ [data-uia="drawer-group"]) {
    margin-top: 48px;
    margin-bottom: 24px;
  }
}

/*
 * Immersive article masthead: retain the logo and utility controls, without
 * either link row or the article subnav. Keep menu/dropdown surfaces unchanged.
 */
:root:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) {
  --page-header-color: transparent !important;
  --page-header-gradient: none !important;
  --header-height: 80px !important;
  --header-collapsed-height: 80px !important;
}

body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) [data-sel="site-header"] {
  min-height: 0;
  background: transparent !important;
}

/* Add 12px below the masthead without moving its logo or utility controls. */
body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) [data-sel="site-header"] > [data-sel="top-nav"] {
  padding-bottom: 20px;
}

/* GlobalNav's two direct, non-masthead divs are its static and scroll fills. */
body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) [data-sel="site-header"] > div:not([data-sel="top-nav"]) {
  background: transparent !important;
}

body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) [data-uia="global-nav-links"],
body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) [data-uia="global-nav-links-mobile"],
.page-kind-ARTICLE:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) > [data-guid="site-subnav"] {
  display: none !important;
}

@media (max-width: 830px) {
  :root:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) {
    --header-height: 74px !important;
    --header-collapsed-height: 74px !important;
  }

  body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) [data-sel="site-header"] > [data-sel="top-nav"] {
    padding-bottom: 18px;
  }
}

/* The full language label makes the tablet masthead 4px taller. */
@media (min-width: 600px) and (max-width: 830px) {
  :root:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) {
    --header-height: 78px !important;
    --header-collapsed-height: 78px !important;
  }
}

/* Latest ABOUT heading color; retain its existing Amarante typography. */
[data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"] > h3[data-sel="heading"]:has(+ [data-uia="drawer-group"]) {
  color: #D6CCDD !important;
}

/* Keep the native transparent-to-black scroll fade, with a hard bottom edge. */
body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"]) [data-sel="site-header"] > div:nth-child(2):not([data-sel="top-nav"]) {
  background: #000 !important;
}

/* Match the homepage's delayed fade; retain the compact masthead,
 * permanently hidden link rows, and native scroll-away behavior.
 */
@supports (animation-timeline: scroll(root block)) and (animation-range: 200px 300px) {
  body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"])
    [data-sel="site-header"] > div:nth-child(2):not([data-sel="top-nav"]) {
    animation: ordinary-time-article-header-fill 1s ease-in-out both !important;
    animation-timeline: scroll(root block) !important;
    animation-range: 200px 300px !important;
  }

  /* Compact logos do not shrink; the smaller hero reaches them sooner. */
  @media (max-width: 830px) {
    body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"])
      [data-sel="site-header"] > div:nth-child(2):not([data-sel="top-nav"]) {
      animation-range: 0px 100px !important;
    }
  }

  @keyframes ordinary-time-article-header-fill {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/*
 * Stars: second background layer (Oct 8). Seamless 27 s animated AVIF (24 fps, 2560x1350, ~0.4 MB)
 * from stars_backdrop.mp4, screen-blended over the refraction and under the screen-blended hero, so the
 * hero shows 3 layers and the rest of the article 2. Slightly taller than the viewport and drifting up
 * 25lvh over the full page scroll for depth; static where scroll timelines are unsupported.
 * Motion-sensitive users keep the poster-only background.
 */
@media (prefers-reduced-motion: no-preference) {
  .page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"])::before {
    z-index: -3; /* refraction stays the bottom layer */
  }

  .page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"])::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 125vh;
    height: 125lvh;
    pointer-events: none;
    background: url("https://tudumext.com/projects/narnia-test-background/narnia-stars.avif") center / cover no-repeat;
    mix-blend-mode: screen;
  }

  @supports (animation-timeline: scroll()) {
    .page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"])::after {
      animation: narnia-stars-drift linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes narnia-stars-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -25lvh, 0); }
}

/* Soft 90% black oval behind the hero logo, under the screen-blended video (the video is always full-width 16:9). */
.page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"]) .articleHero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  background: radial-gradient(ellipse 41% 36% at 50% 49%, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.9) 45%, rgb(0 0 0 / 0.765) 58%, rgb(0 0 0 / 0.54) 70%, rgb(0 0 0 / 0.297) 82%, rgb(0 0 0 / 0.108) 92%, transparent 100%);
}

/*
 * Final pass (Oct 8): earlier header fill + hero depth order.
 *
 * Header: the hero video starts directly under the header and is always full-width 16:9, so the top of
 * the "A FILM BY GRETA GERWIG" credit (row 245 of 1080) reaches the header's bottom edge after 12.76vw
 * of scroll at every width. Finish the fill at 12vw, fading over at most 100px (from 0 on phones/tablets).
 */
@supports (animation-timeline: scroll(root block)) and (animation-range: 200px 300px) {
  body:has([data-uia="article-content"][data-id="7F7P0iCZW8aEeDVaUFfNJz"])
    [data-sel="site-header"] > div:nth-child(2):not([data-sel="top-nav"]) {
    animation-range: max(0px, 12vw - 100px) 12vw !important;
  }
}

/*
 * Depth order, back to front (all in the root stacking context; the video's screen-blended wrapper is
 * the only stacking context above them):
 *   -4 refraction (fixed)  ->  -3 soft oval (dims only the refraction)  ->  -2 stars (fixed)  ->  hero video (screen)
 * Stars float freely behind the logo and stay fully visible around it. (A letter-shaped black matte was
 * tried on Oct 8 and removed: it read as a dark outline around the letters.)
 */
.page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"])::before {
  z-index: -4;
}

.page-kind-ARTICLE:has([data-id="7F7P0iCZW8aEeDVaUFfNJz"]) .articleHero::before {
  z-index: -3;
}