/* Eons Wrath — final polish pass. Loaded last. */

/* ---------- Navigation always stays readable ---------- */
.back-rune{
  z-index:2147483000!important;
  isolation:isolate;
  color:#f6ead1!important;
  background:rgba(5,6,5,.94)!important;
  border:1px solid color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.16))!important;
  box-shadow:0 10px 30px rgba(0,0,0,.62),0 0 0 4px rgba(5,6,5,.56)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:auto!important;
}
.back-rune::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.055);border-radius:inherit;pointer-events:none}
.back-rune:focus-visible{outline:2px solid #f0dfbd;outline-offset:4px}

/* ---------- Home: keep the entrance grand, but less oversized ---------- */
.section-home .world-hero{min-height:62vh;padding:68px 0 36px}
.section-home .world-hero h1{font-size:clamp(46px,6.2vw,82px)}
.section-home .world-hero .tagline{font-size:clamp(19px,2vw,26px);max-width:650px}
.section-home .hero-rule{margin-top:19px}
.section-home .hero-art{height:48vh;top:7vh;width:min(44vw,590px)}
.section-home .world-prologue{margin:4px 0 54px;padding:28px 0}
.section-home .world-prologue h2{font-size:clamp(27px,3.25vw,43px)}

/* ================================================================
   MAGIC PORTAL — a single believable blue flame
   ================================================================ */
.portal-center{overflow:visible!important}
.blue-flame{
  position:relative!important;
  width:110px!important;
  height:154px!important;
  transform-origin:50% 100%!important;
  transform:translateY(-5px)!important;
  animation:flameBodyV7 2.15s cubic-bezier(.45,0,.55,1) infinite!important;
  filter:drop-shadow(0 0 11px rgba(101,216,245,.28)) drop-shadow(0 0 27px rgba(42,122,177,.18))!important;
  will-change:transform;
}
.blue-flame:before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:13px!important;
  width:68px!important;
  height:118px!important;
  margin-left:-34px!important;
  transform-origin:50% 100%!important;
  /* Stable silhouette: it bends with the whole flame instead of tearing into pieces. */
  clip-path:polygon(50% 0%,61% 13%,68% 28%,72% 45%,70% 62%,65% 77%,57% 91%,50% 100%,43% 91%,35% 77%,30% 62%,28% 45%,32% 28%,39% 13%)!important;
  background:linear-gradient(180deg,
    rgba(34,104,178,.16) 0%,
    rgba(39,136,205,.56) 28%,
    rgba(66,186,230,.88) 58%,
    rgba(156,235,250,.98) 83%,
    rgba(238,254,255,1) 100%)!important;
  opacity:.98!important;
  mix-blend-mode:screen!important;
  animation:flameBreathV7 1.17s ease-in-out infinite!important;
  will-change:transform,opacity;
}
.blue-flame:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:18px!important;
  width:31px!important;
  height:70px!important;
  margin-left:-15.5px!important;
  transform-origin:50% 100%!important;
  clip-path:polygon(50% 0%,61% 20%,66% 43%,62% 66%,55% 87%,50% 100%,45% 87%,38% 66%,34% 43%,39% 20%)!important;
  background:linear-gradient(180deg,rgba(192,246,255,.2),rgba(193,247,255,.82) 48%,#fff 100%)!important;
  opacity:.82!important;
  mix-blend-mode:screen!important;
  animation:flameCoreBreathV7 1.36s ease-in-out infinite!important;
}
.blue-flame i:nth-child(1){
  display:block!important;position:absolute!important;left:50%!important;bottom:7px!important;
  width:88px!important;height:22px!important;margin-left:-44px!important;border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(208,250,255,.7) 0 12%,rgba(82,190,224,.35) 37%,rgba(30,98,147,.08) 67%,transparent 77%)!important;
  filter:none!important;opacity:.84!important;animation:flameBaseV7 1.45s ease-in-out infinite!important;
}
.blue-flame i:nth-child(2){display:none!important}
.blue-flame i:nth-child(3){
  display:block!important;position:absolute!important;left:50%!important;bottom:-2px!important;
  width:126px!important;height:112px!important;margin-left:-63px!important;border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 72%,rgba(89,196,228,.13),rgba(50,126,179,.07) 38%,transparent 69%)!important;
  filter:none!important;opacity:.6!important;animation:flameAuraV7 2.4s ease-in-out infinite!important;
}
@keyframes flameBodyV7{
  0%,100%{transform:translateY(-5px) rotate(-1.1deg) skewX(-.6deg) scaleY(1)}
  28%{transform:translateY(-6px) rotate(.4deg) skewX(.3deg) scaleY(1.012)}
  54%{transform:translateY(-5px) rotate(1.35deg) skewX(.75deg) scaleY(.994)}
  76%{transform:translateY(-6px) rotate(.25deg) skewX(.15deg) scaleY(1.008)}
}
@keyframes flameBreathV7{
  0%,100%{transform:scaleX(1) scaleY(1);opacity:.95}
  50%{transform:scaleX(.975) scaleY(1.028);opacity:1}
}
@keyframes flameCoreBreathV7{
  0%,100%{transform:scaleX(1) scaleY(1);opacity:.78}
  50%{transform:scaleX(.94) scaleY(1.055);opacity:.9}
}
@keyframes flameBaseV7{50%{transform:scaleX(1.08);opacity:1}}
@keyframes flameAuraV7{50%{transform:scale(1.045);opacity:.72}}

