/* AURONIS VISIBILITY FIX V2 — 01.11.2026
   Logo, Shaman and animated A across home, interior pages and News.
   This file deliberately loads last. It does not touch PHP logic or databases. */

/* The old interior hero only rendered the title. Now it contains real Auronis assets. */
.my2-body .my2-inner-hero {
  position:relative !important; isolation:isolate !important;
  min-height:380px !important; height:380px !important;
  padding-top:68px !important; box-sizing:border-box !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(14,3,7,.93),rgba(26,6,10,.77) 34%,rgba(23,5,9,.79) 65%,rgba(14,3,7,.85)),
    url('../images/cristallina-world.png') center 42%/cover no-repeat !important;
}
.my2-body .my2-inner-hero:before {
  content:'' !important; position:absolute !important; inset:0 !important;
  z-index:0 !important; pointer-events:none !important;
  background:radial-gradient(ellipse 34% 80% at 15% 51%,rgba(255,109,45,.2),transparent 75%),
             radial-gradient(ellipse 34% 90% at 88% 65%,rgba(200,55,42,.18),transparent 80%) !important;
}
.my2-body .my2-inner-hero:after { z-index:2 !important; pointer-events:none !important; }
.my2-body .my2-inner-hero .auronis-inner-art {
  position:absolute !important; inset:0 !important; z-index:3 !important;
  overflow:hidden !important; pointer-events:none !important;
}
.my2-body .my2-inner-hero .auronis-inner-logo {
  position:absolute !important; left:max(3.5%, calc(50% - 680px)) !important; top:88px !important;
  width:clamp(200px, 22vw, 296px) !important; height:260px !important;
  display:block !important; object-fit:contain !important; opacity:1 !important;
  visibility:visible !important; max-width:none !important;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.78)) drop-shadow(0 0 22px rgba(239,102,46,.35)) !important;
  animation:auronisBrandFloat 6s ease-in-out infinite !important;
}
.my2-body .my2-inner-hero .auronis-inner-shaman {
  position:absolute !important; right:max(2.5%, calc(50% - 690px)) !important;
  bottom:-23px !important; width:clamp(230px, 28vw, 357px) !important;
  height:365px !important; max-width:none !important;
  display:block !important; object-fit:contain !important; object-position:center bottom !important;
  opacity:1 !important; visibility:visible !important;
  filter:drop-shadow(0 13px 17px rgba(0,0,0,.78)) drop-shadow(0 0 21px rgba(246,107,41,.42)) !important;
  animation:auronisShamanFloat 6.8s ease-in-out infinite !important;
}
.my2-body .my2-inner-hero .my2-inner-content {
  z-index:4 !important; position:relative !important; width:100% !important;
  max-width:570px !important; margin-inline:auto !important;
  padding:12px 22px !important; text-align:center !important;
  filter:drop-shadow(0 2px 18px #120408) !important;
}
.my2-body .my2-inner-hero .my2-inner-content h1 {
  font-size:clamp(30px, 3.3vw, 48px) !important;
  text-shadow:0 3px 17px #0b0307,0 0 25px rgba(247,167,75,.24) !important;
}

/* Home page: make sure the supplied artwork and Shaman are truly visible. */
.my2-body .my2-game-hero-image.my2-phoenix-stage {isolation:isolate !important; overflow:visible !important;}
.my2-body .my2-game-hero-image.my2-phoenix-stage img.my2-stage-logo {
  position:absolute !important; display:block !important;
  left:-1% !important; top:19% !important;
  width:52% !important; height:60% !important; max-width:none !important;
  z-index:4 !important; object-fit:contain !important;
  mix-blend-mode:normal !important; opacity:1 !important; visibility:visible !important;
  mask-image:none !important; -webkit-mask-image:none !important;
  filter:drop-shadow(0 15px 22px rgba(0,0,0,.82)) drop-shadow(0 0 19px rgba(249,114,50,.33)) !important;
  animation:auronisBrandFloat 6s ease-in-out infinite !important;
}
.my2-body .my2-game-hero-image.my2-phoenix-stage img.my2-stage-character {
  position:absolute !important; display:block !important;
  right:-2% !important; top:-2% !important;
  width:54% !important; height:104% !important; max-width:none !important;
  z-index:3 !important; object-fit:contain !important;
  mix-blend-mode:normal !important; opacity:1 !important; visibility:visible !important;
  mask-image:none !important; -webkit-mask-image:none !important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.82)) drop-shadow(0 0 22px rgba(255,111,45,.34)) !important;
  animation:auronisShamanFloat 6.8s ease-in-out infinite !important;
}

