/* ═══════════════════════════════════════════════════════════════════
   HELL3D.CSS — Pseudo-3D depth, shadows, tilt, rim lighting
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FUNNEL PERSPECTIVE WRAPPER ─────────────────────────────────── */
.inferno-funnel {
  perspective: 1800px;
  perspective-origin: 50% 0%;
}

/* Each circle gets a subtle inward pinch — the deeper, the narrower */
.hell-circle {
  transform-style: preserve-3d;
  position: relative;
  isolation: isolate;
}

.circle-1 { --depth-scale: 1.00; --depth-z: 0px;    --shrink: 0%; }
.circle-2 { --depth-scale: 0.98; --depth-z: -20px;  --shrink: 1%; }
.circle-3 { --depth-scale: 0.96; --depth-z: -40px;  --shrink: 2%; }
.circle-4 { --depth-scale: 0.94; --depth-z: -60px;  --shrink: 3%; }
.circle-5 { --depth-scale: 0.92; --depth-z: -80px;  --shrink: 4%; }
.circle-6 { --depth-scale: 0.90; --depth-z: -100px; --shrink: 5%; }
.circle-7 { --depth-scale: 0.88; --depth-z: -120px; --shrink: 6%; }
.circle-8 { --depth-scale: 0.86; --depth-z: -140px; --shrink: 7%; }
.circle-9 { --depth-scale: 0.84; --depth-z: -160px; --shrink: 8%; }

/* Wedge clipping — each circle visually tapers inward */
.hell-circle::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0; right: 0;
  height: 60px;
  z-index: 5;
  pointer-events: none;
}

/* Left slope shadow */
.hell-circle .slope-left {
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--shrink) * 2);
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.5), transparent);
  z-index: 4;
  pointer-events: none;
}

/* Right slope shadow */
.hell-circle .slope-right {
  position: absolute;
  top: 0; right: 0;
  width: calc(var(--shrink) * 2);
  height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0.5), transparent);
  z-index: 4;
  pointer-events: none;
}

/* ─── INTER-CIRCLE DEPTH SHADOWS ──────────────────────────────────── */
.hell-circle::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 0; right: 0;
  height: 40px;
  z-index: 6;
  pointer-events: none;
}

.circle-1::after { background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(26,45,14,0)); }
.circle-2::after { background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(32,10,40,0)); }
.circle-3::after { background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(8,14,30,0)); }
.circle-4::after { background: linear-gradient(to bottom, rgba(0,0,0,0.82), rgba(30,14,0,0)); }
.circle-5::after { background: linear-gradient(to bottom, rgba(0,0,0,0.84), rgba(36,8,0,0)); }
.circle-6::after { background: linear-gradient(to bottom, rgba(0,0,0,0.86), rgba(24,4,36,0)); }
.circle-7::after { background: linear-gradient(to bottom, rgba(0,0,0,0.88), rgba(36,4,4,0)); }
.circle-8::after { background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(16,4,24,0)); }
.circle-9::after { background: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,4,14,0)); }

/* ─── CIRCLE INNER — depth inset shadow ──────────────────────────── */
.circle-inner {
  position: relative;
  z-index: 3;
}
.circle-inner::before {
  content: '';
  position: absolute;
  inset: -20px -100vw;
  pointer-events: none;
  z-index: -1;
  box-shadow:
    inset 80px 0 120px rgba(0,0,0,0.6),
    inset -80px 0 120px rgba(0,0,0,0.6);
}

/* ─── 3D SECTION EDGE LIGHTING ────────────────────────────────────── */
.hell-circle {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 -2px 0 rgba(0,0,0,0.8),
    0 2px 0 rgba(0,0,0,0.6);
}