/* ================================================================
   ELEMENTALISM — give every macro room to breathe
   ================================================================ */
.elemental-showcase{overflow:visible!important}
.elemental-wheel{
  min-height:650px!important;
  padding:30px 0!important;
  overflow:visible!important;
  transition:background .45s ease,box-shadow .45s ease;
}
.elemental-core{width:min(300px,38%)!important;min-height:190px!important}
.element-token{width:132px!important;height:132px!important}
.element-token[data-element="air"]{top:32px!important}
.element-token[data-element="earth"]{bottom:32px!important}
.element-token[data-element="fire"]{left:5%!important}
.element-token[data-element="water"]{right:5%!important}
.elemental-showcase[data-active="fire"] .elemental-wheel{background:radial-gradient(circle at 50% 50%,rgba(214,93,48,.07),transparent 46%)}
.elemental-showcase[data-active="water"] .elemental-wheel{background:radial-gradient(circle at 50% 50%,rgba(79,154,187,.075),transparent 46%)}
.elemental-showcase[data-active="air"] .elemental-wheel{background:radial-gradient(circle at 50% 50%,rgba(183,214,200,.065),transparent 46%)}
.elemental-showcase[data-active="earth"] .elemental-wheel{background:radial-gradient(circle at 50% 50%,rgba(170,128,70,.075),transparent 46%)}

/* ================================================================
   KINGDOM ATLAS — eonic trio together, five arcontian crowns apart
   ================================================================ */
