/* Scene material layer. Owned by story-cinema; consumes the shared story clock. */
/* Authored depth planes. Transform/opacity only; no continuous JS/blur loops. */
.cine-landscape,.cine-near,.cine-atmosphere{position:absolute;inset:-3%;pointer-events:none;transform-origin:70% 54%;will-change:transform}
.cine-landscape,.cine-near{background-image:url('/assets/cine-landscape-v1.webp');background-size:cover;background-position:65% center}
.cine-landscape{z-index:0;transform:scale(1.04)}
.cine-near{z-index:2;mask-image:linear-gradient(transparent 58%,#000 92%);transform:scale(1.03)}
.cine-atmosphere{z-index:1;background:linear-gradient(90deg,#051e2b9c 0%,#0a283331 48%,transparent 77%),linear-gradient(0deg,#061b2470,transparent 40%);opacity:.72}
.story-v4[data-cinema] .sv4-sky,.story-v4[data-cinema] .sv4-sun,.story-v4[data-cinema] .sv4-beam,.story-v4[data-cinema] .sv4-mist{visibility:hidden}
.story-v4[data-cinema] .sv4-far,.story-v4[data-cinema] .sv4-mid{opacity:0;filter:none}
.story-v4[data-cinema] .sv4-front{opacity:.12;mix-blend-mode:multiply}
.story-v4[data-cinema] .ridge-optical-stage,.story-v4[data-cinema] .sv4-portal-light{display:none}
.story-v4[data-cinema] .sv4-opening{z-index:2;text-shadow:0 2px 28px #04192244}
.story-v4[data-cinema] h1{font-weight:420;letter-spacing:-.065em}
.story-v4[data-cinema] h1 span{will-change:transform,opacity}
.story-v4[data-cinema] .sv4-intro{color:#f0eee2;text-shadow:0 1px 14px #051a27}
.story-v4[data-cinema] .sv4-mountain-copy{top:23%;text-shadow:0 2px 22px #071b29}
.cine-light{position:absolute;left:0;top:0;width:512px;height:512px;z-index:9;background-size:100% 100%;mix-blend-mode:screen;pointer-events:none;visibility:hidden;will-change:transform,opacity;contain:layout paint}
.cine-light-ready{background-image:url('/assets/cine-light-v1.webp')}
.cine-sweep{position:absolute;left:-15%;top:0;width:130%;height:2px;z-index:9;background:linear-gradient(90deg,transparent,#b2e6e033 25%,#ffe6be 55%,#e6bf7755 77%,transparent);box-shadow:0 0 24px 8px #f2d89a33;pointer-events:none;visibility:hidden;transform-origin:center}
.cine-credit{position:absolute;left:7.2%;bottom:22px;z-index:10;max-width:54%;color:#e6e6daab;font:10px/1.5 system-ui,sans-serif;letter-spacing:.06em;pointer-events:none}
.story-v4[data-cinema] .sv4-reading-photo,.story-v4[data-cinema] .sv4-person-photo{transform-origin:50% 50%;backface-visibility:hidden;box-shadow:0 30px 75px #04141e55,0 0 0 1px #ecdfbc24}
.story-v4[data-cinema] .sv4-documentary{background:#0d2029}
.story-v4[data-cinema] .sv4-service-copy{ text-shadow:0 2px 20px #05172066 }
.story-v4[data-cinema]:not([data-story-motion=on]) .cine-light,.story-v4[data-cinema]:not([data-story-motion=on]) .cine-sweep{display:none}
.story-v4[data-cinema]:not([data-story-motion=on]) .cine-credit{top:88svh;bottom:auto}
.story-v4[data-cinema]:not([data-story-motion=on]) .cine-landscape,.story-v4[data-cinema]:not([data-story-motion=on]) .cine-near,.story-v4[data-cinema]:not([data-story-motion=on]) .cine-atmosphere{will-change:auto;transform:none}
@media(max-width:767px){
 .cine-landscape,.cine-near{background-image:url('/assets/cine-landscape-mobile-v1.webp');background-position:67% center}
 .cine-atmosphere{background:linear-gradient(180deg,#071f3366,transparent 65%),linear-gradient(90deg,#071c2d99,transparent 95%)}
 .cine-credit{left:7%;bottom:78px;font-size:9px;max-width:72%;line-height:1.6}
 .story-v4[data-cinema] .sv4-opening h1{font-size:clamp(42px,12vw,84px);letter-spacing:-.065em}
}
@media(prefers-reduced-motion:reduce){.cine-landscape,.cine-near,.cine-atmosphere,.story-v4[data-cinema] h1 span{will-change:auto}.cine-light,.cine-sweep{display:none!important}}
@media(forced-colors:active){.cine-landscape,.cine-near,.cine-atmosphere,.cine-light,.cine-sweep,.cine-credit{display:none!important}}

/* Optical background is decorative; photographs remain unmodified. */
.story-v4[data-cinema='v2'] {
  --glass-atmosphere-image: url('/assets/glass-atmosphere-v2.webp');
  --glass-ink: #07131f;
  --glass-rim: #d8f0ef;
}
.story-v4[data-cinema='v2'] .sv4-impact {
  background-color: var(--glass-ink);
  background-image: none;
}
/* Native story code writes a green inline background on this existing layer.
   Our first child owns its replacement; the native aperture remains untouched. */
.story-v4[data-cinema='v2'] .sv4-later { background: transparent !important; }
.story-v4[data-cinema='v2'] .sv4-later::before { content: none; }
.glass-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: var(--glass-ink);
  contain: layout paint;
}
.glass-field-image {
  position: absolute;
  inset: -4%;
  z-index: 0;
  background-image: none;
  background-size: cover;
  background-position: center 52%;
  transform: scale(1.025);
  transform-origin: 70% 52%;
}
.glass-field-ready .glass-field-image { background-image: var(--glass-atmosphere-image); }
/* The left is a calm reading field, the right retains the asset's bright glass.
   No image filter, tint or transparent veil is placed above documentary photos. */
.glass-field-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, #06132226 0%, #07162612 32%, transparent 57%),
    linear-gradient(0deg, #07132026 0%, transparent 30%, transparent 87%, #0713200f 100%);
}
/* Actual translucent foreground material: the blur samples only illustrated
   backdrop because this whole field is below every photograph and copy layer.
   A narrow optical plane keeps the filtered area bounded, even on desktop. */
.glass-refraction {
  position: absolute;
  z-index: 1;
  top: -16%;
  right: -7%;
  width: 31%;
  height: 128%;
  border-radius: 48% 45% 44% 52% / 39% 48% 44% 58%;
  border: 1px solid #c1e0e01c;
  border-left-color: #deedf15e;
  background:
    linear-gradient(99deg, #d2f2f327, #85c9d00a 9%, #031b2d08 24%, #c9edef10 82%, #ffe4b61a 100%);
  box-shadow:
    inset 2px 0 1px #e7fbfa52,
    inset 6px 0 10px #b3dadd13,
    inset -2px -1px 1px #d3b89924,
    -15px 0 28px #020a171d;
  backdrop-filter: blur(5px) saturate(1.13);
  -webkit-backdrop-filter: blur(5px) saturate(1.13);
  transform: rotate(-13deg);
  transform-origin: 50% 56%;
  opacity: .18;
}
.glass-refraction::before {
  content: '';
  position: absolute;
  inset: 1.4% 2.2% 1.2% 3.7%;
  border: 1px solid transparent;
  border-left-color: #9be2ec45;
  border-right-color: #ffe4ac33;
  border-radius: inherit;
  box-shadow: -1px 0 1px #df8d9916;
}
.glass-refraction::after {
  content: '';
  position: absolute;
  inset: 2.8% 3.3% 3% 6%;
  border: 1px solid transparent;
  border-left-color: #e5f7f02b;
  border-radius: inherit;
}
/* A reflected light contour in the scenery, not a line over the content. */
.glass-caustic {
  position: absolute;
  z-index: 1;
  left: 46%;
  top: 15%;
  width: 65%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid transparent;
  border-left-color: #b6ebed3b;
  border-bottom-color: #edcca32b;
  box-shadow: -3px 2px 0 -2px #dceeed20, -17px 9px 0 -16px #b7e5ed28;
  transform: rotate(-32deg);
  opacity: .18;
}
.glass-field-impact .glass-refraction { right: -11%; }
.glass-field-later .glass-field-image { background-position: 54% 52%; }
.story-v4[data-cinema='v2'] .sv4-second-photo { background: transparent; }
/* Frames track the true photographic boxes. The slow-flying portrait's
   wide letterboxed wrapper is intentionally never included here. */
.story-v4[data-cinema='v2'] :is(.sv4-reading-photo, .sv4-person-photo) {
  border-radius: 6px;
  box-shadow:
    0 24px 55px #020b1866,
    0 8px 14px #04132230,
    0 0 0 1px #cce7e744;
}
.story-v4[data-cinema='v2'] :is(.sv4-reading-photo, .sv4-person-photo)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid #cbebee38;
  border-top-color: #fff2d2c2;
  border-left-color: #d5f5f29c;
  border-right-color: #a7d9e373;
  border-bottom-color: #cab99f66;
  box-shadow: inset 0 1px 0 #fff7df73, inset 1px 0 0 #cff6f333, inset -1px -1px 0 #79b9c22e;
}
.story-v4[data-cinema='v2'] :is(.sv4-time-copy, .sv4-later-copy) {
  text-shadow: 0 2px 18px #0209154a;
}
.story-v4[data-cinema='v2'] :is(.sv4-time-copy, .sv4-later-copy) .sv4-eyebrow { color: #ebd5af; }
.story-v4[data-cinema='v2'] .sv4-time-line { stroke: #e4cda4; }
.story-v4[data-cinema='v2'] .sv4-later-light { stroke: #e2d1af; }
.story-v4[data-cinema='v2'] .ridge-chapters {
  background: linear-gradient(126deg, #d8edf029, #0b2236d6 43%, #182d3cba 73%, #e7c99416);
  border-color: #bcdad968;
  box-shadow: inset 0 1px 0 #fff4da80, inset 1px 0 0 #dbf3f039, inset -1px -1px 0 #91b9c243, 0 12px 30px #020b1845;
}
.story-v4[data-cinema='v2'] .ridge-chapters button {
  border-color: #c8e1df59;
  box-shadow: inset 0 1px 0 #f5f5e928;
}
/* Stable text contrast when the optical ribbon or a bright photo passes below. */
.story-v4[data-cinema='v2'] .sv4-skip {
  padding: 8px 14px;
  border: 1px solid #d9eeed5c;
  border-radius: 999px;
  background: linear-gradient(132deg, #385164e8, #091c2cf2);
  color: #fff4da !important;
  mix-blend-mode: normal;
  box-shadow: inset 0 1px 0 #f3f6e748, 0 5px 15px #020b1833;
  text-shadow: 0 1px 4px #07121b;
}
/* Existing reading mode has no pinned animation. Give each section a static
   background, rather than stretching one giant photo down a long document. */
.story-v4[data-cinema='v2']:not([data-story-motion='on']) .glass-field { display: none; }
.story-v4[data-cinema='v2'][data-glass-reading='true']:not([data-story-motion='on']) :is(.sv4-impact, .sv4-later) {
  background-color: var(--glass-ink) !important;
  background-image: linear-gradient(90deg, #071423ba, #07142373), var(--glass-atmosphere-image) !important;
  background-size: auto, auto 100svh;
  background-position: center, center top;
  background-repeat: repeat, repeat-y;
}
@media (max-width: 767px) {
  /* One computed URL: mobile never requests the desktop atmosphere asset. */
  .story-v4[data-cinema='v2'] { --glass-atmosphere-image: url('/assets/glass-atmosphere-mobile-v2.webp'); }
  .glass-field-image,
  .glass-field-later .glass-field-image { background-position: center 48%; }
  .glass-field-scrim {
    background:
      linear-gradient(90deg, #06132226, #0716260f 66%, transparent),
      linear-gradient(0deg, #0713204a 0%, #07132026 30%, transparent 59%, #07132012 100%);
  }
  .glass-refraction { right: -20%; width: 45%; top: -7%; height: 109%; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-field-impact .glass-refraction { right: -21%; }
  .glass-caustic { left: 42%; top: 12%; width: 88%; opacity: .13; }
  .story-v4[data-cinema='v2'] :is(.sv4-reading-photo, .sv4-person-photo) {
    border-radius: 4px;
    box-shadow: 0 14px 28px #020b185c, 0 0 0 1px #cce7e744;
  }
  .story-v4[data-cinema='v2'][data-story-motion='on'][data-story-beat='handoff'] .sv4-skip {
    top: max(76px, calc(env(safe-area-inset-top) + 70px));
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-refraction { backdrop-filter: none; -webkit-backdrop-filter: none; background: #10263873; }
  .story-v4[data-cinema='v2'] .ridge-chapters { background: #102435; }
}
@media (prefers-contrast: more) {
  .glass-field-image, .glass-refraction, .glass-caustic { display: none; }
  .glass-field-scrim { background: #071320; }
  .story-v4[data-cinema='v2']:not([data-story-motion='on']) :is(.sv4-impact, .sv4-later) { background-image: none !important; }
}
@media (forced-colors: active) {
  .glass-field, .story-v4[data-cinema='v2'] :is(.sv4-reading-photo, .sv4-person-photo)::after { display: none !important; }
  .story-v4[data-cinema='v2']:not([data-story-motion='on']) :is(.sv4-impact, .sv4-later) { background-image: none !important; background-color: Canvas !important; }
}