/* Living illustration: only transforms and opacity animate. Text stays stationary. */
.devilex-hero { background: #100b1d; }
.devilex-hero::before { z-index: 2; opacity: .48; }
.devilex-hero::after { z-index: 4; }
.devilex-hero-copy,.devilex-hero-caption { z-index: 3; }
.devilex-hero-atmosphere,.devilex-hero-parallax,.devilex-hero-veil,
.devilex-void-mist,.devilex-void-particles {
  position: absolute; inset: 0; pointer-events: none;
}
.devilex-hero-atmosphere { z-index: 0; overflow: hidden; contain: paint; }
.devilex-hero-parallax { transform: translate3d(var(--void-x,0px),var(--void-y,0px),0); }
.devilex-hero-art {
  position: absolute; top: 0; right: 0; width: 63%; aspect-ratio: 894 / 1200;
  transform-origin: 60% 22%; animation: devilex-levitate 12s ease-in-out infinite;
  mask-image: linear-gradient(90deg,transparent,#000 23%);
}
.devilex-hero-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.devilex-hero-veil {
  background: linear-gradient(90deg,#100b1d 0%,rgba(16,11,29,.98) 30%,rgba(16,11,29,.8) 45%,rgba(16,11,29,.08) 72%),linear-gradient(0deg,#100b1d 0%,transparent 46%);
}
.devilex-void-orb {
  display: block; position: absolute; width: 10%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,transparent 48%,#8368ff30 54%,#a49aff9c 59%,#5266ff60 64%,transparent 72%);
  box-shadow: 0 0 22px #7755ff50,0 0 48px #5839cd30;
  animation: devilex-orb-breathe 5.5s ease-in-out infinite;
}
.devilex-void-orb::before {
  content: ""; position: absolute; inset: 3%; border-radius: 50%;
  background: conic-gradient(from 20deg,transparent 0 42%,#bba8ffb3 49%,transparent 56% 87%,#5b8aff99 93%,transparent);
  mask-image: radial-gradient(circle,transparent 59%,#000 62% 66%,transparent 70%);
  animation: devilex-orb-orbit 11s linear infinite;
}
.devilex-void-orb-one { left: 30.8%; top: 2.4%; }
.devilex-void-orb-two { left: 57.2%; top: 8.9%; animation-delay: -2.8s; }
.devilex-void-orb-two::before { animation-direction: reverse; animation-duration: 14s; }
.devilex-void-mist {
  inset: 32% -5% -22% 30%; opacity: .4;
  mask-image: linear-gradient(90deg,transparent,#000 25%);
  background: radial-gradient(ellipse at 63% 60%,#ad72ed38,transparent 48%),radial-gradient(ellipse at 20% 75%,#796be433,transparent 43%);
  animation: devilex-mist-drift 16s ease-in-out infinite alternate;
}
.devilex-void-particles > i {
  display: block; position: absolute; left: var(--x); bottom: var(--y);
  width: var(--size); height: var(--size); border-radius: 50%; opacity: 0;
  background: #dfc5ff; box-shadow: 0 0 7px 2px #a074e75c;
  animation: devilex-mote-rise var(--duration) linear var(--delay) infinite;
}
.devilex-hero h1.devilex-hero-logo { position: relative; isolation: isolate; }
.devilex-hero-logo::before {
  content: ""; position: absolute; z-index: -1; top: -8%; left: 31%; width: 38%; height: 67%;
  background: radial-gradient(ellipse,#b684ff38,transparent 65%); opacity: .3; pointer-events: none;
  animation: devilex-crest-glow 7s ease-in-out infinite;
}
/* The hero starts running in HTML; JavaScript suspends it only while out of view. */
.devilex-ambient,.devilex-void-orb::before,.devilex-void-particles > i,.devilex-hero-logo::before { animation-play-state: paused; }
.is-motion-running .devilex-ambient,.is-motion-running .devilex-void-orb::before,
.is-motion-running .devilex-void-particles > i,.is-motion-running .devilex-hero-logo::before { animation-play-state: running; }

@keyframes devilex-levitate {
  0%,100% { transform: translate3d(0,0,0) rotate(-.2deg) scale(1.035); }
  50% { transform: translate3d(-4px,-9px,0) rotate(.3deg) scale(1.045); }
}
@keyframes devilex-orb-breathe {
  0%,100% { opacity: .38; transform: scale(.99); }
  50% { opacity: .82; transform: scale(1.06); }
}
@keyframes devilex-orb-orbit { to { transform: rotate(360deg); } }
@keyframes devilex-mist-drift {
  from { opacity: .28; transform: translate3d(-12px,9px,0) scale(1); }
  to { opacity: .65; transform: translate3d(18px,-9px,0) scale(1.06); }
}
@keyframes devilex-mote-rise {
  0% { opacity: 0; transform: translate3d(0,20px,0) scale(.65); }
  15% { opacity: .55; }
  70% { opacity: .4; }
  100% { opacity: 0; transform: translate3d(var(--drift),-170px,0) scale(1); }
}
@keyframes devilex-crest-glow { 0%,100% { opacity: .25; } 50% { opacity: .8; } }

@media(max-width:1100px) { .devilex-hero-art { width: 70%; } }
@media(max-width:800px) {
  .devilex-hero-art { width: 80%; }
  .devilex-hero-veil { background: linear-gradient(90deg,#100b1df5,rgba(16,11,29,.72) 57%,rgba(16,11,29,.25)),linear-gradient(0deg,#100b1d,transparent 70%); }
  .devilex-void-particles > i:nth-child(n+7) { display: none; }
}
@media(max-width:540px) {
  .devilex-hero-art { width: 100%; min-height: 100%; mask-image: none; }
  .devilex-hero-art > img { position: absolute; inset: 0; object-position: 65% top; }
  .devilex-hero-veil { background: linear-gradient(90deg,#100b1dd9,#100b1d40),linear-gradient(0deg,#100b1d 0%,#100b1d99 75%,#100b1d60); }
  .devilex-hero-art { animation-name: devilex-levitate-mobile; }
  .devilex-void-orb { display: none; }
  .devilex-void-mist { opacity: .25; }
}
@keyframes devilex-levitate-mobile {
  0%,100% { transform: translate3d(0,0,0) scale(1.045); }
  50% { transform: translate3d(-2px,-5px,0) scale(1.06); }
}