/* Vision Pro hero: the existing title/CTA remain the progressive fallback. */
.vision-story{padding:0!important;overflow:visible!important;background:#fff}
.vision-sticky{position:relative;min-height:900px;overflow:hidden}
.vision-film{position:relative;height:60vh;min-height:360px;background:#09131e;overflow:hidden}
.vision-video{width:100%;height:100%;object-fit:cover;display:block}
.vision-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 28%,#030a16b3 100%)}
.vision-transport{position:absolute;width:min(470px,80%);left:50%;bottom:12%;transform:translateX(-50%);padding:19px 25px;color:white;border-radius:28px;background:#25313b99;border:1px solid #ffffff40;backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 12px 50px #0003;text-align:left}
.vision-film-title{font-size:15px;font-weight:600;display:flex;justify-content:space-between}.vision-film-title span{font-weight:400;opacity:.6}
.vision-progress{height:3px;background:#ffffff40;border-radius:4px;margin-top:19px;overflow:hidden}.vision-progress span{display:block;width:var(--played,0%);height:100%;background:white}
.vision-time{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:10px;opacity:.65;margin-top:7px}
.vision-transport-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}.vision-transport-row button{border:0;border-radius:50%;width:40px;height:40px;background:#ffffff14;color:white;font-size:24px}.vision-transport-row .vision-play{background:white;color:#161619;width:50px;height:50px;font-size:19px}.vision-transport-row>span{width:30px;text-align:center;color:#fffc}
.vision-story .hero-copy{position:relative;padding:50px 12px 65px}.vision-story .hero-copy h1{margin-top:17px}
.vision-hardware{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.vision-story-actions{display:none}.vision-poster{display:none}
.vision-story.is-ready{height:290svh}
.is-ready .vision-sticky{position:sticky;top:80px;height:calc(100svh - 80px);min-height:620px}
.is-ready .vision-film{position:absolute;inset:0;height:100%;min-height:0;transform-origin:50% 42%;border-radius:var(--film-radius,0px);transform:translateY(var(--film-y,0px)) scale(var(--film-scale,1));opacity:var(--film-alpha,1);z-index:3;will-change:transform,opacity}
.is-ready .hero-copy{position:absolute;left:0;right:0;bottom:7%;padding:0 16px;z-index:4;opacity:var(--copy-alpha,0);transform:translateY(var(--copy-y,25px));visibility:hidden}
.is-ready.has-title .hero-copy{visibility:visible}
.is-ready .hero-copy h1{font-size:clamp(48px,6.3vw,94px)}
.is-ready .hero-download{margin-top:25px}
.is-ready .vision-story-actions{display:flex;position:absolute;bottom:25px;left:5%;right:5%;justify-content:space-between;align-items:center;color:var(--hint-color,#fff);font-size:12px;z-index:5}
.vision-story-actions a{padding:9px 14px;border:1px solid #8886;border-radius:30px;backdrop-filter:blur(12px)}
.is-ready .vision-transport{opacity:var(--controls-alpha,1)}
.is-ready.is-static{height:auto}
.is-ready.is-static .vision-sticky{position:relative;height:950px;max-height:1100px}
.is-static .vision-film{display:none}.is-static .vision-story-actions{display:none}
@media(max-width:700px){
 .is-ready .vision-sticky{min-height:560px}
 .is-ready .hero-copy{bottom:12%}.vision-story .hero-eyebrow{font-size:15px;gap:6px}.vision-story .platform-chip{font-size:13px;padding:5px 9px}
 .is-ready .hero-copy h1{font-size:clamp(42px,10vw,65px)}
 .vision-transport{bottom:18%;padding:16px 20px;width:82%}
 .is-ready.is-static .vision-sticky{height:740px}
}
@media(prefers-reduced-motion:reduce){.vision-story.is-ready{height:auto}.is-ready .vision-sticky{position:relative;height:850px}.vision-story .vision-film{display:none}.vision-story-actions{display:none!important}}

@media(prefers-reduced-motion:reduce){.vision-story:not(.is-ready) .vision-poster{display:block;height:55vh;background:url(/assets/vision-hero/poster.png) center/contain no-repeat}}

.vision-transport-row svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}.vision-transport-row circle{fill:#56616b}

.vision-story{overflow-anchor:none}

/* Opening title uses the same heading, then returns beneath the hardware. */
.is-ready.is-opening .hero-copy{top:12%;bottom:auto;color:white;text-shadow:0 2px 30px #0005;opacity:var(--copy-alpha,1);transform:translateY(0)}
.is-ready.is-opening .hero-eyebrow{color:#fffffff0}
.is-ready.is-opening .platform-chip{background:#ffffff21;color:white;backdrop-filter:blur(12px);border:1px solid #ffffff35}
.is-opening .vision-vignette{background:linear-gradient(#0008,transparent 60%,#0007)}
@media(max-width:700px){.is-ready.is-opening .hero-copy{top:12%}.is-ready.is-opening .hero-copy h1{font-size:clamp(42px,10vw,65px)}}

/* Mirrors CinemaControls, PlaybackScrubber, PlaybackTransportBar and their metrics. */
.vision-transport{width:min(760px,88%);padding:24px;border-radius:36px;background:#38434a70;backdrop-filter:blur(32px) saturate(1.25)}
.vision-transport button{display:grid;place-items:center;background:#ffffff16;border:1px solid #ffffff09;color:white;border-radius:50%;width:64px;height:64px;flex-shrink:0}
.vision-transport button img{width:32px;height:32px;object-fit:contain}
.vision-film-title{display:flex;align-items:center;gap:20px;font-size:22px;font-weight:500}
.vision-film-title>span{flex:1;font-weight:500;opacity:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vision-scrubber{display:flex;align-items:center;gap:20px;margin:16px 0}
.vision-scrubber input{appearance:none;-webkit-appearance:none;min-width:0;flex:1;height:5px;border-radius:5px;background:linear-gradient(to right,#fff var(--played,0%),#ffffff40 var(--played,0%));cursor:pointer}
.vision-scrubber input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:white}
.vision-scrubber input::-moz-range-thumb{border:0;width:12px;height:12px;border-radius:50%;background:white}
.vision-time{display:block;margin:0;font-size:15px;white-space:nowrap;opacity:.8}
.vision-transport-row{margin:0;gap:24px}.vision-center-transport{display:flex;align-items:center;gap:16px}
.vision-transport-row .vision-play{width:80px;height:80px;background:white}.vision-play img{filter:brightness(0);width:40px!important;height:40px!important}
.vision-control-pane{position:absolute;bottom:calc(100% + 12px);left:0;right:0;padding:20px 24px;border-radius:28px;background:#35414de8;backdrop-filter:blur(32px);border:1px solid #ffffff35}
.vision-control-pane[hidden]{display:none}.vision-pane-heading{display:flex;align-items:center;gap:20px;font-size:22px}.vision-control-pane button{width:44px;height:44px}.vision-pane-heading img{width:24px!important;height:24px!important}
.vision-volume-row{display:flex;justify-content:center;align-items:center;gap:32px;margin:20px}.vision-volume-row output{min-width:90px;text-align:center;font-size:28px;font-variant-numeric:tabular-nums}.vision-volume-row button{font-size:28px}
.vision-control-pane [data-volume-mute]{width:100%;border-radius:12px}.vision-keep-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0 8px}.vision-keep-controls input{width:24px;height:24px;accent-color:#fff}
.vision-transport.controls-hidden{opacity:0;pointer-events:none}.vision-transport:focus-within{opacity:1}
@media(max-width:700px){.vision-transport{padding:16px;border-radius:26px;bottom:13%;width:92%}.vision-transport button{width:40px;height:40px}.vision-transport button img{width:26px;height:26px}.vision-film-title{gap:12px;font-size:17px}.vision-transport-row{gap:8px}.vision-center-transport{gap:8px}.vision-transport-row .vision-play{width:56px;height:56px}.vision-play img{width:30px!important;height:30px!important}.vision-scrubber{gap:12px}.vision-time{font-size:12px}.vision-control-pane{padding:16px}.vision-pane-heading{font-size:18px}}

/* Geometry is present in the HTML before the renderer or video initializes. */
.vision-film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vision-video{position:relative;opacity:0;transition:opacity .6s ease}
.vision-film.has-decoded-frame .vision-video{opacity:1}
/* Keep the first-frame layer beneath the video for autoplay/network failures. */
@media(prefers-reduced-motion:reduce){
 .vision-video{transition:none}
 .vision-story.is-ready .vision-sticky{height:850px!important;min-height:850px!important}
 .vision-story.is-ready .vision-poster{display:block;position:absolute;inset:0 0 35%;background:url(/assets/vision-hero/poster.png) center/contain no-repeat}
 .vision-story.is-ready .hero-copy{top:auto;bottom:7%;color:var(--ink);text-shadow:none;opacity:1;visibility:visible;transform:none}
 .vision-story.is-ready .hero-eyebrow{color:var(--secondary)}
 .vision-story.is-ready .platform-chip{color:var(--ink);background:var(--surface)}
 .vision-story.has-hardware .vision-poster{display:none}
}

/* Put on Vision Pro, then move through three settled viewing experiences. */
.wear-story{position:relative;--copy-alpha:1;--copy-y:0px;--film-alpha:0;--controls-alpha:0;--chapter-alpha:0;--hint-color:#6e6e73}
.wear-story.is-ready{height:540svh}
.vision-immersion-anchor{position:absolute;top:220svh;left:0}
.wear-story .vision-poster{display:block;position:absolute;inset:0 0 34%;background:url(/assets/vision-hero/poster.png) center/contain no-repeat}
.wear-story.has-hardware .vision-poster{display:none}
.wear-story .hero-copy{color:var(--ink);text-shadow:none;top:auto;bottom:7%;opacity:var(--copy-alpha,1);visibility:visible}
.wear-story:not(.has-title) .hero-copy{visibility:hidden}
.vision-room{position:absolute;inset:0;z-index:1;opacity:var(--room-alpha,0);pointer-events:none;background:#020307}
.vision-room img{width:100%;height:100%;object-fit:cover}.vision-room>div{position:absolute;inset:0;background:#030408;opacity:var(--room-darkness,0)}
.wear-story.is-ready .vision-film{inset:auto;left:50%;top:var(--movie-top,50%);width:var(--movie-width,74%);height:var(--movie-height,56%);transform:translate(-50%,-50%);border-radius:var(--movie-radius,24px);opacity:var(--film-alpha,0);box-shadow:0 30px 100px #0005;visibility:hidden}
.wear-story .vision-vignette{background:none}
.wear-story>.vision-sticky>.vision-transport{z-index:6;bottom:8%;width:min(600px,88%);opacity:var(--controls-alpha,0);visibility:hidden}
.wear-story.inside-headset>.vision-sticky>.vision-transport{visibility:visible}
.wear-story .vision-transport button{width:48px;height:48px}.wear-story .vision-transport .vision-play{width:64px;height:64px}.wear-story .vision-transport{padding:18px 24px}.wear-story .vision-film-title{font-size:18px}
.vision-chapter{position:absolute;z-index:5;top:7%;left:5%;right:5%;text-align:center;opacity:var(--chapter-alpha,0);color:var(--chapter-color,#1d1d1f);pointer-events:none}
.vision-chapter>p:first-child{font-size:16px;font-weight:600;margin-bottom:10px}.vision-chapter h2{font-size:clamp(30px,3.2vw,52px);letter-spacing:-.04em;line-height:1.08}.vision-chapter>p:last-child{font-size:17px;margin-top:12px}
.vision-mode-nav{position:absolute;z-index:7;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:3px;border:1px solid #ffffff45;background:#8883;backdrop-filter:blur(20px);padding:4px;border-radius:99px;visibility:hidden;color:var(--chapter-color,#1d1d1f)}
.inside-headset .vision-mode-nav{visibility:visible}.vision-mode-nav button{border:0;background:transparent;color:inherit;font-size:13px;padding:9px 15px;border-radius:99px}.vision-mode-nav button[aria-pressed=true]{background:#fff;color:#1d1d1f}
.wear-story .vision-story-actions{pointer-events:none}.wear-story .vision-story-actions a{pointer-events:auto}
@media(max-width:700px){
 .wear-story.is-ready{height:500svh}
 .wear-story .hero-copy{bottom:12%}
 .wear-story .vision-chapter{top:8%;left:6%;right:6%}.vision-chapter>p:last-child{font-size:14px}
 .wear-story.inside-headset .vision-story-actions span{display:none}.wear-story.inside-headset .vision-story-actions a{display:none}
 .wear-story>.vision-sticky>.vision-transport{width:92%;bottom:10%;padding:14px 16px}
 .wear-story .vision-transport button{width:36px;height:36px}.wear-story .vision-transport .vision-play{width:50px;height:50px}
 .wear-story .vision-mode-nav{bottom:20px}.vision-mode-nav button{padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){
 .wear-story.is-ready{height:auto}
 .wear-story .vision-immersion-anchor{top:0}
 .wear-story .vision-mode-nav{visibility:visible}
 .wear-story.is-ready .vision-film{display:block}
 .wear-story.is-ready .hero-copy{opacity:var(--copy-alpha,1)}
 .wear-story.inside-headset .hero-copy{visibility:hidden}
 .wear-story.inside-headset .vision-poster{display:none!important}
}

.vision-chapter{visibility:hidden}.inside-headset .vision-chapter{visibility:visible}
.wear-story[data-chapter=immersive] .vision-vignette{background:linear-gradient(#0009,transparent 38%,transparent 70%,#0004)}
.wear-story[data-chapter=immersive] .vision-chapter{ text-shadow:0 2px 18px #0008}

.wear-story>.vision-sticky>.vision-transport.controls-hidden:not(:focus-within){opacity:0;pointer-events:none}

/* Reveal only the real rendered headset; no differently framed placeholder. */
.wear-story .vision-poster{display:none!important}
.wear-story .vision-hardware{opacity:0;transition:opacity .45s ease}
.wear-story.has-hardware .vision-hardware{opacity:var(--hardware-opacity,1)}
.wear-story .hero-copy{bottom:11%}
@media(max-width:700px){.wear-story .hero-copy{bottom:17%}}
@media(prefers-reduced-motion:reduce){.wear-story .vision-hardware{transition:none}.wear-story.is-ready .hero-copy{bottom:11%}}

.wear-story .vision-story-actions{justify-content:flex-end}