/*
 * SPUDZWARE V1.22.2 — HALLOWEEN CASTLE MOTION 2026
 * MOTION-ONLY additive layer.
 * No layout, copy, colors, routes, IDs, backend calls or application logic are changed here.
 */

/* Existing castle artwork: extremely slow camera drift. */
.sw-halloween-2026 #home .hero-v35-home .hardware{
  animation: sw-hw-castle-drift 34s ease-in-out infinite alternate;
  will-change: background-position;
}

/* Existing fog asset: make the motion easier to notice without changing the artwork. */
.sw-halloween-2026 #home .hero-v35-home .hardware::after{
  animation: sw-hw-fog-drift 32s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

/* Existing bat asset: occasional pass rather than constant movement. */
.sw-halloween-2026 #home .hero-v35-home::after{
  animation: sw-hw-bat-pass 44s linear infinite !important;
  will-change: transform, opacity;
}

/* The orange status dot already exists; only give it a soft breathing motion. */
.sw-halloween-2026 #home .hero-v35-home .status-pill > span{
  animation: sw-hw-status-breathe 3.4s ease-in-out infinite;
}

/* Existing background art on dashboard/account/etc. drifts a few pixels. */
.sw-halloween-2026 .page:not(#home)::before{
  animation: sw-hw-page-scene-drift 42s ease-in-out infinite alternate;
  will-change: background-position;
}

/* Create-server hero uses the same castle image; move only its background position. */
.sw-halloween-2026 #create .create-hero-v3557{
  animation: sw-hw-create-scene-drift 38s ease-in-out infinite alternate;
  will-change: background-position;
}

/* Existing auth castle scene receives the same subtle ambient movement. */
.sw-halloween-2026 .spw-auth-slider{
  animation: sw-hw-auth-scene-drift 40s ease-in-out infinite alternate;
  will-change: background-position;
}

/* Motion on existing interactions only — appearance and colors are unchanged at rest. */
.sw-halloween-2026 :is(.primary-btn,.secondary-btn,.client-btn,.header-auth-btn,
  .loader-card,.version-card,.addon-card,.plan-choice,.sw58-server-tile,
  .server-panel-tab,.account-card-v28,.feature-card,.knowledge-card-v3542){
  transition-property: transform, box-shadow, border-color, background-color, color, opacity;
  transition-duration: .22s;
  transition-timing-function: ease;
}

.sw-halloween-2026 :is(.primary-btn,.secondary-btn,.client-btn,.header-auth-btn):hover:not(:disabled):not([aria-disabled="true"]){
  transform: translateY(-2px);
}

.sw-halloween-2026 :is(.loader-card,.version-card,.addon-card,.plan-choice,.sw58-server-tile,
  .account-card-v28,.feature-card,.knowledge-card-v3542):hover{
  transform: translateY(-2px);
}

/* Keep keyboard/click interaction feeling responsive without altering dimensions. */
.sw-halloween-2026 :is(.primary-btn,.secondary-btn,.client-btn,.header-auth-btn):active:not(:disabled){
  transform: translateY(0) scale(.985);
  transition-duration: .08s;
}

@keyframes sw-hw-castle-drift{
  0%   { background-position: 100% 50%; }
  50%  { background-position: 99.2% 49.4%; }
  100% { background-position: 98.5% 50.4%; }
}

@keyframes sw-hw-fog-drift{
  0%   { transform: translate3d(-2.5%, 2px, 0) scaleX(1.015); opacity: .12; }
  50%  { transform: translate3d(1%, -5px, 0) scaleX(1.025); opacity: .16; }
  100% { transform: translate3d(3.5%, -2px, 0) scaleX(1.015); opacity: .13; }
}

@keyframes sw-hw-bat-pass{
  0%, 66% { opacity:0; transform:translate3d(-70px,34px,0) scale(.68) rotate(-2deg); }
  69%     { opacity:.18; }
  75%     { opacity:.28; transform:translate3d(55px,5px,0) scale(.76) rotate(1deg); }
  82%     { opacity:.28; transform:translate3d(220px,-30px,0) scale(.88) rotate(-1deg); }
  88%     { opacity:0; transform:translate3d(390px,-62px,0) scale(.96) rotate(2deg); }
  100%    { opacity:0; transform:translate3d(390px,-62px,0) scale(.96) rotate(2deg); }
}

