/* =========================================================
   Mattia portfolio hero coded atmospheres
   Scope: homepage hero panel only.
   All effects are CSS/SVG/DOM animation, no external assets.
   ========================================================= */

.home-hero {
  --ambient-panel-shadow: rgba(2, 8, 16, 0.54);
  --ambient-text-shield: rgba(3, 8, 15, 0.34);
  --ambient-glass-white: rgba(235, 247, 255, 0.16);
}

.home-hero[data-hero-theme="magenta"] { --hero-mode-color: #ff3ca5; --hero-mode-rgb: 255, 60, 165; }
.home-hero[data-hero-theme="gold"] { --hero-mode-color: #ffb62e; --hero-mode-rgb: 255, 182, 46; }

.home-hero .hero-overlay {
  overflow: hidden !important;
}

.home-hero .hero-ambient {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  isolation: isolate !important;
  contain: paint;
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--hero-mode-rgb, 68, 217, 255), 0.12), transparent 28%),
    radial-gradient(900px 520px at 50% 54%, rgba(12, 20, 31, 0.38), rgba(4, 7, 13, 0.82) 82%),
    linear-gradient(145deg, rgba(18, 26, 38, 0.78), rgba(5, 8, 14, 0.94));
}

.home-hero .hero-overlay > .hero-ambient {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

.home-hero .hero-ambient::before,
.home-hero .hero-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  border-radius: inherit;
}

.home-hero .hero-ambient::before {
  background:
    radial-gradient(520px 360px at 50% 35%, var(--ambient-text-shield), transparent 72%),
    radial-gradient(620px 320px at 50% 71%, rgba(4, 8, 14, 0.24), transparent 74%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 12% 88%, rgba(0, 0, 0, 0.34)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 18% 76%, rgba(0, 0, 0, 0.30));
}

.home-hero .hero-ambient::after {
  opacity: 0.28;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 42%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58% 100%);
  background-size: 84px 84px, 148px 148px, 220% 100%;
  animation: wjpAmbientHaze 18s linear infinite;
}

.home-hero .ambient-layer {
  --theme-rgb: 68, 217, 255;
  --theme: rgb(var(--theme-rgb));
  --theme-soft: rgba(var(--theme-rgb), 0.22);
  --theme-mid: rgba(var(--theme-rgb), 0.38);
  --theme-hot: rgba(var(--theme-rgb), 0.74);
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden;
  color: var(--theme);
  mix-blend-mode: screen;
  filter: saturate(1.12) contrast(1.04) brightness(1.02);
  transform: translate3d(0, 0, 0) scale(1.018);
  transition:
    opacity 720ms ease,
    visibility 0s linear 760ms,
    filter 720ms ease,
    transform 900ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform, filter;
}

.home-hero .ambient-layer::before,
.home-hero .ambient-layer::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  border-radius: inherit;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity, background-position, filter;
}

.home-hero .ambient-layer::before {
  z-index: 0;
}

.home-hero .ambient-layer::after {
  z-index: 2;
}

.home-hero[data-active-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-active-effect="red"] .ambient-layer--red,
.home-hero[data-active-effect="blue"] .ambient-layer--blue,
.home-hero[data-active-effect="orange"] .ambient-layer--orange,
.home-hero[data-active-effect="purple"] .ambient-layer--purple,
.home-hero[data-active-effect="green"] .ambient-layer--green,
.home-hero[data-active-effect="teal"] .ambient-layer--teal,
.home-hero[data-active-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-active-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-active-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-active-effect="lime"] .ambient-layer--lime,
.home-hero[data-active-effect="gold"] .ambient-layer--gold {
  opacity: 1 !important;
  filter: saturate(1.2) contrast(1.06) brightness(1.04);
  transform: translate3d(0, 0, 0) scale(1);
}

.home-hero[data-preview-effect] .ambient-layer {
  opacity: 0.08 !important;
}

.home-hero[data-preview-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-preview-effect="red"] .ambient-layer--red,
.home-hero[data-preview-effect="blue"] .ambient-layer--blue,
.home-hero[data-preview-effect="orange"] .ambient-layer--orange,
.home-hero[data-preview-effect="purple"] .ambient-layer--purple,
.home-hero[data-preview-effect="green"] .ambient-layer--green,
.home-hero[data-preview-effect="teal"] .ambient-layer--teal,
.home-hero[data-preview-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-preview-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-preview-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-preview-effect="lime"] .ambient-layer--lime,
.home-hero[data-preview-effect="gold"] .ambient-layer--gold {
  opacity: 0.88 !important;
  filter: saturate(1.15) contrast(1.04) brightness(1.03);
  transform: translate3d(0, 0, 0) scale(1.006);
}

.home-hero .ambient-svg,
.home-hero .atmo-item,
.home-hero .atmo-core-glow {
  position: absolute;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.home-hero .ambient-svg {
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: var(--svg-opacity, 0.8);
  filter: none;
}

.home-hero .ambient-svg path,
.home-hero .ambient-svg polyline,
.home-hero .ambient-svg circle,
.home-hero .ambient-svg line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero .atmo-item {
  z-index: 10;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  opacity: 0;
  border-radius: 999px;
  animation-delay: var(--delay, 0s) !important;
  animation-duration: var(--duration, 10s) !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: ease-in-out !important;
  will-change: transform, opacity, filter;
}

.home-hero .atmo-core-glow {
  z-index: 5;
  left: 50%;
  top: 51%;
  width: clamp(250px, 30vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.13), transparent 18%),
    radial-gradient(circle, var(--theme-mid), rgba(var(--theme-rgb), 0.1) 45%, transparent 72%);
  filter: blur(12px);
  opacity: 0.82;
  transform: translate(-50%, -50%) scale(0.96);
  mix-blend-mode: screen;
  animation: wjpCoreGlow 5.6s ease-in-out infinite;
}

.home-hero .ambient-particle,
.home-hero .premium-particle,
.home-hero .premium-streak,
.home-hero .premium-shape {
  display: none !important;
}

.home-hero .ambient-layer:not(.is-ambient-live)::before,
.home-hero .ambient-layer:not(.is-ambient-live)::after,
.home-hero .ambient-layer:not(.is-ambient-live) * {
  animation-play-state: paused !important;
}

