/* Lighting shares the panorama transform; every existing hotspot stays above it. */
#atlasFestival{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#atlasFrame .atlas-hotspot{z-index:2}

/* Fade only the artwork layers: labels and their hit areas remain unchanged. */
#atlasImage,#atlasFestival{mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 80%,transparent 100%)}
#atlasFestivalSky{position:absolute;left:0;top:-42%;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none;opacity:.82;user-select:none}
#atlasStage{background:transparent;overflow:visible}
@media(max-width:600px){#atlasFestivalSky{top:-48%;opacity:.8}}

.festival-floating-lantern{animation:festival-lantern-float var(--float-time,9s) ease-in-out var(--float-delay,0s) infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes festival-lantern-float{from{transform:translate(-2px,15px) rotate(-1.5deg)}to{transform:translate(5px,-28px) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.festival-floating-lantern{animation:none}}

.festival-osmanthus{transform-origin:1980px 88px;animation:osmanthus-breeze 10s ease-in-out infinite alternate}
@keyframes osmanthus-breeze{0%{transform:rotate(-4deg) translate(-8px,3px)}100%{transform:rotate(3deg) translate(0,9px)}}
.festival-petal{opacity:0;animation:osmanthus-drift var(--petal-duration) linear var(--petal-delay) infinite}
@keyframes osmanthus-drift{0%{opacity:0;transform:translate(0,0)}12%{opacity:.85}40%{transform:translate(calc(var(--petal-dx)*.32),calc(var(--petal-dy)*.4))}72%{opacity:.65;transform:translate(calc(var(--petal-dx)*.8),calc(var(--petal-dy)*.7))}100%{opacity:0;transform:translate(var(--petal-dx),var(--petal-dy))}}
#atlas{padding:clamp(16px,3vh,40px) clamp(12px,2.3vw,44px);gap:clamp(10px,2vh,24px);grid-template-rows:auto minmax(0,1fr) auto auto;min-height:0;box-sizing:border-box}
.atlas-heading h1{font-size:clamp(28px,3.8vw,52px)}
#atlasStage{overflow:hidden}
#atlasFestivalSky{top:-42%}
#atlasPlaces{gap:clamp(6px,3vw,60px);flex-wrap:wrap}
#atlasPlaces .atlas-label{min-height:44px;padding:8px clamp(6px,1vw,14px);font-size:clamp(12px,1.5vw,17px)}
@media(max-width:600px){
 #atlas{padding:max(20px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));grid-template-rows:auto auto auto auto;align-content:center;gap:24px;overflow-y:auto}
 #atlasStage{height:auto;aspect-ratio:1.65;min-height:0}
 #atlasPlaces{gap:10px 14px;max-width:420px;width:100%;justify-self:center}
 #atlasPlaces .atlas-label{font-size:14px;min-height:48px}
 .atlas-heading h1{margin:12px 0;font-size:32px}
 #atlasMessage{font-size:11px}
}
@media(max-height:540px) and (min-width:601px){
 #atlas{padding:10px 18px;gap:6px;grid-template-rows:auto minmax(0,1fr) auto}
 .atlas-heading>span,.atlas-heading p,#atlasMessage{display:none}
 .atlas-heading h1{font-size:24px;margin:0}
 #atlasPlaces .atlas-label{min-height:36px;padding:5px 10px;font-size:12px}
 #atlasPlaces em{display:none}
}
@media(prefers-reduced-motion:reduce){.festival-osmanthus,.festival-petal{animation:none}.festival-petal:nth-child(4n){opacity:.65;transform:translate(-100px,140px)}}

/* Full-width panorama with independently fitted sky decorations. */
#atlas{padding:0;gap:0;display:block;overflow:hidden}
#atlasStage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
#atlasFestivalSky{top:var(--atlas-sky-top,0px);left:0;width:100%;height:var(--atlas-sky-height,45%);z-index:1}
.atlas-heading{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));z-index:3;text-align:left;pointer-events:none}
.atlas-heading h1{font-size:clamp(24px,2.6vw,38px);margin:8px 0;padding:0}
.atlas-heading>span{font-size:10px}.atlas-heading p{font-size:11px}
#atlas:not(.inspecting) #atlasPlaces{position:absolute;bottom:max(34px,env(safe-area-inset-bottom));left:0;width:100%;max-width:none;padding:0 16px;box-sizing:border-box;z-index:3;gap:clamp(8px,3vw,60px)}
#atlas:not(.inspecting) #atlasMessage{position:absolute;bottom:10px;left:0;width:100%;z-index:3;text-align:center;pointer-events:none}
#atlasRetry{display:inline-block;width:auto;height:auto;min-height:36px;margin-left:8px;padding:6px 10px;pointer-events:auto}
@media(max-width:600px){
 .atlas-heading{left:max(16px,env(safe-area-inset-left))}
 .atlas-heading h1{font-size:28px}
 #atlas:not(.inspecting) #atlasPlaces{bottom:max(40px,env(safe-area-inset-bottom));gap:6px 14px}
 #atlas:not(.inspecting) #atlasMessage{bottom:max(16px,env(safe-area-inset-bottom))}
}