/* ST7D v7.5.0 — Sitewide Quality, Motion & Living World Atmosphere
   Additive polish layer. No page content is hidden unless the v7.5 runtime is active. */

:root{
  --v750-red:#ff4146;
  --v750-red-rgb:255,65,70;
  --v750-gold:#f0c75e;
  --v750-green:#62e79b;
  --v750-cyan:#5bdcf4;
  --v750-ease:cubic-bezier(.22,1,.36,1);
  --v750-soft-line:rgba(255,255,255,.085);
  --v750-deep-shadow:0 28px 80px rgba(0,0,0,.28);
}

/* ---------- Accessibility / interaction polish ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid color-mix(in srgb,var(--profile-accent,var(--world-accent,var(--v750-red))) 78%,#fff 22%);
  outline-offset:3px;
}
html:not([data-site-theme="light"]):not([data-theme="light"]) :where(input,select,textarea)::placeholder{color:rgba(255,255,255,.34)}
main{isolation:isolate}
main > section[id],main > .section[id]{scroll-margin-top:98px}

/* ---------- Scroll progress ---------- */
.v750-scroll-progress{
  position:fixed;left:0;right:0;top:var(--v750-header-height,76px);height:2px;z-index:999;
  pointer-events:none;background:rgba(255,255,255,.025);opacity:0;transition:opacity .2s ease,top .2s ease;
}
.v750-scroll-progress.is-active{opacity:1}
.v750-scroll-progress > i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#c51f28,var(--v750-red),#ff9a45);box-shadow:0 0 12px rgba(var(--v750-red-rgb),.55);will-change:transform}

/* ---------- Progressive reveal: only engaged after JS opts the document in ---------- */
html.v750-motion-ready .v750-reveal{
  opacity:0;transform:translate3d(0,18px,0) scale(.995);filter:saturate(.92);
  transition:opacity .7s var(--v750-ease),transform .7s var(--v750-ease),filter .7s var(--v750-ease);
  transition-delay:var(--v750-delay,0ms);will-change:opacity,transform;
}
html.v750-motion-ready .v750-reveal.is-visible{opacity:1;transform:none;filter:none;will-change:auto}

/* ---------- Card depth / consistency ---------- */
:where(.home-server-choice-grid a,.home-simple-link-grid a,.why-st7d-grid article,.onboarding-steps a,.member-directory-card,.staff-person-card,.event-public-card,.mod-card,.faq-topic-card,.command-category,.profile-v2-showcase-card,.v740-world-leader-card,.v740-world-mod-grid a){
  transition:transform .22s var(--v750-ease),border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}
@media (hover:hover) and (pointer:fine){
  :where(.home-server-choice-grid a,.home-simple-link-grid a,.why-st7d-grid article,.onboarding-steps a,.member-directory-card,.staff-person-card,.event-public-card,.mod-card,.faq-topic-card,.profile-v2-showcase-card,.v740-world-leader-card,.v740-world-mod-grid a):hover{
    transform:translateY(-3px);box-shadow:0 18px 48px rgba(0,0,0,.24);
  }
}

/* ---------- Jump-bar active section ---------- */
.v740-world-jumpbar a.is-current,.v740-profile-jumpbar a.is-current{
  color:#fff!important;background:color-mix(in srgb,var(--world-accent,var(--profile-accent,var(--v750-red))) 17%,rgba(255,255,255,.025))!important;
  border-color:color-mix(in srgb,var(--world-accent,var(--profile-accent,var(--v750-red))) 44%,transparent)!important;
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--world-accent,var(--profile-accent,var(--v750-red))) 76%,transparent);
}

/* ---------- Hero parallax hooks ---------- */
.home-hero-v2,.server-detail-hero,.profile-showcase{--v750-px:0;--v750-py:0}
.home-hero-v2 .hero-frame{transform:translate3d(calc(var(--v750-px) * -7px),calc(var(--v750-py) * -5px),0);transition:transform .12s linear}
.home-hero-v2 .orb-one{transform:translate3d(calc(var(--v750-px) * 14px),calc(var(--v750-py) * 9px),0)}
.home-hero-v2 .orb-two{transform:translate3d(calc(var(--v750-px) * -10px),calc(var(--v750-py) * -8px),0)}
.server-detail-hero::after{transform:translate3d(calc(var(--v750-px) * -14px),calc(var(--v750-py) * -9px),0)}
.profile-showcase::before{transform:scale(1.025) translate3d(calc(var(--v750-px) * -6px),calc(var(--v750-py) * -4px),0)!important}