.home-hero .ambient-layer.is-ambient-live::before,
.home-hero .ambient-layer.is-ambient-live::after,
.home-hero .ambient-layer.is-ambient-live * {
  animation-play-state: running !important;
}

.home-hero .ambient-layer.is-ambient-live {
  visibility: visible !important;
  transition-delay: 0s !important;
}

.home-hero[data-preview-effect] .ambient-layer:not(.is-ambient-live) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.home-hero[data-preview-effect] .ambient-layer.is-ambient-active {
  opacity: 0.14 !important;
  visibility: visible !important;
}

.home-hero[data-preview-effect] .ambient-layer.is-ambient-preview {
  opacity: 0.88 !important;
  visibility: visible !important;
  filter: saturate(1.15) contrast(1.04) brightness(1.03);
  transform: translate3d(0, 0, 0) scale(1.006);
}

.home-hero .hero-radial-widget__dot.is-preview {
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 30deg))
    translateY(calc((var(--orbit) - 2px) * -1))
    scale(1.08) !important;
  filter: brightness(1.05) saturate(1.08);
}

.home-hero .hero-radial-widget__dot.is-preview::before {
  opacity: 0.78;
  transform: scale(0.98);
}

.home-hero .hero-radial-widget__dot.is-preview::after {
  opacity: 0.40;
  transform: scale(1.04);
}

.home-hero .hero-radial-widget__dot.is-preview .hero-radial-widget__tooltip {
  opacity: 1 !important;
  transform: translate(-50%, 0) rotate(calc(var(--i) * -30deg)) scale(1);
}

/* Theme color tokens */
.home-hero .ambient-layer--yellow { --theme-rgb: 255, 211, 74; }
.home-hero .ambient-layer--red { --theme-rgb: 255, 78, 94; }
.home-hero .ambient-layer--blue { --theme-rgb: 47, 133, 255; }
.home-hero .ambient-layer--orange { --theme-rgb: 255, 139, 50; }
.home-hero .ambient-layer--purple { --theme-rgb: 150, 87, 255; }
.home-hero .ambient-layer--green { --theme-rgb: 87, 223, 120; }
.home-hero .ambient-layer--teal { --theme-rgb: 46, 208, 187; }
.home-hero .ambient-layer--cyan { --theme-rgb: 68, 217, 255; }
.home-hero .ambient-layer--indigo { --theme-rgb: 107, 115, 255; }
.home-hero .ambient-layer--magenta { --theme-rgb: 255, 60, 165; }
.home-hero .ambient-layer--lime { --theme-rgb: 200, 239, 68; }
.home-hero .ambient-layer--gold { --theme-rgb: 255, 182, 46; }

/* 1. Yellow - Spark */
.home-hero .ambient-layer--yellow {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 220, 82, 0.18), transparent 31%),
    radial-gradient(circle at 0% 49%, rgba(255, 207, 60, 0.22), transparent 30%),
    radial-gradient(circle at 100% 51%, rgba(255, 236, 142, 0.18), transparent 28%),
    linear-gradient(140deg, rgba(5, 4, 0, 0.98), rgba(12, 9, 3, 0.92) 56%, rgba(3, 4, 8, 0.98));
}

.home-hero .ambient-layer--yellow::before {
  background:
    linear-gradient(118deg, transparent 0 38%, rgba(255, 232, 111, 0.07) 45%, transparent 52% 100%),
    linear-gradient(56deg, transparent 0 56%, rgba(255, 255, 220, 0.045) 61%, transparent 67% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 16%, rgba(255, 225, 86, 0.25) 17% 18%, transparent 20% 100%);
  filter: none;
  animation: wjpSparkField 5.4s steps(7, end) infinite;
}

.home-hero .ambient-layer--yellow::after {
  opacity: 0.8;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 245, 182, 0.22), transparent 17%),
    conic-gradient(from 18deg at 50% 50%, transparent 0 11%, rgba(255, 235, 126, 0.26) 12% 13%, transparent 16% 42%, rgba(255, 204, 52, 0.18) 44% 46%, transparent 49% 100%);
  animation: wjpSparkPulse 3.8s ease-out infinite;
}

.home-hero .ambient-layer--yellow .ambient-svg {
  --svg-opacity: 0.9;
}

.home-hero .ambient-layer--yellow .spark-current {
  fill: none;
  stroke: rgba(255, 236, 142, 0.9);
  stroke-width: 2.3;
  stroke-dasharray: 70 24 16 32;
  animation: wjpElectricFlicker 1.15s steps(4, end) infinite;
}

.home-hero .ambient-layer--yellow .spark-branch {
  fill: none;
  stroke: rgba(255, 221, 89, 0.62);
  stroke-width: 1.15;
  stroke-dasharray: 22 16;
  animation: wjpElectricFlicker 1.45s steps(5, end) infinite;
}

.home-hero .ambient-layer--yellow .spark-dot {
  background: rgba(255, 235, 126, 0.92);
  box-shadow: 0 0 10px rgba(255, 229, 100, 0.82), 0 0 26px rgba(255, 208, 56, 0.36);
  animation-name: wjpSparkParticle !important;
}

.home-hero .ambient-layer--yellow .spark-streak {
  width: calc(var(--size, 3px) * 18);
  height: max(1px, calc(var(--size, 3px) * 0.34));
  background: linear-gradient(90deg, transparent, rgba(255, 250, 202, 0.95), rgba(255, 211, 74, 0.5), transparent);
  box-shadow: 0 0 16px rgba(255, 220, 74, 0.42);
  animation-name: wjpSparkStreak !important;
}

.home-hero .hero-overlay > .hero-ambient .ambient-layer--yellow::before {
  background:
    linear-gradient(118deg, transparent 0 38%, rgba(255, 232, 111, 0.07) 45%, transparent 52% 100%),
    linear-gradient(56deg, transparent 0 56%, rgba(255, 255, 220, 0.045) 61%, transparent 67% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 16%, rgba(255, 225, 86, 0.25) 17% 18%, transparent 20% 100%) !important;
  filter: none !important;
  animation: wjpSparkField 5.4s steps(7, end) infinite !important;
}