/* Colored top-edge rim per circle */
.circle-1 { box-shadow: inset 0 1px 0 rgba(80,200,60,0.15), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-2 { box-shadow: inset 0 1px 0 rgba(180,80,220,0.15), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-3 { box-shadow: inset 0 1px 0 rgba(80,140,220,0.15), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-4 { box-shadow: inset 0 1px 0 rgba(220,160,0,0.18), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-5 { box-shadow: inset 0 1px 0 rgba(255,100,0,0.20), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-6 { box-shadow: inset 0 1px 0 rgba(160,40,255,0.20), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-7 { box-shadow: inset 0 1px 0 rgba(255,40,40,0.22), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-8 { box-shadow: inset 0 1px 0 rgba(140,60,255,0.22), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }
.circle-9 { box-shadow: inset 0 1px 0 rgba(80,160,255,0.25), 0 -2px 0 rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); }

/* ─── SOUL CARDS — 3D tilt + rim lighting ────────────────────────── */
.soul-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  /* Emboss base */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.5),
    0 6px 16px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* Pseudo-element for the card "depth face" (3D bottom/side illusion) */
.soul-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.03) 30%,
    transparent 60%,
    rgba(0,0,0,0.15) 100%
  );
  transition: opacity 0.3s ease;
}

/* "Glass" reflection layer */
.soul-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05) 0%,
    transparent 100%
  );
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.soul-card:hover::after { opacity: 0.9; }

/* Per-circle card accent shadows on hover */
.circle-1 .soul-card:hover { box-shadow: 0 16px 48px rgba(80,200,60,0.25), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(120,255,80,0.12), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-2 .soul-card:hover { box-shadow: 0 16px 48px rgba(180,80,220,0.25), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(220,120,255,0.12), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-3 .soul-card:hover { box-shadow: 0 16px 48px rgba(80,140,220,0.25), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(120,180,255,0.12), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-4 .soul-card:hover { box-shadow: 0 16px 48px rgba(220,160,0,0.28), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,200,60,0.14), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-5 .soul-card:hover { box-shadow: 0 16px 48px rgba(255,100,0,0.30), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,140,60,0.15), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-6 .soul-card:hover { box-shadow: 0 16px 48px rgba(160,40,255,0.30), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(200,100,255,0.15), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-7 .soul-card:hover { box-shadow: 0 16px 48px rgba(255,40,40,0.32), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,100,100,0.15), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-8 .soul-card:hover { box-shadow: 0 16px 48px rgba(140,60,255,0.30), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(180,100,255,0.15), inset 0 -1px 0 rgba(0,0,0,.5); }
.circle-9 .soul-card:hover { box-shadow: 0 16px 48px rgba(80,160,255,0.35), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(120,200,255,0.18), inset 0 -1px 0 rgba(0,0,0,.5); }

/* ─── CIRCLE NAME — 3D emboss text ───────────────────────────────── */
.circle-name {
  text-shadow:
    0 1px 0 rgba(0,0,0,0.8),
    0 2px 4px rgba(0,0,0,0.6),
    0 4px 12px rgba(0,0,0,0.4),
    0 -1px 0 rgba(255,255,255,0.04);
}

.circle-1 .circle-name { text-shadow: 0 0 30px rgba(80,200,60,0.5), 0 2px 4px rgba(0,0,0,0.9), 0 0 60px rgba(80,200,60,0.2); }
.circle-2 .circle-name { text-shadow: 0 0 30px rgba(180,80,220,0.5), 0 2px 4px rgba(0,0,0,0.9), 0 0 60px rgba(180,80,220,0.2); }
.circle-3 .circle-name { text-shadow: 0 0 30px rgba(80,140,220,0.5), 0 2px 4px rgba(0,0,0,0.9), 0 0 60px rgba(80,140,220,0.2); }
.circle-4 .circle-name { text-shadow: 0 0 40px rgba(220,160,0,0.6), 0 2px 4px rgba(0,0,0,0.9), 0 0 80px rgba(220,160,0,0.25); }
.circle-5 .circle-name { text-shadow: 0 0 40px rgba(255,100,0,0.65), 0 2px 4px rgba(0,0,0,0.9), 0 0 80px rgba(255,100,0,0.3), 0 0 120px rgba(255,60,0,0.15); }
.circle-6 .circle-name { text-shadow: 0 0 40px rgba(160,40,255,0.65), 0 2px 4px rgba(0,0,0,0.9), 0 0 80px rgba(140,20,240,0.3); }
.circle-7 .circle-name { text-shadow: 0 0 40px rgba(255,40,40,0.7), 0 2px 4px rgba(0,0,0,0.9), 0 0 100px rgba(255,20,20,0.3); }
.circle-8 .circle-name { text-shadow: 0 0 40px rgba(140,60,255,0.7), 0 2px 4px rgba(0,0,0,0.9), 0 0 100px rgba(120,40,240,0.3); }
.circle-9 .circle-name { text-shadow: 0 0 50px rgba(80,160,255,0.8), 0 2px 4px rgba(0,0,0,0.9), 0 0 120px rgba(60,140,255,0.4); }

/* ─── CIRCLE NUMERAL — 3D stroke + glow ──────────────────────────── */
.circle-numeral {
  transition: transform 0.4s ease;
}
.hell-circle:hover .circle-numeral {
  transform: scale(1.05) translateY(-2px);
}

/* ─── CIRCLE DESCRIPTION — frosted depth panel ───────────────────── */
.circle-description {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    2px 4px 20px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.03);
}

/* ─── GATES HERO — deep 3D layers ─────────────────────────────────── */
.inferno-gates {
  box-shadow: 0 20px 60px rgba(0,0,0,0.8) inset;
}

.gates-title {
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.8));
}

.inferno-title {
  filter: drop-shadow(0 0 40px rgba(200,80,0,0.3));
}

.inferno-word {
  text-shadow: none;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,0.9))
    drop-shadow(0 4px 8px rgba(0,0,0,0.7))
    drop-shadow(0 0 40px rgba(200,120,0,0.35));
}
.inferno-word.accent {
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,0.9))
    drop-shadow(0 4px 8px rgba(0,0,0,0.7))
    drop-shadow(0 0 60px rgba(255,40,0,0.4))
    drop-shadow(0 0 100px rgba(200,0,0,0.2));
}

