:root {
  /* --- n0se Animation Timings --- */
  --n0se-breathe-duration: 5s;
  --n0se-blink-duration: 4s;
  --n0se-arm-duration: 5s;
  --n0se-tail-duration: 8s;

  /* --- roamcell Animation Timings --- */
  --roamcell-breathe-duration: 5.3s;
  --roamcell-blink-duration: 4s;
  --roamcell-blink-delay: -1.5s;
  --roamcell-arm-duration: 5.3s;
  --roamcell-arm-delay: 0s;

  /* --- entropic Animation Timings --- */
  --entropic-breathe-duration: 5.5s;
  --entropic-blink-duration: 4s;
  --entropic-blink-delay: -3s;
  --entropic-arm-duration: 5.5s;
  --entropic-arm-delay: 0s;
}


/* --- Idle breathing/rocking animation --- */
#root_n0se #body {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: rootBreathe_n0se var(--n0se-breathe-duration) ease-in-out infinite;
}

#root_n0se #head {
  animation: headBreathe_n0se var(--n0se-breathe-duration) ease-in-out infinite;
}

#root_roamcell #body {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: rootBreathe_roamcell var(--roamcell-breathe-duration) ease-in-out infinite;
}

#root_roamcell #head {
  animation: headBreathe_roamcell var(--roamcell-breathe-duration) ease-in-out infinite;
}

#root_entropic #body {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: rootBreathe_entropic var(--entropic-breathe-duration) ease-in-out infinite;
}

#root_entropic #head {
  animation: headBreathe_entropic var(--entropic-breathe-duration) ease-in-out infinite;
}

@keyframes rootBreathe_n0se {

  0%,
  100% {
    /*transform: scaleY(1);*/
    translate: 0 0;

  }

  50% {
    /*transform: scaleY(1.03);*/
    /* Adjust this pixel value to perfectly match the body's expansion */
    translate: 0 -10px;

  }
}

@keyframes headBreathe_n0se {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    /* Adjust this pixel value to perfectly match the body's expansion */
    translate: 0 -15px;
  }
}



@keyframes rootBreathe_roamcell {

  0%,
  100% {
    /*transform: scaleY(1);*/
    translate: 0 0;

  }

  50% {
    /*transform: scaleY(1.03);*/
    /* Adjust this pixel value to perfectly match the body's expansion */
    translate: 0 -20px;

  }
}

@keyframes headBreathe_roamcell {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    /* Adjust this pixel value to perfectly match the body's expansion */
    translate: 0 -15px;
  }
}

@keyframes rootBreathe_entropic {

  0%,
  100% {
    /*transform: scaleY(1);*/
    translate: 0 0;

  }

  50% {
    /*transform: scaleY(1.03);*/
    /* Adjust this pixel value to perfectly match the body's expansion */
    translate: 0 -20px;

  }
}

@keyframes headBreathe_entropic {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    /* Adjust this pixel value to perfectly match the body's expansion */
    translate: 0 -15px;
  }
}


/* --- Blinking --- */
#root_n0se #eyes {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: blink var(--n0se-blink-duration) infinite, headBreathe_n0se var(--n0se-breathe-duration) ease-in-out infinite;
}

#root_roamcell #eyes {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: roamcellVerticalBlink var(--roamcell-blink-duration) var(--roamcell-blink-delay) infinite,
    headBreathe_roamcell var(--roamcell-breathe-duration) ease-in-out infinite;
}

#root_entropic #eyes {
  transform-box: fill-box;
  animation: headBreathe_entropic var(--entropic-breathe-duration) ease-in-out infinite;
}

#root_entropic #left_eye {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: entropicVerticalBlink var(--entropic-blink-duration) var(--entropic-blink-delay) infinite;
}

/* --- Arm Animations --- */

/* n0se */
#root_n0se #left_arm {
  transform-box: fill-box;
  transform-origin: top left;
  animation: n0seArmSwingLeft var(--n0se-arm-duration) ease-in-out infinite, headBreathe_n0se var(--n0se-breathe-duration) ease-in-out infinite;
}

#root_n0se #right_arm {
  transform-box: fill-box;
  transform-origin: top right;
  animation: n0seArmSwingRight var(--n0se-arm-duration) ease-in-out infinite, headBreathe_n0se var(--n0se-breathe-duration) ease-in-out infinite;
}

/* roamcell */
#root_roamcell #left_arm {
  transform-box: fill-box;
  transform-origin: top left;
  animation: roamcellArmSwingLeft var(--roamcell-arm-duration) ease-in-out var(--roamcell-arm-delay) infinite,
    headBreathe_roamcell var(--roamcell-breathe-duration) ease-in-out infinite;
}

