/* Strictly scoped to the top hero illustration. No product-card overrides. */
#top .hero-art.has-app-pool>:not(.studio-app-pool){display:none}
#top.hero{min-height:0;padding-block:54px;gap:48px}
#top .hero-art.has-app-pool{min-height:440px}
#top .studio-app-pool{position:relative;width:100%;max-width:600px;aspect-ratio:1;isolation:isolate;perspective:1000px}
#top .pool-glow{position:absolute;inset:6% -4% 1%;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#e7d9ff9e 0%,#d9eee5a3 38%,#ffdfbd75 63%,#fff0 74%);filter:blur(12px)}
#top .pool-water{position:absolute;left:1%;top:14%;width:100%;height:76%;border:1px solid #547d7726;border-radius:50%;transform:rotate(-17deg);pointer-events:none}
#top .pool-water-two{inset:22% auto auto 6%;width:88%;height:62%;transform:rotate(19deg);border-color:#ac92582e}
#top .pool-water-three{inset:32% auto auto 12%;width:76%;height:43%;transform:rotate(-13deg);border-color:#735c9b20}
#top .pool-piece{position:absolute;display:block;z-index:2;width:var(--pool-size);left:var(--pool-x);top:var(--pool-y);text-align:center;-webkit-tap-highlight-color:transparent}
#top .pool-bob{display:block;transform-origin:50% 65%;animation:studio-pool-float var(--pool-duration,9s) ease-in-out var(--pool-delay,0s) infinite alternate;will-change:transform}
#top .pool-tile{display:block;aspect-ratio:1;padding:5px;border:1px solid #ffffffbd;border-radius:29%;background:linear-gradient(145deg,#fffffff2,#ffffff80);box-shadow:0 22px 38px #1b344626,0 3px 8px #1b344615}
#top .pool-tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:26%}
#top .pool-tally{--pool-size:39%;--pool-x:5%;--pool-y:13%;--pool-angle:-13deg;--pool-drift-x:22px;--pool-drift-y:-27px;--pool-duration:6.5s;--pool-delay:-3s;z-index:4}
#top .pool-cinema{--pool-size:32%;--pool-x:60%;--pool-y:10%;--pool-angle:10deg;--pool-drift-x:-30px;--pool-drift-y:34px;--pool-duration:5.5s;--pool-delay:-2s;z-index:3}
#top .pool-cinema .pool-tile{border-radius:50%;background:#231e18;padding:4px;box-shadow:0 20px 36px #6446212b}
#top .pool-cinema .pool-tile img{border-radius:50%}
#top .pool-trio{--pool-size:44%;--pool-x:40%;--pool-y:48%;--pool-angle:-7deg;--pool-drift-x:20px;--pool-drift-y:-25px;--pool-duration:7s;--pool-delay:-4s;z-index:5}
#top .pool-spark{position:absolute;color:#c8a55d;font-size:28px;z-index:1;pointer-events:none}
#top .pool-spark-one{left:29%;top:58%;transform:rotate(15deg)}
#top .pool-spark-two{left:84%;top:82%;color:#699c87;font-size:35px}
#top .pool-piece:focus-visible .pool-bob{animation-play-state:paused}
#top .pool-piece:focus-visible{outline:3px solid var(--coral);outline-offset:12px;border-radius:30%}
@keyframes studio-pool-float{from{transform:translate3d(0,0,0) rotate(var(--pool-angle)) rotateY(-6deg)}to{transform:translate3d(var(--pool-drift-x),var(--pool-drift-y),0) rotate(calc(var(--pool-angle) + 12deg)) rotateY(8deg)}}
@media(max-width:950px){#top .studio-app-pool{width:min(100%,540px)}}
@media(max-width:640px){#top .studio-app-pool{width:min(100%,390px)}#top .pool-tile{padding:3px}#top .pool-bob{--pool-drift-x:7px;--pool-drift-y:-10px}#top .pool-spark{font-size:22px}}
@media(prefers-reduced-motion:reduce){#top .pool-bob{animation:none;will-change:auto;transform:rotate(var(--pool-angle))}}
@media(max-width:950px){#top.hero{padding-block:38px;gap:18px}#top .hero-art.has-app-pool{min-height:360px}#top .studio-app-pool{max-width:420px}}
@media(max-width:640px){#top.hero{padding:32px 20px 38px;gap:8px}#top .hero-art.has-app-pool{min-height:300px}#top .studio-app-pool{max-width:320px}#top .pool-cinema .pool-bob{--pool-drift-x:-18px;--pool-drift-y:22px}}
