/* Marea · scroll-driven footage. Single media element. Local preview only. */
.ocean-journey{position:relative;height:285svh;background:#04161c}
.ocean-journey>.hero{position:sticky;top:var(--ocean-chrome,102px);height:calc(100svh - var(--ocean-chrome,102px));min-height:600px;display:block}

/* one video, one container. Container colour matches the footage so load/seek/error never show a second picture. */
.ocean-journey .real-ocean{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0b3a44;transform-origin:50% 50%;will-change:transform}
.ocean-journey .real-ocean>video{opacity:1;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block;background:#0b3a44;filter:saturate(.85) brightness(.85);pointer-events:none}
.ocean-journey .real-ocean>video[hidden]{display:none}
.ocean-journey .real-ocean.is-failed{background:#0b3a44 url("../assets/marea-scroll-poster.png") 62% 50%/cover no-repeat}
/* defensive: should any legacy media sneak back in, it never renders */
.ocean-journey .hero>svg.scene,.ocean-journey .hero>img.photo,.ocean-journey .real-ocean>img,.ocean-journey .real-ocean>video+video{display:none!important}

.ocean-journey .hero-copy{position:absolute;left:0;bottom:0;padding-top:0!important;padding-bottom:120px!important;will-change:transform,opacity}
.journey-chapter{position:absolute;left:clamp(18px,4vw,48px);bottom:155px;max-width:850px;z-index:3;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.journey-chapter h2{font-size:clamp(2.6rem,7vw,6rem);line-height:1.04;letter-spacing:-.015em}
.journey-chapter h2 em{color:#6fd6c9}
.journey-chapter p{max-width:29em;font-size:clamp(1.05rem,2vw,1.3rem);color:#d3e8e5;margin:22px 0 28px}
.journey-chapter>.eyebrow{font-size:.75rem;letter-spacing:.18em;margin-bottom:20px}
.journey-chapter a{pointer-events:auto}
.journey-chapter[inert] a{pointer-events:none}
.journey-progress{position:absolute;right:clamp(18px,3vw,42px);top:40%;z-index:6;display:flex;align-items:center;gap:12px;color:#eaf6f4;font-size:10px;letter-spacing:.12em;text-transform:uppercase;writing-mode:vertical-rl}
.journey-track{height:100px;width:1px;background:#eaf6f450;position:relative}
.journey-fill{position:absolute;top:0;left:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top;background:#6fd6c9}
.journey-hint{position:absolute;left:clamp(18px,4vw,48px);bottom:45px;z-index:6;display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.1em;color:#d3e8e5;text-transform:uppercase}
.journey-hint span{display:inline-block;width:30px;height:1px;background:#6fd6c9}
.ocean-controls button:focus-visible{outline:3px solid #ff8a6a;outline-offset:3px}
.ocean-journey .photo-cap{bottom:12px;max-width:55%;text-align:right}

/* reduced motion: still opening frame, no tall track */
.ocean-journey.is-reduced{height:auto}
.ocean-journey.is-reduced>.hero{position:relative;top:0;height:auto;min-height:calc(100svh - 102px)}
.ocean-journey.is-reduced .journey-chapter,.ocean-journey.is-reduced .journey-progress,.ocean-journey.is-reduced .journey-hint{display:none}

@media(max-width:600px){
 .ocean-journey{height:255svh}
 .ocean-journey>.hero{min-height:650px}
 .ocean-journey .hero-copy{padding-bottom:135px!important}
 .journey-chapter{bottom:165px;right:42px}
 .journey-chapter h2{font-size:clamp(2.5rem,10vw,4.5rem)}
 .journey-chapter p{font-size:1rem;line-height:1.65}
 .journey-chapter>.eyebrow{font-size:.68rem}
 .journey-progress{right:14px;top:32%;font-size:9px}
 .journey-track{height:65px}
 .journey-hint{bottom:73px;font-size:10px;max-width:80%}
 .ocean-journey .photo-cap{max-width:90%;bottom:12px;font-size:9px}
 .ocean-journey .ocean-controls>span{max-width:46%;line-height:1.5}
 .ocean-journey .real-ocean>video{opacity:1;object-position:60% 50%}
 .ocean-journey.is-reduced>.hero{min-height:730px}
}
/* Marea v2 refinements (append-only) */
#experiences{scroll-margin-top:var(--ocean-chrome,102px)}
.skip-film{position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:calc(8px + env(safe-area-inset-top,0px));z-index:1000;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--foam);color:var(--ink);border:2px solid var(--ink);border-radius:4px;font-weight:600;font-size:15px;line-height:1;text-decoration:none;transform:translateY(-300%)}
.skip-film:focus,.skip-film:focus-visible{transform:none}
.ocean-controls button:focus-visible{outline:2px solid var(--foam);outline-offset:3px}
@media (max-width:700px) and (max-height:700px){
 .ocean-journey>.hero{min-height:0!important}
 .ocean-journey>.hero .hero-copy{padding-bottom:104px!important}
 .ocean-journey>.hero h1{font-size:clamp(2rem,10.5vw,2.6rem)!important;line-height:1.02}
 .ocean-journey>.hero .journey-chapter{bottom:128px!important}
 .ocean-journey>.hero .journey-hint{bottom:60px!important}
}
@media (prefers-reduced-motion:reduce){#ocean-play{display:none!important}}
.ocean-journey.is-reduced #ocean-play{display:none!important}
.ocean-journey.is-reduced .ocean-controls>span{max-width:100%}
@media (max-height:760px){.ocean-journey.is-reduced>.hero{min-height:0!important}}
/* Claude follow-up: reserve control space on short phones. */
@media(max-width:700px) and (max-height:700px){
 .ocean-journey>.hero .hero-copy{padding-top:72px!important;padding-bottom:96px!important}
 .ocean-journey>.hero .eyebrow{margin-bottom:10px!important}
 .ocean-journey>.hero h1{font-size:2rem!important}
 .ocean-journey>.hero .hero-copy>p:not(.eyebrow){font-size:15px!important;line-height:1.45!important;margin:14px 0 16px!important}
 .ocean-journey>.hero .hero-copy .btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 12px;font-size:13px;line-height:1.15;text-align:center;white-space:normal;justify-content:center}
 .ocean-journey>.hero .journey-chapter{bottom:104px!important}
 .ocean-journey>.hero .journey-chapter h2{font-size:2.3rem}
 .ocean-journey>.hero .journey-chapter p{font-size:1rem}
}
/* Claude follow-up: reduced hero uses normal document flow. */
.ocean-journey.is-reduced{height:auto!important;min-height:0!important}
.ocean-journey.is-reduced>.hero{position:relative!important;top:auto!important;height:auto!important;max-height:none!important;min-height:min(730px,calc(100svh - var(--ocean-chrome,102px)))!important}
.ocean-journey.is-reduced>.hero .hero-copy{position:relative!important;inset:auto!important;transform:none!important;z-index:2;padding-top:90px!important;padding-bottom:96px!important;padding-inline:clamp(18px,4vw,48px)}
.ocean-journey.is-reduced .journey-chapter,.ocean-journey.is-reduced .journey-hint,.ocean-journey.is-reduced .journey-progress{display:none!important}

/* A visitor can explicitly enable this page's scroll motion while keeping OS Reduce Motion on. */
.ocean-controls button[hidden]{display:none!important}
.ocean-journey>.hero.motion-opted-in #ocean-play{display:inline-flex!important}

/* Threshold-style image view must override the legacy blanket image suppression. */
.ocean-journey .real-ocean>img.ocean-frame-image{display:block!important}
.ocean-journey .real-ocean:has(>img.ocean-frame-image)>video{visibility:hidden}