/* The square source stays legible; the existing forest fills every screen width. */
.video-garden{height:100svh;min-height:640px;padding:84px 0 110px;background:#102e29}
.video-garden:before{display:block;position:absolute;inset:-24px;z-index:-1;background:linear-gradient(#071c19a8,#102e2970),url('assets/forest-surround.png') center/cover no-repeat;filter:blur(14px);pointer-events:none}
.video-garden:after{height:15%;background:linear-gradient(transparent,#102e29);pointer-events:none}
.hero-artwork{position:relative;width:min(960px,calc(100svh - 194px),90vw);flex:none}
.album-stage{position:relative;width:100%;aspect-ratio:1;isolation:isolate;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 94%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 94%,transparent);-webkit-mask-composite:source-in}
.album-still,.album-video,.intro-veil{display:block;width:100%;height:100%;object-fit:contain}
.album-video,.intro-veil{position:absolute;inset:0;pointer-events:none}
.album-video{opacity:0;transition:opacity .75s ease}
.intro-veil{background:#102e29;opacity:0;transition:opacity .5s ease}
.intro-loading .intro-veil{opacity:1}
.intro-playing .album-video{opacity:1;transition:none}
.intro-controls{position:absolute;bottom:12px;right:18px;z-index:8;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font:12px/1.4 system-ui,sans-serif}
.intro-controls[hidden],.intro-controls button[hidden]{display:none}
.intro-controls button{color:#f0dfb5;background:#102e29e8;border:1px solid #d8b96f88;border-radius:20px;padding:8px 12px;min-height:44px;cursor:pointer;font:inherit}
.intro-controls button:focus-visible{outline:2px solid #e5c67f;outline-offset:3px}
.intro-status{color:#f0dfb5}.intro-status:empty{display:none}
.video-garden .scroll-cue{bottom:72px;z-index:3;transition:opacity .75s}
.intro-playing .scroll-cue{opacity:0;pointer-events:none}
.intro-playing.intro-cue-visible .scroll-cue{opacity:1;pointer-events:auto}
@media(max-width:700px){.video-garden{height:auto;min-height:0;padding:88px 0 120px}.hero-artwork{width:min(960px,100vw)}.intro-controls{font-size:11px;bottom:18px}.video-garden .scroll-cue{bottom:72px}}
@media(prefers-reduced-motion:reduce){.album-video,.intro-veil,.video-garden .scroll-cue{transition:none}.intro-playing .scroll-cue{opacity:1;pointer-events:auto}}

.topnav{transition:opacity .75s ease}
body:has(.intro-playing) .topnav{opacity:.25}
body:has(.intro-playing) .topnav:hover,body:has(.intro-playing) .topnav:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.topnav{transition:none}}

/* Keep the discovery cue below the artwork, on the quiet garden background. */
.video-garden{display:flex;flex-direction:column;justify-content:center;height:auto;min-height:0;padding-bottom:24px;gap:16px}
.video-garden .album-stage{flex:none}
.video-garden .scroll-cue{position:relative;left:auto;bottom:auto;transform:none;flex:none;margin:0}
@media(max-width:700px){.video-garden{min-height:0}}

/* Reuse the original layered fern entrance above the supplied animated cover. */
.fern-entrance{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 92%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 92%,transparent);-webkit-mask-composite:source-in}
.fern-playing .fern-entrance{display:block;animation:fern-clear 6s linear both}
.forest-depth{--duration:5.8s;--delay:0s}
.depth-far{filter:brightness(.68) saturate(.75) blur(.35px);--delay:.15s}
.depth-middle{filter:brightness(.4) saturate(.65) blur(1px);--duration:4.8s;--delay:.1s}
.depth-canopy{filter:brightness(.25) saturate(.55) blur(1.8px);--duration:4s}
.depth-near{filter:brightness(.13) saturate(.5) blur(3px);--duration:3.3s}
.forest-drift{transform-origin:50% 55%;animation:fern-pass var(--duration) cubic-bezier(.55,.08,.65,1) var(--delay) both}
@keyframes fern-pass{from{transform:translate(0,0) rotate(0) scale(1)}to{transform:translate(var(--drift-x),var(--drift-y)) rotate(var(--turn)) scale(1.06)}}
@keyframes fern-clear{0%,75%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.fern-entrance{display:none!important}}

/* Phones show only the animated album cover, without foreground ferns. */
@media(max-width:700px){.fern-entrance{display:none!important}}

/* Safari starts on a still cover; tapped Play/Replay retains the full intro. */
.safari-still .album-stage.image-drift{animation:none;transform:none}