/* ─── GATES QUOTE — glass panel ──────────────────────────────────── */
.gates-quote {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,200,100,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* ─── DESCEND BUTTON — 3D pressed effect ─────────────────────────── */
.descend-btn {
  box-shadow:
    0 4px 0 rgba(180,60,0,0.5),
    0 6px 20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,200,100,0.1);
  transition: all 0.2s ease;
}
.descend-btn:hover {
  box-shadow:
    0 6px 0 rgba(220,80,0,0.6),
    0 10px 30px rgba(255,80,0,0.3),
    inset 0 1px 0 rgba(255,220,120,0.15);
  transform: translateY(-2px);
}
.descend-btn:active {
  box-shadow:
    0 1px 0 rgba(180,60,0,0.5),
    0 2px 8px rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(0,0,0,0.3);
  transform: translateY(2px);
}

/* ─── FIRE COLUMNS — volumetric with shadow ──────────────────────── */
.fire-col::before {
  filter: drop-shadow(0 -4px 12px rgba(255,100,0,0.6))
          drop-shadow(0 0 6px rgba(255,200,0,0.3));
}
.circle-fire-bottom .fire-col::before {
  filter: drop-shadow(0 -6px 16px currentColor)
          drop-shadow(0 0 8px currentColor);
}

/* ─── GREED PLAN CARDS — 3D depth ────────────────────────────────── */
.greed-plan {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,200,80,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.greed-plan:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 8px 0 rgba(120,80,0,0.4),
    0 16px 40px rgba(200,140,0,0.25),
    inset 0 1px 0 rgba(255,220,100,0.14);
}
.greed-plan--hl {
  box-shadow:
    0 4px 0 rgba(140,100,0,0.5),
    0 8px 32px rgba(200,150,0,0.3),
    inset 0 1px 0 rgba(255,230,120,0.12);
}

/* ─── TESTIMONIAL SOUL CARDS ─────────────────────────────────────── */
.testimonial-soul {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(180,100,255,0.08);
}
.testimonial-soul:hover {
  box-shadow:
    0 12px 40px rgba(120,60,255,0.25),
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(200,140,255,0.12);
}