/* ---------- Living World API status ---------- */
.v750-world-clock{
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
}
.v750-world-clock > div{min-width:0;padding:10px 11px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(255,255,255,.025)}
.v750-world-clock span{display:block;color:rgba(255,255,255,.42);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.v750-world-clock strong{display:block;margin-top:4px;color:#eee;font-size:11px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.v750-world-clock small{display:block;margin-top:4px;color:rgba(255,255,255,.42);font-size:8px}
.v750-world-clock .bloodmoon strong{color:#ff777a}
.v750-world-clock .bloodmoon.safe strong{color:#e8cf79}

.v750-world-signal{display:flex!important;align-items:center;gap:6px;margin-top:5px;color:rgba(255,255,255,.48)!important;font-size:8px!important;font-style:normal;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.v750-world-signal i{width:5px;height:5px;border-radius:50%;background:var(--server-accent,#aaa);box-shadow:0 0 8px color-mix(in srgb,var(--server-accent,#aaa) 60%,transparent);flex:0 0 auto}
.home-server-choice-grid a.v750-bloodmoon-active,.home-server-choice-grid a.v750-bloodmoon-tonight{border-color:rgba(255,65,70,.46)!important;box-shadow:0 0 0 1px rgba(255,65,70,.10),0 20px 65px rgba(134,0,0,.18)}
.home-server-choice-grid a.v750-bloodmoon-active .v750-world-signal,.home-server-choice-grid a.v750-bloodmoon-tonight .v750-world-signal{color:#ff777a!important}
.home-server-choice-grid a.v750-bloodmoon-active .v750-world-signal i,.home-server-choice-grid a.v750-bloodmoon-tonight .v750-world-signal i{background:#ff4146;box-shadow:0 0 0 4px rgba(255,65,70,.08),0 0 16px rgba(255,65,70,.7);animation:v750MoonPulse 1.8s ease-in-out infinite}

.v750-network-alert{
  display:flex;align-items:center;gap:8px;margin:10px auto 0;padding:7px 11px;width:max-content;max-width:100%;border-radius:999px;border:1px solid rgba(255,65,70,.28);
  background:rgba(53,4,7,.58);backdrop-filter:blur(10px);color:#ff8c8f;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 0 28px rgba(170,10,20,.14)
}
.v750-network-alert i{width:6px;height:6px;border-radius:50%;background:#ff4146;box-shadow:0 0 12px rgba(255,65,70,.8);animation:v750MoonPulse 1.8s ease-in-out infinite}

/* Cinematic Blood Moon atmosphere appears only when the cached live status says it should. */
.server-detail-hero.v750-bloodmoon-active,.server-detail-hero.v750-bloodmoon-tonight{position:relative}
.server-detail-hero.v750-bloodmoon-active::before,.server-detail-hero.v750-bloodmoon-tonight::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 79% 18%,rgba(255,44,50,.22),transparent 12%),radial-gradient(circle at 78% 18%,rgba(130,0,0,.16),transparent 34%),linear-gradient(180deg,rgba(85,0,0,.05),transparent 64%);
  animation:v750BloodBreath 5.5s ease-in-out infinite;
}
.server-detail-hero.v750-bloodmoon-active .server-detail-live,.server-detail-hero.v750-bloodmoon-tonight .server-detail-live{border-color:rgba(255,65,70,.32);box-shadow:0 26px 90px rgba(94,0,0,.18),inset 0 0 50px rgba(120,0,0,.035)}
.v750-bloodmoon-orb{position:absolute;right:8.5%;top:14%;width:clamp(70px,8vw,125px);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 38% 34%,#ffac9f 0 4%,#d6353d 22%,#8d131a 58%,#330609 100%);box-shadow:0 0 42px rgba(255,45,55,.20),0 0 130px rgba(118,0,0,.22);opacity:.56;animation:v750MoonFloat 7s ease-in-out infinite}
.v750-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.v750-ember{position:absolute;left:var(--x);bottom:-14px;width:2px;height:2px;border-radius:50%;background:#ff806c;box-shadow:0 0 8px rgba(255,75,55,.75);opacity:0;animation:v750EmberRise var(--dur) linear infinite;animation-delay:var(--delay)}
.server-detail-hero > *:not(.v750-embers):not(.v750-bloodmoon-orb){position:relative;z-index:1}

/* ---------- Section separators on long editorial pages ---------- */
main > .section + .section::before{content:"";position:absolute;left:50%;top:0;width:min(1180px,86vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);pointer-events:none}

@keyframes v750MoonPulse{0%,100%{transform:scale(.86);opacity:.58}50%{transform:scale(1.18);opacity:1}}
@keyframes v750BloodBreath{0%,100%{opacity:.66}50%{opacity:1}}
@keyframes v750MoonFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,8px,0) scale(1.025)}}
@keyframes v750EmberRise{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}10%{opacity:.55}70%{opacity:.24}100%{transform:translate3d(var(--drift),-68vh,0) scale(1.4);opacity:0}}

@media(max-width:760px){
  .v750-scroll-progress{top:68px}
  .v750-world-clock{grid-template-columns:1fr 1fr}.v750-world-clock>div:last-child{grid-column:1/-1}
  .v750-bloodmoon-orb{right:5%;top:9%;opacity:.36}
  html.v750-motion-ready .v750-reveal{transform:translate3d(0,10px,0)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html.v750-motion-ready .v750-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .home-hero-v2 .hero-frame,.home-hero-v2 .orb-one,.home-hero-v2 .orb-two,.server-detail-hero::after,.profile-showcase::before{transform:none!important;transition:none!important}
  .v750-world-signal i,.v750-network-alert i,.server-detail-hero.v750-bloodmoon-active::before,.server-detail-hero.v750-bloodmoon-tonight::before,.v750-bloodmoon-orb,.v750-ember{animation:none!important}
  .v750-embers{display:none!important}
}

html[data-site-theme="light"] .v750-scroll-progress{background:rgba(0,0,0,.035)}
html[data-site-theme="light"] .v750-world-clock>div{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.08)}
html[data-site-theme="light"] .v750-world-clock span,html[data-site-theme="light"] .v750-world-clock small{color:rgba(0,0,0,.46)}
html[data-site-theme="light"] .v750-world-clock strong{color:#24201e}
html[data-site-theme="light"] main > .section + .section::before{background:linear-gradient(90deg,transparent,rgba(0,0,0,.07),transparent)}
