/* Scenic decoration is independent of UI theme tokens and user font sizing. */
#sceneSettings{max-height:min(620px,72svh);overflow:auto;overscroll-behavior:contain}
#sceneSettings label:not(.check){grid-template-columns:56px minmax(0,1fr)}
#sceneSettings select{min-width:0;width:100%}
#sceneClose{font-size:calc(12px * var(--font-scale));justify-self:end;background:var(--bg-tertiary);color:var(--text-primary)}
@media(max-width:520px){#sceneSettings{position:fixed;inset:auto 16px 72px;width:auto;max-width:none;max-height:calc(100svh - 110px)}}
.hero{--scene-vignette:#031b29b3;min-height:max(840px,calc(750px * var(--font-scale)));height:100svh}
.landscape{background-image:url('assets/summer-day-v3.webp');opacity:0;transition:opacity 1.8s ease;transform:scale(1.025);z-index:-3}.landscape.is-visible{opacity:1}.landscape-next{z-index:-3}
.hero:after{background:linear-gradient(0deg,var(--bg-primary),transparent 25%,transparent 83%,#061a194d),radial-gradient(ellipse at 50% 36%,var(--scene-vignette) 0%,#031e2855 26%,transparent 49%)}
[data-season=spring] .hero{--scene-vignette:#0c233ac4}[data-season=autumn] .hero{--scene-vignette:#1d202dbd}[data-season=winter] .hero{--scene-vignette:#0a233fc9}.hero-copy{padding-top:clamp(180px,23vh,300px)}.hero-description,.philosophy{text-shadow:0 2px 8px #001519,0 1px 18px #001519}
.scene-controls{position:absolute;bottom:45px;left:4%;z-index:8;font-size:calc(12px * var(--font-scale));color:#edf5ef;max-width:calc(100% - 32px)}.scene-controls>button{display:flex;gap:12px;align-items:center;background:#08241edb;border:1px solid #6b918076;color:#edf5ef;border-radius:24px;padding:8px 15px;font-size:calc(11px * var(--font-scale))}
#sceneSettings{position:absolute;bottom:calc(100% + 12px);left:0;width:285px;max-width:calc(100vw - 40px);padding:20px;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:5px;box-shadow:0 15px 50px #0005;display:grid;gap:12px}.scene-title{font-family:'Yu Mincho',serif;font-size:calc(17px * var(--font-scale));letter-spacing:.08em}#sceneSettings label:not(.check){display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px}#sceneSettings p{margin:0;color:var(--text-secondary);font-size:calc(11px * var(--font-scale));line-height:1.8}#sceneStatus{font-size:calc(11px * var(--font-scale));color:var(--success);line-height:1.7}#sceneStatus:empty{display:none}
.living-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.living-scene svg{width:100%;height:100%;overflow:visible}.bird-flight{position:absolute;left:0;top:calc(18% + var(--index)*3%);width:calc(18px - var(--index)*3px);height:18px;opacity:0;animation:bird-cross 48s linear infinite;animation-delay:calc(var(--index)*1.4s + 2s);color:#081e2f;filter:drop-shadow(0 0 1px #c5dce644)}.bird-wing{fill:currentColor;transform-origin:20px 15px;animation:wingbeat .85s ease-in-out infinite alternate}.bird-wing-right{animation-direction:alternate-reverse}
@keyframes bird-cross{0%{transform:translate(-4vw,0) scale(.8);opacity:0}2%{opacity:.75}17%{transform:translate(50vw,-18px) scale(.6);opacity:.65}32%{transform:translate(105vw,12px) scale(.5);opacity:0}100%{transform:translate(105vw,12px);opacity:0}}@keyframes wingbeat{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.butterfly-flight{position:absolute;left:calc(9% + var(--index)*78%);top:57%;width:18px;height:20px;opacity:0;animation:butterfly-wander 35s ease-in-out infinite;animation-delay:calc(var(--index)*12s + 4s);color:#edd4a1;filter:drop-shadow(0 1px 2px #001d1c)}.butterfly-wing{fill:currentColor;stroke:#624b32;stroke-width:.8;transform-origin:15px 17px;animation:flutter .25s ease-in-out infinite alternate}.butterfly-right{animation-delay:-.12s}
@keyframes flutter{from{transform:scaleX(.22)}to{transform:scaleX(1)}}@keyframes butterfly-wander{0%,8%{opacity:0;transform:translate(0,60px) rotate(10deg)}12%{opacity:.85}22%{transform:translate(18px,-35px) rotate(-15deg)}32%{transform:translate(-14px,-85px) rotate(8deg);opacity:.7}40%,100%{transform:translate(20px,-150px) rotate(-8deg);opacity:0}}
[data-season=autumn] #butterflies,[data-season=winter] #butterflies,[data-weather=rain] #butterflies,[data-weather=snow] #butterflies,[data-life=off] #birds,[data-life=off] #butterflies{display:none}.weather-particle{position:absolute;top:-10%;left:var(--x);opacity:0;pointer-events:none}
[data-weather=rain] .weather-particle{width:1px;height:var(--rain-length);background:linear-gradient(transparent,#d6ebf7d9);animation:rain-fall var(--rain-speed) linear infinite;animation-delay:var(--delay)}
[data-weather=rain] .weather-near{width:2px}
[data-weather=snow] .weather-particle{width:var(--flake-size);height:var(--flake-size);border-radius:50%;background:#f1f8f4;animation:snow-fall var(--duration) linear infinite;animation-delay:var(--delay)}
[data-weather=snow] .weather-near{box-shadow:0 0 5px #eaf5fb4d}
[data-weather=rain] .sunlight,[data-weather=snow] .sunlight{opacity:.1;animation:none}
#weatherParticles:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none;background:linear-gradient(0deg,#bfd4e920,transparent 55%,#24394e20)}
[data-weather=rain] #weatherParticles:before{opacity:1}
[data-weather=snow] #weatherParticles:before{opacity:.55}
@keyframes rain-fall{0%{transform:translate(0,0) rotate(10deg);opacity:0}8%,90%{opacity:var(--visibility)}100%{transform:translate(-100px,115vh) rotate(10deg);opacity:0}}
@keyframes snow-fall{0%{transform:translate(0,0);opacity:0}10%{opacity:var(--visibility)}35%{transform:translate(18px,35vh)}65%{transform:translate(-12px,72vh)}90%{opacity:var(--visibility)}100%{transform:translate(22px,115vh);opacity:0}}
.falling-leaf{position:absolute;top:-5%;left:var(--x);width:9px;height:15px;border-radius:80% 5% 80% 5%;background:#c57d36;opacity:0;display:none;animation:leaf-fall 27s ease-in-out infinite;animation-delay:var(--delay)}[data-season=autumn] .falling-leaf{display:block}[data-season=spring] .falling-leaf{display:block;width:6px;height:9px;background:#edd2dc;border-radius:70% 35% 75% 40%}
@keyframes leaf-fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.65}25%{transform:translate(28px,25vh) rotate(120deg)}50%{transform:translate(-16px,60vh) rotate(230deg);opacity:.5}72%,100%{transform:translate(35px,105vh) rotate(370deg);opacity:0}}
.mobile-filmstrip{display:none}[data-style=classic] .scene-controls,[data-style=classic] .living-scene,[data-style=classic] .mobile-filmstrip{display:none}[data-motion=off] .living-scene{display:none}[data-motion=off] .landscape{transition:none}[data-scene-active=off] .hero *,[data-scene-active=off] .hero:before,[data-scene-active=off] .hero:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.living-scene{display:none}.landscape{transition:none}}
@media(max-width:700px){.hero{height:100svh;min-height:max(800px,calc(710px * var(--font-scale)));max-height:none}.hero-copy{padding-top:205px;width:calc(100% - 44px)}.hero .eyebrow{font-size:calc(8px * var(--font-scale))}.hero-description{font-size:calc(11px * var(--font-scale))}.hero .philosophy{font-size:calc(11px * var(--font-scale))}.scene-controls{bottom:27px;left:20px}.scroll-cue{left:auto;right:20px;transform:none}.landscape{background-position:50% 60%}.bird-flight{top:15%}.media-wing{top:58%;height:18%;width:21%}.wing-left{left:-5%}.wing-right{right:-5%}.butterfly-flight{left:calc(4% + var(--index)*90%)}.header{gap:10px}.header nav{gap:22px}}
/* Narrow portrait: a stable low filmstrip replaces the perspective wings. */
@media(max-width:520px),(max-aspect-ratio:9/16){[data-style=cinema] .media-wing{display:none}.mobile-filmstrip{display:flex;position:absolute;left:50%;bottom:110px;transform:translateX(-50%);width:min(74%,320px);height:68px;gap:9px;opacity:.8;pointer-events:none;z-index:2}.mobile-filmstrip .photo{width:33.333%;border:1px solid #9bbab98c;border-radius:2px;box-shadow:0 5px 18px #00141f80}.mobile-filmstrip .photo:nth-child(2){transform:translateY(-7px)}.hero-copy{padding-top:185px}.hero h1{font-size:calc(clamp(33px,9vw,42px) * var(--font-scale))}.hero .primary{font-size:calc(12px * var(--font-scale))}.scene-controls>button{font-size:calc(10px * var(--font-scale))}.display-tools{font-size:calc(9px * var(--font-scale))}.header button{padding:6px}.header nav{font-size:calc(10px * var(--font-scale))}.brand{font-size:calc(21px * var(--font-scale));gap:7px}.landscape{background-position:50% 58%}}
@media(max-width:350px){.header{padding:14px 12px}.brand{font-size:calc(19px * var(--font-scale))}.display-tools{gap:4px}.hero-copy{width:calc(100% - 32px)}.hero .eyebrow{letter-spacing:1.1px}.hero h1{font-size:calc(32px * var(--font-scale))}.scene-controls{left:14px}}
[data-style=classic] .hero{height:auto;min-height:0}

/* Time-of-day uses dedicated summer photographs; UI light/dark remains independent. */
[data-time=morning] .hero{--scene-vignette:#0c233aad}
[data-time=evening] .hero{--scene-vignette:#211027c2}
[data-time=night] .hero{--scene-vignette:#03101f69}
[data-time=night] .sunlight{display:none}
.sunlight{display:none}
[data-time=night] #birds,[data-time=night] #butterflies,[data-time=evening] #butterflies{display:none}
[data-time=night] .media-wing{filter:brightness(.8)}
#sceneSettings{max-height:min(580px,calc(100svh - 140px));overflow-y:auto;overscroll-behavior:contain}
#sceneSettings select{min-width:0;width:100%;font-size:calc(12px * var(--font-scale))}
#sceneSettings select:disabled{opacity:.6;cursor:default}