/* Rendered scenery is independent from the approved character cutouts. */
.hero.art-refreshed #herocast{display:none}
#hero-company{display:none}
.hero.art-refreshed #hero-company{display:block}
#hero-company{position:absolute;z-index:6;bottom:42px;left:3%;width:94%;height:clamp(340px,52svh,560px);max-width:1440px;pointer-events:none}
.hero-company-row{position:absolute;display:flex;justify-content:space-around;align-items:flex-end;width:100%;gap:0}
.hero-company-row.row-0{bottom:38%;height:62%;padding:0 2%}
.hero-company-row.row-1{bottom:0;height:76%;padding:0 4%}
.hero-person{display:block;object-fit:contain;object-position:center bottom;min-width:0;max-width:20%;height:100%;width:20%}
.row-0 .hero-person{max-width:16.66%;width:16.66%}
.hero-person.lion{height:74%;width:25%;max-width:25%}
.hero-person.tiktok{height:63%;width:15%;max-width:15%}
.hero-pet{position:absolute;object-fit:contain;object-position:center bottom;bottom:0;height:21%;width:13%}
.hero-pet.bungle{left:49%;bottom:4%}
.hero-pet.toto{right:2%;height:17%}
@media(min-width:1532px){#hero-company{left:calc(50% - 720px)}}
@media(max-width:700px){
  #hero-company{left:0;width:100%;bottom:38px;height:46%;min-height:330px}
  .hero-company-row.row-0{bottom:49%;height:51%;padding:0}
  .hero-company-row.row-1{height:60%;padding:0}
  .hero-person{max-width:22%;width:22%}
  .hero-pet.bungle{left:46%;height:18%;bottom:1%}
  .hero-pet.toto{right:0;height:14%}
}
.hero-scenery{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-scenery img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block}
.hero.art-refreshed #heroroad,.hero.art-refreshed #herocanopy,
.hero.art-refreshed .hero-clouds,.hero.art-refreshed .cyclone{display:none!important}
.hero.art-refreshed .hero-copy::before,.hero.art-refreshed>.cue::before{display:none!important}
.hero.art-refreshed .arc{opacity:.55}
.hero.art-refreshed .hero-grid{position:relative;z-index:7;align-self:flex-start;margin-top:2vh}
.hero.art-refreshed{align-items:flex-start;min-height:100svh}
@media(min-width:701px){
  .hero.art-refreshed{min-height:max(900px,100svh)}
  .hero.art-refreshed .hero-grid{margin-top:5vh}
}
.hero.art-refreshed .tagline{color:#173d2b;text-shadow:0 1px 0 #fff1c9;font-weight:700}
.hero.art-refreshed .hero-copy{width:min(100%,1000px)}
.hero.art-refreshed h1{font-size:clamp(3.3rem,6.2vw,7.8rem)}
.hero.art-refreshed>.cue{bottom:12px;font-size:.75rem}
.has-rendered-art.folded{min-height:clamp(350px,40vw,640px);display:flex;align-items:flex-start;padding-top:clamp(40px,4.5vw,80px)}
.has-rendered-art .foldscene{opacity:1!important;background:var(--floor,#10251e)}
.scene-stage{position:absolute;left:0;right:0;top:0;height:clamp(350px,40vw,640px);overflow:hidden}
.scene-picture{display:block;width:100%;height:100%}
.scene-backdrop{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--art-position,50% 55%)}
.scene-overlay{position:absolute!important;bottom:0!important;left:0!important;width:100%!important;height:auto!important;max-height:65%;overflow:visible;filter:none!important}
.scene-company{position:absolute;left:4%;right:4%;bottom:0;height:46%;display:flex;align-items:flex-end;justify-content:space-between;gap:1%;pointer-events:none}
.scene-company img{width:auto;max-width:18%;height:var(--pose-height,100%);object-fit:contain;object-position:bottom;filter:drop-shadow(0 4px 2px #17302240)}
.scene-books{position:absolute;bottom:13%;left:28%;width:40%;height:27%;display:flex;align-items:flex-end;justify-content:center;gap:6%}
.scene-books img{height:100%;max-width:27%;width:auto;object-fit:contain;box-shadow:3px 4px 0 #3d250870;transform:rotate(-5deg)}
.scene-books img:nth-child(2){height:110%;transform:rotate(2deg)}
.scene-books img:nth-child(3){transform:rotate(6deg)}
.has-rendered-art .intro{position:relative;z-index:3}
.has-rendered-art:not(.folded)>.wrap>.intro{min-height:clamp(230px,28vw,430px)}
.has-rendered-art:not(.folded)>.wrap>.panel{position:relative}
.scene-map-inset{position:absolute;bottom:4%;left:8%;width:84%;height:auto;max-height:50%;border:6px solid #a27a33;border-radius:3px;box-shadow:0 5px 10px #33251240;background:#f5e5b9}
.scene-map-inset>svg{position:relative!important;width:100%!important;height:auto!important;bottom:auto!important}
.scene-stars{position:absolute;inset:0;overflow:hidden}
.scene-stars i{position:absolute;width:5px;height:5px;background:#fff4b5;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 36%);opacity:.35;animation:sceneryTwinkle 5s ease-in-out var(--delay,0s) infinite;animation-play-state:paused}
.band.inview .scene-stars i{animation-play-state:running}
@keyframes sceneryTwinkle{0%,100%{opacity:.15;scale:.65}50%{opacity:1;scale:1.35}}
@media(max-width:700px){
  .hero.art-refreshed{min-height:max(740px,100svh);padding-top:145px}
  .hero.art-refreshed .hero-grid{margin-top:0}
  .hero.art-refreshed h1{font-size:clamp(2.8rem,10vw,4.5rem)}
  .hero.art-refreshed .tagline{font-size:1.2rem}
  .hero.art-refreshed #herocast{width:120%;left:-10%}
  .hero-scenery img{object-position:center bottom}
  .has-rendered-art.folded{min-height:380px;padding-top:30px}
  .scene-stage{height:380px}
  .scene-backdrop{object-position:var(--art-mobile-position,50% 50%)}
  .has-rendered-art .intro h2{font-size:2.25rem}
  .scene-overlay{max-height:44%;width:170%!important;left:-35%!important}
  .scene-company{height:40%;left:2%;right:2%}
  .scene-company img{max-width:24%;height:var(--pose-height,100%)}
  .scene-books{left:15%;width:70%;height:24%}
  .has-rendered-art:not(.folded)>.wrap>.intro{min-height:290px}
  .scene-map-inset{left:3%;width:94%;bottom:9%;border-width:3px}
}
@media(prefers-reduced-motion:reduce){.scene-stars i{animation:none!important;opacity:.6}}
/* Keep small foreground props in perspective with the new scenery. */
.story.has-rendered-art .scene-overlay{width:100%!important;left:0!important;max-height:none}
.story.has-rendered-art .ozdrive{animation:sceneryCar 6s ease-in-out infinite!important;transform-box:fill-box;transform-origin:center bottom}
@keyframes sceneryCar{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-2px) rotate(.4deg)}}
.pic.approved-character{padding:12px 6px 70px;background:#e3edce}
.pic.approved-character img{object-fit:contain;object-position:center top}
.pic.approved-character figcaption{background:#143d2c;padding:10px 8px 12px}
.charimage.approved-character{background:#e3edce}
.charimage.approved-character img{object-fit:contain;max-height:65svh}
@media(prefers-reduced-motion:reduce){.story.has-rendered-art .ozdrive{animation:none!important}}
.scene-family{position:absolute;left:5%;right:5%;bottom:3%;height:48%;overflow:hidden}
.scene-family>svg{position:relative!important;bottom:auto!important;width:100%;height:100%;display:block}
.book-setting{grid-column:1/-1;margin:6px 0 0;overflow:hidden;border:1px solid #708b6b;border-radius:6px;background:#10251e}
.book-setting .scene-picture{height:auto}
.book-setting .scene-backdrop{width:100%;height:auto;object-fit:contain}
.book-setting figcaption{padding:10px 16px;text-align:center;color:#f3e6bd;font-size:.85rem}
@media(max-width:700px){.scene-family{left:1%;right:1%;height:44%}}
/* Open panels provide their full diagrams and film details below the intro. */
.has-rendered-art:not(.folded) .scene-family,.has-rendered-art:not(.folded):not(#story):not(#screen) .scene-overlay{display:none}

/* One composed shop scene; retire its former independent skyline layer. */
#shop.has-rendered-art > .skyline{display:none!important}
.scene-car{position:absolute!important;right:3%;bottom:2%;left:auto!important;width:min(65%,700px)!important;height:auto!important;max-height:none;overflow:visible;pointer-events:none;z-index:2;filter:none!important}
@media(max-width:700px){.scene-car{right:1%;width:95%!important;bottom:2%}}
/* Keep source pixels sharp: preserve proportions and crop, never stretch. */
.scene-backdrop{image-rendering:auto;filter:none!important;transform:none!important}

/* Align actual covers and the actual Magic Land map with their new furniture. */
#shop .scene-books{left:34%;width:32%;height:27%;bottom:42%;gap:14%}
#shop .scene-books img{transform:none;box-shadow:none;max-width:42%;height:100%}
#shop .scene-books img:nth-child(2){height:100%;transform:none}
#magicland .scene-map-inset{left:32.7%;top:5.4%;bottom:auto;width:34.6%;height:36%;max-height:none;border:0;box-shadow:none;background:transparent;overflow:hidden}
#magicland .scene-map-inset>svg{width:100%!important;height:100%!important;position:relative!important}
/* Weather stays behind the opaque vehicle; only visible stages animate. */
.story.has-rendered-art .scene-overlay{z-index:1}
.story.has-rendered-art .scene-car{z-index:2}
.band.has-rendered-art .scene-stage:not(.oz-motion-on) .scene-overlay *,
.band.has-rendered-art .scene-stage:not(.oz-motion-on) .scene-car *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .band.has-rendered-art .scene-overlay *,
  .band.has-rendered-art .scene-car *{animation:none!important}
}

/* The complete atlas is the header artwork, without cropping countries. */
#places.band.has-inline-map .foldscene{height:auto;aspect-ratio:5/2;background:#f3ca80}
.scene-inline-map{width:100%;height:100%}
.scene-inline-map .oz-map-banner{width:100%;height:100%;overflow:hidden}
.story-vehicle{position:absolute;z-index:3;left:50%;bottom:1%;width:min(92%,940px);transform:translateX(-50%);pointer-events:none}
.story-vehicle-body{position:relative;animation:ozCarSuspension 3.6s ease-in-out infinite;animation-play-state:paused}
.story-vehicle-body>img{display:block;width:100%;height:auto;filter:none!important}
.story-wheel-hubs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.story-hub-spin{animation:ozHubRoll .75s linear infinite;animation-play-state:paused}
.scene-stage.oz-motion-on :is(.story-vehicle-body,.story-hub-spin){animation-play-state:running}
html.oz-paused :is(.story-vehicle-body,.story-hub-spin){animation-play-state:paused!important}
@keyframes ozCarSuspension{0%,100%{transform:translateY(0) rotate(-.35deg)}30%{transform:translateY(-3px) rotate(.3deg)}65%{transform:translateY(1px) rotate(-.1deg)}}
@keyframes ozHubRoll{to{transform:rotate(360deg)}}
@media(max-width:680px){#places.band.has-inline-map .foldscene{aspect-ratio:10/9}.story-vehicle{width:98%;bottom:4%}}
@media(prefers-reduced-motion:reduce){.story-vehicle-body,.story-hub-spin{animation:none!important}}