.home-hero .hero-overlay > .hero-ambient .ambient-layer--yellow::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 245, 182, 0.22), transparent 17%),
    conic-gradient(from 18deg at 50% 50%, transparent 0 11%, rgba(255, 235, 126, 0.26) 12% 13%, transparent 16% 42%, rgba(255, 204, 52, 0.18) 44% 46%, transparent 49% 100%) !important;
  opacity: 0.8 !important;
  animation: wjpSparkPulse 3.8s ease-out infinite !important;
}

/* 2. Red - Drive */
.home-hero .ambient-layer--red {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 86, 48, 0.36), transparent 52%),
    radial-gradient(circle at 4% 66%, rgba(255, 88, 54, 0.22), transparent 32%),
    radial-gradient(circle at 95% 70%, rgba(255, 148, 74, 0.18), transparent 31%),
    linear-gradient(180deg, rgba(12, 5, 8, 0.96), rgba(22, 6, 8, 0.9) 58%, rgba(7, 5, 7, 0.98));
}

.home-hero .ambient-layer--red::before {
  background:
    radial-gradient(ellipse at 28% 92%, rgba(255, 78, 42, 0.52), transparent 31%),
    radial-gradient(ellipse at 72% 88%, rgba(255, 146, 64, 0.34), transparent 31%),
    radial-gradient(ellipse at 50% 62%, rgba(150, 20, 28, 0.34), transparent 44%);
  filter: blur(12px) saturate(1.12);
  animation: wjpFireBreath 6.6s ease-in-out infinite alternate;
}

.home-hero .ambient-layer--red::after {
  background:
    radial-gradient(circle, rgba(255, 184, 104, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 82, 54, 0.36) 0 1px, transparent 2px),
    linear-gradient(12deg, transparent 0 42%, rgba(255, 126, 74, 0.12), transparent 68%);
  background-size: 76px 118px, 132px 160px, 100% 100%;
  animation: wjpEmberField 8.4s linear infinite;
}

.home-hero .ambient-layer--red .fire-wave {
  z-index: 4;
  left: var(--x, 50%);
  top: auto;
  bottom: -8%;
  width: var(--w, 34%);
  height: var(--h, 34%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 108, 54, 0.38), rgba(255, 55, 52, 0.08) 58%, transparent 72%);
  filter: blur(var(--blur, 18px));
  animation-name: wjpFireWave !important;
}

.home-hero .ambient-layer--red .ember {
  background: radial-gradient(circle, rgba(255, 222, 150, 0.92), rgba(255, 116, 62, 0.66) 46%, transparent 72%);
  box-shadow: 0 0 12px rgba(255, 116, 62, 0.64), 0 0 26px rgba(255, 72, 42, 0.28);
  animation-name: wjpEmberRise !important;
}

.home-hero .ambient-layer--red .heat-spark {
  width: calc(var(--size, 2px) * 12);
  height: max(1px, calc(var(--size, 2px) * 0.34));
  background: linear-gradient(90deg, transparent, rgba(255, 180, 94, 0.72), transparent);
  animation-name: wjpHeatSpark !important;
}

/* 3. Blue - Flow */
.home-hero .ambient-layer--blue {
  background:
    radial-gradient(circle at 50% 36%, rgba(65, 151, 255, 0.18), transparent 38%),
    radial-gradient(ellipse at 50% 84%, rgba(54, 174, 255, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(4, 10, 22, 0.96), rgba(7, 18, 35, 0.92) 55%, rgba(3, 8, 16, 0.98));
}

.home-hero .ambient-layer--blue::before {
  background:
    repeating-linear-gradient(94deg, transparent 0 22px, rgba(166, 226, 255, 0.22) 24px 25px, transparent 27px 56px),
    linear-gradient(180deg, rgba(120, 210, 255, 0.14), transparent 42%, rgba(58, 144, 255, 0.08));
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  animation: wjpRainField 5.6s linear infinite;
}

.home-hero .ambient-layer--blue::after {
  background:
    radial-gradient(ellipse at 42% 18%, rgba(255, 255, 255, 0.13), transparent 32%),
    linear-gradient(112deg, transparent 0 36%, rgba(162, 228, 255, 0.12), transparent 62% 100%);
  filter: blur(2px);
  animation: wjpWetHighlight 8.6s ease-in-out infinite;
}

.home-hero .ambient-layer--blue .rain-streak {
  width: 1px;
  height: var(--h, 70px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(194, 236, 255, 0.58), transparent);
  animation-name: wjpRainDrop !important;
}

.home-hero .ambient-layer--blue .water-drop {
  background: radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.75), rgba(122, 216, 255, 0.24) 44%, rgba(70, 138, 255, 0.08) 72%);
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.28), 0 0 12px rgba(76, 176, 255, 0.22);
  animation-name: wjpDropSlide !important;
}

.home-hero .ambient-layer--blue .water-ripple {
  left: var(--x, 50%);
  top: var(--y, 76%);
  width: var(--size, 90px);
  height: var(--size, 90px);
  border: 1px solid rgba(158, 226, 255, 0.28);
  background: transparent;
  box-shadow: 0 0 18px rgba(70, 165, 255, 0.14);
  animation-name: wjpRipple !important;
}

/* 4. Orange - Momentum */
.home-hero .ambient-layer--orange {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 150, 48, 0.17), transparent 35%),
    radial-gradient(ellipse at 18% 78%, rgba(255, 130, 40, 0.26), transparent 34%),
    radial-gradient(ellipse at 82% 22%, rgba(255, 200, 120, 0.14), transparent 32%),
    linear-gradient(145deg, rgba(17, 8, 3, 0.96), rgba(30, 15, 6, 0.9), rgba(8, 6, 5, 0.98));
}

.home-hero .ambient-layer--orange::before {
  background:
    conic-gradient(from 210deg at 50% 52%, transparent 0 22%, rgba(255, 164, 68, 0.18) 28% 38%, transparent 48% 100%),
    repeating-linear-gradient(132deg, transparent 0 74px, rgba(255, 172, 70, 0.20) 77px 80px, transparent 84px 154px);
  animation: wjpMomentumVortex 9.2s ease-in-out infinite;
}

