/* Sator Academy — fixed amulet navigation */
arcane-menu {
  --amber:#e6b76f;
  --amber-hot:#ffd995;
  --arcane-height:302px;
  --arcane-mobile-height:180px;
  --amulet-scale:1;
  --smoke-opacity:1;
  --glow-strength:1;
  --glow-low:.45;
  --glow-high:.8;
  --pointer-left:50%;
  --pointer-top:24px;
  --pointer-scale:.86;
  --star-x:0px;
  --star-y:0px;
  --star-rotate:0deg;
  --halo-scale:1;
  --ring-speed-one:31s;
  --ring-speed-two:43s;
  --ring-speed-three:68s;
  position:fixed;
  inset:0 0 auto;
  z-index:65;
  display:block;
  height:var(--arcane-height);
  pointer-events:none;
}

.arcane-header {
  position:absolute;
  inset:0;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  pointer-events:none;
}

.arcane-void {
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 31% 40% at 50% 0%,rgba(77,49,23,.22),transparent 76%),
    linear-gradient(to bottom,#000 0%,rgba(0,0,0,.99) 20%,rgba(0,0,0,.92) 39%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.22) 82%,transparent 100%);
}

.arcane-void::after {
  position:absolute;
  inset:0;
  content:"";
  opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);
  mask-image:linear-gradient(to bottom,#000,transparent 88%);
  mix-blend-mode:soft-light;
}

.arcane-smoke,.arcane-sparks { position:absolute; inset:0; display:block; width:100%; height:100%; }
.arcane-smoke { z-index:1; opacity:1; }
.arcane-sparks { z-index:5; filter:saturate(1.05); }

.arcane-pointer-light {
  position:absolute;
  z-index:2;
  left:var(--pointer-left);
  top:var(--pointer-top);
  width:240px;
  height:240px;
  border-radius:50%;
  opacity:.2;
  transform:translate(-50%,-50%) scale(var(--pointer-scale));
  background:radial-gradient(circle,rgba(255,199,112,.16),rgba(210,131,44,.035) 38%,transparent 72%);
  filter:blur(10px);
  mix-blend-mode:screen;
}

.amulet-stage {
  --amulet-size:clamp(300px,27vw,390px);
  position:absolute;
  z-index:4;
  top:0;
  left:50%;
  width:var(--amulet-size);
  aspect-ratio:1;
  transform:translateX(-50%) scale(var(--amulet-scale));
  transform-origin:50% 0;
  pointer-events:none;
}

.amulet-image {
  position:absolute;
  z-index:3;
  top:-50%;
  left:50%;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:translate3d(calc(-50% + var(--star-x)),var(--star-y),0) rotate(var(--star-rotate));
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.9)) drop-shadow(0 0 11px rgba(220,142,50,.28)) drop-shadow(0 0 26px rgba(171,93,21,.16));
  will-change:transform;
}

.amulet-halo {
  position:absolute;
  z-index:1;
  top:0;
  left:50%;
  width:77%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(var(--halo-scale));
  background:
    radial-gradient(circle,transparent 48%,color-mix(in srgb,var(--amber-hot) 18%,transparent) 52%,color-mix(in srgb,var(--amber) 8%,transparent) 58%,transparent 69%),
    conic-gradient(from 24deg,transparent,color-mix(in srgb,var(--amber-hot) 22%,transparent),transparent 16%,transparent 34%,color-mix(in srgb,var(--amber) 16%,transparent),transparent 48%,transparent 70%,color-mix(in srgb,var(--amber-hot) 18%,transparent),transparent 87%);
  filter:blur(5px);
  mix-blend-mode:screen;
  animation:arcane-halo-breathe 4.8s ease-in-out infinite;
}

.energy-ring {
  position:absolute;
  z-index:2;
  top:0;
  left:50%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  filter:brightness(var(--glow-strength)) drop-shadow(0 0 5px color-mix(in srgb,var(--amber-hot) 66%,transparent)) drop-shadow(0 0 14px color-mix(in srgb,var(--amber) 34%,transparent));
  mix-blend-mode:screen;
}