/* ─── TREACHERY CARDS — frozen glass ─────────────────────────────── */
.treachery-card {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.7),
    0 8px 32px rgba(0,20,60,0.6),
    inset 0 1px 0 rgba(180,220,255,0.1),
    inset 0 0 40px rgba(60,140,255,0.05);
}
.treachery-card:hover {
  box-shadow:
    0 16px 60px rgba(60,140,255,0.35),
    0 4px 16px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(200,235,255,0.18),
    inset 0 0 60px rgba(80,160,255,0.08);
}

/* ─── SATAN FACE — 3D volume ─────────────────────────────────────── */
.satan-face {
  box-shadow:
    0 8px 0 rgba(100,0,0,0.6),
    0 16px 60px rgba(200,0,0,0.25),
    inset 0 -4px 20px rgba(0,0,0,0.6),
    inset 0 2px 8px rgba(255,80,40,0.1);
}
.satan-eye {
  box-shadow:
    0 0 8px rgba(255,30,0,0.8),
    0 0 20px rgba(255,60,0,0.5),
    0 0 40px rgba(200,0,0,0.3),
    inset 0 1px 0 rgba(255,200,180,0.2);
}

/* ─── INFERNO CTA BUTTONS — 3D pressed ──────────────────────────── */
.btn-inferno {
  box-shadow:
    0 4px 0 rgba(80,0,0,0.7),
    0 6px 20px rgba(200,30,0,0.4),
    inset 0 1px 0 rgba(255,160,120,0.15);
}
.btn-inferno:hover {
  box-shadow:
    0 6px 0 rgba(100,0,0,0.7),
    0 12px 40px rgba(255,60,0,0.45),
    inset 0 1px 0 rgba(255,180,140,0.2);
  transform: translateY(-3px);
}
.btn-inferno:active {
  box-shadow:
    0 1px 0 rgba(80,0,0,0.7),
    0 2px 10px rgba(200,30,0,0.3),
    inset 0 3px 6px rgba(0,0,0,0.4);
  transform: translateY(2px);
}

/* ─── SKILL SOUL CARDS — glow orb shadow ────────────────────────── */
.soul-orb {
  box-shadow:
    0 0 8px rgba(120,200,80,0.7),
    0 0 20px rgba(80,200,60,0.4),
    0 0 40px rgba(60,180,40,0.2),
    inset 0 1px 0 rgba(200,255,180,0.3);
}

/* ─── LAVA WAVES — 3D ripple shadow ─────────────────────────────── */
.wave {
  box-shadow: 0 -4px 20px rgba(200,20,0,0.3);
}

/* ─── CIRCLE HEADER separator line ──────────────────────────────── */
.circle-header::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0;
  bottom: -1.5rem;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.06) 80%,
    transparent 100%
  );
}
.circle-header { position: relative; }

/* ─── ANIMATE: circle enter fly-in from sides ────────────────────── */
.hell-circle .circle-header[data-aos] {
  transform: translateY(20px) skewY(-1deg);
}
.hell-circle .circle-header[data-aos].aos-visible {
  transform: translateY(0) skewY(0);
}

/* ─── SCROLL DEPTH FOG — deeper = more dark vignette ────────────── */
.circle-5 .circle-inner,
.circle-6 .circle-inner,
.circle-7 .circle-inner,
.circle-8 .circle-inner,
.circle-9 .circle-inner {
  position: relative;
}

.circle-7 .circle-inner::after,
.circle-8 .circle-inner::after,
.circle-9 .circle-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 10;
}

/* ─── FIRE GLOW on circle borders ───────────────────────────────── */
.circle-fire-bottom {
  filter: drop-shadow(0 -8px 20px rgba(255,80,0,0.3));
}
.circle-1 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(60,160,40,0.3)); }
.circle-2 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(160,60,200,0.3)); }
.circle-3 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(60,100,200,0.3)); }
.circle-4 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(200,140,0,0.35)); }
.circle-5 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(255,80,0,0.4)); }
.circle-6 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(140,20,255,0.4)); }
.circle-7 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(255,20,20,0.45)); }
.circle-8 .circle-fire-bottom { filter: drop-shadow(0 -8px 20px rgba(120,40,255,0.45)); }