.home-hero .ambient-layer--orange::after {
  background:
    linear-gradient(124deg, transparent 0 32%, rgba(255, 198, 126, 0.14), transparent 63% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 158, 58, 0.15), transparent 34%);
  filter: blur(4px);
  animation: wjpWarmSweep 7.6s ease-in-out infinite;
}

.home-hero .ambient-layer--orange .organic-fragment {
  width: calc(var(--size, 8px) * 1.85);
  height: var(--size, 8px);
  border-radius: 64% 36% 66% 34%;
  background: linear-gradient(135deg, rgba(255, 229, 150, 0.42), rgba(255, 128, 38, 0.42));
  box-shadow: 0 0 16px rgba(255, 140, 48, 0.22);
  animation-name: wjpFragmentDrift !important;
}

.home-hero .ambient-layer--orange .organic-trail {
  width: calc(var(--size, 3px) * 20);
  height: max(1px, calc(var(--size, 3px) * 0.5));
  background: linear-gradient(90deg, transparent, rgba(255, 174, 76, 0.38), transparent);
  animation-name: wjpMomentumTrail !important;
}

/* 5. Purple - Vision */
.home-hero .ambient-layer--purple {
  background:
    radial-gradient(circle at 20% 62%, rgba(160, 82, 255, 0.32), transparent 32%),
    radial-gradient(circle at 82% 34%, rgba(238, 170, 255, 0.19), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(72, 44, 150, 0.34), transparent 48%),
    linear-gradient(145deg, rgba(5, 5, 18, 0.98), rgba(13, 7, 32, 0.94), rgba(4, 5, 16, 0.98));
}

.home-hero .ambient-layer--purple::before {
  background:
    radial-gradient(ellipse at 24% 68%, rgba(154, 92, 255, 0.48), transparent 28%),
    radial-gradient(ellipse at 76% 34%, rgba(255, 132, 224, 0.25), transparent 25%),
    conic-gradient(from 80deg at 50% 50%, transparent, rgba(142, 88, 255, 0.13), transparent, rgba(255, 178, 242, 0.1), transparent);
  filter: blur(10px) saturate(1.12);
  animation: wjpNebulaBreathe 13s ease-in-out infinite;
}

.home-hero .ambient-layer--purple::after {
  background:
    radial-gradient(circle, rgba(226, 205, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(154, 94, 255, 0.34) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.20) 0 1px, transparent 2px);
  background-size: 72px 92px, 132px 152px, 190px 220px;
  animation: wjpStarDepth 16s linear infinite;
}

.home-hero .ambient-layer--purple .nebula-mist {
  width: var(--w, 34%);
  height: var(--h, 28%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(178, 96, 255, 0.26), rgba(255, 90, 208, 0.10) 52%, transparent 72%);
  filter: blur(var(--blur, 28px));
  animation-name: wjpNebulaMist !important;
}

.home-hero .ambient-layer--purple .star-speck {
  background: rgba(232, 216, 255, 0.82);
  box-shadow: 0 0 10px rgba(170, 112, 255, 0.42);
  animation-name: wjpStarFloat !important;
}

/* 6. Green - Growth */
.home-hero .ambient-layer--green {
  background:
    radial-gradient(circle at 50% 54%, rgba(86, 225, 128, 0.18), transparent 36%),
    radial-gradient(ellipse at 50% 100%, rgba(72, 205, 112, 0.2), transparent 43%),
    linear-gradient(145deg, rgba(4, 14, 9, 0.98), rgba(7, 28, 17, 0.92), rgba(4, 9, 7, 0.98));
}

.home-hero .ambient-layer--green::before {
  background:
    repeating-radial-gradient(circle at 50% 53%, transparent 0 34px, rgba(112, 246, 152, 0.22) 36px 38px, transparent 41px 78px),
    linear-gradient(24deg, transparent 0 34%, rgba(100, 244, 146, 0.13), transparent 58% 100%);
  animation: wjpGrowthRings 7.4s ease-out infinite;
}

.home-hero .ambient-layer--green::after {
  background:
    repeating-linear-gradient(30deg, transparent 0 82px, rgba(122, 255, 170, 0.14) 85px 87px, transparent 90px 170px),
    repeating-linear-gradient(150deg, transparent 0 118px, rgba(92, 240, 140, 0.10) 121px 122px, transparent 126px 220px);
  animation: wjpOrganicSweep 10s ease-in-out infinite;
}

.home-hero .ambient-layer--green .growth-curve {
  fill: none;
  stroke: rgba(128, 255, 166, 0.45);
  stroke-width: 1.35;
  stroke-dasharray: 28 34;
  animation: wjpPathFlow 9s linear infinite;
}

.home-hero .ambient-layer--green .growth-node {
  background: rgba(116, 246, 150, 0.62);
  box-shadow: 0 0 12px rgba(105, 240, 140, 0.58), 0 0 26px rgba(70, 220, 110, 0.18);
  animation-name: wjpGrowthNode !important;
}

.home-hero .ambient-layer--green .growth-accent {
  width: calc(var(--size, 8px) * 1.7);
  height: var(--size, 8px);
  border-radius: 80% 20% 70% 30%;
  background: linear-gradient(135deg, rgba(170, 255, 190, 0.30), rgba(62, 220, 118, 0.28));
  animation-name: wjpGrowthAccent !important;
}

/* 7. Teal - Clarity */
.home-hero .ambient-layer--teal {
  background:
    radial-gradient(circle at 50% 49%, rgba(48, 218, 198, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(3, 13, 16, 0.98), rgba(6, 27, 29, 0.92), rgba(3, 8, 12, 0.98));
}

.home-hero .ambient-layer--teal::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 42px, rgba(74, 240, 222, 0.26) 44px 45px, transparent 48px 88px),
    linear-gradient(90deg, transparent, rgba(170, 255, 244, 0.11), transparent);
  animation: wjpSignalRings 5.8s ease-out infinite;
}

.home-hero .ambient-layer--teal::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(118, 255, 238, 0.13) 48px 49px, transparent 52px 108px),
    linear-gradient(92deg, transparent 0 30%, rgba(180, 255, 244, 0.16) 46%, transparent 64%);
  animation: wjpRefractionScan 8.4s ease-in-out infinite;
}

