/* Atmospheric effects for the home page. */
.hero-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ember{position:absolute;left:var(--x);bottom:-12px;width:var(--size);height:var(--size);border-radius:50%;background:#ffd394;box-shadow:0 0 9px 2px #efa74480;opacity:0;animation:ember-rise var(--duration) var(--delay) linear infinite}
.ember.blue{background:#a1eaff;box-shadow:0 0 12px 3px #48bfff65}
@keyframes ember-rise{0%{transform:translate3d(0,0,0);opacity:0}15%,75%{opacity:var(--alpha)}100%{transform:translate3d(var(--drift),-650px,0);opacity:0}}
.hero-art{inset:-12px;animation:hero-breathe 16s ease-in-out infinite alternate}
@keyframes hero-breathe{to{transform:scale(1.035)}}
h1 em{text-shadow:0 0 35px #d6af6a38}
.hero-content{animation:hero-arrive .9s ease-out both}
@keyframes hero-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gold,.register-cta,.outline{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s,box-shadow .25s,filter .25s}
.gold::after,.register-cta::after,.outline::after{content:'';position:absolute;inset:-50% auto -50% -70%;width:40%;background:linear-gradient(90deg,transparent,#fff5,transparent);transform:skewX(-22deg);pointer-events:none;transition:left .65s}
.gold:hover::after,.register-cta:hover::after,.outline:hover::after{left:140%}
.gold:hover,.gold:focus-visible{transform:translateY(-3px);box-shadow:0 8px 30px #d6af6a40}
.register-cta:hover,.outline:hover{transform:translateY(-3px)}
.scroll span{display:inline-block;animation:scroll-cue 2s ease-in-out infinite}
@keyframes scroll-cue{50%{transform:translateY(6px)}}
.featured,.class-detail,.stats,aside{transition:border-color .3s,box-shadow .3s}
.featured:hover,.class-detail:hover,.stats:hover{border-color:#d6af6a66;box-shadow:0 8px 35px #0003,0 0 22px #d6af6a0c}
.featured,.class-detail{background-image:radial-gradient(ellipse at var(--glow-x,75%) var(--glow-y,25%),#d6af6a18,transparent 65%),linear-gradient(110deg,#141d26,#0b1118)}
.news-row,.ranking li{transition:background .25s}
.news-row:hover,.ranking li:hover{background:#d6af6a09}
.class-list button{transition:color .25s,background .25s,text-shadow .25s}
.class-list button:hover,.class-list button:focus-visible{color:#ffe0a5;background:#d6af6a0c;text-shadow:0 0 18px #d6af6a66}
.fx-reveal{animation:section-arrive .7s ease-out both}
@keyframes section-arrive{from{opacity:.15;transform:translateY(22px)}to{opacity:1;transform:none}}
dialog{max-width:min(560px,90vw);color:#f0eee8;background:linear-gradient(135deg,#18232e,#0b1118);border:1px solid #d6af6a70;border-radius:12px;padding:32px;box-shadow:0 24px 100px #000a}
dialog[open]{animation:hero-arrive .25s ease-out}dialog::backdrop{background:#02070dcc;backdrop-filter:blur(6px)}dialog p{line-height:1.9;color:#b3bec7}dialog .close{float:right;background:transparent;border:0;color:#d6af6a;font-size:26px}
.effects-paused .ember,.effects-paused .hero-art,.effects-paused .scroll span{animation-play-state:paused}
@media(max-width:700px){.ember:nth-child(n+19){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-art,.hero-content,.ember,.scroll span,.fx-reveal,dialog[open]{animation:none!important}.ember{display:none}.gold,.register-cta,.outline,.gold::after,.register-cta::after,.outline::after,.featured,.class-detail,.stats,aside,.news-row,.ranking li,.class-list button{transition:none!important}.gold:hover,.register-cta:hover,.outline:hover{transform:none}}
/* Cinematic magic layers */
.hero{isolation:isolate}.hero-content{z-index:2}.vertical,.scroll{z-index:2}
.arcane-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:paint}
.aurora{position:absolute;width:70%;height:70%;right:-12%;top:0;background:radial-gradient(ellipse,#37bfff35,transparent 65%);filter:blur(28px);animation:aurora-flow 9s ease-in-out infinite alternate}
.aurora.second{right:5%;top:35%;background:radial-gradient(ellipse,#e29a3338,transparent 65%);animation-delay:-5s}
@keyframes aurora-flow{to{transform:translate(-8%,12%) rotate(18deg) scale(1.2);opacity:.45}}
.arcane-ring{position:absolute;width:min(43vw,540px);aspect-ratio:1;right:7%;top:9%;border:1px solid #ebc77e70;border-radius:50%;box-shadow:0 0 35px #efb85225,inset 0 0 35px #efb85220;animation:rune-orbit 65s linear infinite;opacity:.7}
.arcane-ring::before{content:'';position:absolute;inset:16px;border:2px dashed #dfb76765;border-radius:50%}
.arcane-ring::after{content:'';position:absolute;inset:55px;border:1px solid #85d9ff65;transform:rotate(45deg);box-shadow:0 0 28px #6ecfff20}
.arcane-ring.inner{inset:20% 14% auto auto;width:min(29vw,370px);border-color:#89dfff60;animation-direction:reverse;animation-duration:45s}
.rune{position:absolute;left:50%;top:50%;color:#ffe2a5;font:22px Cinzel,serif;text-shadow:0 0 12px #ffad48;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(clamp(-240px,-19vw,-95px))}
@keyframes rune-orbit{to{transform:rotate(360deg)}}
.magic-beam{position:absolute;top:-40%;right:24%;width:90px;height:160%;background:linear-gradient(90deg,transparent,#b6eaff15,transparent);transform:rotate(26deg);animation:beam-sway 12s ease-in-out infinite alternate}.magic-beam.second{right:8%;width:160px;animation-delay:-6s}
@keyframes beam-sway{to{transform:translateX(80px) rotate(19deg);opacity:.3}}
.hero-effects{z-index:1}.ember{box-shadow:0 0 12px 3px #ffa74290}.ember.blue{box-shadow:0 0 16px 4px #48bfff80}
h1 em{background:linear-gradient(110deg,#b98538 5%,#f5d695 30%,#fff4d0 45%,#c99b51 60%,#f4dba0 85%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:title-gold 7s ease-in-out infinite;text-shadow:0 0 45px #eeb24d35}
@keyframes title-gold{50%{background-position:100% 50%}}
.actions .gold{animation:cta-aura 3s ease-in-out infinite}
@keyframes cta-aura{50%{box-shadow:0 0 24px #e9b75660,0 0 55px #d69d3625}}
.section-title h2{position:relative}.section-title h2::after{content:'';display:block;margin-top:10px;width:64px;height:2px;background:linear-gradient(90deg,#ffe0a0,#d5a34b00);box-shadow:0 0 12px #e8b35f80}
.stats{border-color:#d6af6a45;box-shadow:0 0 30px #d6af6a0d;position:relative}.featured,.class-detail{border:1px solid #d6af6a40}.featured:hover,.class-detail:hover{box-shadow:0 0 35px #d6af6a24,inset 0 0 35px #6dbfff08}
.cast-spark{position:fixed;left:var(--sx);top:var(--sy);width:5px;height:5px;border-radius:50%;background:#ffe0a3;box-shadow:0 0 10px #ffb741;pointer-events:none;z-index:100;animation:cast-out .65s ease-out forwards}
@keyframes cast-out{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.effects-paused .arcane-stage *,.effects-paused h1 em,.effects-paused .actions .gold{animation-play-state:paused}
@media(max-width:700px){.arcane-ring{width:320px;right:-130px;top:15%;opacity:.35}.arcane-ring.inner{width:230px;right:-85px;top:22%}.rune{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-140px)}.aurora{filter:none}.magic-beam.second{display:none}}
@media(prefers-reduced-motion:reduce){.arcane-stage *,.actions .gold,h1 em{animation:none!important}.cast-spark{display:none}.arcane-ring{opacity:.25}}
/* Keep the complete vertical artwork visible instead of cropping with cover. */
.hero-art{inset:0;background-color:#080e14;background-size:100% 100%,100% 100%,auto 100%;background-position:center,center,right top;background-repeat:no-repeat;animation:none;transform:none}
@media(max-width:700px){.hero-art{background-position:center,center,75% top}}

/* ===== SOFT THEME (2026-09-19) ===== */
.hero-art{background-color:#ebe4d3}
.featured,.class-detail{background-image:radial-gradient(ellipse at var(--glow-x,75%) var(--glow-y,25%),#f4e6cb,transparent 65%),linear-gradient(110deg,#f4ecdb,#eae3d4)}
.news-row:hover,.ranking li:hover{background:#f1e6cd}
.class-list button:hover,.class-list button:focus-visible{color:#6d4a0d;background:#eddfc2;text-shadow:none}
.section-title h2::after{background:linear-gradient(90deg,#ae8c46,#d5a34b00);box-shadow:none}
dialog{color:#241f18;background:linear-gradient(135deg,#f4ecdb,#e9e1d0);border:1px solid #d1c3a7;box-shadow:0 24px 70px rgba(78,60,34,.18)}
dialog::backdrop{background:#2a241c55;backdrop-filter:blur(5px)}
dialog p{color:#433b2e}
dialog .close{color:#6f4a0d}

/* Balanced home hero: clear typography, unified actions, continuous artwork. */
body:has(.hero) header{height:104px;padding-inline:6%;gap:28px;box-shadow:0 4px 24px #30261612}
body:has(.hero) header .brand img{width:220px}
body:has(.hero) header nav a{border-radius:5px!important;padding-inline:18px!important}
.hero{min-height:660px;border-bottom:1px solid #b59a6655;background:#e6dfcf}
.hero .hero-art{background:linear-gradient(90deg,#e6dfcf 0%,#e6dfcf 32%,#e6dfcfdb 43%,#e6dfcf40 64%,transparent 80%),linear-gradient(0deg,#e6dfcf 0%,#e6dfcf00 27%),url('hero.png') right center/auto 100% no-repeat;background-color:#e6dfcf;opacity:1}
.hero-content{width:100%;max-width:1440px;margin-inline:auto;padding:66px 6% 76px}
.hero .eyebrow{font-size:11px;letter-spacing:3px;color:#76551e}
.hero .season{margin:30px 0 20px;font-size:15px;letter-spacing:4px}
.hero h1{font-size:clamp(44px,4.6vw,72px);font-weight:700;line-height:1.08;letter-spacing:-2px;max-width:680px;color:#26241f}
.hero h1 em{display:inline-block;color:#946820;background:none;animation:none;text-shadow:0 2px 0 #fff5}
.hero .intro{font-size:17px;line-height:1.9;margin:28px 0 30px;color:#423e34}
.hero .actions{gap:16px;align-items:stretch;flex-wrap:wrap}
.hero .actions .gold,.hero .actions .register-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-width:202px;min-height:58px;padding:15px 24px!important;border-radius:5px;font-size:16px!important;font-weight:700;animation:none;box-shadow:0 6px 16px #33271118}
.hero .actions .gold{background:linear-gradient(135deg,#d9b875,#b78a3e);border:1px solid #a87a30;color:#292114}
.hero .actions .register-cta{background:linear-gradient(135deg,#234958,#142f3e)!important;border:1px solid #426877!important;box-shadow:0 6px 16px #17303b25;text-shadow:none}
.hero .actions span{margin:0;font-size:20px!important}
.hero .hero-note{font-size:10px;letter-spacing:1.7px;margin-top:32px;color:#645b49;line-height:2}
.hero .hero-note b{margin-inline:10px;color:#987334}
.hero .arcane-stage{opacity:.5}
.hero .vertical{display:none}
@media(min-width:1700px){.hero .hero-art{background-size:auto,auto,auto 115%}}
@media(max-width:1100px){body:has(.hero) header{padding-inline:4%;gap:16px}body:has(.hero) header .brand img{width:180px}body:has(.hero) header nav a{padding-inline:10px!important;font-size:13px!important}.hero-content{padding-inline:6%}.hero h1{font-size:clamp(44px,5.6vw,62px)}}
@media(max-width:700px){body:has(.hero) header{height:84px;padding-inline:6%}body:has(.hero) header .brand img{width:166px}.hero{min-height:670px}.hero .hero-art{background:linear-gradient(90deg,#e6dfcff2,#e6dfcfc9 55%,#e6dfcf65),linear-gradient(0deg,#e6dfcf,transparent 65%),url('hero.png') 70% center/auto 100% no-repeat}.hero-content{padding:52px 7% 72px}.hero h1{font-size:clamp(36px,9.5vw,58px);letter-spacing:-1.4px}.hero .season{font-size:13px;margin-top:26px}.hero .intro{font-size:15px}.hero .actions{gap:12px}.hero .actions .gold,.hero .actions .register-cta{min-width:0;flex:1 1 145px;padding:14px 16px!important;gap:12px;font-size:14px!important}.hero .hero-note{font-size:9px;letter-spacing:.8px}.hero .hero-note b{margin-inline:5px}.hero .scroll{font-size:11px}.hero .arcane-stage{opacity:.22}}