/* Cinematic layers are decorative. Content and native navigation stay usable
   without JavaScript, reduced motion, or view-transition support. */
.cinema-home { position:relative;isolation:isolate; }
.cinema-ribbon { position:absolute;inset:0 0 auto;width:100%;z-index:4;overflow:hidden;pointer-events:none;display:none; }
.cinema-ribbon path { fill:none;stroke-linecap:round; }
.ribbon-body { stroke:url(#cinema-crimson);stroke-width:var(--ribbon-width); }
.ribbon-edge { stroke:#ff9c9d;stroke-width:1;opacity:.28; }
.cinema-active .cinema-ribbon { display:block; }
.cinema-ribbon g { transform-origin:100% 50%;animation:ribbon-sway 10s ease-in-out infinite alternate; }
@keyframes ribbon-sway { from { transform:translateX(20px) scaleX(1); } to { transform:translateX(-18px) scaleX(1.026); } }
.cinema-sky { position:absolute;inset:-5% 0 auto;height:48%;overflow:hidden;pointer-events:none;opacity:0;mask-image:linear-gradient(90deg,#000 0%,#000 35%,transparent 60%); }
.cinema-active .cinema-sky { opacity:1; }
.cinema-sky img { position:absolute;top:-6%;left:-20%;width:140%;height:100%;max-width:none;object-fit:contain;object-position:50% 0;opacity:.3;animation:sky-drift 24s ease-in-out infinite alternate; }
.cinema-sky img:nth-child(2) { top:12%;left:-35%;opacity:.13;animation-duration:38s;animation-delay:-20s;animation-direction:alternate-reverse; }
@keyframes sky-drift { from { transform:translate3d(-4%,0,0) scale(1); } to { transform:translate3d(9%,3%,0) scale(1.025); } }
.cinema-idle .cinema-sky img,.cinema-idle .cinema-ribbon g,.cinema-sky.is-away img { animation-play-state:paused; }
.cinema-reel { display:none;position:absolute;inset:0;z-index:0;overflow:hidden;background:#091523; }
.cinema-reel-ready .cinema-reel { display:block; }
.cinema-act { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 40%;--art-exposure:.5; }
.cinema-act:nth-child(2) { object-position:50% 42%; }.cinema-act:nth-child(3) { object-position:50% 60%; }
.cinema-reel-ready .story-runway { position:relative;height:240svh; }
.cinema-reel-ready .story-scene { position:sticky;top:0;height:100svh; }
.cinema-reel-ready .story-scene>img { opacity:0;animation:none; }
.cinema-active .scene-caption { right:max(68px,8vw); }
.cinema-reel-ready .story-copy { padding-block:60px; }
.cinema-reel-ready .story-copy.is-revealed { animation:none; }
.cinema-reel-ready .story-scene::after { content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(0deg,#09152399,transparent 40%,#09152322);pointer-events:none; }
.hero-picture,.guide-hero-art { view-transition-name:campaign-scene; }
#hero-title,.guide-hero h1 { view-transition-name:campaign-title; }
::view-transition-group(campaign-scene) { animation-duration:.85s;animation-timing-function:cubic-bezier(.22,.68,.15,1);overflow:clip; }
::view-transition-image-pair(campaign-scene) { isolation:isolate; }
::view-transition-old(campaign-scene),::view-transition-new(campaign-scene) { height:100%;object-fit:cover;mix-blend-mode:normal;animation-duration:.85s; }
::view-transition-old(campaign-scene) { animation-name:cinema-scene-out; }
::view-transition-new(campaign-scene) { animation-name:cinema-scene-in; }
::view-transition-group(campaign-title) { animation-duration:.7s;animation-timing-function:cubic-bezier(.22,.68,.15,1); }
::view-transition-old(campaign-title) { animation:cinema-title-out .25s ease both; }
::view-transition-new(campaign-title) { animation:cinema-title-in .65s .08s cubic-bezier(.22,.68,.15,1) both; }
@keyframes cinema-scene-out { to { opacity:0; } }
@keyframes cinema-scene-in { from { opacity:0; } }
@keyframes cinema-title-out { to { opacity:0; } }
@keyframes cinema-title-in { from { opacity:0;clip-path:inset(0 0 100%); } to { opacity:1;clip-path:inset(0); } }
@media(max-width:800px) {
  .cinema-sky { height:260px;mask-image:linear-gradient(#000,transparent 78%); }
  .cinema-sky img { top:-20%;height:140%;width:200%;left:-60%;opacity:.22; }
  .cinema-sky img:nth-child(2) { top:-7%;left:-90%;opacity:.1; }
  .guide-hero-art .cinema-sky { height:180px; }
  .cinema-reel-ready .story-runway { height:200svh; }
  .cinema-reel-ready .story-copy h2 { font-size:clamp(64px,15vw,90px); }
  .cinema-reel-ready .story-copy { padding-block:60px 100px; }
  .cinema-reel-ready .scene-caption { bottom:90px; }
  .cinema-act:first-child { object-position:50% 40%; }
  .cinema-act:nth-child(2) { object-position:50% 45%; }
  .cinema-ribbon g { animation-name:ribbon-sway-phone;animation-duration:12s; }
  @keyframes ribbon-sway-phone { from { transform:translateX(8px); } to { transform:translateX(-8px); } }
}
@media(prefers-reduced-motion:reduce) {
  .cinema-ribbon,.cinema-sky { display:none!important; }
  .hero-picture,.guide-hero-art,#hero-title,.guide-hero h1 { view-transition-name:none; }
  ::view-transition-group(campaign-scene),::view-transition-group(campaign-title),::view-transition-old(campaign-scene),::view-transition-new(campaign-scene),::view-transition-old(campaign-title),::view-transition-new(campaign-title) { animation:none!important; }
}
html[data-motion="paused"] .cinema-ribbon,html[data-motion="paused"] .cinema-sky { display:none; }

/* Typography follows the scroll by a few pixels. All words remain real text. */
.type-line { display:block; }
.cinema-active .type-line { transform:translate3d(var(--type-drift,0px),0,0); }
.cinema-active .type-line:nth-child(even) { transform:translate3d(calc(var(--type-drift,0px) * -1),0,0); }
.cinema-type em { position:relative; }
.cinema-type em::after { content:"";position:absolute;left:0;right:0;bottom:-.08em;height:1px;background:currentColor;opacity:.45;transform-origin:left; }
.cinema-active .cinema-type em::after { transform:scaleX(var(--type-ink,0)); }
.cinema-detail { position:relative; }
.cinema-detail::before { content:"";position:absolute;left:0;top:-1px;width:52px;height:1px;background:#d72c43;pointer-events:none; }
.chapter-label.cinema-detail::before,.guide-breadcrumb.cinema-detail::before { top:auto;bottom:-10px;width:28px; }
.cinema-active .cinema-detail::before { transform:scaleX(0);transform-origin:left; }
.cinema-active .detail-revealed::before { transform:scaleX(1);transition:transform 1s cubic-bezier(.22,.68,.15,1); }
.cinema-active .guide-link:nth-child(2)::before,.cinema-active .guide-related__grid a:nth-child(2)::before { transition-delay:100ms; }
.cinema-active .guide-link:nth-child(3)::before,.cinema-active .guide-related__grid a:nth-child(3)::before { transition-delay:200ms; }
@media(min-width:801px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .cinema-active .cinema-poster { position:relative;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .cinema-active .portrait-print.cinema-poster { transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(4deg); }
  .cinema-active .portrait-print.cinema-poster.is-revealed { animation:none; }
  .cinema-active .portrait-print.poster-engaged,.cinema-active .portrait-print:focus-visible { transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-6px); }
  .cinema-poster::after { content:"";position:absolute;inset:0;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,50%),#ffffff24,transparent 65%);opacity:0;pointer-events:none;transition:opacity .4s; }
  .cinema-active .poster-engaged::after { opacity:1; }
}
/* A quiet scene cut and a single title arrival on every guide route. */
::view-transition-old(root) { animation:cinema-scene-out .28s ease both; }
::view-transition-new(root) { animation:cinema-scene-in .6s ease both; }
.cinema-arrived .hero-copy>*,.cinema-arrived .guide-breadcrumb,.cinema-arrived .guide-hero h1,.cinema-arrived .guide-hero__deck,.cinema-arrived .guide-meta,.cinema-arrived .hero-art,.cinema-arrived .guide-hero-art>img { animation:none; }
@media(max-width:800px) {
  ::view-transition-group(campaign-scene),::view-transition-old(campaign-scene),::view-transition-new(campaign-scene) { animation-duration:.6s; }
  ::view-transition-group(campaign-title) { animation-duration:.5s; }
  ::view-transition-new(campaign-title) { animation-duration:.45s;animation-delay:.04s; }
}
@media(prefers-reduced-motion:reduce) {
  .type-line { transform:none!important; }.cinema-type em::after { transform:none; }
}
html[data-motion="paused"] .type-line { transform:none; }
html[data-motion="paused"] .cinema-type em::after { transform:none; }

@media(max-width:800px),(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) { .portrait-print.cinema-poster:hover { transform:rotate(4deg); } }
html[data-motion="paused"] .portrait-print.cinema-poster { transform:rotate(4deg); }
html[data-motion="paused"] .vision-image.cinema-poster { transform:none; }

/* Keep the first phone scene clear of floating controls. The menu still links
   to every chapter. The dock appears as the opening gives way to the vision. */
@media(max-width:800px) { .chapter-dock.is-opening { opacity:0;pointer-events:none;visibility:hidden; } }

/* Warm daylight gives way to a cool stage. Decorative light never receives
   pointer input, changes document contrast, or runs a JavaScript frame loop. */
.vision-section { position:relative;isolation:isolate; }
.collection-section { position:relative;isolation:isolate; }
.vision-section>.container,.collection-section>.container { position:relative;z-index:1; }
.scene-atmosphere { position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;z-index:1; }
.cinema-active .scene-atmosphere { opacity:1; }
.scene-atmosphere span { position:absolute;inset:0; }
.atmosphere-warm { background:radial-gradient(ellipse at 82% 15%,#f3bd732b,transparent 65%);opacity:var(--warm-light,.7); }
.atmosphere-cool { background:radial-gradient(ellipse at 35% 75%,#668cda2e,transparent 70%);opacity:var(--cool-light,.2); }
.vision-section>.scene-atmosphere { z-index:0;--warm-light:1;--cool-light:0; }
.collection-section>.scene-atmosphere { z-index:0;--warm-light:0;--cool-light:.65; }
.guide-hero-art>.scene-atmosphere { --warm-light:.65;--cool-light:.15; }
.theme-night .guide-hero-art>.scene-atmosphere { --warm-light:.55;--cool-light:.45; }
.stage-lights { position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;mask-image:linear-gradient(#000,transparent 95%); }
.cinema-active .stage-lights { opacity:1; }
.stage-lights span { position:absolute;top:-24%;left:6%;width:70%;height:145%;background:conic-gradient(from 161deg at 50% 0%,transparent 0deg,#d3e5ff1f 10deg,#ecf3ff26 16deg,transparent 28deg);transform-origin:50% 0;transform:rotate(-12deg); }
.stage-lights span:nth-child(2) { left:38%;opacity:.65;transform:rotate(15deg); }
.cinema-active .light-in-view .stage-lights span { animation:stage-sweep 18s ease-in-out infinite alternate; }
.cinema-active .light-in-view .stage-lights span:nth-child(2) { animation-name:stage-counter;animation-duration:23s;animation-delay:-11s; }
@keyframes stage-sweep { from { transform:rotate(-12deg); } to { transform:rotate(9deg); } }
@keyframes stage-counter { from { transform:rotate(15deg); } to { transform:rotate(-7deg); } }
.cinema-idle .stage-lights span { animation-play-state:paused!important; }
@media(max-width:800px) {
  .stage-lights span { left:0;width:100%;opacity:.65; }
  .stage-lights span:nth-child(2) { display:none; }
  .cinema-active .light-in-view .stage-lights span { animation-duration:24s; }
  .atmosphere-warm,.atmosphere-cool { background-size:100% 100%; }
}
@media(prefers-reduced-motion:reduce) { .scene-atmosphere,.stage-lights { display:none!important; } }
html[data-motion="paused"] .scene-atmosphere,html[data-motion="paused"] .stage-lights { display:none; }

/* One color treatment across the opening, printed art, scenes and viewer.
   Filters are static. Skin, image detail and the complete gallery frame stay visible. */
.campaign-image { filter:saturate(.72) contrast(1.04) brightness(var(--art-exposure,1)); }
.campaign-frame { position:relative;isolation:isolate;overflow:hidden;background:#091523; }
.campaign-frame::before { content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(145deg,#dfb38216,transparent 48%,#09152336);box-shadow:inset 0 0 45px #09152320; }
.portrait-art { line-height:0; }
.cinema-act>.campaign-image { width:100%;height:100%;object-fit:cover;object-position:inherit; }
.campaign-ribbon-art { filter:saturate(.85) contrast(1.03); }
.gallery-art { width:100%;height:100%;box-shadow:0 18px 60px #0004; }
@supports(width:1cqw) {
  .gallery-art { width:min(100cqw,calc(100cqh * var(--art-ratio)));height:min(100cqh,calc(100cqw / var(--art-ratio))); }
}
@supports not (width:1cqw) { .gallery-art { background:transparent;box-shadow:none; }.gallery-art::before { display:none; } }
@media(max-width:800px) {
  .vision-image .campaign-image { object-position:50% 43%; }
  .campaign-frame::before { box-shadow:inset 0 0 25px #09152318; }
}

/* Living artwork: lightweight layers keep faces still and details legible. */
[data-living] { position:relative;overflow:hidden; }
.hero-picture[data-living],.guide-hero-art[data-living] { position:absolute; }
.living-weather { position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s; }
.living-weather i { position:absolute;display:block; }
.living-cloud { width:145%;height:47%;top:-9%;left:-24%;background:url('/assets/dusk-clouds.webp') 50% 50% / cover;opacity:.17;mask-image:linear-gradient(#000 45%,transparent);animation:living-cloud-drift 14s ease-in-out infinite alternate; }
.living-glow { inset:0;background:radial-gradient(ellipse at 19% 49%,#f5bb6a38,transparent 33%);animation:living-horizon 7s ease-in-out infinite alternate; }
[data-living="portrait"] .living-cloud { height:35%;opacity:.18;mask-image:linear-gradient(90deg,#000,transparent 70%); }
[data-living="portrait"] .living-glow { background:radial-gradient(ellipse at 30% 55%,#d9ad6424,transparent 35%); }
[data-living="night"] .living-cloud { opacity:.09;height:48%; }
[data-living="night"] .living-glow { background:conic-gradient(from 158deg at 72% 5%,transparent 0deg,#c4dcff16 12deg,transparent 26deg);transform-origin:72% 5%;animation:living-stage 14s ease-in-out infinite alternate; }
[data-living="ribbon"] .living-weather { display:none; }
.living-motion .living-in-view>.living-weather { opacity:1; }
.living-weather i { animation-play-state:paused; }
.living-motion .living-in-view>.living-weather i { animation-play-state:running; }
.living-background-paused .cinema-home .living-weather i,.living-background-paused .guide-hero .living-weather i { animation-play-state:paused; }
html.film-is-open main *,html.gallery-is-open main * { animation-play-state:paused!important; }
@keyframes living-cloud-drift { from { transform:translateX(-5%); } to { transform:translateX(13%); } }
@keyframes living-horizon { from { opacity:.35; } to { opacity:.9; } }
@keyframes living-stage { from { transform:rotate(-7deg);opacity:.4; } to { transform:rotate(6deg);opacity:.9; } }
.living-tools { display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;line-height:1.5; }
.living-tools button,.film-actions button,.film-close { appearance:none;background:none;border:0;border-radius:0;color:inherit;font:inherit;font-size:12px;letter-spacing:.025em;padding:10px 0;min-height:44px;cursor:pointer; }
.living-tools button { color:#e5e0d4;border-bottom:1px solid #e5e0d450; }
.living-tools button:hover,.film-actions button:hover,.film-close:hover { color:#f6be83; }
.living-tools button:focus-visible,.campaign-film button:focus-visible { outline:2px solid #f6be83;outline-offset:5px; }
.hero-copy .living-tools { margin-top:-10px; }
.living-footer-tools { margin-top:24px; }
.guide-hero .living-tools { margin-top:24px; }
.film-is-open { overflow:hidden; }
.campaign-film { position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#091523;color:#f3eee3;overflow:hidden; }
.campaign-film::backdrop { background:#091523; }
.film-header { position:absolute;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px max(28px,5vw);background:linear-gradient(#091523aa,transparent);gap:24px; }
.film-header p { font-size:10px;text-transform:uppercase;letter-spacing:.18em; }
.film-stage,.film-panel,.film-panel picture { position:absolute;inset:0; }
.film-panel { opacity:0;transition:opacity 1.3s ease-in-out;overflow:hidden; }
.film-panel.film-current { opacity:1;z-index:1; }
.film-panel picture { animation:film-camera 8s ease-out both;animation-play-state:paused; }
.film-panel img { width:100%;height:100%;object-fit:cover;object-position:65% 40%;--art-exposure:.8; }
.film-panel[data-living="rally"] img { object-position:50% 43%; }
.film-panel[data-living="night"] img { object-position:50% 60%; }
.film-panel::after { content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,#091523e6,transparent 58%,#09152333); }
.living-motion .film-current picture { animation-play-state:running; }
.film-panel:not(.film-current) .living-weather i,.film-paused .film-panel picture,.film-paused .living-weather i { animation-play-state:paused!important; }
.film-caption { position:absolute;z-index:3;left:max(28px,7vw);right:max(28px,7vw);bottom:190px;pointer-events:none; }
.film-caption h2 { font-family:'Source Serif 4',Georgia,serif;font-size:clamp(34px,5vw,76px);font-weight:400;line-height:1.12;letter-spacing:-.035em;margin:0 0 18px; }
.film-caption p { margin:0;color:#d9d9d4;font-size:14px;letter-spacing:.035em; }
.film-controls { position:absolute;z-index:4;bottom:0;left:0;right:0;padding:24px max(28px,5vw) max(24px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#091523); }
.film-controls progress { appearance:none;display:block;width:100%;height:2px;border:0;background:#f3eee330;color:#d84458; }
.film-controls progress::-webkit-progress-bar { background:#f3eee330; }.film-controls progress::-webkit-progress-value { background:#d84458; }.film-controls progress::-moz-progress-bar { background:#d84458; }
.film-actions { display:flex;gap:20px;align-items:center;justify-content:flex-start;flex-wrap:wrap;padding-top:16px; }
.film-actions .film-explore { margin-left:auto; }.film-actions button:disabled { opacity:.4;cursor:default; }
.film-announcement { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
@keyframes film-camera { from { transform:scale(1.02); } to { transform:scale(1.09) translateY(-.8%); } }
@media(max-width:800px) {
  .living-cloud { animation-duration:18s;opacity:.16; }
  .film-header { padding:16px 20px; }.film-close { max-width:52%; }
  .film-caption { left:24px;right:24px;bottom:205px; }.film-caption h2 { font-size:clamp(30px,8vw,48px); }
  .film-panel img { object-position:50% 38%; }
  .film-controls { padding:20px 24px max(20px,env(safe-area-inset-bottom)); }.film-actions { gap:6px 22px; }
  .film-actions .film-explore { flex-basis:100%;margin:0;text-align:left; }.film-actions button { font-size:11px; }
}
@media(max-height:540px) { .film-header { padding:6px 24px; }.film-caption { bottom:130px; }.film-caption h2 { font-size:32px;margin-bottom:8px; }.film-controls { padding:12px 24px; }.film-actions { padding-top:4px; }.film-actions .film-explore { flex-basis:auto;margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { .living-weather { display:none!important; }.film-panel { transition:none; }.film-panel picture { animation:none!important; } }
html[data-motion="paused"] .living-weather { opacity:0; }
html[data-motion="paused"] .film-panel { transition:none; }