.home-hero .ambient-layer--teal .signal-ring {
  width: var(--size, 130px);
  height: var(--size, 130px);
  border: 1px solid rgba(118, 255, 238, 0.26);
  background: transparent;
  box-shadow: 0 0 18px rgba(46, 208, 187, 0.14);
  animation-name: wjpSignalRing !important;
}

.home-hero .ambient-layer--teal .signal-line {
  width: var(--w, 44%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 255, 242, 0.52), transparent);
  animation-name: wjpSignalLine !important;
}

.home-hero .ambient-layer--teal .signal-particle {
  background: rgba(102, 246, 228, 0.48);
  box-shadow: 0 0 12px rgba(72, 236, 218, 0.5);
  animation-name: wjpSignalParticle !important;
}

/* 8. Cyan - Agility */
.home-hero .ambient-layer--cyan {
  background:
    radial-gradient(circle at 50% 51%, rgba(70, 225, 255, 0.22), transparent 34%),
    radial-gradient(ellipse at 0% 60%, rgba(70, 225, 255, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(3, 10, 18, 0.98), rgba(6, 25, 38, 0.94), rgba(2, 8, 14, 0.98));
}

.home-hero .ambient-layer--cyan::before {
  background:
    linear-gradient(112deg, transparent 0 16%, rgba(72, 228, 255, 0.35) 30%, transparent 45% 100%),
    linear-gradient(58deg, transparent 0 38%, rgba(232, 255, 255, 0.16) 52%, transparent 66% 100%);
  filter: blur(1px);
  animation: wjpLiquidField 7.4s cubic-bezier(.45, 0, .2, 1) infinite;
}

.home-hero .ambient-layer--cyan::after {
  background:
    repeating-linear-gradient(106deg, transparent 0 66px, rgba(74, 226, 255, 0.24) 69px 71px, transparent 75px 146px),
    repeating-linear-gradient(70deg, transparent 0 112px, rgba(220, 255, 255, 0.13) 115px 116px, transparent 120px 210px);
  animation: wjpLiquidThreads 8.6s linear infinite;
}

.home-hero .ambient-layer--cyan .liquid-ribbon {
  fill: none;
  stroke: rgba(112, 235, 255, 0.42);
  stroke-width: var(--stroke, 14);
  stroke-dasharray: 180 260;
  animation: wjpRibbonFlow 5.8s cubic-bezier(.45, 0, .2, 1) infinite;
}

.home-hero .ambient-layer--cyan .liquid-thread {
  fill: none;
  stroke: rgba(222, 255, 255, 0.34);
  stroke-width: 1.4;
  stroke-dasharray: 32 80;
  animation: wjpPathFlow 5.4s linear infinite;
}

.home-hero .ambient-layer--cyan .stream-particle,
.home-hero .ambient-layer--cyan .stream-streak {
  background: linear-gradient(90deg, transparent, rgba(106, 235, 255, 0.72), rgba(255, 255, 255, 0.42), transparent);
  box-shadow: 0 0 16px rgba(78, 226, 255, 0.42);
  animation-name: wjpStreamFly !important;
}

.home-hero .ambient-layer--cyan .stream-streak {
  width: calc(var(--size, 3px) * 24);
  height: max(1px, calc(var(--size, 3px) * 0.42));
}

/* 9. Indigo - Precision */
.home-hero .ambient-layer--indigo {
  background:
    radial-gradient(circle at 50% 50%, rgba(100, 112, 255, 0.18), transparent 43%),
    linear-gradient(145deg, rgba(4, 7, 20, 0.98), rgba(8, 12, 40, 0.94), rgba(3, 6, 16, 0.98));
}

.home-hero .ambient-layer--indigo::before {
  background:
    linear-gradient(rgba(146, 156, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 156, 255, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(110, 118, 255, 0.14), transparent 46%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  animation: wjpGridShift 7.4s ease-in-out infinite;
}

.home-hero .ambient-layer--indigo::after {
  background:
    linear-gradient(90deg, transparent, rgba(202, 207, 255, 0.32), transparent),
    linear-gradient(180deg, transparent, rgba(125, 135, 255, 0.16), transparent);
  background-size: 100% 2px, 2px 100%;
  animation: wjpPrecisionScan 7s ease-in-out infinite;
}

.home-hero .ambient-layer--indigo .grid-link {
  stroke: rgba(172, 182, 255, 0.44);
  stroke-width: 1.2;
  stroke-dasharray: 24 38;
  animation: wjpGridLink 5.2s linear infinite;
}

.home-hero .ambient-layer--indigo .grid-node {
  background: rgba(166, 176, 255, 0.52);
  box-shadow: 0 0 11px rgba(132, 144, 255, 0.58);
  animation-name: wjpGridNode !important;
}

/* 10. Magenta - Create */
.home-hero .ambient-layer--magenta {
  background:
    radial-gradient(circle at 28% 72%, rgba(255, 62, 170, 0.28), transparent 33%),
    radial-gradient(circle at 78% 36%, rgba(255, 178, 226, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(16, 4, 15, 0.98), rgba(32, 7, 28, 0.92), rgba(7, 5, 12, 0.98));
}

.home-hero .ambient-layer--magenta::before {
  background:
    conic-gradient(from 18deg at 50% 52%, transparent 0 8%, rgba(255, 66, 176, 0.32) 10% 14%, transparent 18% 42%, rgba(255, 220, 242, 0.16) 45% 48%, transparent 52% 100%),
    radial-gradient(circle at 50% 52%, rgba(255, 64, 172, 0.16), transparent 52%);
  animation: wjpCreativeBloom 8s ease-in-out infinite;
}

.home-hero .ambient-layer--magenta::after {
  background:
    radial-gradient(circle, rgba(255, 72, 182, 0.36) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 110, 210, 0.18) 0 3px, transparent 5px);
  background-size: 68px 84px, 126px 150px, 220px 260px;
  animation: wjpCreativeDrift 12s linear infinite;
}

.home-hero .ambient-layer--magenta .creative-burst {
  width: var(--size, 80px);
  height: var(--size, 80px);
  border: 1px solid rgba(255, 150, 218, 0.22);
  background: radial-gradient(circle, rgba(255, 66, 176, 0.18), transparent 68%);
  animation-name: wjpBurstBloom !important;
}

.home-hero .ambient-layer--magenta .creative-shape {
  width: calc(var(--size, 12px) * 1.3);
  height: var(--size, 12px);
  border-radius: 60% 40% 42% 58%;
  background: linear-gradient(135deg, rgba(255, 210, 238, 0.30), rgba(255, 64, 172, 0.36));
  box-shadow: 0 0 18px rgba(255, 64, 172, 0.22);
  animation-name: wjpCreativeShape !important;
}

.home-hero .ambient-layer--magenta .creative-dot {
  background: rgba(255, 92, 190, 0.5);
  box-shadow: 0 0 14px rgba(255, 62, 170, 0.44);
  animation-name: wjpCreativeParticle !important;
}

/* 11. Lime - Future */
.home-hero .ambient-layer--lime {
  background:
    radial-gradient(circle at 50% 52%, rgba(206, 244, 74, 0.18), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(166, 228, 54, 0.17), transparent 43%),
    linear-gradient(145deg, rgba(6, 14, 4, 0.98), rgba(14, 30, 8, 0.94), rgba(4, 8, 5, 0.98));
}

.home-hero .ambient-layer--lime::before {
  background:
    radial-gradient(circle, rgba(214, 246, 82, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(238, 255, 160, 0.18) 0 2px, transparent 4px),
    linear-gradient(108deg, transparent, rgba(210, 255, 88, 0.15), transparent 62%);
  background-size: 54px 54px, 112px 112px, 100% 100%;
  transform: perspective(520px) rotateX(58deg) translateY(14%);
  transform-origin: 50% 76%;
  animation: wjpFutureTerrain 8.8s linear infinite;
}

.home-hero .ambient-layer--lime::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 16%, rgba(206, 244, 74, 0.28) 17% 18%, transparent 20% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(206, 244, 74, 0.16) 33% 34%, transparent 36% 100%);
  animation: wjpFuturePulse 5s ease-out infinite;
}

.home-hero .ambient-layer--lime .future-dot {
  background: rgba(218, 248, 76, 0.58);
  box-shadow: 0 0 14px rgba(210, 245, 80, 0.54);
  animation-name: wjpFutureDot !important;
}

.home-hero .ambient-layer--lime .future-wave {
  width: var(--w, 44%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(225, 255, 112, 0.46), transparent);
  animation-name: wjpFutureWave !important;
}

/* 12. Gold - Impact */
.home-hero .ambient-layer--gold {
  background:
    radial-gradient(circle at 50% 53%, rgba(255, 190, 60, 0.26), transparent 36%),
    radial-gradient(circle at 16% 80%, rgba(255, 205, 95, 0.18), transparent 30%),
    radial-gradient(circle at 84% 28%, rgba(255, 236, 170, 0.13), transparent 31%),
    linear-gradient(145deg, rgba(14, 9, 3, 0.98), rgba(30, 18, 6, 0.94), rgba(6, 5, 4, 0.98));
}

.home-hero .ambient-layer--gold::before {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 190, 60, 0.36), transparent 31%),
    conic-gradient(from 70deg at 50% 50%, transparent, rgba(255, 184, 52, 0.16), transparent, rgba(255, 235, 166, 0.11), transparent);
  filter: blur(8px) saturate(1.08);
  animation: wjpImpactGlow 6.4s ease-in-out infinite;
}