/* ─── PORTAL RINGS on circle transitions ────────────────────────── */
.circle-funnel-top {
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 8px;
  z-index: 10;
}
.circle-1 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(80,200,60,0.25) 25%, rgba(120,240,80,0.5) 50%, rgba(80,200,60,0.25) 75%, transparent); box-shadow: 0 0 20px rgba(80,200,60,0.2); }
.circle-2 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(180,80,220,0.25) 25%, rgba(220,120,255,0.5) 50%, rgba(180,80,220,0.25) 75%, transparent); box-shadow: 0 0 20px rgba(180,80,220,0.2); }
.circle-3 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(80,140,220,0.25) 25%, rgba(120,180,255,0.5) 50%, rgba(80,140,220,0.25) 75%, transparent); box-shadow: 0 0 20px rgba(80,140,220,0.2); }
.circle-4 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(220,160,0,0.3) 25%, rgba(255,200,60,0.6) 50%, rgba(220,160,0,0.3) 75%, transparent); box-shadow: 0 0 24px rgba(220,160,0,0.25); }
.circle-5 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(255,100,0,0.3) 25%, rgba(255,140,40,0.65) 50%, rgba(255,100,0,0.3) 75%, transparent); box-shadow: 0 0 28px rgba(255,100,0,0.3); }
.circle-6 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(160,40,255,0.3) 25%, rgba(200,100,255,0.65) 50%, rgba(160,40,255,0.3) 75%, transparent); box-shadow: 0 0 28px rgba(160,40,255,0.3); }
.circle-7 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(255,40,40,0.35) 25%, rgba(255,80,80,0.7) 50%, rgba(255,40,40,0.35) 75%, transparent); box-shadow: 0 0 32px rgba(255,40,40,0.35); }
.circle-8 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(140,60,255,0.35) 25%, rgba(180,100,255,0.7) 50%, rgba(140,60,255,0.35) 75%, transparent); box-shadow: 0 0 32px rgba(140,60,255,0.35); }
.circle-9 .circle-funnel-top  { background: linear-gradient(90deg, transparent, rgba(80,160,255,0.4) 25%, rgba(120,200,255,0.8) 50%, rgba(80,160,255,0.4) 75%, transparent); box-shadow: 0 0 40px rgba(80,160,255,0.4); }

