/*!
 * background-effects.css
 * Promptifi Core — Passive Ambient Reactor Field
 *
 * CODE STATUS: SYMBIOTIC CODE
 * SCOPE:
 * - gud-girl.com
 * - gud-boy.com
 *
 * COPY RULE:
 * - Use this exact file on both sites.
 *
 * TARGET:
 * BACKGROUND-ASSET-DEPLOYER-AND-COMPONENTS/background.css/background-effects.css
 *
 * FULL FILE REWRITE — STAR NEST AMBIANCE / PINK BLUE LOVE FIELD / HEART PARTICLE ATMOSPHERE / NOT OVERWHELMING
 */

/* =========================================================
   001 — ROOT AMBIENT FIELD
========================================================= */

.pf-background-asset {
  --pf-bg-hot: 255, 20, 157;
  --pf-bg-primary: 255, 90, 184;
  --pf-bg-soft: 255, 150, 220;
  --pf-bg-ice: 116, 214, 255;
  --pf-bg-white: 255, 238, 252;
  --pf-bg-counter: 0, 226, 255;

  --pf-bg-shell: #050006;
  --pf-bg-shell-secondary: #09000b;
  --pf-bg-black: #000;

  --pf-bg-image-height-desktop: 178vh;
  --pf-bg-image-height-lg: 164vh;
  --pf-bg-image-height-xl: 152vh;
  --pf-bg-image-height-xxl: 146vh;

  --pf-bg-image-mobile-width: 142vw;
  --pf-bg-image-mobile-height: 134vh;
  --pf-bg-image-y-offset: -50%;

  --pf-bg-shader-opacity: 0.34;
  --pf-bg-shader-opacity-mobile: 0.24;
  --pf-bg-heart-opacity: 0.16;
  --pf-bg-heart-opacity-mobile: 0.09;

  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  contain: layout paint style;

  background:
    radial-gradient(circle at 50% 16%, rgba(var(--pf-bg-white), 0.08), transparent 28%),
    radial-gradient(circle at 50% 30%, rgba(var(--pf-bg-hot), 0.10), transparent 40%),
    radial-gradient(circle at 50% 58%, rgba(var(--pf-bg-primary), 0.07), transparent 48%),
    radial-gradient(circle at 50% 88%, rgba(var(--pf-bg-counter), 0.045), transparent 52%),
    linear-gradient(
      180deg,
      var(--pf-bg-shell) 0%,
      var(--pf-bg-shell-secondary) 52%,
      var(--pf-bg-black) 100%
    );

  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   002 — GUD-BOY COLOR OVERRIDE
========================================================= */

.pf-background-asset--gud-boy {
  --pf-bg-hot: 32, 168, 255;
  --pf-bg-primary: 99, 199, 255;
  --pf-bg-soft: 150, 230, 255;
  --pf-bg-ice: 222, 255, 255;
  --pf-bg-white: 238, 248, 255;
  --pf-bg-counter: 255, 20, 157;

  --pf-bg-shell: #020610;
  --pf-bg-shell-secondary: #01040a;
  --pf-bg-black: #000104;

  --pf-bg-shader-opacity: 0.30;
  --pf-bg-shader-opacity-mobile: 0.22;
}

/* =========================================================
   003 — GUD-GIRL COLOR OVERRIDE
========================================================= */

.pf-background-asset--gud-girl {
  --pf-bg-hot: 255, 20, 157;
  --pf-bg-primary: 255, 90, 184;
  --pf-bg-soft: 255, 150, 220;
  --pf-bg-ice: 116, 214, 255;
  --pf-bg-white: 255, 238, 252;
  --pf-bg-counter: 0, 226, 255;

  --pf-bg-shell: #050006;
  --pf-bg-shell-secondary: #09000b;
  --pf-bg-black: #000;
}

/* =========================================================
   004 — BOX MODEL NORMALIZATION
========================================================= */

.pf-background-asset,
.pf-background-asset *,
.pf-background-asset *::before,
.pf-background-asset *::after {
  box-sizing: border-box;
}

/* =========================================================
   005 — GENERIC LAYER CONTRACT
========================================================= */

.pf-background-asset__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* =========================================================
   006 — STAR NEST SHADER LAYER
========================================================= */

.pf-background-asset__layer--shader,
[data-star-nest-layer="true"] {
  z-index: 3;
  opacity: var(--pf-bg-shader-opacity);
  mix-blend-mode: screen;
  filter:
    saturate(1.08)
    contrast(0.94)
    brightness(0.86);
  contain: layout paint style;
}

.pf-background-asset__shader-canvas,
[data-background-shader-canvas="true"],
[data-star-nest-canvas="true"] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  opacity: 0.72;
  pointer-events: none;
  transform: translateZ(0);
}

