.hero.layered-village{background:#b6e1f5;aspect-ratio:auto;max-height:none;height:auto}
.village-stage{position:relative;margin:auto;width:100%;aspect-ratio:3/2;background:url('assets/home-village-layer.webp') center/100% 100% no-repeat}
.layered-village .hero-copy{z-index:2;pointer-events:none;top:24%;transform:translateY(calc(-50% + var(--cloud-rise,0px)));opacity:var(--cloud-opacity,1)}
.layered-village h1{margin:0;transform:none;opacity:1}
.layered-village h1 .rainbow-logo{width:420px;margin:14px auto 20px}
.layered-village h1::before{width:660px;height:205px}
.layered-village .mascot-spot{width:20%;height:auto;aspect-ratio:1.1;bottom:18%;padding:0;display:block;z-index:1}
.layered-village .spot-millet{left:30%}
.layered-village .spot-sunny{left:53%;width:22%}
.mascot-spot img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:58% 95%;animation:mascot-breathe 3.1s ease-in-out infinite}
.spot-sunny img{position:relative;top:14%;animation-delay:-1.4s}
.mascot-spot::before{content:'';position:absolute;bottom:0;left:35%;width:42%;height:4%;border-radius:50%;background:#405c3538;filter:blur(4px)}
.mascot-spot span{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);white-space:nowrap}
.mascot-spot:hover span{transform:translateX(-50%) translateY(-3px)}
.mascot-spot span small{display:block;font-size:11px;font-weight:400;line-height:1.5}
.mascot-spot:focus-visible{outline:3px solid #245e53;outline-offset:6px;border-radius:8px}
.mascot-activity{box-sizing:border-box;width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border:1px solid #d5e4dc;border-radius:8px;background:#fff;color:#294c42;text-align:center;box-shadow:0 16px 64px #173f3433}
.mascot-activity::backdrop{background:#163e3559}
.mascot-activity-close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;background:transparent;color:#294c42;font-size:28px;cursor:pointer}
.mascot-activity-image{display:block;width:160px;height:150px;object-fit:contain;margin:0 auto 10px}
.mascot-activity-name{font-size:14px;margin:0 0 8px}
.mascot-activity h2{font-size:23px;line-height:1.5;margin:0 0 12px;letter-spacing:0}
.mascot-activity p{line-height:1.7}
.mascot-activity-go{display:block;padding:12px 16px;margin-top:22px;border-radius:6px;background:#29614f;color:white;text-decoration:none;font-weight:700}
.mascot-activity-go:hover{background:#1d4c3d}
.mascot-activity :focus-visible{outline:3px solid #be691c;outline-offset:3px}
.mascot-spot:hover img,.mascot-spot:focus-visible img{animation:mascot-greet .7s ease-in-out 1}
.friend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#friends .portrait-button img{border-radius:0;object-fit:contain;aspect-ratio:1/1}
#friends .portrait-button{padding-bottom:48px}
#friends .portrait-button:hover img{transform:rotate(-3deg)}
#friends .pink .portrait-button:hover img{transform:rotate(3deg)}
.village-resident{position:absolute;z-index:1;display:block;pointer-events:none}
.resident-art{position:absolute;inset:0;display:block;overflow:hidden;transform-origin:var(--foot-x) var(--foot-y);animation:resident-sway 2.8s ease-in-out infinite;animation-delay:var(--resident-delay)}
.village-resident[data-perch="window"] .resident-art{animation:none}
.has-ground-shadow::before{content:'';position:absolute;left:var(--foot-x);top:var(--foot-y);width:34%;height:5%;transform:translate(-50%,-35%);border-radius:50%;background:#344b3938;filter:blur(1px)}
.village-resident img{position:absolute;max-width:none;height:auto}
.opening-cloud{position:absolute;top:-12%;height:125%;width:115%;object-fit:fill;z-index:4;pointer-events:none;max-width:none}
.opening-cloud.left{left:-48%}.opening-cloud.right{right:-48%;transform:scaleX(-1)}
.village-reveal .opening-cloud.left{animation:cloud-open-left 4.8s cubic-bezier(.45,0,.25,1) forwards}
.village-reveal .opening-cloud.right{animation:cloud-open-right 4.8s cubic-bezier(.45,0,.25,1) forwards}
.village-foliage{position:absolute;bottom:0;width:16%;height:21%;pointer-events:none;background-image:url('assets/home-village-layer.webp');background-size:625% 476.19%;mask-image:linear-gradient(to top,#000 60%,transparent);transform-origin:50% 100%;animation:foliage-sway 7s ease-in-out infinite}
.village-foliage.left{left:0;background-position:left bottom;mask-image:linear-gradient(to right,#000 65%,transparent);}
.village-foliage.right{right:0;background-position:right bottom;animation-delay:-3s;mask-image:linear-gradient(to left,#000 65%,transparent)}
@keyframes resident-sway{0%,65%,100%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(2deg)}}
@keyframes foliage-sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
@keyframes cloud-open-left{0%{opacity:1;transform:translateX(0)}60%{opacity:1}100%{opacity:0;transform:translateX(-65%);visibility:hidden}}
@keyframes cloud-open-right{0%{opacity:1;transform:translateX(0) scaleX(-1)}60%{opacity:1}100%{opacity:0;transform:translateX(65%) scaleX(-1);visibility:hidden}}
@keyframes mascot-breathe{0%,70%,100%{transform:rotate(0)}25%{transform:rotate(-1.6deg) scaleY(1.015)}45%{transform:rotate(1.2deg)}}
@keyframes mascot-greet{0%,100%{transform:rotate(0)}35%{transform:rotate(-3deg) translateY(-5px)}70%{transform:rotate(2deg)}}
@media(max-width:600px){
  .hero.layered-village{padding-top:230px}
  .layered-village .hero-copy{top:calc(115px + 15.667vw)}
  .village-stage{width:100%}
  .layered-village h1 .rainbow-logo{width:290px}
  .layered-village h1::before{width:430px;height:160px}
  .layered-village .mascot-spot{width:26%;bottom:17%;aspect-ratio:1.1}
  .layered-village .spot-millet{left:24%}
  .layered-village .spot-sunny{left:51%;width:28%}
  .mascot-spot span{font-size:10px;padding:2px 8px;bottom:-18px}
  .layered-village .scene-caption{display:none}
  .friend-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.mascot-spot img,.mascot-spot:hover img,.mascot-spot:focus-visible img,.resident-art,.village-foliage{animation:none}.opening-cloud{display:none}#friends .portrait-button:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.layered-village .hero-copy{transform:translateY(-50%);opacity:1}}