.realm-constellation{position:relative;margin:0 0 50px;padding:24px 0 30px}
.constellation-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 18px;padding:0 4px 14px;border-bottom:1px solid rgba(236,219,181,.11)}
.constellation-heading h2{font-size:clamp(30px,3.4vw,46px);margin:4px 0 7px}
.constellation-heading p{font-size:15px;line-height:1.55;max-width:720px;color:#bcb3a3;margin:0}
.constellation-mark{font:500 clamp(34px,4vw,58px)/1 var(--display);letter-spacing:.18em;color:#d1bb7e;opacity:.62;white-space:nowrap}
.realm-constellation-luminous{
  padding:28px 26px 32px;
  border:1px solid rgba(207,190,139,.11);
  border-radius:30px 7px 30px 7px;
  background:
    radial-gradient(500px 260px at 18% 42%,rgba(96,145,98,.09),transparent 70%),
    radial-gradient(500px 260px at 82% 42%,rgba(222,171,70,.08),transparent 70%),
    linear-gradient(135deg,rgba(255,255,255,.013),rgba(255,255,255,.003));
  overflow:hidden;
}
.realm-constellation-luminous::before{
  content:"";position:absolute;left:8%;right:8%;top:55%;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(124,164,113,.18) 24%,rgba(205,183,121,.15) 50%,rgba(224,177,78,.18) 76%,transparent);
}
.realm-road-luminous{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0!important;position:relative;z-index:1}
.realm-constellation-archon{padding-top:38px;margin-top:12px}
.realm-constellation-archon::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(183,112,84,.18),transparent)}
.archon-mark{color:#a97664;opacity:.55}
.realm-road-archon{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:15px!important;margin:0!important}
.realm-road-archon .realm-landscape{border-color:color-mix(in srgb,var(--realm) 18%,rgba(255,255,255,.06))!important}

/* ---------- Interactive identity symbols ---------- */
.identity-sigil{cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease;user-select:none}
.identity-sigil:hover,.identity-sigil:focus-visible{transform:translateY(-2px) scale(1.055);outline:none;box-shadow:0 0 28px color-mix(in srgb,var(--accent) 17%,transparent)}
.identity-sigil.sigil-awake{animation:sigilAwakeV7 .72s ease-out}
@keyframes sigilAwakeV7{0%{transform:scale(1)}30%{transform:scale(1.16) rotate(4deg)}65%{transform:scale(.98) rotate(-2deg)}100%{transform:scale(1)}}
body.sigil-pulse::after{content:"";position:fixed;inset:0;z-index:2147482000;pointer-events:none;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:inset 0 0 90px color-mix(in srgb,var(--accent) 12%,transparent);animation:sigilScreenPulse .72s ease-out forwards}
@keyframes sigilScreenPulse{from{opacity:.85}to{opacity:0}}

/* ================================================================
   DEMIURGE ENTRY — darkness, smile, error, light
   ================================================================ */
.demiurge-awakening{position:fixed;inset:0;z-index:2147483640;background:#000;display:grid;place-items:center;pointer-events:auto;overflow:hidden;animation:demiurgeCurtainV7 2.55s linear forwards}
.demiurge-void{position:relative;width:150px;height:92px;opacity:0;animation:demiurgeFaceV7 2.05s linear forwards}
.demiurge-eye{position:absolute;top:18px;width:10px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.4)}
.demiurge-eye.eye-left{left:39px}.demiurge-eye.eye-right{right:39px}
.demiurge-grin{position:absolute;left:50%;bottom:7px;width:78px;height:36px;transform:translateX(-50%);border-bottom:7px solid #fff;border-radius:0 0 58px 58px;filter:drop-shadow(0 0 7px rgba(255,255,255,.25))}
.demiurge-glitch{position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 11px,rgba(255,255,255,.08) 12px 13px);animation:demiurgeGlitchV7 2.2s steps(1,end) forwards}
.demiurge-ignition{position:absolute;inset:0;opacity:0;background:#f7efd9;animation:demiurgeIgnitionV7 2.55s ease-out forwards}
@keyframes demiurgeFaceV7{0%,18%{opacity:0;transform:none}24%,62%{opacity:1;transform:none}64%{transform:translateX(-6px)}66%{transform:translateX(9px)}68%{transform:translateX(-2px)}70%{transform:none}76%,100%{opacity:0}}
@keyframes demiurgeGlitchV7{0%,60%{opacity:0}62%{opacity:.55;transform:translateY(-4px)}64%{opacity:0}67%{opacity:.35;transform:translateY(3px)}70%,100%{opacity:0}}
@keyframes demiurgeIgnitionV7{0%,72%{opacity:0}76%{opacity:1}82%{opacity:.12}88%{opacity:.58}100%{opacity:0}}
@keyframes demiurgeCurtainV7{0%,88%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

/* ================================================================
   SCHOOL MANIFESTATION BUTTONS
   ================================================================ */
.magic-manifest{margin:44px 0 56px;padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:26px;border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 72%);position:relative;overflow:hidden}
.magic-manifest::before{content:"";position:absolute;left:-20%;top:50%;width:35%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.22;animation:manifestLineV7 7s ease-in-out infinite}
@keyframes manifestLineV7{50%{left:84%}}
.manifest-copy{position:relative;z-index:1}.manifest-copy h2{font-size:clamp(27px,3vw,40px);margin:3px 0 7px}.manifest-copy p{font-size:15.5px;color:#bbb2a3;max-width:690px;margin:0}
.manifest-button{position:relative;z-index:1;flex:0 0 auto;min-width:158px;padding:15px 18px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,#0b0c09);cursor:pointer;border-radius:2px 22px 2px 22px;text-align:center;transition:transform .22s ease,background .22s ease,border-color .22s ease}
.manifest-button span,.manifest-button b{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.11em}.manifest-button span{font-size:12px;font-weight:800;color:#f0e4cf}.manifest-button b{margin-top:5px;font-size:9px;color:var(--accent)}
.manifest-button:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--accent) 14%,#0b0c09);border-color:var(--accent)}

/* Full-screen effects only exist while explicitly triggered. */
.magic-effect-layer{position:fixed;inset:0;z-index:2147483500;pointer-events:none;overflow:hidden;background:transparent;isolation:isolate}
.magic-effect-layer::before,.magic-effect-layer::after,.magic-effect-layer .fx-core,.magic-effect-layer .fx-ring,.magic-effect-layer .fx-particles{content:"";position:absolute;pointer-events:none}
body.magic-effect-running main,body.magic-effect-running .site-footer,body.magic-effect-running .back-rune{transform-origin:50% 50%}

/* Corona */
.fx-solar::before{left:50%;top:50%;width:80px;height:80px;border-radius:50%;transform:translate(-50%,-50%);background:#fff2bd;box-shadow:0 0 60px #eabf62,0 0 180px rgba(231,171,56,.45);animation:solarBurstV7 1.45s ease-in forwards}
.fx-solar::after{inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,240,187,.82),rgba(211,137,30,.15) 30%,transparent 60%);opacity:0;animation:solarWashV7 1.45s ease-in forwards}
@keyframes solarBurstV7{0%{transform:translate(-50%,-50%) scale(.18);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) scale(9);opacity:0}}
@keyframes solarWashV7{45%{opacity:0}70%{opacity:.85}100%{opacity:0}}

/* Espectro */
.fx-spectrum::before{inset:-20%;background:linear-gradient(112deg,transparent 25%,rgba(236,123,84,.28) 30%,rgba(235,194,83,.32) 36%,rgba(113,181,128,.24) 42%,rgba(90,155,195,.27) 48%,rgba(164,113,188,.26) 54%,transparent 60%);transform:translateX(-55%);animation:spectrumSweepV7 1.5s ease-in-out forwards}
.fx-spectrum::after{inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-100%);animation:spectrumNeedleV7 1.25s ease-out forwards}
@keyframes spectrumSweepV7{to{transform:translateX(55%)}}
@keyframes spectrumNeedleV7{to{transform:translateX(100%)}}

/* Restauración */
.fx-restore::before{inset:12%;border:1px solid rgba(127,193,126,.6);border-radius:50%;box-shadow:0 0 0 28px rgba(127,193,126,.04),0 0 0 80px rgba(127,193,126,.025);transform:scale(.35);opacity:0;animation:restoreRingV7 1.55s ease-out forwards}
.fx-restore::after{left:50%;top:50%;width:2px;height:2px;background:#aee0aa;box-shadow:80px 10px 0 #7fb57d,-100px -55px 0 #7fb57d,150px -100px 0 #7fb57d,-180px 90px 0 #7fb57d,40px 150px 0 #7fb57d;animation:restoreNodesV7 1.55s ease-in-out forwards}
@keyframes restoreRingV7{20%{opacity:.8}100%{transform:scale(1.35);opacity:0}}
@keyframes restoreNodesV7{0%{transform:scale(3);opacity:0}35%{opacity:1}100%{transform:scale(.55);opacity:0}}

/* Bioquímica */
.fx-biochem::before{left:15%;top:24%;width:18px;height:18px;border:2px solid #9dbd69;border-radius:50%;box-shadow:90px 55px 0 -4px #9dbd69,210px -20px 0 -2px #b3c77d,380px 105px 0 -5px #8da65e,570px 12px 0 -3px #a8c47a,760px 130px 0 -4px #93aa65;animation:biochemFlowV7 1.6s ease-in-out forwards}
.fx-biochem::after{left:10%;right:10%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#9dbd69,transparent);transform:scaleX(.1);opacity:0;animation:biochemLineV7 1.6s ease-out forwards}
@keyframes biochemFlowV7{0%{transform:translate(-80px,70px);opacity:0}35%{opacity:1}100%{transform:translate(90px,-50px);opacity:0}}
@keyframes biochemLineV7{35%{opacity:.75;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.4)}}

/* Metabolia */
.fx-metabolic::before{left:50%;top:50%;width:120px;height:120px;border:2px solid rgba(190,144,93,.6);border-radius:50%;transform:translate(-50%,-50%) scale(.4);box-shadow:0 0 0 32px rgba(190,144,93,.05),0 0 0 72px rgba(190,144,93,.025);animation:metabolicPulseV7 1.6s ease-out forwards}
.fx-metabolic::after{inset:0;background:radial-gradient(circle at 50% 50%,rgba(194,146,91,.18),transparent 55%);animation:metabolicWashV7 1.6s ease-in-out forwards}
@keyframes metabolicPulseV7{0%{opacity:0}20%{opacity:1}100%{transform:translate(-50%,-50%) scale(5);opacity:0}}
@keyframes metabolicWashV7{0%,100%{opacity:0}50%{opacity:1}}

/* Forja */
.fx-forge::before{left:-10%;right:-10%;top:50%;height:6px;background:linear-gradient(90deg,transparent,#8d2b16 18%,#ff9d4f 50%,#8d2b16 82%,transparent);box-shadow:0 0 28px rgba(255,102,38,.8);transform:scaleX(.05);animation:forgeSlashV7 1.45s ease-out forwards}
.fx-forge::after{inset:0;background:linear-gradient(180deg,transparent 20%,rgba(222,79,31,.12) 50%,transparent 80%);opacity:0;animation:forgeHeatV7 1.45s ease-in-out forwards}
@keyframes forgeSlashV7{35%{transform:scaleX(1);height:6px}70%{height:18px;opacity:1}100%{transform:scaleX(.35);height:1px;opacity:0}}
@keyframes forgeHeatV7{35%{opacity:0}60%{opacity:1}100%{opacity:0}}

/* Faceta */
.fx-facet::before{inset:0;background:conic-gradient(from 20deg at 50% 50%,transparent 0 12%,rgba(199,157,206,.15) 12% 18%,transparent 18% 31%,rgba(137,174,201,.13) 31% 39%,transparent 39% 55%,rgba(220,193,150,.11) 55% 62%,transparent 62%);transform:scale(.5) rotate(-8deg);opacity:0;animation:facetBloomV7 1.55s ease-out forwards}
.fx-facet::after{inset:9%;border:1px solid rgba(204,165,213,.45);clip-path:polygon(50% 0,100% 25%,85% 100%,14% 100%,0 25%);animation:facetFrameV7 1.55s ease-in-out forwards}
@keyframes facetBloomV7{25%{opacity:1}100%{transform:scale(1.5) rotate(9deg);opacity:0}}
@keyframes facetFrameV7{0%{transform:scale(.35);opacity:0}42%{opacity:.8}100%{transform:scale(1.3);opacity:0}}

/* Velo */
.fx-veil::before{inset:0;background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(195,70,88,.08) 25px 26px);animation:veilScanV7 1.4s steps(8,end) forwards}
.fx-veil::after{left:0;top:38%;width:100%;height:22%;background:rgba(126,28,43,.1);transform:translateX(-105%);animation:veilSlipV7 1.15s steps(5,end) forwards}
body.magic-effect-running.fx-body-veil main{animation:veilPageV7 1.35s steps(6,end) forwards}
@keyframes veilScanV7{0%{transform:translateY(-7%);opacity:0}30%{opacity:1}100%{transform:translateY(7%);opacity:0}}
@keyframes veilSlipV7{50%{transform:translateX(2%)}100%{transform:translateX(105%)}}
@keyframes veilPageV7{0%,100%{transform:none}25%{transform:translateX(5px)}35%{transform:translateX(-8px)}55%{transform:translateX(3px)}65%{transform:none}}

/* Umbral */
.fx-gate::before{left:50%;top:50%;width:120px;height:120px;border-radius:50%;transform:translate(-50%,-50%) scale(.18);background:#000;box-shadow:0 0 0 2px rgba(94,171,176,.55),0 0 55px rgba(59,139,147,.28);animation:gateOpenV7 1.6s ease-in-out forwards}
.fx-gate::after{inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 12%,rgba(70,151,158,.08) 20%,rgba(0,0,0,.86) 58%,#000 78%);opacity:0;animation:gateShadeV7 1.6s ease-in-out forwards}
@keyframes gateOpenV7{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}45%{opacity:1;transform:translate(-50%,-50%) scale(4)}75%{opacity:1;transform:translate(-50%,-50%) scale(5.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}
@keyframes gateShadeV7{0%,18%{opacity:0}52%{opacity:1}100%{opacity:0}}

/* Gradiente */
.fx-thermal::before{inset:0 50% 0 0;background:linear-gradient(90deg,rgba(184,77,33,.5),rgba(215,116,57,.08));transform:translateX(-100%);animation:thermalLeftV7 1.55s ease-in-out forwards}
.fx-thermal::after{inset:0 0 0 50%;background:linear-gradient(90deg,rgba(91,160,177,.08),rgba(79,150,171,.5));transform:translateX(100%);animation:thermalRightV7 1.55s ease-in-out forwards}
@keyframes thermalLeftV7{45%{transform:translateX(0)}70%{transform:translateX(5%);opacity:1}100%{transform:translateX(50%);opacity:0}}
@keyframes thermalRightV7{45%{transform:translateX(0)}70%{transform:translateX(-5%);opacity:1}100%{transform:translateX(-50%);opacity:0}}

/* Órbita / gravity */
.fx-gravity::before{left:50%;top:50%;width:90px;height:90px;border-radius:50%;transform:translate(-50%,-50%);background:#000;box-shadow:0 0 0 1px rgba(183,142,210,.36),0 0 45px rgba(125,83,158,.27),0 0 120px rgba(0,0,0,.9);animation:blackHoleV7 1.65s ease-in forwards}
.fx-gravity::after{left:50%;top:50%;width:320px;height:82px;border:1px solid rgba(190,151,218,.28);border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg);animation:gravityRingV7 1.65s ease-in forwards}
body.magic-effect-running.fx-body-gravity main,body.magic-effect-running.fx-body-gravity .site-footer{animation:gravityPageV7 1.65s cubic-bezier(.63,.01,.84,.45) forwards}
@keyframes blackHoleV7{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) scale(7);opacity:1}}
@keyframes gravityRingV7{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(.5);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) rotate(168deg) scale(.08);opacity:0}}
@keyframes gravityPageV7{0%{transform:none;opacity:1}65%{transform:scale(.88) rotate(.25deg);opacity:1}100%{transform:scale(.02) rotate(4deg);opacity:0}}

/* Elemental */
.fx-elemental::before{left:50%;top:50%;width:58vmin;height:58vmin;transform:translate(-50%,-50%) rotate(0);border-radius:50%;background:conic-gradient(#d55e36 0 25%,#5da4be 25% 50%,#b9d1c5 50% 75%,#a47c43 75%);-webkit-mask:radial-gradient(circle,transparent 0 46%,#000 47% 52%,transparent 53%);mask:radial-gradient(circle,transparent 0 46%,#000 47% 52%,transparent 53%);opacity:0;animation:elementalWheelV7 1.55s ease-out forwards}
.fx-elemental::after{inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.13),transparent 48%);animation:elementalWashV7 1.55s ease-in-out forwards}
@keyframes elementalWheelV7{0%{transform:translate(-50%,-50%) scale(.35);opacity:0}30%{opacity:.8}100%{transform:translate(-50%,-50%) rotate(90deg) scale(1.5);opacity:0}}
@keyframes elementalWashV7{0%,100%{opacity:0}55%{opacity:1}}

/* ---------- Responsive ---------- */
@media(max-width:1120px){
  .realm-road-archon{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .elemental-wheel{min-height:610px!important}
}
@media(max-width:900px){
  .section-home .world-hero{min-height:56vh;padding-top:82px}
  .realm-road-luminous{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .realm-road-archon{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .elemental-wheel{min-height:590px!important}
}
@media(max-width:720px){
  .realm-constellation-luminous{padding:22px 14px 24px}
  .realm-road-luminous,.realm-road-archon{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .constellation-heading{align-items:flex-start}.constellation-mark{font-size:36px}
  .elemental-wheel{min-height:590px!important}
  .element-token[data-element="air"]{top:20px!important}.element-token[data-element="earth"]{bottom:20px!important}
  .element-token[data-element="fire"]{left:1%!important}.element-token[data-element="water"]{right:1%!important}
  .magic-manifest{align-items:flex-start;flex-direction:column}.manifest-button{width:100%}
}
@media(max-width:520px){
  .section-home .world-hero{min-height:auto;padding:76px 0 32px}.section-home .world-hero h1{font-size:clamp(43px,13vw,62px)}
  .realm-road-luminous,.realm-road-archon{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .realm-constellation{margin-bottom:34px}.constellation-heading p{font-size:14px}.constellation-mark{display:none}
  /* Mobile elemental layout deliberately becomes a roomy grid, never a cross. */
  .elemental-wheel{min-height:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:11px!important;padding:12px 0!important}
  .elemental-core{grid-column:1/-1!important;grid-row:1!important;width:100%!important;min-height:150px!important;margin-bottom:4px!important;border-radius:18px 4px 18px 4px!important}
  .element-token,.element-token[data-element="fire"],.element-token[data-element="water"],.element-token[data-element="air"],.element-token[data-element="earth"]{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%!important;height:124px!important}
  .blue-flame{width:74px!important;height:103px!important;transform:translateY(0)!important}.blue-flame:before{width:50px!important;height:88px!important;margin-left:-25px!important}.blue-flame:after{width:23px!important;height:52px!important;margin-left:-11.5px!important}.blue-flame i:nth-child(1){width:66px!important;margin-left:-33px!important}.blue-flame i:nth-child(3){width:92px!important;margin-left:-46px!important}
}
@media(max-width:420px){
  .realm-road-luminous,.realm-road-archon{grid-template-columns:1fr!important}
}

/* Performance and accessibility: dramatic effects remain optional. */
@media(prefers-reduced-motion:reduce){
  .blue-flame,.blue-flame:before,.blue-flame:after,.blue-flame i,.manifestLineV7,.realm-constellation-luminous::before{animation:none!important}
  .demiurge-awakening{display:none!important}
  .magic-effect-layer{display:none!important}
  body.magic-effect-running main,body.magic-effect-running .site-footer{animation:none!important;transform:none!important;opacity:1!important}
}
.performance-lite .demiurge-awakening{display:none!important}
.performance-lite .magic-manifest::before{animation:none!important}

/* Canon data that used to be mangled by PDF table extraction is now presented interactively. */
.vespern-articles{margin:18px 0 38px;padding:25px 24px;border:1px solid rgba(187,122,80,.17);background:linear-gradient(145deg,rgba(128,70,40,.065),rgba(8,9,7,.78));border-radius:24px 5px 24px 5px}
.vespern-articles header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:18px}.vespern-articles h2{font-size:clamp(29px,3.5vw,45px);margin:4px 0 0}.vespern-articles header p{font-size:14px;color:#a9a092;margin:0}
.treaty-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.treaty-card{min-height:92px;padding:13px 12px;text-align:left;border:1px solid rgba(214,177,128,.12);background:#0c0c09;cursor:pointer;transition:.2s}.treaty-card span{display:block;font:800 10px/1 var(--sans);letter-spacing:.15em;color:#b97e5e;margin-bottom:9px}.treaty-card b{font:750 13px/1.3 var(--sans);color:#cfc3ae}.treaty-card:hover,.treaty-card.active{transform:translateY(-2px);border-color:#b97e5e;background:rgba(126,68,41,.11)}.treaty-card.active b{color:#f0dfc5}.treaty-result{margin-top:12px;padding:17px 18px;border-left:2px solid #b97e5e;background:rgba(255,255,255,.012);font-size:17px;line-height:1.65;color:#d6c9b5}
.gnosis-ladder{display:grid;gap:7px;margin-top:20px}.gnosis-ladder article{display:grid;grid-template-columns:58px 1fr;gap:15px;align-items:center;padding:14px 16px;border:1px solid rgba(211,177,106,.12);background:linear-gradient(100deg,rgba(211,177,106,.035),transparent);transition:.2s}.gnosis-ladder article:hover{transform:translateX(5px);border-color:rgba(211,177,106,.34)}.gnosis-ladder article>span{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(211,177,106,.28);border-radius:50%;font:700 14px/1 var(--sans);color:#d8bd7e}.gnosis-ladder b{font:700 19px/1.25 var(--display);color:#eadcc4}.gnosis-ladder p{margin:4px 0 0;font-size:15px;line-height:1.55;color:#b8b0a1}
@media(max-width:720px){.treaty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.treaty-grid{grid-template-columns:1fr}.gnosis-ladder article{grid-template-columns:48px 1fr}}
@media(max-width:520px){
  /* The mobile portal keeps the full ring inside the viewport instead of clipping the side schools. */
  .magic-portal-wrap{min-height:470px!important;margin-inline:0!important;overflow:visible!important}
  .magic-portal{--orbit-radius:145px!important;width:350px!important;max-width:calc(100vw - 28px)!important}
  .portal-center{width:116px!important;height:116px!important}
  .school-node{--node-size:68px!important;min-height:68px!important}
  .school-node:before{width:42px!important;height:42px!important}
  .school-node img{width:27px!important;height:27px!important;margin:7px 0 4px!important}
  .school-node b{font-size:9.5px!important;line-height:1!important}
}