.pf-background-asset--shader-ready .pf-background-asset__layer--shader {
  opacity: var(--pf-bg-shader-opacity);
}

.pf-background-asset--shader-paused .pf-background-asset__layer--shader {
  opacity: calc(var(--pf-bg-shader-opacity) * 0.62);
}

.pf-background-asset--shader-failed .pf-background-asset__layer--shader {
  display: none !important;
}

/* =========================================================
   007 — IMAGE LAYER CONTAINER
========================================================= */

.pf-background-asset__layer--image {
  z-index: 6;
  overflow: hidden;
  contain: layout paint;
}

.pf-background-asset__layer--image::before,
.pf-background-asset__layer--image::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   008 — BACKGROUND IMAGE
========================================================= */

.pf-background-asset__image,
.pf-background-asset__layer--image img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: block !important;

  width: auto;
  height: var(--pf-bg-image-height-desktop);
  max-width: none !important;
  max-height: none !important;

  object-fit: contain;
  object-position: center center;

  opacity: 0.76 !important;
  mix-blend-mode: normal !important;

  transform:
    translate(-50%, var(--pf-bg-image-y-offset));

  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;

  -webkit-mask-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 38%,
      rgba(0, 0, 0, 0.72) 58%,
      rgba(0, 0, 0, 0.24) 76%,
      transparent 94%
    );

  mask-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 38%,
      rgba(0, 0, 0, 0.72) 58%,
      rgba(0, 0, 0, 0.24) 76%,
      transparent 94%
    );

  filter:
    brightness(0.96)
    contrast(1.03)
    saturate(1.06)
    drop-shadow(0 0 18px rgba(var(--pf-bg-white), 0.10))
    drop-shadow(0 0 42px rgba(var(--pf-bg-primary), 0.18))
    drop-shadow(0 0 96px rgba(var(--pf-bg-hot), 0.16));

  animation: pfBackgroundImageFloat 22s ease-in-out infinite;
}

/* =========================================================
   009 — SOFT LOVE PARTICLE FIELD
========================================================= */

.pf-background-asset__layer--shader::before,
[data-star-nest-layer="true"]::before {
  content: "♡  ♡      ♥       ♡     ♡        ♥     ♡          ♡     ♥";
  position: absolute;
  inset: -18%;
  z-index: 4;
  display: block;
  color: rgba(var(--pf-bg-white), 0.32);
  font-size: clamp(18px, 2.5vw, 42px);
  font-weight: 800;
  line-height: 3.4;
  letter-spacing: clamp(18px, 4vw, 72px);
  text-align: center;
  white-space: pre-wrap;
  opacity: var(--pf-bg-heart-opacity);
  text-shadow:
    0 0 12px rgba(var(--pf-bg-hot), 0.28),
    0 0 28px rgba(var(--pf-bg-primary), 0.22),
    0 0 46px rgba(var(--pf-bg-counter), 0.10);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  transform: rotate(-10deg) translate3d(-2%, 4%, 0);
  animation: pfBackgroundHeartDrift 48s linear infinite;
}

.pf-background-asset__layer--shader::after,
[data-star-nest-layer="true"]::after {
  content: "♥      ♡        ♡     ♥       ♡          ♥       ♡";
  position: absolute;
  inset: -22%;
  z-index: 5;
  display: block;
  color: rgba(var(--pf-bg-hot), 0.24);
  font-size: clamp(14px, 1.9vw, 30px);
  font-weight: 900;
  line-height: 4.8;
  letter-spacing: clamp(24px, 5.2vw, 92px);
  text-align: center;
  white-space: pre-wrap;
  opacity: calc(var(--pf-bg-heart-opacity) * 0.76);
  text-shadow:
    0 0 10px rgba(var(--pf-bg-white), 0.18),
    0 0 26px rgba(var(--pf-bg-hot), 0.25);
  filter: blur(0.7px);
  mix-blend-mode: screen;
  transform: rotate(8deg) translate3d(3%, -2%, 0);
  animation: pfBackgroundHeartDriftReverse 62s linear infinite;
}