#root_roamcell #right_arm {
  transform-box: fill-box;
  transform-origin: top right;
  animation: roamcellArmSwingRight var(--roamcell-arm-duration) ease-in-out var(--roamcell-arm-delay) infinite,
    headBreathe_roamcell var(--roamcell-breathe-duration) ease-in-out infinite;
}

/* entropic */
#root_entropic #left_arm {
  transform-box: fill-box;
  transform-origin: top left;
  animation: entropicArmSwingLeft var(--entropic-arm-duration) ease-in-out var(--entropic-arm-delay) infinite,
    headBreathe_entropic var(--entropic-breathe-duration) ease-in-out infinite;
}

#root_entropic #right_arm {
  transform-box: fill-box;
  transform-origin: top right;
  animation: entropicArmSwingRight var(--entropic-arm-duration) ease-in-out var(--entropic-arm-delay) infinite,
    headBreathe_entropic var(--entropic-breathe-duration) ease-in-out infinite;
}

/* n0se Tail */
#root_n0se #tail {
  /*transform-origin: top center;*/
  /*transform-box: fill-box;*/
  animation: n0seTailSway var(--n0se-tail-duration) ease-in-out infinite;
}

/* --- KEYFRAMES --- */

@keyframes n0seTailSway {

  0%,
  100% {
    transform: matrix(5.0421837, 0, 0, 5.1101613, -193.05709, -123.66408) rotate(0deg);
  }

  50% {
    transform: matrix(5.0421837, 0, 0, 5.1101613, -193.05709, -123.66408) rotate(2deg);
  }
}

@keyframes n0seArmSwingLeft {

  0%,
  100% {
    transform: translate(-0.003px, 0.002px) rotate(0deg);
  }

  50% {
    transform: translate(-0.003px, 0.002px) rotate(4deg) translateX(3px);
  }
}

@keyframes n0seArmSwingRight {

  0%,
  100% {
    transform: translate(-0.003px, 0.002px) rotate(0deg);
  }

  50% {
    transform: translate(-0.003px, 0.002px) rotate(-5deg) translateX(-3px);
  }
}

@keyframes roamcellArmSwingLeft {

  0%,
  100% {
    transform: translate(-526px, -243px) rotate(0deg);
  }

  50% {
    transform: translate(-526px, -243px) rotate(4deg);
  }
}

@keyframes roamcellArmSwingRight {

  0%,
  100% {
    transform: translate(-526px, -243px) rotate(0deg);
  }

  50% {
    transform: translate(-526px, -243px) rotate(-5deg);
  }
}

@keyframes entropicArmSwingLeft {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(4deg) translateX(3px);
  }
}

@keyframes entropicArmSwingRight {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-5deg) translateX(-3px);
  }
}

@keyframes blink {

  0%,
  92%,
  100% {
    transform: scaleX(1);
  }

  93% {
    transform: scaleX(0.1);
  }

  95% {
    transform: scaleX(1);
  }
}

@keyframes roamcellVerticalBlink {

  0%,
  92%,
  100% {
    transform: translate(-526px, -243px) scaleY(1);
  }

  93% {
    transform: translate(-526px, -243px) scaleY(0.1);
  }

  95% {
    transform: translate(-526px, -243px) scaleY(1);
  }
}

@keyframes entropicVerticalBlink {

  0%,
  92%,
  100% {
    transform: translate(-423px, -465.438px) scaleY(1);
  }

  93% {
    transform: translate(-423px, -465.438px) scaleY(0.1);
  }

  95% {
    transform: translate(-423px, -465.438px) scaleY(1);
  }
}

@keyframes verticalBlink {

  0%,
  92%,
  100% {
    transform: scaleY(1);
  }

  93% {
    transform: scaleY(0.1);
  }

  95% {
    transform: scaleY(1);
  }
}


/* space */


#starfieldCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
}

.hero-content h1 {
  font-size: 3rem;
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
}

#hero-section-container {
  /* Darken the nebula in sync with the ambient cycle WITHOUT a separate layer:
     blend the image against an animated grey (multiply). White = image untouched
     (bright phase), black = fully dark (trough). background-blend-mode only
     affects this element's own background — never its child content — so the hero
     content doesn't shift on mobile. qsNebula keyframes live in hero_artists.php. */
  background-color: #ffffff;
  background-image: url("./../img/nebula.png");
  background-size: cover;
  background-blend-mode: multiply;
  animation: qsNebula var(--qs-ambient-speed, 24s) ease-in-out infinite;
}