.home-hero .ambient-layer--gold::after {
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 226, 160, 0.38) 47%, transparent 60% 100%),
    radial-gradient(circle, rgba(255, 206, 110, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 240, 180, 0.14) 0 2px, transparent 4px);
  background-size: 100% 100%, 78px 94px, 146px 174px;
  animation: wjpGoldShimmer 9s ease-in-out infinite;
}

.home-hero .ambient-layer--gold .gold-arc {
  fill: none;
  stroke: rgba(255, 218, 128, 0.42);
  stroke-width: 1.4;
  stroke-dasharray: 80 150;
  animation: wjpPathFlow 10s linear infinite;
}

.home-hero .ambient-layer--gold .gold-dust {
  background: rgba(255, 211, 108, 0.5);
  box-shadow: 0 0 12px rgba(255, 204, 96, 0.48), 0 0 28px rgba(255, 190, 70, 0.18);
  animation-name: wjpGoldDust !important;
}

.home-hero .ambient-layer--gold .gold-sweep {
  width: var(--w, 38%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 175, 0.58), transparent);
  animation-name: wjpGoldSweep !important;
}

/* Shared keyframes */
@keyframes wjpAmbientHaze {
  from { background-position: 0 0, 0 0, -120% 0; }
  to { background-position: 84px 84px, -148px 148px, 120% 0; }
}

@keyframes wjpCoreGlow {
  0%, 100% { opacity: 0.66; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes wjpPathFlow {
  to { stroke-dashoffset: -360; }
}

@keyframes wjpElectricTrace {
  to { stroke-dashoffset: -420; }
}

@keyframes wjpElectricFlicker {
  0%, 100% { opacity: 0.48; }
  20% { opacity: 0.92; }
  42% { opacity: 0.58; }
  67% { opacity: 1; }
}

@keyframes wjpSparkField {
  0%, 100% { background-position: 0 0, 0 0, 0 0; opacity: 0.58; }
  45% { background-position: 120px -90px, -80px 120px, 0 0; opacity: 0.86; }
  53% { opacity: 0.42; }
  58% { opacity: 0.88; }
}

@keyframes wjpSparkPulse {
  0% { opacity: 0.18; transform: scale(0.86) rotate(0deg); }
  52% { opacity: 0.78; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 0.12; transform: scale(1.22) rotate(7deg); }
}

@keyframes wjpSparkParticle {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55); }
  22% { opacity: 0.95; transform: translate3d(calc(var(--dx, 20px) * .32), calc(var(--dy, -40px) * .32), 0) scale(1.05); }
  62% { opacity: 0.42; transform: translate3d(var(--dx, 20px), var(--dy, -40px), 0) scale(0.84); }
}