/* Clearly animated A in the News panel header, visible even before scrolling to articles. */
.my2-body .my2-news-panel .my2-panel-heading .auronis-news-symbol {
  display:grid !important; place-items:center !important; flex:0 0 58px !important;
  width:58px !important; height:58px !important;
  position:relative !important; isolation:isolate !important;
  border-radius:50% !important;
  border:1px solid rgba(241,169,92,.72) !important;
  background:radial-gradient(circle at 50% 38%,#5e1c21 0%,#24090d 60%,#16060a 100%) !important;
  font:bold normal 35px/1 Georgia,'Times New Roman',serif !important;
  color:#ffe0a0 !important; letter-spacing:0 !important;
  text-shadow:0 0 7px #e27f3c,0 0 17px rgba(250,126,46,.58) !important;
  box-shadow:inset 0 0 16px rgba(241,101,42,.21),0 0 20px rgba(207,80,35,.26) !important;
  animation:auronisAFlare 3.6s ease-in-out infinite !important;
}
.my2-body .my2-news-panel .my2-panel-heading .auronis-news-symbol:before {
  content:'' !important; display:block !important; position:absolute !important;
  inset:-7px !important; border-radius:50% !important; border:1px solid transparent !important;
  border-top-color:#ffd68f !important; border-bottom-color:#c46b37 !important;
  animation:auronisARotate 7s linear infinite !important; pointer-events:none !important;
}

/* The real A in every news article moves/glows rather than relying on a pseudo glyph. */
.my2-body .my2-news-panel .zn3-sigil .zn3-rune {
  display:grid !important; place-items:center !important;
  font:bold normal 46px/1 Georgia,'Times New Roman',serif !important;
  color:#ffda93 !important; -webkit-text-fill-color:#ffda93 !important;
  letter-spacing:0 !important; text-shadow:0 2px 2px #31070b,0 0 9px rgba(255,177,85,.8) !important;
  animation:auronisAFlare 3.6s ease-in-out infinite !important;
}
.my2-body .my2-news-panel .zn3-sigil .zn3-rune:after {content:none !important; display:none !important;}
.my2-body .my2-news-panel .zn3-sigil .zn3-ring {animation:auronisARotate 9s linear infinite !important;}
.my2-body .my2-news-panel .zn3-sigil .zn3-ring-b {animation:auronisARotate 12s linear reverse infinite !important;}

@keyframes auronisBrandFloat {0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.022)}}
@keyframes auronisShamanFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes auronisAFlare {0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.095);filter:brightness(1.28)}}
@keyframes auronisARotate {to{transform:rotate(360deg)}}

/* Preserve title and imagery on narrow viewports. */
@media(max-width:1150px) {
  .my2-body .my2-inner-hero .auronis-inner-logo{left:1% !important;width:210px !important;opacity:.84 !important}
  .my2-body .my2-inner-hero .auronis-inner-shaman{right:-2% !important;width:260px !important;opacity:.85 !important}
  .my2-body .my2-inner-hero .my2-inner-content{max-width:470px !important}
}
@media(max-width:780px) {
  .my2-body .my2-inner-hero{height:315px !important;min-height:315px !important;padding-top:50px !important}
  .my2-body .my2-inner-hero .auronis-inner-logo{width:158px !important;height:175px !important;top:105px !important;left:-18px !important;opacity:.74 !important}
  .my2-body .my2-inner-hero .auronis-inner-shaman{width:190px !important;height:275px !important;right:-44px !important;bottom:-15px !important;opacity:.73 !important}
  .my2-body .my2-inner-hero .my2-inner-content{max-width:390px !important;padding:12px 44px !important}
  .my2-body .my2-inner-hero .my2-inner-content h1{font-size:clamp(28px,6vw,38px) !important}
  .my2-body .my2-game-hero-image.my2-phoenix-stage img.my2-stage-logo{width:52% !important;left:0 !important}
  .my2-body .my2-game-hero-image.my2-phoenix-stage img.my2-stage-character{width:51% !important;right:-1% !important}
}
@media(max-width:480px) {
  .my2-body .my2-inner-hero{height:280px !important;min-height:280px !important}
  .my2-body .my2-inner-hero .auronis-inner-logo{width:132px !important;height:145px !important;top:108px !important;left:-29px !important;opacity:.55 !important}
  .my2-body .my2-inner-hero .auronis-inner-shaman{width:145px !important;height:223px !important;right:-43px !important;bottom:-15px !important;opacity:.57 !important}
  .my2-body .my2-inner-hero .my2-inner-content{padding:14px 30px !important}
  .my2-body .my2-inner-hero .my2-inner-content h1{font-size:30px !important}
  .my2-body .my2-news-panel .my2-panel-heading .auronis-news-symbol{width:44px !important;height:44px !important;flex-basis:44px !important;font-size:29px !important}
  .my2-body .my2-news-panel .zn3-sigil .zn3-rune{font-size:33px !important}
}
@media(prefers-reduced-motion:reduce) {
  .my2-body .my2-inner-hero .auronis-inner-logo,
  .my2-body .my2-inner-hero .auronis-inner-shaman,
  .my2-body .my2-game-hero-image.my2-phoenix-stage img.my2-stage-logo,
  .my2-body .my2-game-hero-image.my2-phoenix-stage img.my2-stage-character,
  .my2-body .my2-news-panel .my2-panel-heading .auronis-news-symbol,
  .my2-body .my2-news-panel .my2-panel-heading .auronis-news-symbol:before,
  .my2-body .my2-news-panel .zn3-sigil .zn3-rune,
  .my2-body .my2-news-panel .zn3-sigil .zn3-ring{animation:none !important}
}