/* =========================================================
   010 — GLASS REACTOR AURA
========================================================= */

.pf-background-asset__layer--aura {
  inset: -42%;
  z-index: 1;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(var(--pf-bg-white), 0.08) 0%,
      rgba(var(--pf-bg-soft), 0.12) 20%,
      rgba(var(--pf-bg-primary), 0.10) 38%,
      rgba(var(--pf-bg-hot), 0.07) 58%,
      transparent 78%
    ),
    conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      rgba(var(--pf-bg-primary), 0.06) 44deg,
      rgba(var(--pf-bg-white), 0.09) 82deg,
      rgba(var(--pf-bg-counter), 0.05) 108deg,
      rgba(var(--pf-bg-hot), 0.07) 132deg,
      transparent 174deg,
      rgba(var(--pf-bg-soft), 0.06) 228deg,
      rgba(var(--pf-bg-primary), 0.08) 292deg,
      transparent 360deg
    );

  filter:
    blur(68px)
    saturate(1.24);

  opacity: 0.58;
  mix-blend-mode: screen;
  transform-origin: center center;

  animation:
    pfBackgroundAuraRotate 58s linear infinite,
    pfBackgroundAuraBreathe 18s ease-in-out infinite;
}

/* =========================================================
   011 — OUTER ATMOSPHERE FIELD
========================================================= */

.pf-background-asset__layer--breadcrumb {
  inset: -26%;
  z-index: 2;

  background:
    radial-gradient(circle at 50% 50%, rgba(var(--pf-bg-hot), 0.10), transparent 58%),
    radial-gradient(circle at 22% 34%, rgba(var(--pf-bg-primary), 0.08), transparent 42%),
    radial-gradient(circle at 78% 64%, rgba(var(--pf-bg-counter), 0.055), transparent 46%),
    radial-gradient(circle at 50% 84%, rgba(var(--pf-bg-ice), 0.045), transparent 54%);

  filter:
    blur(96px)
    saturate(1.16);

  opacity: 0.46;
  mix-blend-mode: screen;

  animation: pfBackgroundAuraDrift 38s ease-in-out infinite;
}

/* =========================================================
   012 — GLASS SIGNAL SWEEP
========================================================= */

.pf-background-asset::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 10;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 36%,
      rgba(var(--pf-bg-white), 0.022) 44%,
      rgba(var(--pf-bg-hot), 0.035) 52%,
      rgba(var(--pf-bg-counter), 0.024) 59%,
      transparent 70%
    );

  background-size: 240% 100%;
  opacity: 0.18;
  mix-blend-mode: screen;

  animation: pfBackgroundSignalSweep 30s ease-in-out infinite;
}

/* =========================================================
   013 — EDGE VIGNETTE
========================================================= */

.pf-background-asset::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 34%,
      rgba(0, 0, 0, 0.16) 66%,
      rgba(0, 0, 0, 0.82) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.48),
      transparent 30%,
      transparent 68%,
      rgba(0, 0, 0, 0.74)
    );
}

/* =========================================================
   014 — READY + ACTIVE STATES
========================================================= */

.pf-background-asset.pf-background-asset--ready,
.pf-background-asset.pf-background-asset--active {
  opacity: 1;
}

/* =========================================================
   015 — RESPONSIVE IMAGE FIELD
========================================================= */

@media (min-width: 900px) {
  .pf-background-asset__image,
  .pf-background-asset__layer--image img {
    height: var(--pf-bg-image-height-lg);
  }
}

@media (min-width: 1280px) {
  .pf-background-asset__image,
  .pf-background-asset__layer--image img {
    height: var(--pf-bg-image-height-xl);
  }
}

@media (min-width: 1600px) {
  .pf-background-asset__image,
  .pf-background-asset__layer--image img {
    height: var(--pf-bg-image-height-xxl);
  }
}

/* =========================================================
   016 — MOBILE TUNING
========================================================= */