@keyframes wjpSparkStreak {
  0% { opacity: 0; transform: translate3d(-80px, 36px, 0) rotate(var(--r, -18deg)) scaleX(0.3); }
  36% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(160px, -86px, 0) rotate(var(--r, -18deg)) scaleX(1); }
}

@keyframes wjpFireBreath {
  from { transform: translate3d(-1%, 1.2%, 0) scale(1); opacity: 0.78; }
  to { transform: translate3d(1%, -1.6%, 0) scale(1.08); opacity: 1; }
}

@keyframes wjpEmberField {
  from { background-position: 0 130px, 0 170px, 0 0; }
  to { background-position: 42px -150px, -36px -130px, 0 0; }
}

@keyframes wjpFireWave {
  0%, 100% { opacity: 0.24; transform: translate3d(-50%, 18%, 0) scale(0.92); }
  50% { opacity: 0.74; transform: translate3d(-50%, -4%, 0) scale(1.14); }
}

@keyframes wjpEmberRise {
  0% { opacity: 0; transform: translate3d(0, 80px, 0) scale(0.45); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(var(--dx, 20px), -180px, 0) scale(1.04); }
}

@keyframes wjpHeatSpark {
  0% { opacity: 0; transform: translate3d(-44px, 46px, 0) rotate(var(--r, -22deg)); }
  35% { opacity: 0.66; }
  100% { opacity: 0; transform: translate3d(90px, -90px, 0) rotate(var(--r, -22deg)); }
}

@keyframes wjpRainField {
  from { background-position: 0 0, 0 0; }
  to { background-position: -74px 230px, 0 0; }
}

@keyframes wjpWetHighlight {
  0%, 100% { opacity: 0.24; transform: translate3d(-2%, 0, 0); }
  50% { opacity: 0.5; transform: translate3d(2%, 1%, 0); }
}

@keyframes wjpRainDrop {
  0% { opacity: 0; transform: translate3d(0, -120px, 0); }
  18% { opacity: 0.62; }
  100% { opacity: 0; transform: translate3d(var(--dx, 8px), 220px, 0); }
}

@keyframes wjpDropSlide {
  0%, 100% { opacity: 0.06; transform: translate3d(0, -12px, 0) scale(0.72); }
  45% { opacity: 0.68; transform: translate3d(8px, 54px, 0) scale(1); }
}

@keyframes wjpRipple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  24% { opacity: 0.58; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes wjpMomentumVortex {
  0%, 100% { transform: rotate(-3deg) scale(1); background-position: 0 0, 0 0; }
  50% { transform: rotate(4deg) scale(1.05); background-position: 0 0, 96px -42px; }
}

@keyframes wjpWarmSweep {
  0%, 100% { opacity: 0.28; transform: translateX(-2%) scale(1); }
  50% { opacity: 0.62; transform: translateX(2%) scale(1.04); }
}

@keyframes wjpFragmentDrift {
  0% { opacity: 0; transform: translate3d(-96px, -70px, 0) rotate(var(--r, 0deg)) scale(0.66); }
  26% { opacity: 0.58; }
  100% { opacity: 0; transform: translate3d(126px, 150px, 0) rotate(calc(var(--r, 0deg) + 150deg)) scale(1.04); }
}

@keyframes wjpMomentumTrail {
  0% { opacity: 0; transform: translate3d(-80px, -40px, 0) rotate(var(--r, 28deg)) scaleX(.34); }
  40% { opacity: 0.48; }
  100% { opacity: 0; transform: translate3d(130px, 100px, 0) rotate(var(--r, 28deg)) scaleX(1); }
}

@keyframes wjpNebulaBreathe {
  0%, 100% { opacity: 0.72; transform: scale(1) translate3d(-1%, 1%, 0); }
  50% { opacity: 1; transform: scale(1.09) translate3d(1%, -1%, 0); }
}

@keyframes wjpStarDepth {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: -44px -132px, 42px -170px, 90px -220px; }
}

@keyframes wjpNebulaMist {
  0%, 100% { opacity: 0.16; transform: translate3d(-3%, 2%, 0) scale(0.95); }
  50% { opacity: 0.54; transform: translate3d(3%, -2%, 0) scale(1.12); }
}

@keyframes wjpStarFloat {
  0%, 100% { opacity: 0.12; transform: translate3d(0, 0, 0) scale(0.55); }
  50% { opacity: 0.86; transform: translate3d(var(--dx, 20px), var(--dy, -42px), 0) scale(1); }
}

@keyframes wjpGrowthRings {
  0% { opacity: 0.26; transform: scale(0.94); }
  68% { opacity: 0.82; transform: scale(1.08); }
  100% { opacity: 0.16; transform: scale(1.17); }
}

@keyframes wjpOrganicSweep {
  from { background-position: 0 0, 0 0; }
  to { background-position: 120px -64px, -80px 54px; }
}

@keyframes wjpGrowthNode {
  0%, 100% { opacity: 0.14; transform: translate3d(0, 0, 0) scale(0.62); }
  50% { opacity: 0.82; transform: translate3d(var(--dx, 24px), var(--dy, -24px), 0) scale(1.12); }
}

@keyframes wjpGrowthAccent {
  0%, 100% { opacity: 0.1; transform: translate3d(-24px, 44px, 0) rotate(var(--r, 20deg)); }
  50% { opacity: 0.44; transform: translate3d(30px, -36px, 0) rotate(calc(var(--r, 20deg) + 34deg)); }
}

@keyframes wjpSignalRings {
  0% { opacity: 0.26; transform: scale(0.92); }
  64% { opacity: 0.82; transform: scale(1.08); }
  100% { opacity: 0.16; transform: scale(1.17); }
}

@keyframes wjpRefractionScan {
  0%, 100% { background-position: 0 0, -120% 0; opacity: 0.28; }
  50% { background-position: 0 96px, 120% 0; opacity: 0.54; }
}

@keyframes wjpSignalRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  22% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes wjpSignalLine {
  0%, 100% { opacity: 0.12; transform: translate3d(-50%, 0, 0) scaleX(0.78); }
  50% { opacity: 0.52; transform: translate3d(-50%, var(--dy, 12px), 0) scaleX(1.08); }
}

