/* Home hero: animated 3D "tag cloud" sphere made of small illustrated scenes. Loaded on / only. */

.hero-inner.has-sphere{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;justify-items:center}
.hero-copy{min-width:0;width:100%}
@media(min-width:1024px){
  .hero-inner.has-sphere{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:40px;max-width:1300px;padding-top:104px;padding-bottom:60px;align-items:center}
  .has-sphere .hero-title{font-size:clamp(2.1rem,4.4vw,4.2rem);white-space:nowrap}
}

.hero-sphere{position:relative;width:min(88vw,380px);aspect-ratio:1;margin:0 auto;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;
  opacity:0;transition:opacity .9s ease .5s}
.hero-sphere.ready{opacity:1}
.hero-sphere.dragging{cursor:grabbing}
@media(min-width:1024px){.hero-sphere{width:min(100%,540px)}}

.sphere-glow{position:absolute;inset:4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(201,162,74,.26) 0%,rgba(201,162,74,.09) 46%,rgba(201,162,74,0) 70%)}
.sphere-ring{position:absolute;inset:7%;width:86%;height:86%;pointer-events:none;overflow:visible;opacity:.55}
.sphere-ring ellipse{fill:none;stroke:#c9a24a;stroke-width:.5;stroke-dasharray:1.2 3}
.sphere-ring .r1{transform-origin:50% 50%;animation:sphereRing 60s linear infinite}
.sphere-ring .r2{transform-origin:50% 50%;animation:sphereRing 90s linear infinite reverse}
@keyframes sphereRing{to{transform:rotate(360deg)}}

.sphere-core{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:100;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.sphere-core::before{content:"";position:absolute;inset:-26%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,74,.35),rgba(201,162,74,0) 68%);animation:sphereCore 4.5s ease-in-out infinite}
.sphere-core img{position:relative;width:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.65))}
@keyframes sphereCore{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}

.sphere-list{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.sphere-list li{position:absolute;left:50%;top:50%;width:var(--s,80px);height:var(--s,80px);
  margin:calc(var(--s,80px) / -2) 0 0 calc(var(--s,80px) / -2);will-change:transform,opacity}
.sphere-list li:hover{opacity:1 !important;z-index:300 !important}
.sphere-list a{position:relative;display:block;width:100%;height:100%;border-radius:50%;color:#f2ede0;font-size:0;-webkit-tap-highlight-color:transparent}
.sphere-list .disc{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  border:1.5px solid rgba(233,223,196,.55);box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.25)}
.sphere-list svg{display:block;width:100%;height:100%}
.sphere-list .lab{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  font-size:12px;line-height:1;font-weight:600;letter-spacing:.02em;color:#f2ede0;background:rgba(26,22,17,.94);
  border:1px solid rgba(201,162,74,.5);padding:6px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .18s}
.sphere-list a:hover .lab,.sphere-list a:focus-visible .lab{opacity:1}
.sphere-list a:focus-visible{outline:2px solid #c9a24a;outline-offset:3px}

@media(max-width:640px){.sphere-list li[data-m="0"]{display:none}}

.hero-sphere.is-off *{animation-play-state:paused !important}
@media(prefers-reduced-motion:reduce){
  .hero-sphere{transition:none}
}