@keyframes sw-hw-status-breathe{
  0%,100% { transform:scale(1); opacity:.86; }
  50%     { transform:scale(1.15); opacity:1; }
}

@keyframes sw-hw-page-scene-drift{
  from { background-position:100% 0; }
  to   { background-position:calc(100% - 10px) 8px; }
}

@keyframes sw-hw-create-scene-drift{
  from { background-position:right 41%; }
  to   { background-position:calc(100% - 9px) 42%; }
}

@keyframes sw-hw-auth-scene-drift{
  from { background-position:79% center; }
  to   { background-position:77.5% calc(50% + 5px); }
}

/* Existing motion controls and browser visibility state pause this layer too. */
html.sw-motion-paused .sw-halloween-2026 #home .hero-v35-home .hardware,
html.sw-motion-paused .sw-halloween-2026 #home .hero-v35-home .hardware::after,
html.sw-motion-paused .sw-halloween-2026 #home .hero-v35-home::after,
html.sw-motion-paused .sw-halloween-2026 #home .hero-v35-home .status-pill > span,
html.sw-motion-paused .sw-halloween-2026 .page:not(#home)::before,
html.sw-motion-paused .sw-halloween-2026 #create .create-hero-v3557,
html.sw-motion-paused .sw-halloween-2026 .spw-auth-slider,
html.sw-document-hidden .sw-halloween-2026 #home .hero-v35-home .hardware,
html.sw-document-hidden .sw-halloween-2026 #home .hero-v35-home .hardware::after,
html.sw-document-hidden .sw-halloween-2026 #home .hero-v35-home::after,
html.sw-document-hidden .sw-halloween-2026 #home .hero-v35-home .status-pill > span,
html.sw-document-hidden .sw-halloween-2026 .page:not(#home)::before,
html.sw-document-hidden .sw-halloween-2026 #create .create-hero-v3557,
html.sw-document-hidden .sw-halloween-2026 .spw-auth-slider,
.sw-halloween-2026 .sw-scene-sleep .hardware,
.sw-halloween-2026 .sw-scene-sleep .hardware::after,
.sw-halloween-2026 .sw-scene-sleep::after{
  animation-play-state:paused !important;
}

/* Mobile keeps the artwork/layout exactly as it is; only fog gets a tiny drift. */
@media(max-width:760px){
  .sw-halloween-2026 #home .hero-v35-home .hardware,
  .sw-halloween-2026 .page:not(#home)::before,
  .sw-halloween-2026 #create .create-hero-v3557,
  .sw-halloween-2026 .spw-auth-slider{
    animation:none !important;
  }
  .sw-halloween-2026 #home .hero-v35-home .hardware::after{
    animation:sw-hw-fog-drift-mobile 40s ease-in-out infinite alternate !important;
  }
  .sw-halloween-2026 #home .hero-v35-home::after{display:none!important;}
}

@keyframes sw-hw-fog-drift-mobile{
  from { transform:translate3d(-1.5%,0,0); }
  to   { transform:translate3d(1.5%,-3px,0); }
}

@media(prefers-reduced-motion:reduce){
  .sw-halloween-2026 #home .hero-v35-home .hardware,
  .sw-halloween-2026 #home .hero-v35-home .hardware::after,
  .sw-halloween-2026 #home .hero-v35-home::after,
  .sw-halloween-2026 #home .hero-v35-home .status-pill > span,
  .sw-halloween-2026 .page:not(#home)::before,
  .sw-halloween-2026 #create .create-hero-v3557,
  .sw-halloween-2026 .spw-auth-slider{
    animation:none !important;
  }
  .sw-halloween-2026 :is(.primary-btn,.secondary-btn,.client-btn,.header-auth-btn,
    .loader-card,.version-card,.addon-card,.plan-choice,.sw58-server-tile,
    .server-panel-tab,.account-card-v28,.feature-card,.knowledge-card-v3542){
    transition:none !important;
    transform:none !important;
  }
}


/* ------------------------------------------------------------------
   V1.22.3 motion refinement
   - pumpkins flicker only occasionally
   - candles get a living flame/glow effect
   - bats pass through the hero like cinematic flybys
   ------------------------------------------------------------------ */

/* Override the home scene with more natural, less constant decorative motion. */
.sw-halloween-2026 #home .hero-v35-home::after{
  animation: sw-hw-bat-flyby-cinematic 58s linear infinite !important;
  transform-origin: center center;
}

/* Reuse the existing hidden pseudo-elements as light overlays on the artwork.
   These do not change layout or content — they only add glow/flicker in-place. */
.sw-halloween-2026 #home .hero-v35-home .hardware::before{
  content:"";
  display:block !important;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 74.6% 77.2%, rgba(255,190,95,.78) 0 0.7%, rgba(255,144,37,.48) 0.7%, rgba(255,113,14,.22) 1.8%, transparent 4%),
    radial-gradient(circle at 80.2% 79.5%, rgba(255,190,95,.70) 0 0.6%, rgba(255,142,34,.44) 0.6%, rgba(255,110,14,.20) 1.5%, transparent 3.5%),
    radial-gradient(circle at 86.0% 75.4%, rgba(255,194,112,.56) 0 0.45%, rgba(255,148,49,.30) 0.45%, rgba(255,115,18,.13) 1.2%, transparent 2.4%),
    radial-gradient(circle at 69.0% 79.4%, rgba(255,185,95,.44) 0 0.35%, rgba(255,134,35,.18) 0.35%, transparent 1.8%);
  mix-blend-mode:screen;
  filter:blur(.4px) drop-shadow(0 0 9px rgba(255,134,28,.17));
  animation: sw-hw-pumpkin-flicker 19s steps(1,end) infinite;
  opacity:.92;
}