@keyframes wjpSignalParticle {
  0%, 100% { opacity: 0.08; transform: scale(0.58); }
  50% { opacity: 0.7; transform: translate3d(var(--dx, 36px), 0, 0) scale(1); }
}

@keyframes wjpLiquidField {
  0%, 100% { background-position: -120px 0, 100px 0; transform: translate3d(-1%, 0, 0) skewX(-3deg); }
  50% { background-position: 160px -42px, -120px 46px; transform: translate3d(1.5%, -1%, 0) skewX(3deg); }
}

@keyframes wjpLiquidThreads {
  from { background-position: 0 0, 0 0; }
  to { background-position: 190px -150px, -120px 120px; }
}

@keyframes wjpRibbonFlow {
  0% { stroke-dashoffset: 420; opacity: 0.12; }
  38% { opacity: 0.64; }
  100% { stroke-dashoffset: -420; opacity: 0.12; }
}

@keyframes wjpStreamFly {
  0% { opacity: 0; transform: translate3d(-90px, 34px, 0) rotate(var(--r, -16deg)) scaleX(0.36); }
  36% { opacity: 0.74; }
  100% { opacity: 0; transform: translate3d(166px, -76px, 0) rotate(var(--r, -16deg)) scaleX(1.1); }
}

@keyframes wjpGridShift {
  0%, 100% { background-position: 0 0, 0 0, 0 0; opacity: 0.42; }
  50% { background-position: 18px 18px, 18px 18px, 0 0; opacity: 0.76; }
}

@keyframes wjpPrecisionScan {
  0%, 100% { background-position: 0 -90%, 40% 0; opacity: 0.24; }
  50% { background-position: 0 120%, 68% 0; opacity: 0.78; }
}

@keyframes wjpGridLink {
  0% { opacity: 0.04; stroke-dashoffset: 80; }
  36% { opacity: 0.56; }
  100% { opacity: 0.04; stroke-dashoffset: -160; }
}

@keyframes wjpGridNode {
  0%, 100% { opacity: 0.16; transform: scale(0.62); }
  50% { opacity: 0.82; transform: scale(1.08); }
}

@keyframes wjpCreativeBloom {
  0%, 100% { opacity: 0.46; transform: rotate(0deg) scale(0.98); }
  50% { opacity: 0.9; transform: rotate(8deg) scale(1.06); }
}

@keyframes wjpCreativeDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: -50px -132px, 44px -168px, 80px -220px; }
}

@keyframes wjpBurstBloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.28); }
  24% { opacity: 0.58; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.32); }
}

@keyframes wjpCreativeShape {
  0%, 100% { opacity: 0.08; transform: translate3d(-40px, 30px, 0) rotate(var(--r, 12deg)) scale(0.72); }
  48% { opacity: 0.58; transform: translate3d(36px, -48px, 0) rotate(calc(var(--r, 12deg) + 70deg)) scale(1.06); }
}

@keyframes wjpCreativeParticle {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.38); }
  34% { opacity: 0.82; }
  100% { opacity: 0; transform: translate3d(var(--dx, 70px), var(--dy, -70px), 0) scale(1.25); }
}

@keyframes wjpFutureTerrain {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 -120px, 52px -160px, 0 0; }
}

@keyframes wjpFuturePulse {
  0% { opacity: 0.18; transform: scale(0.92); }
  60% { opacity: 0.78; transform: scale(1.08); }
  100% { opacity: 0.14; transform: scale(1.16); }
}

@keyframes wjpFutureDot {
  0% { opacity: 0; transform: translate3d(-28px, 42px, 0) scale(0.45); }
  40% { opacity: 0.86; }
  100% { opacity: 0; transform: translate3d(108px, -100px, 0) scale(1.08); }
}

@keyframes wjpFutureWave {
  0% { opacity: 0; transform: translate3d(-54%, 40px, 0) scaleX(0.5); }
  40% { opacity: 0.58; }
  100% { opacity: 0; transform: translate3d(-46%, -62px, 0) scaleX(1.08); }
}

@keyframes wjpImpactGlow {
  0%, 100% { opacity: 0.56; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes wjpGoldShimmer {
  0%, 18% { transform: translateX(-72%); opacity: 0.12; }
  50% { opacity: 0.86; }
  82%, 100% { transform: translateX(72%); opacity: 0.14; }
}

@keyframes wjpGoldDust {
  0%, 100% { opacity: 0.12; transform: translate3d(0, 0, 0) scale(0.62); }
  50% { opacity: 0.76; transform: translate3d(var(--dx, 25px), var(--dy, -45px), 0) scale(1.06); }
}

@keyframes wjpGoldSweep {
  0% { opacity: 0; transform: translate3d(-70%, 42px, 0) rotate(var(--r, -10deg)); }
  46% { opacity: 0.58; }
  100% { opacity: 0; transform: translate3d(80%, -38px, 0) rotate(var(--r, -10deg)); }
}

@media (max-width: 820px) {
  .home-hero .hero-ambient::after {
    opacity: 0.18;
  }

  .home-hero .ambient-layer::before,
  .home-hero .ambient-layer::after {
    inset: -4%;
  }

  .home-hero .atmo-core-glow {
    width: min(76vw, 340px);
    filter: blur(16px);
  }

  .home-hero .ambient-layer {
    filter: saturate(1.05) contrast(1.02) brightness(1);
  }

  .home-hero .atmo-item[data-mobile-extra="true"],
  .home-hero .ambient-svg .mobile-extra {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-ambient::after,
  .home-hero .ambient-layer,
  .home-hero .ambient-layer::before,
  .home-hero .ambient-layer::after,
  .home-hero .ambient-svg path,
  .home-hero .ambient-svg polyline,
  .home-hero .ambient-svg circle,
  .home-hero .ambient-svg line,
  .home-hero .atmo-item,
  .home-hero .atmo-core-glow {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .home-hero .atmo-item {
    opacity: 0.18 !important;
  }

  .home-hero .ambient-layer::before,
  .home-hero .ambient-layer::after {
    transform: none !important;
  }
}