/* Nebula Background Gradient */
#hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000, #1e0033, #4a00e0, #8e2de2, #ff0084);
  background-size: 400% 400%;
  /* moveGradient shifts the colours; qsAmbient adds the always-on hue drift +
     dim-to-black so this violet actually darkens with the room (it's the layer
     that was keeping the background from ever going dark). qsAmbient keyframes
     live in the hero_artists.php <style>. */
  animation:
    moveGradient 25s ease infinite,
    qsAmbient var(--qs-ambient-speed, 24s) ease-in-out infinite;
  z-index: 0;
  opacity: 0.4;
  /* Softens the gradient */
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* --- Character Color Dynamics --- */

/* n0se */
:root.lighting-active .n0se-cls-body {
  fill: var(--n0se-body) !important;
}

:root.lighting-active .n0se-cls-dark {
  fill: var(--n0se-dark) !important;
}

:root.lighting-active .n0se-cls-dark-tail {
  fill: var(--n0se-body) !important;
}

:root.lighting-active .n0se-cls-light {
  fill: var(--n0se-light) !important;
}

/* n0se Eyes */
:root.lighting-active .n0se-cls-eyes {
  fill: var(--n0se-eyes) !important;
}

:root.lighting-active.has-eye-glow .n0se-cls-eyes {
  /* Stacked shadows using n0se's specific eye color! */
  filter: drop-shadow(0 0 3px var(--n0se-eyes)) drop-shadow(0 0 10px var(--n0se-eyes));
}

/* roamcell */
:root.lighting-active .roamcell_cls-body {
  fill: var(--roamcell-body) !important;
}

:root.lighting-active .roamcell_cls-dark {
  fill: var(--roamcell-dark) !important;
}

:root.lighting-active .roamcell_cls-light {
  fill: var(--roamcell-light) !important;
}

/* roamcell Eyes */
:root.lighting-active .roamcell_cls-eyes {
  fill: var(--roamcell-eyes) !important;
}

:root.lighting-active.has-eye-glow .roamcell_cls-eyes {
  filter: drop-shadow(0 0 3px var(--roamcell-eyes)) drop-shadow(0 0 10px var(--roamcell-eyes));
}

/* entropic */
:root.lighting-active .entropic-cls-body {
  fill: var(--entropic-body) !important;
}

:root.lighting-active .entropic-cls-dark {
  fill: var(--entropic-dark) !important;
}

:root.lighting-active .entropic-cls-light {
  fill: var(--entropic-light) !important;
}

/* entropic Eyes */
:root.lighting-active .entropic-cls-eyes {
  fill: var(--entropic-eyes) !important;
}

:root.lighting-active.has-eye-glow .entropic-cls-eyes {
  filter: drop-shadow(0 0 3px var(--entropic-eyes)) drop-shadow(0 0 10px var(--entropic-eyes));
}

/* ============================================
   DOUBLE GRAIN — film-like layered shimmer
   ============================================ */

/* Slow base layer — body texture, "film stock" weight */
.hero-grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;

  background-image: url('../img/noise-strip.png');
  background-repeat: repeat;
  background-size: 256px 1536px;

  mix-blend-mode: soft-light;
  opacity: 0.5;

  animation: grain-shimmer-slow 0.5s steps(6) infinite;
  will-change: background-position;
}

/* Fast top layer — high-frequency shimmer, "live" feel */
.hero-grain-overlay-fast {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 21;
  /* Just above the slow grain */

  background-image: url('../img/noise-strip2b.png');
  background-repeat: repeat;
  background-size: 256px 1536px;

  mix-blend-mode: multiply;
  opacity: 0.95;

  animation: grain-shimmer-fast 0.08s steps(6) infinite;
  will-change: background-position;
}

@keyframes grain-shimmer-slow {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -1536px;
  }
}

@keyframes grain-shimmer-fast {

  /* Offset start so the two layers are decorrelated from frame 1 */
  from {
    background-position: 128px 0;
  }

  to {
    background-position: 128px -1536px;
  }
}

/* Accessibility — flatten to single static layer for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {

  .hero-grain-overlay,
  .hero-grain-overlay-fast {
    animation: none;
  }

  .hero-grain-overlay-fast {
    display: none;
    /* Single static grain is plenty when not animating */
  }
}

/* Local Grain (on characters) via a pseudo-element */
/*
.artist-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../img/noise.gif');
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 5;
}
*/

/* Activate local grain opacity based on lighting state */
:root.lighting-active.has-grain-local .artist-panel.pos-left::after,
:root.lighting-active.has-grain-local .artist-panel.pos-right::after,
:root.lighting-active.has-grain-local .artist-panel.pos-center::after {
  /* opacity: 0.15;*/
  /* Adjust to match desired intensity */
}