.energy-ring::before,.energy-ring::after { position:absolute; inset:0; border-radius:inherit; content:""; }
.energy-ring::before {
  padding:1.2px;
  background:conic-gradient(from 0deg,transparent 0 6%,var(--amber-hot) 7% 10%,transparent 11% 25%,var(--amber) 26% 34%,transparent 35% 52%,var(--amber-hot) 53% 61%,transparent 62% 81%,var(--amber-hot) 82% 90%,transparent 91%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.energy-ring::after { inset:7%; border:1px solid color-mix(in srgb,var(--amber) 16%,transparent); }
.energy-ring--one { width:66%; animation:arcane-ring-turn var(--ring-speed-one) linear infinite; }
.energy-ring--two { width:81%; opacity:.42; animation:arcane-ring-turn-reverse var(--ring-speed-two) linear infinite; }
.energy-ring--three { width:91%; opacity:.16; animation:arcane-ring-turn var(--ring-speed-three) linear infinite; }

.arcane-nav {
  position:absolute;
  z-index:8;
  inset:27px 0 auto;
  display:flex;
  justify-content:space-between;
  width:min(1160px,calc(100% - 48px));
  margin:0 auto;
  pointer-events:none;
}

.menu-cluster {
  display:grid;
  grid-template-columns:repeat(3,50px);
  gap:14px 18px;
  width:min(31vw,300px);
  pointer-events:auto;
}
.menu-cluster--left { justify-content:end; }
.menu-cluster--right { justify-content:start; }
.rune-slot { display:block; width:50px; height:50px; pointer-events:none; }

.rune-button {
  --magnet-x:0px;
  --magnet-y:0px;
  position:relative;
  display:grid;
  width:50px;
  height:50px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:50%;
  outline:none;
  color:#b99a73;
  cursor:pointer;
  text-decoration:none;
  background:rgba(3,3,4,.5);
  box-shadow:inset 0 0 0 1px rgba(202,157,99,.4),inset 0 0 0 5px rgba(0,0,0,.52),inset 0 0 0 6px rgba(156,111,62,.14),0 5px 20px rgba(0,0,0,.62);
  transform:translate3d(var(--magnet-x),var(--magnet-y),0);
  transition:color .28s ease,background .28s ease,box-shadow .32s ease,transform .18s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.rune-button::before,.rune-button::after {
  position:absolute;
  border-radius:50%;
  content:"";
  pointer-events:none;
  transition:opacity .28s ease,transform .35s ease;
}
.rune-button::before {
  inset:-11px;
  opacity:0;
  transform:scale(.7);
  background:radial-gradient(circle,color-mix(in srgb,var(--amber-hot) 24%,transparent),color-mix(in srgb,var(--amber) 8%,transparent) 43%,transparent 72%);
  filter:blur(3px);
}
.rune-button::after { inset:7px; opacity:0; background:radial-gradient(circle,color-mix(in srgb,var(--amber-hot) 23%,transparent),transparent 72%); filter:blur(4px); }

.rune-button:hover,.rune-button:focus-visible,.rune-button.is-active,.rune-button.is-current {
  color:var(--amber-hot);
  background:rgba(28,18,8,.76);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber-hot) 82%,transparent),inset 0 0 0 5px rgba(0,0,0,.44),inset 0 0 18px color-mix(in srgb,var(--amber) 22%,transparent),0 7px 24px rgba(0,0,0,.72),0 0 24px color-mix(in srgb,var(--amber) 24%,transparent);
}
.rune-button:hover::before,.rune-button:focus-visible::before,.rune-button.is-active::before,.rune-button.is-current::before,.rune-button:hover::after,.rune-button:focus-visible::after,.rune-button.is-active::after,.rune-button.is-current::after { opacity:1; transform:scale(1); }
.rune-button.is-active::before,.rune-button.is-current::before { animation:arcane-active-glow 1.65s ease-in-out infinite; }
.rune-button:active { transform:translate3d(var(--magnet-x),var(--magnet-y),0) scale(.91); transition-duration:.08s; }

.rune-icon { position:relative; z-index:2; display:grid; width:20px; height:20px; place-items:center; transition:filter .28s ease,transform .28s ease; }
.rune-icon svg { display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.55; }
.rune-button:hover .rune-icon,.rune-button:focus-visible .rune-icon,.rune-button.is-active .rune-icon,.rune-button.is-current .rune-icon { filter:drop-shadow(0 0 7px color-mix(in srgb,var(--amber-hot) 82%,transparent)); transform:scale(1.08); }

.rune-label {
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  z-index:4;
  padding:5px 8px 4px;
  border:1px solid rgba(180,134,78,.2);
  color:rgba(236,214,183,.9);
  font:700 8px/1 Inter,"Segoe UI",sans-serif;
  letter-spacing:.15em;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,-4px);
  background:rgba(4,4,5,.9);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
  text-transform:uppercase;
}
.rune-button:hover .rune-label,.rune-button:focus-visible .rune-label { opacity:1; transform:translate(-50%,0); }
.rune-button .arcane-badge { position:absolute; z-index:6; top:-6px; right:-7px; min-width:19px; height:19px; padding:0 5px; border:1px solid #17100b; background:var(--amber-hot); color:#1b1008; font-size:9px; box-shadow:0 0 13px color-mix(in srgb,var(--amber) 44%,transparent); }

.arcane-status {
  position:absolute;
  z-index:9;
  top:184px;
  left:50%;
  min-width:170px;
  padding:6px 12px;
  border:1px solid transparent;
  color:transparent;
  font:700 8px/1 Inter,"Segoe UI",sans-serif;
  letter-spacing:.22em;
  text-align:center;
  text-transform:uppercase;
  transform:translate(-50%,-4px);
  transition:all .3s ease;
}
.arcane-status.is-visible { border-color:rgba(193,144,84,.18); color:rgba(229,202,164,.78); transform:translate(-50%,0); background:rgba(4,4,5,.44); }
.arcane-hint { position:absolute; z-index:7; top:216px; left:50%; margin:0; color:rgba(186,164,136,.34); font:700 7px/1 Inter,"Segoe UI",sans-serif; letter-spacing:.25em; text-transform:uppercase; transform:translateX(-50%); transition:opacity .5s ease; }
.arcane-header.has-interacted .arcane-hint { opacity:0; }

@keyframes arcane-ring-turn { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes arcane-ring-turn-reverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes arcane-halo-breathe { 0%,100% { opacity:var(--glow-low); filter:blur(6px) brightness(var(--glow-strength)); } 50% { opacity:var(--glow-high); filter:blur(4px) brightness(var(--glow-strength)); } }
@keyframes arcane-active-glow { 0%,100% { opacity:.48; transform:scale(.9); filter:blur(4px); } 50% { opacity:1; transform:scale(1.08); filter:blur(3px); } }

arcane-menu.arcane-motion-off .energy-ring,arcane-menu.arcane-motion-off .amulet-halo,arcane-menu.arcane-motion-off .rune-button::before { animation:none!important; }
arcane-menu.arcane-motion-off .rune-button,arcane-menu.arcane-motion-off .arcane-status { transition-duration:.01ms!important; }

arcane-menu[data-preview="true"] { position:relative; inset:auto; z-index:1; height:min(var(--arcane-height),310px); min-height:250px; }
arcane-menu[data-preview="true"] .arcane-header { border-radius:20px; }
arcane-menu[data-preview="true"] .arcane-nav { width:calc(100% - 28px); }
arcane-menu[data-preview="true"] .menu-cluster { width:min(34%,260px); }

@media (max-width:940px) {
  arcane-menu { height:min(var(--arcane-height),264px); }
  .amulet-stage { --amulet-size:clamp(260px,39vw,320px); }
  .arcane-nav { width:calc(100% - 28px); }
  .menu-cluster { grid-template-columns:repeat(3,44px); gap:12px 9px; width:34vw; }
  .rune-button,.rune-slot { width:44px; height:44px; }
  .rune-icon { width:18px; height:18px; }
  .arcane-status { top:164px; }
  .arcane-hint { top:194px; }
}

@media (max-width:660px) {
  arcane-menu { height:var(--arcane-mobile-height); }
  .arcane-void { background:radial-gradient(ellipse 42% 42% at 50% 0%,rgba(77,49,23,.2),transparent 76%),linear-gradient(to bottom,#000 0%,rgba(0,0,0,.98) 26%,rgba(0,0,0,.78) 51%,rgba(0,0,0,.34) 76%,transparent 100%); }
  .amulet-stage { --amulet-size:140px; }
  .arcane-pointer-light { width:160px; height:160px; }
  .arcane-nav { top:17px; left:0; width:100%; padding:0 10px; }
  .menu-cluster { grid-template-columns:repeat(3,34px); gap:8px 4px; width:calc(50% - 50px); }
  .rune-button,.rune-slot { width:34px; height:34px; }
  .rune-icon { width:14px; height:14px; }
  .rune-label,.arcane-status,.arcane-hint { display:none; }
  .rune-button .arcane-badge { top:-7px; right:-7px; min-width:17px; height:17px; padding:0 4px; font-size:8px; }
  arcane-menu[data-preview="true"] { height:var(--arcane-mobile-height); min-height:var(--arcane-mobile-height); }
}

@media (max-width:390px) {
  .amulet-stage { --amulet-size:132px; }
  .arcane-nav { padding-inline:7px; }
  .menu-cluster { grid-template-columns:repeat(3,32px); gap:8px 3px; width:calc(50% - 46px); }
  .rune-button,.rune-slot { width:32px; height:32px; }
  .rune-icon { width:13px; height:13px; }
}

@media (prefers-reduced-motion:reduce) {
  .energy-ring,.amulet-halo,.rune-button::before { animation:none!important; }
  .rune-button,.arcane-status { transition-duration:.01ms!important; }
}