@media (max-width: 899px) {
  .pf-background-asset {
    --pf-bg-shader-opacity: var(--pf-bg-shader-opacity-mobile);
    --pf-bg-heart-opacity: var(--pf-bg-heart-opacity-mobile);
  }

  .pf-background-asset__image,
  .pf-background-asset__layer--image img {
    width: var(--pf-bg-image-mobile-width);
    height: var(--pf-bg-image-mobile-height);
    object-fit: cover;
    opacity: 0.68 !important;

    filter:
      brightness(0.94)
      contrast(1.02)
      saturate(1.04)
      drop-shadow(0 0 24px rgba(var(--pf-bg-primary), 0.14))
      drop-shadow(0 0 72px rgba(var(--pf-bg-hot), 0.12));
  }

  .pf-background-asset__layer--shader {
    filter:
      saturate(1)
      contrast(0.92)
      brightness(0.82);
  }
}

@media (max-width: 640px) {
  .pf-background-asset__layer--aura {
    filter:
      blur(44px)
      saturate(1.1);

    opacity: 0.42;

    animation-duration:
      70s,
      22s;
  }

  .pf-background-asset__layer--breadcrumb {
    filter:
      blur(72px)
      saturate(1.04);

    opacity: 0.36;
    animation-duration: 46s;
  }

  .pf-background-asset::before {
    opacity: 0.10;
    animation-duration: 36s;
  }

  .pf-background-asset__layer--shader::before,
  .pf-background-asset__layer--shader::after,
  [data-star-nest-layer="true"]::before,
  [data-star-nest-layer="true"]::after {
    letter-spacing: 28px;
    line-height: 5.2;
    filter: blur(0.9px);
  }
}

/* =========================================================
   017 — ANIMATIONS
========================================================= */

@keyframes pfBackgroundImageFloat {
  0%,
  100% {
    transform:
      translate(-50%, calc(var(--pf-bg-image-y-offset) - 0.35%))
      scale(1);
  }

  50% {
    transform:
      translate(-50%, calc(var(--pf-bg-image-y-offset) + 0.35%))
      scale(1.006);
  }
}

@keyframes pfBackgroundAuraRotate {
  from {
    transform:
      rotate(0deg)
      scale(1.03);
  }

  to {
    transform:
      rotate(360deg)
      scale(1.03);
  }
}

@keyframes pfBackgroundAuraBreathe {
  0%,
  100% {
    opacity: 0.48;
    filter:
      blur(70px)
      saturate(1.1);
  }

  50% {
    opacity: 0.68;
    filter:
      blur(56px)
      saturate(1.34);
  }
}

@keyframes pfBackgroundAuraDrift {
  0%,
  100% {
    transform:
      translate3d(-1%, 1%, 0)
      scale(1);
    opacity: 0.42;
  }

  50% {
    transform:
      translate3d(1.5%, -1%, 0)
      scale(1.04);
    opacity: 0.58;
  }
}

@keyframes pfBackgroundSignalSweep {
  0%,
  100% {
    opacity: 0.12;
    background-position: 140% 50%;
  }

  50% {
    opacity: 0.22;
    background-position: -40% 50%;
  }
}

@keyframes pfBackgroundHeartDrift {
  0% {
    transform:
      rotate(-10deg)
      translate3d(-6%, 10%, 0)
      scale(1);
  }

  50% {
    transform:
      rotate(-8deg)
      translate3d(4%, -2%, 0)
      scale(1.04);
  }

  100% {
    transform:
      rotate(-10deg)
      translate3d(-6%, 10%, 0)
      scale(1);
  }
}

@keyframes pfBackgroundHeartDriftReverse {
  0% {
    transform:
      rotate(8deg)
      translate3d(5%, -8%, 0)
      scale(1.02);
  }

  50% {
    transform:
      rotate(6deg)
      translate3d(-4%, 3%, 0)
      scale(0.98);
  }

  100% {
    transform:
      rotate(8deg)
      translate3d(5%, -8%, 0)
      scale(1.02);
  }
}

/* =========================================================
   018 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .pf-background-asset,
  .pf-background-asset::before,
  .pf-background-asset::after,
  .pf-background-asset__layer,
  .pf-background-asset__layer::before,
  .pf-background-asset__layer::after,
  .pf-background-asset__image,
  .pf-background-asset__layer--image img {
    animation: none !important;
    transition: none !important;
  }

  .pf-background-asset__layer--shader {
    opacity: 0.18;
  }

  .pf-background-asset__layer--shader::before,
  .pf-background-asset__layer--shader::after,
  [data-star-nest-layer="true"]::before,
  [data-star-nest-layer="true"]::after {
    opacity: 0.06;
  }
}