.sw-halloween-2026 #home .hero-v35-home::before{
  content:"";
  display:block !important;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 76.6% 60.8%, rgba(255,217,150,.88) 0 0.26%, rgba(255,183,92,.68) 0.26%, rgba(255,138,30,.26) 1.0%, transparent 2.5%),
    radial-gradient(circle at 78.9% 60.1%, rgba(255,218,147,.76) 0 0.22%, rgba(255,171,79,.58) 0.22%, rgba(255,133,26,.22) 0.8%, transparent 2.1%),
    radial-gradient(circle at 83.4% 58.5%, rgba(255,220,160,.72) 0 0.22%, rgba(255,170,74,.52) 0.22%, rgba(255,127,24,.20) 0.76%, transparent 2.0%),
    radial-gradient(circle at 72.8% 61.6%, rgba(255,216,152,.66) 0 0.19%, rgba(255,167,76,.44) 0.19%, rgba(255,123,23,.18) 0.7%, transparent 1.8%);
  mix-blend-mode:screen;
  filter:blur(.25px) drop-shadow(0 0 8px rgba(255,173,82,.20));
  animation: sw-hw-candle-flicker 7.8s linear infinite;
  opacity:.82;
}

@keyframes sw-hw-bat-flyby-cinematic{
  0%, 70% {
    opacity:0;
    transform:translate3d(-160px,34px,0) scale(.56) rotate(-5deg);
  }
  72% {
    opacity:.10;
    transform:translate3d(-85px,18px,0) scale(.60) rotate(-3deg);
  }
  76% {
    opacity:.23;
    transform:translate3d(35px,-6px,0) scale(.72) rotate(1deg);
  }
  80% {
    opacity:.34;
    transform:translate3d(170px,-26px,0) scale(.82) rotate(2deg);
  }
  84% {
    opacity:.28;
    transform:translate3d(310px,-54px,0) scale(.92) rotate(-1deg);
  }
  88%,100% {
    opacity:0;
    transform:translate3d(470px,-92px,0) scale(1.02) rotate(3deg);
  }
}

/* Occasional pumpkin flicker rather than constant pulsing. Most of the time
   they stay nearly steady, with short irregular candle-like jumps. */
