/* Decorative effects only. All site content remains usable without this file or JS. */
:root { --fx-styles-ready: 1; }

.fx-host { position: relative; isolation: isolate; }
.fx-electric {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .9;
  mask-image: linear-gradient(90deg, transparent 18%, #0008 43%, #000 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #0008 43%, #000 62%);
}
.fx-host .hero-copy, .fx-host .smm-intro-copy { position: relative; z-index: 2; }
.fx-host .smm-intro-art { z-index: 1; }

.fx-glow-card { position: relative; isolation: isolate; }
.fx-card-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--fx-x, 50%) var(--fx-y, 30%), #d175ff20, #9b5cff0b 38%, transparent 70%);
  box-shadow: inset 0 0 0 1px #c396ff32;
  transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .fx-glow-card[data-fx-hover] > .fx-card-glow { opacity: 1; }
}
.fx-glow-card:focus-within > .fx-card-glow { opacity: .6; }

.fx-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f9f5ff;
  background: radial-gradient(ellipse at 50% 44%, #41206366, transparent 50%), #0d0915;
  opacity: 1;
  visibility: visible;
  font-family: inherit;
  transition: opacity .26s ease, visibility .26s ease;
  /* Independent failsafe: the overlay stops painting and receiving input by 3s. */
  animation: fx-loader-failsafe .2s 2.8s forwards;
}
.fx-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(#ae7bff08 1px, transparent 1px), linear-gradient(90deg, #ae7bff08 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse, #000, transparent 72%);
}
.fx-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.fx-loader-inner { position: relative; width: min(420px, calc(100% - 40px)); text-align: center; }
.fx-loader-emblem { width: 226px; height: 226px; position: relative; display: grid; place-items: center; margin: 0 auto 33px; }
.fx-loader-emblem::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #b46dff35, #9b5cff0c 52%, transparent 70%);
  filter: blur(10px);
}
.fx-loader-logo {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #bc88ff40, 0 0 48px #9b5cff30;
  animation: fx-logo-arrive .65s cubic-bezier(.16, 1, .3, 1) both;
}
.fx-loader-orbit { position: absolute; inset: 25px; border: 1px solid #ac75ff35; border-radius: 50%; }
.fx-loader-orbit::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-top-color: #d175ff;
  border-right-color: #9b5cff66;
  border-radius: inherit;
  filter: drop-shadow(0 0 5px #9b5cff);
}
.fx-loader-orbit::after { content: ''; position: absolute; width: 5px; height: 5px; top: 24px; right: 20px; background: #e9caff; box-shadow: 0 0 12px #d175ff; border-radius: 50%; }
.fx-loader-orbit-one { animation: fx-orbit-turn 2.7s linear infinite; }
.fx-loader-orbit-two { inset: 0; border-style: dashed; border-color: #916bb532; animation: fx-orbit-turn 7s linear infinite reverse; }
.fx-loader-orbit-two::before { inset: -1px; border-width: 1px; border-top-color: #71d8ff; border-right-color: transparent; }
.fx-loader-orbit-two::after { top: 31px; right: 31px; background: #71d8ff; box-shadow: 0 0 10px #71d8ff; }
.fx-loader-electric { position: absolute; width: 280px; height: 280px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.fx-loader-electric path { stroke: #c491ff; stroke-width: 1.5; filter: drop-shadow(0 0 4px #9b5cff); }
.fx-loader-electric path:last-child { stroke: #a9e7ff; stroke-width: 1; stroke-dasharray: 40 420; animation: fx-electric-pass 1.3s linear infinite; }
.fx-loader-brand { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.9px; }
.fx-loader-brand span { color: #c089ff; }
.fx-loader-tagline { margin: 12px 0 0; color: #b4a5c8; font-size: 12px; line-height: 1.6; letter-spacing: .1px; }
.fx-loader-line { width: 102px; height: 2px; overflow: hidden; margin: 26px auto 0; border-radius: 2px; background: #9b5cff20; }
.fx-loader-line::after { content: ''; display: block; height: 100%; width: 52%; border-radius: inherit; background: linear-gradient(90deg, transparent, #d175ff, #71d8ff); animation: fx-loading-line 1s ease-in-out infinite; }
.fx-loader-skip {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid #b592df45;
  border-radius: 999px;
  background: #251831;
  color: #d4c4e9;
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.fx-loader-skip:hover { background: #372047; border-color: #bc88ff; color: #fff; }
.fx-loader-skip:focus-visible { outline: 2px solid #71d8ff; outline-offset: 5px; }
.fx-loader-skip span { margin-left: 10px; color: #a994bc; font-size: 9px; }

@keyframes fx-orbit-turn { to { transform: rotate(360deg); } }
@keyframes fx-electric-pass { to { stroke-dashoffset: -460; } }
@keyframes fx-logo-arrive { from { opacity: .3; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes fx-loading-line { from { transform: translateX(-105%); } to { transform: translateX(210%); } }
@keyframes fx-loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

html.fx-document-hidden .fx-loader *, html.fx-document-hidden .fx-loader *::before, html.fx-document-hidden .fx-loader *::after { animation-play-state: paused; }
@media (max-width: 620px) {
  .fx-electric { opacity: .58; mask-image: linear-gradient(90deg, transparent 22%, #000 90%); -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 90%); }
  .fx-loader-emblem { transform: scale(.9); margin-bottom: 19px; }
  .fx-loader-brand { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-loader, .fx-electric, .fx-card-glow { display: none !important; }
  .fx-loader *, .fx-loader *::before, .fx-loader *::after { animation: none !important; transition: none !important; }
}
@media print { .fx-loader, .fx-electric, .fx-card-glow { display: none !important; } }
