/* A small stop-motion stage built from the original artwork, never a substitute model. */
.art-story { position:relative; isolation:isolate; overflow:hidden; width:100%; aspect-ratio:9/16; background:#aaa9a1; border-radius:26px; }
.art-story--landscape { aspect-ratio:3/2; }
.story-art,.story-art>img,.story-cloud,.story-cloud>img { position:absolute; inset:0; width:100%; height:100%; }
.story-art>img,.story-cloud>img { display:block; object-fit:cover; }
.story-cloud,.story-rain,.story-water,.story-warmth { display:none; pointer-events:none; }
/* Feather the original sky into the landscape: no replacement scenery or hard cut edges. */
.story-cloud { mask-image:linear-gradient(#000 35%,transparent 40%); transform-origin:50% 24%; }
.story-rain,.story-water { position:absolute; inset:0; width:100%; height:100%; }
.story-warmth { position:absolute; inset:0; background:linear-gradient(140deg,#e7bc6480,transparent 65%); mix-blend-mode:soft-light; }
.story-lettering { position:absolute; z-index:2; inset:auto 6% 7%; min-height:2.7em; color:#fff1d4; font:900 clamp(34px,4vw,60px)/1.04 ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',sans-serif; letter-spacing:-.045em; text-align:center; filter:drop-shadow(0 9px 7px #263a3a75); }
.story-line { display:none; text-shadow:0 1px 0 #d6bd94,0 2px 0 #cbb18b,0 3px 0 #bea27e,1px 4px 0 #967b60,1px 5px 0 #7b6853; }
.story-line--final { display:block; }
.story-line em { font-style:normal; color:#f1d3a0; }
.art-story--landscape .story-lettering { font-size:clamp(28px,3vw,44px); bottom:8%; }
.story-motion-clock { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* Only a decoded, visible image starts the 4.6-second sequence. No loops or player UI. */
[data-story-started="true"]:not([data-story-state="complete"]) .story-motion-clock { animation:story-clock 4.6s linear both; }
[data-story-started="true"]:not([data-story-state="complete"]) .story-line--final { animation:clay-settle 4.6s steps(38,end) both; }
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-cloud,
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-rain,
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-water,
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-warmth { display:block; }
[data-story-started="true"]:not([data-story-state="complete"]) .story-cloud { animation:cloud-weather 4.6s steps(42,end) both; }
[data-story-started="true"]:not([data-story-state="complete"]) .story-rain { animation:rain-clears 4.6s linear both; }
[data-story-started="true"]:not([data-story-state="complete"]) .story-water { animation:water-settles 4.6s ease-out both; }
[data-story-started="true"]:not([data-story-state="complete"]) .story-warmth { animation:warm-return 4.6s ease-in-out both; }
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-line { display:block; position:absolute; inset:0; }
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-line--one { animation:clay-first 4.6s steps(38,end) both; }
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-line--two { animation:clay-second 4.6s steps(38,end) both; }
[data-story-kind="relief"][data-story-started="true"]:not([data-story-state="complete"]) .story-line--final { animation:clay-last 4.6s steps(38,end) both; }
[data-story-state="paused"] * { animation-play-state:paused!important; }
@keyframes story-clock { from{opacity:0} to{opacity:.001} }
@keyframes cloud-weather { 0%{transform:translate(-.4%,.2%) rotate(-.4deg) scale(1.02)} 35%{transform:translate(.4%,.4%) rotate(.4deg) scale(1.02)} 80%,100%{transform:none} }
@keyframes rain-clears { 0%{opacity:0;transform:translateY(-20px)} 12%,36%{opacity:.7} 67%,100%{opacity:0;transform:translateY(60px)} }
@keyframes water-settles { 0%{opacity:0;transform:translateY(0)} 30%,60%{opacity:.5} 100%{opacity:0;transform:translateY(8px)} }
@keyframes warm-return { 0%,35%{opacity:0} 80%{opacity:.65} 100%{opacity:0} }
@keyframes clay-first { 0%{opacity:0;transform:translateY(18px) rotate(-2deg) scale(.94)} 7%,25%{opacity:1;transform:none} 33%,100%{opacity:0;transform:translateY(-10px) scale(.98)} }
@keyframes clay-second { 0%,31%{opacity:0;transform:translateY(18px) rotate(2deg) scale(.94)} 38%,56%{opacity:1;transform:none} 64%,100%{opacity:0;transform:translateY(-10px) scale(.98)} }
@keyframes clay-last { 0%,62%{opacity:0;transform:translateY(18px) rotate(-2deg) scale(.94)} 72%{opacity:1;transform:translateY(-3px) scale(1.015)} 84%,100%{opacity:1;transform:none} }
@keyframes clay-settle { 0%{transform:translateY(14px) rotate(-2deg) scale(.95)} 24%{transform:translateY(-3px) rotate(1deg) scale(1.02)} 46%,100%{transform:none} }
.hero-diorama { min-width:0; width:100%; max-width:470px; justify-self:end; }
.hero-diorama .scene-art-note { margin:14px 0 0; font-size:12px; text-align:center; }
.cause-art .art-story { border-radius:24px 24px 0 0; }
.cause-hero .cause-art { max-width:470px; justify-self:end; }
.water-detail .art-story,.about .art-story { max-height:720px; }
@media(max-width:900px) { .hero-diorama,.cause-hero .cause-art { max-width:560px; margin-inline:auto; justify-self:center; } }
@media(max-width:700px) { .story-lettering { font-size:clamp(34px,8.8vw,52px); } .art-story--landscape .story-lettering { font-size:30px; } }
@media(prefers-reduced-motion:reduce) { [data-art-story] * { animation:none!important; } .story-line--one,.story-line--two,.story-cloud,.story-rain,.story-water,.story-warmth { display:none!important; } .story-line--final { display:block!important; opacity:1!important; transform:none!important; } }