@keyframes sw-hw-pumpkin-flicker{
  0%, 6%, 13%, 24%, 31%, 45%, 57%, 68%, 79%, 88%, 100% { opacity:.92; filter:blur(.4px) brightness(1); }
  7% { opacity:.78; filter:blur(.45px) brightness(.88); }
  8% { opacity:1; filter:blur(.35px) brightness(1.16); }
  25% { opacity:.83; filter:blur(.45px) brightness(.92); }
  26% { opacity:1; filter:blur(.35px) brightness(1.18); }
  27% { opacity:.88; filter:blur(.40px) brightness(.96); }
  46% { opacity:.76; filter:blur(.48px) brightness(.86); }
  47% { opacity:1; filter:blur(.34px) brightness(1.20); }
  58% { opacity:.82; filter:blur(.42px) brightness(.92); }
  59% { opacity:.98; filter:blur(.35px) brightness(1.12); }
  60% { opacity:.90; filter:blur(.4px) brightness(.98); }
  80% { opacity:.80; filter:blur(.45px) brightness(.90); }
  81% { opacity:1; filter:blur(.34px) brightness(1.14); }
  89% { opacity:.84; filter:blur(.42px) brightness(.94); }
  90% { opacity:1; filter:blur(.34px) brightness(1.16); }
}

/* Candle flames stay alive more often than pumpkins, with tiny shimmers and
   brief random dips/spikes instead of a perfectly even pulse. */
@keyframes sw-hw-candle-flicker{
  0%, 8%, 15%, 23%, 32%, 39%, 47%, 57%, 66%, 74%, 83%, 91%, 100% { opacity:.82; filter:blur(.25px) brightness(1); }
  3%  { opacity:.90; filter:blur(.18px) brightness(1.12); }
  4%  { opacity:.76; filter:blur(.30px) brightness(.92); }
  10% { opacity:.88; filter:blur(.20px) brightness(1.10); }
  11% { opacity:.79; filter:blur(.28px) brightness(.95); }
  17% { opacity:.93; filter:blur(.18px) brightness(1.16); }
  18% { opacity:.73; filter:blur(.32px) brightness(.90); }
  27% { opacity:.89; filter:blur(.20px) brightness(1.08); }
  28% { opacity:.80; filter:blur(.26px) brightness(.96); }
  36% { opacity:.95; filter:blur(.16px) brightness(1.18); }
  37% { opacity:.78; filter:blur(.30px) brightness(.94); }
  49% { opacity:.90; filter:blur(.18px) brightness(1.10); }
  50% { opacity:.74; filter:blur(.31px) brightness(.90); }
  62% { opacity:.92; filter:blur(.18px) brightness(1.14); }
  63% { opacity:.79; filter:blur(.28px) brightness(.95); }
  70% { opacity:.88; filter:blur(.20px) brightness(1.09); }
  71% { opacity:.77; filter:blur(.29px) brightness(.93); }
  86% { opacity:.94; filter:blur(.17px) brightness(1.17); }
  87% { opacity:.76; filter:blur(.30px) brightness(.92); }
  95% { opacity:.89; filter:blur(.19px) brightness(1.11); }
  96% { opacity:.78; filter:blur(.28px) brightness(.94); }
}

/* Pause the new artwork-light layers together with the rest of the motion. */
html.sw-motion-paused .sw-halloween-2026 #home .hero-v35-home::before,
html.sw-motion-paused .sw-halloween-2026 #home .hero-v35-home .hardware::before,
html.sw-document-hidden .sw-halloween-2026 #home .hero-v35-home::before,
html.sw-document-hidden .sw-halloween-2026 #home .hero-v35-home .hardware::before,
.sw-halloween-2026 .sw-scene-sleep::before,
.sw-halloween-2026 .sw-scene-sleep .hardware::before{
  animation-play-state:paused !important;
}

@media(max-width:760px){
  .sw-halloween-2026 #home .hero-v35-home::before,
  .sw-halloween-2026 #home .hero-v35-home .hardware::before{
    animation-duration:11s, 22s;
  }
}

@media(prefers-reduced-motion:reduce){
  .sw-halloween-2026 #home .hero-v35-home::before,
  .sw-halloween-2026 #home .hero-v35-home .hardware::before{
    animation:none !important;
    opacity:.86;
  }
}