/* AURONIS HEADER + BANNER TUNE V3 — 01.11.2026 */
/* Replace the tiny emblem with a clean animated A that matches the branding. */
.my2-body .auronis-brand-letter{
  display:inline-grid !important;
  place-items:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:10px !important;
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#5a171d 0%,#2a090d 55%,#140407 100%) !important;
  border:1px solid rgba(238,182,99,.58) !important;
  color:#ffe2ae !important;
  font:normal 800 29px/1 Georgia,'Times New Roman',serif !important;
  text-shadow:0 0 12px rgba(255,161,75,.44),0 1px 2px rgba(0,0,0,.62) !important;
  box-shadow:inset 0 1px rgba(255,229,180,.14),0 0 0 1px rgba(107,36,24,.55),0 8px 18px rgba(0,0,0,.24),0 0 18px rgba(235,109,44,.18) !important;
  animation:auronisHeaderAFloat 4.5s ease-in-out infinite !important;
}
.my2-body .auronis-brand-letter:before{
  content:'' !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,rgba(255,213,145,.45),transparent 42%,transparent 58%,rgba(172,63,33,.28)) !important;
  pointer-events:none !important;
}
.my2-body .auronis-brand-letter:after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(115deg,transparent 0 32%,rgba(255,231,187,.24) 46%,transparent 60%) !important;
  background-size:230% 100% !important;
  animation:auronisHeaderASweep 5.6s linear infinite !important;
  pointer-events:none !important;
}
.my2-body .my2-header .my2-brand-mark.auronis-brand-letter{
  margin-right:12px !important;
}
.my2-body .my2-footer .auronis-brand-letter-footer{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:9px !important;
  font-size:25px !important;
}

/* Bring back a moving interior background similar to the previous animated banner feeling. */
.my2-body .my2-inner-hero{
  background-position:center 0, center 42% !important;
  background-size:auto, cover !important;
  animation:auronisInnerBackdrop 18s ease-in-out infinite alternate !important;
}
.my2-body .my2-inner-hero:before{
  animation:auronisInnerGlow 10s ease-in-out infinite alternate !important;
}
.my2-body .my2-inner-hero .my2-inner-sigil{
  animation:auronisInnerSigil 18s linear infinite !important;
  opacity:.2 !important;
}
.my2-body .my2-inner-hero .my2-inner-glow{
  animation:auronisInnerPulse 7.5s ease-in-out infinite !important;
}
@keyframes auronisHeaderAFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes auronisHeaderASweep {0%{background-position:160% 0}100%{background-position:-90% 0}}
@keyframes auronisInnerBackdrop {
  0%{background-position:center 0, 50% 42%; filter:saturate(1)}
  50%{background-position:center 0, 53% 46%; filter:saturate(1.05)}
  100%{background-position:center 0, 47% 38%; filter:saturate(1)}
}
@keyframes auronisInnerGlow {
  0%{opacity:.85; transform:translate3d(0,0,0) scale(1)}
  100%{opacity:1; transform:translate3d(0,-4px,0) scale(1.06)}
}
@keyframes auronisInnerSigil {
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  100%{transform:translate(-50%,-50%) rotate(360deg) scale(1.04)}
}
@keyframes auronisInnerPulse {
  0%,100%{opacity:.55; transform:scale(1)}
  50%{opacity:.82; transform:scale(1.06)}
}

@media(max-width:860px){
  .my2-body .auronis-brand-letter{width:38px !important;height:38px !important;min-width:38px !important;font-size:26px !important;margin-right:10px !important}
}
@media(max-width:600px){
  .my2-body .auronis-brand-letter{width:34px !important;height:34px !important;min-width:34px !important;font-size:23px !important;border-radius:8px !important;margin-right:8px !important}
  .my2-body .my2-footer .auronis-brand-letter-footer{width:32px !important;height:32px !important;min-width:32px !important;font-size:22px !important}
}
@media(prefers-reduced-motion:reduce){
  .my2-body .auronis-brand-letter,
  .my2-body .auronis-brand-letter:after,
  .my2-body .my2-inner-hero,
  .my2-body .my2-inner-hero:before,
  .my2-body .my2-inner-hero .my2-inner-sigil,
  .my2-body .my2-inner-hero .my2-inner-glow{animation:none !important}
}