/* PLAY V8 — scale contrast, foreground/background layers, spoken manuscript. */
[data-concept=play] #app{overflow:clip}
[data-concept=play] .hero{padding-bottom:0;min-height:0}
[data-concept=play] .hero h1{font-size:clamp(45px,6.8vw,104px)}
[data-concept=play] .hero-art.hero-ensemble{position:relative;height:520px;width:min(1150px,100%);margin:0 auto;transform:none!important}
.art-reveal{pointer-events:none}.scene-art{width:100%;height:100%;object-fit:contain;border-radius:0!important}
.hero-ensemble .art-reveal{position:absolute}.hero-cup{width:49%;height:610px;left:25%;top:0;z-index:1;transform:rotate(-12deg)}.hero-person{width:30%;height:420px;left:3%;top:100px;z-index:3}.hero-walker{width:22%;height:330px;right:2%;top:155px;z-index:3}.hero-drops{width:15%;height:180px;right:17%;top:10px;z-index:0}
[data-concept=play] .story-scene{position:relative;isolation:isolate;width:100%;max-width:none;margin:0;min-height:690px;padding:90px 6vw;display:block;border:0;text-align:left}
.story-bubble{position:relative;z-index:3;background:#fff7cf;border-radius:48% 45% 42% 36% / 22% 26% 26% 22%;padding:65px 65px 70px;width:64%;margin-left:auto;transform-origin:20% 90%;box-shadow:none}
.story-bubble:after{content:'';position:absolute;left:14%;bottom:-37px;width:65px;height:65px;background:inherit;clip-path:polygon(0 0,100% 0,12% 100%)}
[data-concept=play] .story-bubble h2{font-size:clamp(32px,3.8vw,58px);line-height:1.15}
[data-concept=play] .story-bubble .intro-body{font-size:19px;line-height:1.8;margin:26px 0 0;max-width:620px}
.intro-person{position:absolute;left:3%;bottom:0;width:35%;height:460px;z-index:4}.intro-cup{position:absolute;right:-8%;bottom:-60px;width:28%;height:400px;z-index:0;opacity:.35;transform:rotate(17deg)}
[data-concept=play] .project-scene{min-height:810px;padding-top:90px;padding-bottom:160px}
[data-concept=play] .project-bubble{background:#d6eafa;width:64%;margin-left:0;border-radius:45% 36% 42% 32% / 18% 24% 22% 20%;padding:60px}
.project-bubble:after{left:auto;right:12%;transform:scaleX(-1)}
[data-concept=play] .project-bubble h2{font-size:clamp(30px,3.3vw,50px)}
[data-concept=play] .project-bubble p{font-size:18px;line-height:1.85;margin-top:28px}
.project-person{position:absolute;right:1%;bottom:30px;width:32%;height:540px;z-index:4}.project-flower{position:absolute;left:-5%;bottom:-30px;width:20%;height:250px;z-index:0}
[data-concept=play] .field-film{position:relative;z-index:5;padding-top:20px}
[data-concept=play] .illustrated-value{overflow:visible;padding-right:35%;min-height:390px}
[data-concept=play] .illustrated-value h3{font-size:clamp(29px,3.1vw,48px)}
.value-illustration{position:absolute;right:-65px;bottom:0;width:38%;height:300px;z-index:3}
[data-concept=play] .value:nth-child(2) .value-illustration{height:390px;bottom:-20px}
.impact-scene{position:relative;isolation:isolate}.impact-scene .metrics,.impact-scene .period{position:relative;z-index:2}.impact-cup{position:absolute;width:22%;height:370px;left:-9%;top:40px;opacity:.35;z-index:0;transform:rotate(-18deg)}.impact-wind{position:absolute;right:-2%;width:19%;height:180px;top:-30px;opacity:.55;z-index:0}
.directory-scene .directory-heading{position:relative;padding-right:170px;min-height:130px}.directory-person{position:absolute;right:10px;bottom:-25px;width:150px;height:190px}
/* A single reveal per scene; no endless rocking or random drift. */
@keyframes artwork-arrive{from{opacity:0;transform:translateY(65px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes speech-arrive{from{opacity:0;transform:translateY(35px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.art-reveal.is-revealed>.scene-art{animation:artwork-arrive 900ms cubic-bezier(.16,1,.3,1) both}
.story-bubble.is-revealed{animation:speech-arrive 750ms cubic-bezier(.16,1,.3,1) both}
.story-bubble.is-revealed h2{animation:speech-arrive 700ms 120ms cubic-bezier(.16,1,.3,1) both}
.reduced .art-reveal .scene-art,.reduced .story-bubble,.reduced .story-bubble h2{animation:none}
@media(max-width:760px){
[data-concept=play] .hero-art.hero-ensemble{height:330px;width:100%;margin-left:0}.hero-cup{height:360px;width:52%;left:23%}.hero-person{height:230px;width:33%;left:0;top:85px}.hero-walker{height:190px;width:26%;right:0;top:90px}.hero-drops{height:100px;top:5px}
[data-concept=play] .story-scene{padding:40px 20px 250px;min-height:0}.story-bubble{width:100%;padding:35px 27px 40px;border-radius:35px}.story-bubble:after{width:45px;height:45px;bottom:-28px}
[data-concept=play] .story-bubble h2{font-size:29px;line-height:1.2}[data-concept=play] .story-bubble .intro-body{font-size:16px;margin-top:20px}
.intro-person{width:57%;height:250px;bottom:0;left:0}.intro-cup{width:40%;height:250px;right:-8%;bottom:0}
[data-concept=play] .project-scene{padding:35px 20px 280px;min-height:0}[data-concept=play] .project-bubble{width:100%;padding:35px 27px;border-radius:35px}[data-concept=play] .project-bubble h2{font-size:28px}[data-concept=play] .project-bubble p{font-size:16px;margin-top:20px}.project-person{height:290px;width:48%;bottom:0;right:5%}.project-flower{width:30%;height:150px;bottom:25px}
[data-concept=play] .illustrated-value{padding:30px 25px 180px;min-height:370px}.value-illustration{height:200px;width:45%;right:-5px;bottom:-15px}[data-concept=play] .value:nth-child(2) .value-illustration{height:220px;bottom:-25px}
.impact-cup{height:200px;width:32%;left:-15%}.impact-wind{height:100px;width:25%;right:-5%}
.directory-scene .directory-heading{padding-right:105px;min-height:120px}.directory-person{width:100px;height:140px;right:0}
}
@media(prefers-reduced-motion:reduce){.art-reveal.is-revealed>.scene-art,.story-bubble.is-revealed,.story-bubble.is-revealed h2{animation:none}}