.magic-home{min-height:max(42rem,calc(100svh - 5rem));overflow:hidden}
.magic-home-content{display:grid;justify-items:center;padding-block:clamp(1.5rem,4vw,3rem)}
.magic-home-content::before,.magic-home-content::after{display:none}
.magic-wheel{position:relative;width:min(43rem,94vw);aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
.magic-wheel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .8rem 1.6rem rgb(73 48 11 / 10%))}
.magic-wheel-orbit,.magic-wheel-diamond,.magic-wheel-sectors{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.magic-wheel-orbit circle,.magic-wheel-orbit>path,.magic-wheel-diamond path{fill:none;stroke:rgb(119 84 23 / 42%);stroke-width:1.4;vector-effect:non-scaling-stroke}
.magic-wheel-orbit circle+circle{stroke-dasharray:2 10;stroke-width:1}
.magic-wheel-orbit>path{stroke-width:1.1}
.magic-wheel-orbit .magic-wheel-stars{fill:rgb(150 105 25 / 76%);stroke:none}
.magic-wheel-diamond path{stroke:rgb(119 84 23 / 35%)}
.magic-wheel-diamond path+path{stroke-dasharray:3 8;opacity:.65}
.magic-sector{color:var(--gold-dark);outline:none;transform-box:fill-box;transform-origin:center;touch-action:manipulation;transition:opacity 260ms ease,filter 260ms ease}
.magic-sector path{fill:rgb(250 246 237 / 36%);stroke:rgb(119 84 23 / 27%);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill 240ms ease,stroke 240ms ease}
.magic-sector-primary path{fill:rgb(163 116 30 / 8%)}
.magic-sector text{fill:currentColor;font:600 17px Cinzel,'Cinzel Fallback',Georgia,serif;letter-spacing:2.2px;text-anchor:middle;text-transform:uppercase;pointer-events:none}
.magic-sector:hover path,.magic-sector:focus-visible path{fill:rgb(177 127 35 / 18%);stroke:rgb(119 84 23 / 76%)}
.magic-sector:hover,.magic-sector:focus-visible{filter:drop-shadow(0 0 .7rem rgb(199 148 50 / 42%))}
.magic-sector:focus-visible path{stroke-width:3}
.magic-wheel-center{position:absolute;top:50%;left:50%;z-index:2;width:42%;pointer-events:none;text-align:center;transform:translate(-50%,-50%)}
.magic-wheel-center h1{margin:0;line-height:1;font-size:clamp(2.4rem,5.2vw,4rem);white-space:nowrap}
.magic-wheel-hint{margin:-.2rem 0 0;color:var(--muted);font:500 .72rem/1.4 Cinzel,'Cinzel Fallback',Georgia,serif;letter-spacing:.13em;text-transform:uppercase}
.magic-wheel.is-activated .magic-wheel-orbit{animation:magic-orbit-turn 720ms cubic-bezier(.22,.75,.16,1) both}
.magic-wheel.is-activated .magic-wheel-diamond{animation:magic-diamond-turn 720ms cubic-bezier(.22,.75,.16,1) both}
.magic-wheel.is-activated .magic-wheel-sectors{animation:magic-sectors-fold 620ms cubic-bezier(.22,.75,.16,1) both}
.magic-wheel.is-activated .magic-sector.is-selected{filter:drop-shadow(0 0 1.15rem rgb(221 169 65 / 88%))}
.magic-wheel.is-activated .magic-sector.is-selected path{fill:rgb(191 139 40 / 30%);stroke:rgb(119 84 23 / 92%)}
@keyframes magic-orbit-turn{to{transform:rotate(210deg)}}
@keyframes magic-diamond-turn{to{transform:rotate(-135deg)}}
@keyframes magic-sectors-fold{45%{opacity:1;transform:scale(.92) rotate(-7deg)}to{opacity:.2;transform:scale(.72) rotate(-18deg)}}
@media(max-width:42rem){
  .magic-home{min-height:calc(100svh - 5rem)}
  .magic-home-content{width:100%;padding-inline:.625rem}
  .magic-wheel{width:min(37rem,calc(100vw - 1.25rem))}
  .magic-sector text{font-size:18px;letter-spacing:1.8px}
  .magic-wheel-center{width:44%}
  .magic-wheel-center h1{font-size:clamp(2rem,10vw,3.7rem)}
  .magic-wheel-hint{margin-top:-.15rem;font-size:clamp(.54rem,2vw,.62rem)}
}
@media(prefers-reduced-motion:reduce){.magic-wheel *{animation:none!important;transition:none!important}.magic-wheel.is-activated .magic-wheel-sectors{opacity:.55}.magic-wheel-hint{display:none}}