/* ─── CIRCLE 9 — ICE TEXTURE overlay ────────────────────────────── */
.circle-9 {
  background-image:
    linear-gradient(180deg, #000410 0%, #000818 50%, #00040e 100%),
    repeating-linear-gradient(
      -45deg,
      rgba(80,140,255,0.015) 0px,
      rgba(80,140,255,0.015) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(80,140,255,0.01) 0px,
      rgba(80,140,255,0.01) 1px,
      transparent 1px,
      transparent 12px
    );
  background-blend-mode: normal, screen, screen;
}

/* ─── PERFORMANCE: contain prevents layout recalc propagation ── */
.hell-circle {
  contain: layout style;
}
.soul-card {
  contain: layout style;
}
.circle-inner {
  contain: layout;
}
/* Promote fire cols to own compositing layer */
.fire-col,
.circle-fire-bottom .fire-col {
  will-change: transform;
}
/* Promote gate title to own layer */
.gates-title {
  will-change: transform;
}
/* Avoid promoting too many layers - only critical movers */
.city-scene {
  will-change: contents;
}


/* ─── SATAN SVG FACE — detailed ─────────────────────────────── */
.satan-face {
  width: 300px;
  height: 400px;
  margin: 0 auto 2.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.satan-face svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 30px rgba(200,30,0,0.5))
          drop-shadow(0 0 60px rgba(160,0,0,0.3));
  animation: satan-idle 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes satan-idle {
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-5px) scale(1.02)}
}
/* Eye pupils animate */
.satan-pupil-l { animation: eye-l 5s ease-in-out infinite; transform-origin:center; }
.satan-pupil-r { animation: eye-r 5s ease-in-out infinite; transform-origin:center; }
@keyframes eye-l {
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(2px,-2px)}
  60%{transform:translate(-2px,3px)}
  80%{transform:translate(3px,1px)}
}
@keyframes eye-r {
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(3px,1px)}
  50%{transform:translate(-2px,3px)}
  75%{transform:translate(2px,-2px)}
}
/* Eyelid blink */
.satan-lid-l, .satan-lid-r {
  animation: blink 6s ease-in-out infinite;
  transform-origin: center top;
}
.satan-lid-r { animation-delay: 0.05s; }
@keyframes blink {
  0%,90%,100%{transform:scaleY(0)}
  94%,96%{transform:scaleY(1)}
}
/* Flames above head pulse */
.satan-flame { animation: flame-flicker var(--fd,0.3s) ease-in-out infinite alternate; transform-origin:bottom center; }
@keyframes flame-flicker {
  0%{transform:scaleX(1) scaleY(1) rotate(var(--fr,0deg))}
  100%{transform:scaleX(0.85) scaleY(1.15) rotate(calc(var(--fr,0deg) * -1.5))}
}
/* Horns subtle pulse */
.satan-horn { animation: horn-pulse 3s ease-in-out infinite alternate; }
@keyframes horn-pulse {
  0%{filter:brightness(1)}
  100%{filter:brightness(1.3)}
}
/* Mouth breathe */
.satan-mouth-inner { animation: mouth-breathe 3s ease-in-out infinite; transform-origin:center; }
@keyframes mouth-breathe {
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(1.2)}
}
/* Eye glow pulse */
.satan-eye-glow { animation: eye-glow 2s ease-in-out infinite alternate; }
@keyframes eye-glow {
  0%{opacity:0.5}
  100%{opacity:1}
}


/* ─── Satan: chest breath animation ────────────────────── */
.satan-chest {
  transform-origin: center 60%;
  animation: satan-breath 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes satan-breath {
  0%,100%{ transform: scaleY(1) scaleX(1); }
  45%    { transform: scaleY(1.04) scaleX(1.01); }
  55%    { transform: scaleY(1.04) scaleX(1.01); }
}

/* ─── Claw flex animation ───────────────────────────────── */
.satan-claw-l {
  transform-origin: 60px 290px;
  animation: claw-flex-l 7s ease-in-out infinite 2s;
}
.satan-claw-r {
  transform-origin: 240px 290px;
  animation: claw-flex-r 7s ease-in-out infinite 2.5s;
}
@keyframes claw-flex-l {
  0%,85%,100%{ transform: rotate(0deg) scaleX(1); }
  88%{ transform: rotate(-6deg) scaleX(1.05); }
  92%{ transform: rotate(4deg)  scaleX(0.97); }
  96%{ transform: rotate(-3deg) scaleX(1.02); }
}
@keyframes claw-flex-r {
  0%,85%,100%{ transform: rotate(0deg) scaleX(1); }
  88%{ transform: rotate(6deg)  scaleX(1.05); }
  92%{ transform: rotate(-4deg) scaleX(0.97); }
  96%{ transform: rotate(3deg)  scaleX(1.02); }
}

/* ─── Smoke from mouth ──────────────────────────────────── */
.satan-smoke {
  position: absolute;
  left: 50%; bottom: 30%;
  transform: translateX(-50%);
  pointer-events: none;
}
.smoke-puff {
  position: absolute;
  border-radius: 50%;
  background: rgba(60,20,20,0.15);
  will-change: transform, opacity;
  animation: smoke-rise var(--sd,3s) ease-out var(--dd,0s) infinite;
}
@keyframes smoke-rise {
  0%   { transform: translate(0,0) scale(0.3); opacity:0.5; }
  40%  { opacity:0.3; }
  100% { transform: translate(var(--sx,0px),-80px) scale(1.8); opacity:0; }
}