/* EMBERIX homepage motion: original image, compositor-only transforms. */
.hero.cp-motion {
  isolation: isolate;
  background-image: none;
}
.hero.cp-motion::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  pointer-events: none;
  background: url("hero-bg.png") right center / cover no-repeat;
  transform-origin: 76% 54%;
  animation: cp-hero-drift 12s cubic-bezier(.45,0,.55,1) infinite alternate;
  animation-play-state: paused;
}
.hero.cp-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg, #0c0d11) 0%, rgba(12,13,17,.74) 28%, rgba(12,13,17,.25) 52%, transparent 72%),
    linear-gradient(180deg, rgba(12,13,17,.55), transparent 30%, transparent 70%, var(--bg, #0c0d11));
}
.hero.cp-motion .hero-inner { z-index: 4; }
.hero.cp-motion .hero-glow { z-index: 3; }
.hero.cp-motion .hero-glow::before {
  content: "";
  position: absolute;
  width: 62%;
  height: 105%;
  top: 14%;
  right: -14%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,76,40,.34), rgba(230,35,53,.13) 42%, transparent 68%);
  animation: cp-hero-glow 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero.cp-motion .hero-glow::after {
  content: "";
  position: absolute;
  width: 25%;
  height: 140%;
  right: 5%;
  top: -20%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 15%, rgba(255,127,91,.03) 40%, rgba(255,194,132,.23) 50%, rgba(255,98,67,.04) 60%, transparent 85%);
  animation: cp-hero-light 9s ease-in-out infinite;
  animation-play-state: paused;
}
.cp-motion-embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.cp-motion-embers span {
  position: absolute;
  left: var(--cp-x);
  top: var(--cp-y);
  width: var(--cp-size, 3px);
  height: var(--cp-size, 3px);
  border-radius: 50%;
  opacity: 0;
  background: #ff9c72;
  box-shadow: 0 0 7px 1px #e6323370;
  animation: cp-hero-ember var(--cp-duration, 7s) linear var(--cp-delay, 0s) infinite;
  animation-play-state: paused;
}
.hero.cp-motion.cp-motion-running::before,
.hero.cp-motion.cp-motion-running .hero-glow::before,
.hero.cp-motion.cp-motion-running .hero-glow::after,
.hero.cp-motion.cp-motion-running .cp-motion-embers span {
  animation-play-state: running;
}
.cp-motion-control {
  position: absolute;
  z-index: 5;
  right: max(20px, calc((100% - 1200px) / 2));
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(12,13,17,.6);
  color: #f6f6f9;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  transition: background .2s, border-color .2s;
}
.cp-motion-control:hover { background: rgba(34,35,42,.9); border-color: rgba(255,255,255,.7); }
.cp-motion-control:focus-visible { outline: 2px solid #ff6b70; outline-offset: 4px; }
.cp-motion-control svg { width: 15px; height: 15px; display: block; fill: currentColor; }
@keyframes cp-hero-drift {
  from { transform: translate3d(.45%, .45%, 0) scale(1.025); }
  to { transform: translate3d(-.7%, -1%, 0) scale(1.095); }
}
@keyframes cp-hero-glow {
  from { opacity: .35; transform: translate3d(2%,3%,0) scale(.95); }
  to { opacity: .95; transform: translate3d(-5%,-4%,0) scale(1.1); }
}
@keyframes cp-hero-light {
  0%, 8% { opacity: 0; transform: translate3d(-65%,0,0) rotate(25deg); }
  28% { opacity: .65; }
  60% { opacity: .3; }
  83%, 100% { opacity: 0; transform: translate3d(70%,0,0) rotate(25deg); }
}
@keyframes cp-hero-ember {
  0% { opacity: 0; transform: translate3d(0,12px,0) scale(.6); }
  20% { opacity: .58; }
  70% { opacity: .25; }
  100% { opacity: 0; transform: translate3d(48px,-110px,0) scale(.25); }
}
@media (max-width: 767px) {
  .hero.cp-motion::before { transform-origin: 78% 50%; animation-name: cp-hero-drift-mobile; animation-duration: 10s; }
  .hero.cp-motion .hero-glow::before { width: 90%; right: -35%; }
  .hero.cp-motion .hero-glow::after { width: 40%; right: -12%; }
  .cp-motion-embers span:nth-child(n+4) { display: none; }
  .cp-motion-control { right: 16px; bottom: 12px; }
}
@keyframes cp-hero-drift-mobile {
  from { transform: translate3d(.2%,.35%,0) scale(1.02); }
  to { transform: translate3d(-.3%,-.55%,0) scale(1.055); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-motion-control { transition: none; }
}

/* A brighter, warmer hero without moving the copy layer. */
.hero.cp-motion::before{filter:brightness(1.16) saturate(1.08)}