/* V21: integrate the approved anime artwork; V20 weather / model untouched. */
.hero{grid-template-columns:minmax(0,.914fr) minmax(0,1.086fr);min-height:640px}
.hero-type{isolation:isolate;background:#124533;padding:37px 7.4% 25px 9.3%}
.hero-type::before{content:"";position:absolute;inset:-18px -20px;z-index:-2;background:url('./hero-foliage-v21.webp') right center / auto 118% no-repeat;opacity:.72;transform-origin:80% 10%;animation:anime-canopy 21s ease-in-out infinite alternate;pointer-events:none}
.hero-type::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(16,61,45,.79),rgba(16,61,45,.43) 62%,rgba(16,61,45,.17)),linear-gradient(0deg,rgba(16,61,45,.54),transparent 36%)}
.hero h1{margin:24px 0 19px}
.hero-giant{font-size:clamp(80px,9.9vw,157px);letter-spacing:-.086em;line-height:.91}
.hero-sub{font-size:clamp(21px,2.15vw,34px);line-height:1.65;margin-top:28px;letter-spacing:-.035em}
.hero-lead{color:#d0ded0;line-height:1.95}
.hero-baseline{margin-top:24px;padding-top:20px}
.hero-visual{min-height:640px;background:#72abc1}
.hero-image{object-position:50% 50%;animation:anime-breath 22s ease-in-out infinite alternate;transform-origin:58% 50%}
/* Keep the illustration vivid rather than tinting the whole sky / court dark. */
.hero-gradient{background:linear-gradient(0deg,rgba(7,35,28,.58),rgba(7,35,28,.06) 25%,transparent 49%)}
.hero-visual-top{top:27px;inset-inline-start:12.6%;inset-inline-end:3.5%}
.outline-pill{min-width:146px;text-align:center;background:rgba(21,61,51,.46);backdrop-filter:blur(8px)}
.motion-toggle{width:38px;height:38px;background:rgba(21,61,51,.45);backdrop-filter:blur(6px)}
.hero-image-caption{bottom:29px;inset-inline:31px;padding-top:16px;gap:17px;z-index:2;text-shadow:0 1px 8px rgba(3,25,22,.7)}
.hero-image-caption p{font-size:13px;line-height:1.85;max-width:78%}
@keyframes anime-breath{from{transform:scale(1)}to{transform:scale(1.027)}}
@keyframes anime-canopy{from{transform:translateX(-3px) scale(1.02);opacity:.69}to{transform:translateX(4px) scale(1.08);opacity:.85}}
@media(min-width:1600px){.hero{min-height:730px}.hero-visual{min-height:730px}.hero-type{padding-inline:9%;padding-top:39px}.hero-giant{font-size:157px}.hero h1{margin-top:33px}.hero-sub{font-size:33px}}
@media(max-width:1190px){.hero,.hero-visual{min-height:610px}.hero-type{padding-inline:7%;padding-top:31px}.hero-giant{font-size:10vw}.hero h1{margin-top:21px}.hero-sub{font-size:24px}.hero-baseline{padding-top:17px}.hero-image-caption{inset-inline:25px}}
@media(max-width:930px) and (min-width:681px){.hero{grid-template-columns:1fr 1.04fr}.hero,.hero-visual{min-height:610px}.hero-type{padding-inline:7%;padding-top:30px}.hero-giant{font-size:10vw}.hero-sub{font-size:23px}.hero-visual-top{inset-inline:19px;top:22px}.hero-image-caption{inset-inline:21px;bottom:25px}.hero-image-caption p{font-size:11px}}
@media(max-width:680px){
 .hero{display:flex;flex-direction:column;min-height:0}
 .hero-type{padding:29px 6% 22px}
 .hero-type::before{background-size:auto 130%;background-position:right center;opacity:.6}
 .hero-type::after{background:linear-gradient(90deg,rgba(16,61,45,.81),rgba(16,61,45,.51))}
 .hero h1{margin:5px 0 14px}
 .hero-giant{font-size:clamp(83px,22.5vw,133px);line-height:.89}
 .hero-sub{font-size:24px;line-height:1.65;margin-top:21px}
 .hero-lead{font-size:12px;line-height:1.95}
 .hero-actions{margin-top:23px}
 .hero-baseline{margin-top:24px;padding-top:14px}
 .hero-visual{min-height:0;height:auto;aspect-ratio:862/705}
 .hero-image{object-position:50% 50%;animation:anime-breath 22s ease-in-out infinite alternate}
 .hero-visual-top{inset-inline:20px;top:17px}
 .hero-image-caption{inset-inline:21px;bottom:16px;padding-top:11px;gap:11px}
 .hero-image-caption p{font-size:10px;line-height:1.75;max-width:78%}
 .motion-toggle{width:33px;height:33px}
 .outline-pill{font-size:8px;padding:6px 10px;min-width:113px}
 .caption-number{font-size:9px}.caption-arrow{font-size:24px}
 [dir=rtl] .hero-sub{font-size:25px}
}
@media(max-width:360px){.hero-type{padding-inline:5%}.hero-giant{font-size:79px}.hero-sub{font-size:21px}.hero-image-caption{inset-inline:16px;bottom:14px}.hero-image-caption p{font-size:9px}.hero-visual-top{inset-inline:16px;top:14px}}
@media(prefers-reduced-motion:reduce){.hero-image,.hero-type::before{animation:none!important;transform:none!important}}
@media print{.hero-type{background:white;color:black}.hero-type::before,.hero-type::after{display:none}.hero-visual{display:none}}