/* ================================================
   SOHAN SUN — La Caverne d'Ali (13 Gates)
   ================================================ */

/* ---- Cave Background ---- */
#cave-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, rgba(255,248,220,0.08), transparent 28%),
              radial-gradient(circle at 15% 30%, rgba(180,208,255,0.06), transparent 22%),
              radial-gradient(circle at 85% 35%, rgba(220,210,180,0.04), transparent 18%);
}

#cave-bg .bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#cave-bg .bg-moon {
  z-index: 1;
}

#cave-bg .moon {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 18vmax;
  height: 18vmax;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6ecd8 0%, #f1e2b2 18%, #b5a58f 38%, rgba(255,255,240,0.05) 100%);
  box-shadow: 0 0 160px rgba(255, 238, 190, 0.35), inset 0 0 30px rgba(255,255,240,0.5);
}

#cave-bg .moon::before {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 35%, rgba(255,255,255,0.4), transparent 32%);
}

#cave-bg .moon::after {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 45%, rgba(255,255,255,0.24), transparent 42%);
}

#cave-bg .moon-mountains {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.95;
  filter: blur(0.4px);
}

#cave-bg .bg-clouds {
  z-index: 2;
}

#cave-bg .cloud {
  position: absolute;
  background: rgba(246, 246, 252, 0.18);
  filter: blur(3px);
  border-radius: 50%;
  opacity: 0.7;
  animation: cloudDrift 28s linear infinite;
}

#cave-bg .cloud-1 { width: 26%; height: 5.4%; top: 14%; left: -18%; animation-duration: 32s; }
#cave-bg .cloud-2 { width: 19%; height: 4.2%; top: 22%; left: 12%; animation-duration: 26s; animation-delay: 1.8s; }
#cave-bg .cloud-3 { width: 24%; height: 5.2%; top: 34%; left: 35%; animation-duration: 30s; animation-delay: 4s; }
#cave-bg .cloud-4 { width: 15%; height: 4.8%; top: 9%; left: 68%; animation-duration: 34s; animation-delay: 2.2s; }
#cave-bg .cloud-5 { width: 18%; height: 3.9%; top: 26%; left: 84%; animation-duration: 22s; animation-delay: 6s; }
#cave-bg .cloud-6 { width: 14%; height: 4.4%; top: 43%; left: 5%; animation-duration: 36s; animation-delay: 8s; }
#cave-bg .cloud-7 { width: 20%; height: 4.6%; top: 46%; left: 52%; animation-duration: 24s; animation-delay: 3.6s; }
#cave-bg .cloud-8 { width: 22%; height: 5.5%; top: 58%; left: 25%; animation-duration: 40s; animation-delay: 10s; }

@keyframes cloudDrift {
  0% { transform: translateX(0) translateY(0); opacity: 0.7; }
  50% { transform: translateX(30vw) translateY(4px); opacity: 0.55; }
  100% { transform: translateX(0) translateY(0); opacity: 0.7; }
}

/* ══════════════════════════════════════════════════════
   FAON DIVIN — Gardien focal au-dessus des portes
   ══════════════════════════════════════════════════════ */

.divine-deer-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 3.5rem;
  width: clamp(200px, 22vw, 340px);
  animation: deerFloat 9s ease-in-out infinite;
  pointer-events: none;
}

.divine-deer-halo-outer,
.divine-deer-halo-inner {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.divine-deer-halo-outer {
  inset: -60%;
  background: radial-gradient(
    circle,
    rgba(60,  230, 130, 0.09) 0%,
    rgba(0,   200,  90, 0.12) 32%,
    rgba(180, 148,  28, 0.06) 58%,
    transparent               76%
  );
  animation: deerHaloPulse 7s ease-in-out infinite;
}

.divine-deer-halo-inner {
  inset: -28%;
  background: radial-gradient(
    circle,
    rgba(100, 255, 170, 0.15) 0%,
    rgba(40,  220, 120, 0.17) 38%,
    transparent               68%
  );
  animation: deerHaloPulse 5s ease-in-out infinite 1.3s;
}

.divine-deer-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 22px rgba(80,  230, 150, 0.50))
    drop-shadow(0 0 52px rgba(0,   200, 100, 0.24))
    drop-shadow(0 0 88px rgba(180, 148,  28, 0.14));
}

@keyframes deerFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

@keyframes deerHaloPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.05); }
}

@media (max-width: 768px) {
  .divine-deer-wrap {
    width: clamp(150px, 30vw, 240px);
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 480px) {
  .divine-deer-wrap {
    width: clamp(120px, 44vw, 190px);
    margin-bottom: 1.8rem;
  }
}

#cave-bg .bg-calligraphy {
  z-index: 4;
}

#cave-bg .calli {
  position: absolute;
  font-family: 'Amiri', serif;
  color: rgba(255, 221, 135, 0.84);
  text-shadow: 0 0 20px rgba(255, 208, 112, 0.4), 0 0 45px rgba(255, 193, 78, 0.12);
  opacity: 0.42;
  white-space: nowrap;
  animation: calligraphyGlow 12s ease-in-out infinite;
}

#cave-bg .ali-large { top: 22%; left: 9%; font-size: 3.6rem; opacity: 0.55; }
#cave-bg .calli-ali-wali { top: 50%; right: 12%; font-size: 1.8rem; opacity: 0.34; transform: rotate(-12deg); }
#cave-bg .calli-bism { bottom: 10%; left: 11%; font-size: 1.1rem; opacity: 0.28; }

@keyframes calligraphyGlow {
  0%, 100% { opacity: 0.35; filter: blur(0px); }
  50% { opacity: 0.58; filter: blur(0.4px); }
}

#cave-bg .bg-particles {
  z-index: 5;
}

#cave-bg .glow-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 220, 140, 0.84);
  filter: blur(0.8px);
  box-shadow: 0 0 12px rgba(255, 220, 140, 0.35);
  animation: emberRise 9s ease-in infinite;
}

#cave-bg .glow-dot:nth-child(1) { left: 12%; top: 88%; animation-delay: 0s; }
#cave-bg .glow-dot:nth-child(2) { left: 24%; top: 80%; animation-delay: 1.3s; }
#cave-bg .glow-dot:nth-child(3) { left: 35%; top: 84%; animation-delay: 2.1s; }
#cave-bg .glow-dot:nth-child(4) { left: 46%; top: 76%; animation-delay: 4.5s; }
#cave-bg .glow-dot:nth-child(5) { left: 58%; top: 83%; animation-delay: 3.8s; }
#cave-bg .glow-dot:nth-child(6) { left: 68%; top: 78%; animation-delay: 1.9s; }
#cave-bg .glow-dot:nth-child(7) { left: 78%; top: 90%; animation-delay: 5.4s; }
#cave-bg .glow-dot:nth-child(8) { left: 86%; top: 82%; animation-delay: 7.1s; }
#cave-bg .glow-dot:nth-child(9) { left: 15%; top: 72%; animation-delay: 6.2s; }
#cave-bg .glow-dot:nth-child(10) { left: 41%; top: 70%; animation-delay: 5.8s; }
#cave-bg .glow-dot:nth-child(11) { left: 53%; top: 64%; animation-delay: 4.1s; }
#cave-bg .glow-dot:nth-child(12) { left: 62%; top: 69%; animation-delay: 8.7s; }
#cave-bg .glow-dot:nth-child(13) { left: 72%; top: 66%; animation-delay: 9.5s; }
#cave-bg .glow-dot:nth-child(14) { left: 87%; top: 68%; animation-delay: 2.4s; }
#cave-bg .glow-dot:nth-child(15) { left: 34%; top: 62%; animation-delay: 3.3s; }
#cave-bg .glow-dot:nth-child(16) { left: 26%; top: 66%; animation-delay: 4.7s; }
#cave-bg .glow-dot:nth-child(17) { left: 49%; top: 55%; animation-delay: 6.9s; }
#cave-bg .glow-dot:nth-child(18) { left: 60%; top: 53%; animation-delay: 8.1s; }
#cave-bg .glow-dot:nth-child(19) { left: 72%; top: 57%; animation-delay: 5.0s; }
#cave-bg .glow-dot:nth-child(20) { left: 83%; top: 60%; animation-delay: 3.7s; }
#cave-bg .glow-dot:nth-child(21) { left: 18%; top: 54%; animation-delay: 6.4s; }
#cave-bg .glow-dot:nth-child(22) { left: 28%; top: 50%; animation-delay: 7.8s; }
#cave-bg .glow-dot:nth-child(23) { left: 44%; top: 46%; animation-delay: 2.6s; }
#cave-bg .glow-dot:nth-child(24) { left: 56%; top: 49%; animation-delay: 9.1s; }
#cave-bg .glow-dot:nth-child(25) { left: 65%; top: 44%; animation-delay: 1.5s; }
#cave-bg .glow-dot:nth-child(26) { left: 75%; top: 48%; animation-delay: 3.9s; }
#cave-bg .glow-dot:nth-child(27) { left: 82%; top: 42%; animation-delay: 5.3s; }
#cave-bg .glow-dot:nth-child(28) { left: 89%; top: 50%; animation-delay: 8.2s; }
#cave-bg .glow-dot:nth-child(29) { left: 9%; top: 42%; animation-delay: 2.9s; }
#cave-bg .glow-dot:nth-child(30) { left: 20%; top: 32%; animation-delay: 7.4s; }

@keyframes emberRise {
  0% { transform: translateY(0) scale(0.9); opacity: 0.6; }
  40% { opacity: 1; }
  100% { transform: translateY(-130px) scale(0.4); opacity: 0; }
}

#cave-bg .bg-calligraphy,
#cave-bg .bg-particles,
#cave-bg .bg-deer,
#cave-bg .bg-clouds,
#cave-bg .bg-moon {
  pointer-events: none;
}

#cave-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Cave BG: New Injected Layers ---- */
.cave-landscape-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.cave-clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cloud-band {
  position: absolute;
  height: 28px;
  border-radius: 50px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(220, 215, 255, 0.07) 20%,
    rgba(235, 230, 255, 0.12) 50%,
    rgba(220, 215, 255, 0.07) 80%,
    transparent 100%);
  filter: blur(8px);
}

.cb-1 { width: 55%; top: 14%; left: -10%; animation: cloudBand1 38s linear infinite; }
.cb-2 { width: 42%; top: 22%; left: 10%;  animation: cloudBand1 28s linear infinite 5s; opacity: 0.7; }
.cb-3 { width: 60%; top: 30%; left: -5%;  animation: cloudBand2 44s linear infinite 2s; }
.cb-4 { width: 38%; top: 40%; left: 30%;  animation: cloudBand2 32s linear infinite 8s; opacity: 0.6; }
.cb-5 { width: 50%; top: 48%; left: -8%;  animation: cloudBand1 50s linear infinite 12s; opacity: 0.5; }
.cb-6 { width: 35%; top: 55%; left: 50%;  animation: cloudBand2 36s linear infinite 4s; opacity: 0.55; }

@keyframes cloudBand1 {
  0%   { transform: translateX(0) translateY(0); opacity: 0.8; }
  30%  { opacity: 1; }
  70%  { opacity: 0.65; }
  100% { transform: translateX(25vw) translateY(6px); opacity: 0.8; }
}
@keyframes cloudBand2 {
  0%   { transform: translateX(0) translateY(0); opacity: 0.7; }
  50%  { transform: translateX(-18vw) translateY(-4px); opacity: 0.9; }
  100% { transform: translateX(0) translateY(0); opacity: 0.7; }
}

.cave-deer-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.cave-deer {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(255, 230, 160, 0.3));
  animation: deerBreath 7s ease-in-out infinite;
}

.deer-a {
  width: clamp(80px, 13vw, 180px);
  bottom: 10%;
  left: 5%;
  animation-duration: 9s;
}
.deer-b {
  width: clamp(70px, 11vw, 155px);
  bottom: 8%;
  right: 7%;
  transform: scaleX(-1);
  animation-duration: 11s;
  animation-delay: 1.5s;
}
.deer-c {
  width: clamp(50px, 8vw, 110px);
  bottom: 9%;
  right: 22%;
  animation-duration: 8s;
  animation-delay: 3s;
}
.deer-d {
  width: clamp(38px, 5.5vw, 75px);
  bottom: 14%;
  left: 20%;
  opacity: 0.6;
  animation-duration: 13s;
  animation-delay: 2s;
}

@keyframes deerBreath {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.deer-b {
  transform: scaleX(-1);
}
.deer-b:hover { transform: scaleX(-1); }

.cave-calligraphy {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.cave-calli {
  position: absolute;
  font-family: var(--font-arabic);
  direction: rtl;
  color: rgba(255, 224, 128, 0.72);
  white-space: nowrap;
  animation: calliPulse 8s ease-in-out infinite;
  pointer-events: none;
}

.calli-ali-1 {
  top: 18%;
  left: 6%;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  opacity: 0.55;
  text-shadow: 0 0 24px rgba(255, 200, 80, 0.6), 0 0 60px rgba(255, 180, 50, 0.25);
  animation-delay: 0s;
  animation-duration: 9s;
}
.calli-bismillah {
  top: 12%;
  right: 8%;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  opacity: 0.38;
  text-shadow: 0 0 18px rgba(255, 200, 80, 0.4), 0 0 40px rgba(255, 180, 50, 0.15);
  animation-delay: 2.5s;
  animation-duration: 11s;
}
.calli-ali-2 {
  bottom: 28%;
  right: 5%;
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  opacity: 0.3;
  text-shadow: 0 0 14px rgba(255, 200, 80, 0.35);
  transform: rotate(-8deg);
  animation-delay: 5s;
  animation-duration: 13s;
}
.calli-noor {
  bottom: 35%;
  left: 8%;
  font-size: clamp(0.85rem, 1.4vw, 1.2rem);
  opacity: 0.28;
  text-shadow: 0 0 12px rgba(255, 200, 80, 0.3);
  transform: rotate(6deg);
  animation-delay: 3.5s;
  animation-duration: 10s;
}

@keyframes calliPulse {
  0%, 100% { opacity: var(--calli-base-opacity, 0.38); filter: blur(0px); }
  50%       { opacity: calc(var(--calli-base-opacity, 0.38) * 1.7); filter: blur(0.3px); }
}

.cave-ember-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Mobile: reduce cave bg complexity */
@media (max-width: 768px) {
  .cave-deer.deer-b,
  .cave-deer.deer-d,
  .cave-calli.calli-ali-2,
  .cave-calli.calli-noor { display: none; }
  .cave-deer { filter: none; }
  .cloud-band { animation-duration: 60s !important; }
}

/* ---- Cave Hero ---- */
.cave-hero {
  position: relative;
  padding: calc(var(--navbar-h) + 5.5rem) 2rem 4.5rem;
  text-align: center;
  z-index: 2;
  overflow: hidden;
}

.cave-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.cave-hero-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid rgba(201, 168, 76, 0.35);
  padding: 0.3rem 1rem;
  border-radius: 30px;
  margin-bottom: 1.8rem;
  opacity: 0;
}

.cave-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--color-gold);
  letter-spacing: 0.07em;
  margin-bottom: 0.6rem;
  animation: caveTitlePulse 3.5s ease-in-out infinite;
  text-shadow: 0 0 40px rgba(201,168,76,0.45), 0 0 80px rgba(201,168,76,0.2);
  opacity: 0;
}

@keyframes caveTitlePulse {
  0%, 100% { text-shadow: 0 0 28px rgba(201,168,76,0.4), 0 0 60px rgba(201,168,76,0.18); }
  50% { text-shadow: 0 0 55px rgba(201,168,76,0.95), 0 0 110px rgba(201,168,76,0.55), 0 0 180px rgba(201,168,76,0.2); }
}

.cave-arabic-subtitle {
  font-family: var(--font-arabic);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  color: var(--color-gold);
  direction: rtl;
  display: block;
  margin: 0.4rem auto 1rem;
  opacity: 0;
  text-shadow: 0 0 25px rgba(201,168,76,0.45), 0 0 50px rgba(201,168,76,0.2);
  animation: arabicCaveGlow 4s ease-in-out infinite;
}

@keyframes arabicCaveGlow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(201,168,76,0.4), 0 0 45px rgba(201,168,76,0.18),
                 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.06em;
  }
  50% {
    text-shadow: 0 0 45px rgba(201,168,76,0.95), 0 0 90px rgba(201,168,76,0.5),
                 0 0 140px rgba(201,168,76,0.2), 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.1em;
  }
}

.cave-subtitle {
  color: var(--color-silver);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  opacity: 0;
}

/* ---- Gates Grid ---- */
#gates-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem 2rem 7rem;
  position: relative;
  z-index: 2;
}

.gates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

/* ---- Gate Card Base ---- */
.gate-card {
  position: relative;
  cursor: none;
  border-radius: 6px;
  overflow: hidden;
  opacity: 1;
  transition: transform 0.45s var(--transition-smooth), box-shadow 0.45s ease;
  will-change: transform;
}

.gate-card:hover {
  transform: translateY(-8px);
}

.gate-outer {
  position: relative;
  width: 100%;
  height: 390px;
  overflow: hidden;
  perspective: 1400px;
}

/* ---- Gate Background (unique per domain) ---- */
.gate-bg {
  position: absolute;
  inset: 0;
  transition: opacity 0.7s ease;
}

/* ---- Architectural Frame (fixed, does not rotate) ---- */
.gate-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.gate-arch-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Door Panel (swings open) ---- */
.gate-door {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 3;
  transform-style: preserve-3d;
  will-change: transform;
}

.gate-card:hover .gate-door {
  transform: rotateY(-35deg);
}

.gate-door-surface {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}

/* ---- Interior (revealed behind door) ---- */
.gate-interior {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}

.gate-card:hover .gate-interior {
  opacity: 1;
}

.gate-interior-title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--color-ivory);
  margin-bottom: 0.8rem;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}

.gate-interior-phrase {
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: rgba(245, 240, 232, 0.78);
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ---- Gate Info (below gate) ---- */
.gate-info {
  padding: 1.2rem 1.5rem;
  background: rgba(10, 10, 26, 0.97);
  border-top: var(--border-gold);
}

.gate-info h3 {
  font-family: var(--font-title);
  font-size: 0.88rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}

.gate-info p {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ======================================
   GATE 1: MÉTAPHYSIQUE
   Persian Iwan — indigo wood, brass nails
   ====================================== */
.gate-metaphysique .gate-bg {
  background: radial-gradient(ellipse at 50% 35%, #3D1A78 0%, #1A0A3D 45%, #050512 100%);
}
.gate-metaphysique .gate-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(120,60,220,0.28) 0%, transparent 58%),
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(100,60,200,0.03) 38px, rgba(100,60,200,0.03) 39px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(100,60,200,0.03) 38px, rgba(100,60,200,0.03) 39px);
}
.gate-metaphysique .gate-door-surface {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(40,20,90,0.06) 18px, rgba(40,20,90,0.06) 20px),
    linear-gradient(180deg, #2D185A 0%, #1E0E3A 45%, #140A2C 100%);
  border-right: 1px solid rgba(150,80,255,0.25);
  box-shadow: inset -6px 0 18px rgba(0,0,0,0.55), inset 4px 0 10px rgba(120,60,220,0.1);
}
.gate-metaphysique .gate-door-surface::before {
  content: '';
  position: absolute;
  top: 14%; left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 62px;
  border: 1px solid rgba(150,80,255,0.55);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(150,80,255,0.5), inset 0 0 12px rgba(150,80,255,0.18);
  animation: runeGlow 3.2s ease-in-out infinite;
}
.gate-metaphysique .gate-door-surface::after {
  content: '◈';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  color: rgba(150,80,255,0.6);
  text-shadow: 0 0 20px rgba(150,80,255,0.7);
  animation: runeGlow 3.2s ease-in-out infinite 1.6s;
}
.gate-metaphysique .gate-interior {
  background: radial-gradient(ellipse at center, rgba(90,40,180,0.82) 0%, rgba(12,4,36,0.92) 100%);
}
.gate-metaphysique:hover { box-shadow: 0 22px 65px rgba(120,60,220,0.32); }

@keyframes runeGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(150,80,255,0.3); opacity: 0.7; }
  50% { box-shadow: 0 0 32px rgba(150,80,255,0.9), 0 0 65px rgba(150,80,255,0.35); opacity: 1; }
}

/* ======================================
   GATE 2: ALCHIMIE
   Medieval apothecary — plank oak door
   ====================================== */
.gate-alchimie .gate-bg {
  background: radial-gradient(ellipse at 50% 28%, #1A3A1A 0%, #0D1F0D 42%, #040A04 100%);
}
.gate-alchimie .gate-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(40,160,60,0.14) 0%, transparent 68%);
}
.gate-alchimie .gate-door-surface {
  background:
    repeating-linear-gradient(5deg, rgba(30,20,8,0) 0px, rgba(30,20,8,0) 16px, rgba(20,12,4,0.15) 16px, rgba(20,12,4,0.15) 17px),
    linear-gradient(180deg, #3D2808 0%, #5C3D10 30%, #3D2808 58%, #2A1C05 100%);
  border-right: 1px solid rgba(180,130,20,0.35);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.65), inset 0 0 24px rgba(180,130,20,0.07);
}
.gate-alchimie .gate-door-surface::before {
  content: '☿';
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  font-size: 3.2rem;
  color: rgba(180,130,20,0.72);
  text-shadow: 0 0 22px rgba(40,160,60,0.55);
  animation: alchGlow 2.8s ease-in-out infinite;
}
.gate-alchimie .gate-door-surface::after {
  content: '⬡';
  position: absolute;
  bottom: 18%; left: 50%;
  transform: translateX(-50%);
  font-size: 1.8rem;
  color: rgba(40,160,60,0.52);
  animation: alchGlow 2.8s ease-in-out infinite reverse;
}
.gate-alchimie .gate-interior {
  background: radial-gradient(ellipse at center, rgba(20,80,20,0.88) 0%, rgba(4,12,4,0.94) 100%);
}
.gate-alchimie:hover { box-shadow: 0 22px 65px rgba(40,160,60,0.28); }

@keyframes alchGlow {
  0%, 100% { opacity: 0.7; text-shadow: 0 0 12px rgba(40,160,60,0.4); }
  50% { opacity: 1; text-shadow: 0 0 35px rgba(40,160,60,0.9), 0 0 70px rgba(180,130,20,0.4); }
}

.gate-alchimie .bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: rgba(40,200,60,0.38);
  animation: bubbleRise 3.5s ease-in infinite;
  will-change: transform, opacity;
}
.gate-alchimie .bubble:nth-child(1) { left: 20%; width: 5px; height: 5px; animation-delay: 0s; }
.gate-alchimie .bubble:nth-child(2) { left: 42%; width: 6px; height: 6px; animation-delay: 0.8s; }
.gate-alchimie .bubble:nth-child(3) { left: 62%; width: 4px; height: 4px; animation-delay: 1.6s; }
.gate-alchimie .bubble:nth-child(4) { left: 78%; width: 5px; height: 5px; animation-delay: 2.4s; }

@keyframes bubbleRise {
  0%   { transform: translateY(0) scale(1); opacity: 0.75; }
  100% { transform: translateY(-350px) scale(0.25); opacity: 0; }
}

/* ======================================
   GATE 3: SPIRITUALITÉ
   Paradisiacal gate — carved cedar, divine glow
   ====================================== */
.gate-spiritualite .gate-bg {
  background: radial-gradient(ellipse at 50% 18%, rgba(200,180,100,0.22) 0%, #1A1208 42%, #0A0806 100%);
}
.gate-spiritualite .gate-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 45%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,240,180,0.28) 0%, transparent 80%);
}
.gate-spiritualite .gate-door-surface {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(160,110,20,0.04) 9px, rgba(160,110,20,0.04) 10px),
    repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(160,110,20,0.04) 9px, rgba(160,110,20,0.04) 10px),
    linear-gradient(180deg, #3D2810 0%, #2A1C08 48%, #1A1005 100%);
  border-right: 1px solid rgba(160,120,40,0.35);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.52);
}
.gate-spiritualite .gate-door-surface::before {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.5rem;
  color: rgba(255,230,120,0.72);
  text-shadow: 0 0 35px rgba(255,220,100,0.85), 0 0 70px rgba(255,200,80,0.4);
  animation: divineLight 3.2s ease-in-out infinite;
}
.gate-spiritualite .gate-interior {
  background: radial-gradient(ellipse at 50% 28%, rgba(200,170,60,0.52) 0%, rgba(8,6,2,0.94) 72%);
}
.gate-spiritualite:hover { box-shadow: 0 22px 65px rgba(200,170,60,0.32); }

@keyframes divineLight {
  0%, 100% {
    text-shadow: 0 0 22px rgba(255,220,100,0.6);
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  50% {
    text-shadow: 0 0 55px rgba(255,220,100,1), 0 0 110px rgba(255,200,80,0.65);
    transform: translate(-50%, -50%) scale(1.12) rotate(22.5deg);
  }
}

.gate-spiritualite .mist {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: radial-gradient(ellipse at 50% 100%, rgba(200,170,60,0.1) 0%, transparent 72%);
  animation: mistFloat 4.5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes mistFloat {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-12px); }
}

/* ======================================
   GATE 4: POLITIQUE
   Georgian — navy blue, lion knocker, flags
   ====================================== */
.gate-politique .gate-bg {
  background: radial-gradient(ellipse at 50% 0%, rgba(80,20,20,0.38) 0%, #0A0308 52%, #050205 100%);
}
.gate-politique .gate-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 48px,
    rgba(80,80,120,0.03) 48px, rgba(80,80,120,0.03) 49px
  );
}
.gate-politique .gate-door-surface {
  background: linear-gradient(180deg, #12122A 0%, #0D0D1E 50%, #070712 100%);
  border-right: 1px solid rgba(80,80,128,0.45);
  box-shadow:
    inset -6px 0 16px rgba(0,0,0,0.7),
    inset 4px 0 10px rgba(139,26,26,0.1),
    inset 0 4px 0 rgba(139,26,26,0.28);
}
.gate-politique .gate-door-surface::before {
  content: '⚔';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.8rem;
  color: rgba(139,26,26,0.82);
  text-shadow: 0 0 22px rgba(139,26,26,0.55);
  animation: politGlow 4s ease-in-out infinite;
}
.gate-politique .gate-door-surface::after {
  content: 'REX';
  position: absolute;
  bottom: 22%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: 0.65rem;
  color: rgba(100,100,145,0.5);
  letter-spacing: 0.35em;
}
@keyframes politGlow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; text-shadow: 0 0 35px rgba(139,26,26,0.8); }
}
.gate-politique .gate-interior {
  background: radial-gradient(ellipse at center, rgba(80,20,20,0.72) 0%, rgba(4,2,8,0.96) 100%);
}
.gate-politique:hover { box-shadow: 0 22px 65px rgba(139,26,26,0.32); }

/* ======================================
   GATE 5: PARANORMAL
   Dark Torii — obsidian, electric eye
   ====================================== */
.gate-temoignages .gate-bg {
  background: radial-gradient(ellipse at 50% 50%, rgba(0,40,100,0.28) 0%, #030308 62%, #010105 100%);
}
.gate-temoignages .gate-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,120,220,0.025) 2px, rgba(0,120,220,0.025) 3px);
}
.gate-temoignages .gate-door-surface {
  background: linear-gradient(135deg, #07070E 0%, #10101C 28%, #04040A 70%, #000004 100%);
  border-right: 1px solid rgba(0,100,220,0.28);
  box-shadow:
    inset -4px 0 22px rgba(0,100,220,0.1),
    0 0 45px rgba(0,80,180,0.1);
}
.gate-temoignages .gate-door-surface::after {
  content: '';
  position: absolute;
  top: 28%; left: 44%;
  width: 2px; height: 88px;
  background: linear-gradient(to bottom, transparent, rgba(0,150,255,0.62), transparent);
  transform: rotate(9deg);
  box-shadow: 0 0 9px rgba(0,150,255,0.45);
  animation: crackFlicker 4.5s ease-in-out infinite;
}
@keyframes crackFlicker {
  0%, 88%, 100% { opacity: 0.45; }
  92%, 96% { opacity: 1; box-shadow: 0 0 22px rgba(0,150,255,0.85); }
  94% { opacity: 0.1; }
}
.gate-temoignages .eye-motif {
  position: absolute;
  top: 22%; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.gate-temoignages .eye-outer {
  width: 66px; height: 33px;
  border: 1px solid rgba(0,150,255,0.62);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: eyeBlink 5.5s ease-in-out infinite;
}
.gate-temoignages .eye-pupil {
  width: 20px; height: 20px;
  background: radial-gradient(circle, #00CFFF, #0050A8);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(0,150,255,0.85);
  animation: pupilMove 8s ease-in-out infinite;
}
@keyframes eyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}
@keyframes pupilMove {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(7px); }
  75% { transform: translateX(-7px); }
}
.gate-temoignages .lightning {
  position: absolute; top: 0; width: 2px; height: 100%; opacity: 0;
  animation: lightningFlash 8s ease-in-out infinite;
  will-change: opacity;
}
.gate-temoignages .lightning-1 { left: 28%; animation-delay: 0s; }
.gate-temoignages .lightning-2 { left: 68%; animation-delay: 3.2s; }
.gate-temoignages .lightning::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(0,150,255,0.82) 12%, transparent 28%,
    rgba(0,150,255,0.62) 42%, transparent 62%,
    rgba(0,150,255,0.42) 82%, transparent 100%);
  filter: blur(1px);
}
@keyframes lightningFlash {
  0%, 86%, 100% { opacity: 0; }
  88%, 90% { opacity: 1; }
  89%, 91% { opacity: 0; }
  92% { opacity: 0.75; }
}
.gate-temoignages .gate-interior {
  background: radial-gradient(ellipse at center, rgba(0,50,120,0.62) 0%, rgba(1,1,8,0.96) 100%);
}
.gate-temoignages:hover { box-shadow: 0 22px 65px rgba(0,100,220,0.32); }

/* ======================================
   GATE 6: ISLAM
   Moroccan riad — horseshoe arch, emerald/gold
   ====================================== */
.gate-islam .gate-bg {
  background: radial-gradient(ellipse at 50% 0%, rgba(10,80,30,0.48) 0%, #050F08 52%, #020806 100%);
}
.gate-islam .gate-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-conic-gradient(from 0deg at 20px 20px, rgba(20,120,50,0.1) 0deg 90deg, transparent 90deg 180deg),
    repeating-conic-gradient(from 0deg at 0px 0px, rgba(20,120,50,0.07) 0deg 90deg, transparent 90deg 180deg);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
}
.gate-islam .gate-door-surface {
  background: linear-gradient(180deg, #0A2010 0%, #071508 50%, #040C05 100%);
  border-right: 1px solid rgba(20,160,60,0.38);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.52), inset 0 0 25px rgba(20,160,60,0.04);
}
.gate-islam .gate-door-surface::before {
  content: '☽';
  position: absolute;
  top: 14%; left: 50%;
  transform: translateX(-50%);
  font-size: 3.2rem;
  color: rgba(201,168,76,0.82);
  text-shadow: 0 0 22px rgba(201,168,76,0.55);
  animation: islamGlow 3.2s ease-in-out infinite;
}
.gate-islam .gate-door-surface::after {
  content: '﷽';
  position: absolute;
  bottom: 16%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-arabic);
  font-size: 1.1rem;
  color: rgba(20,160,60,0.5);
  direction: rtl;
  white-space: nowrap;
}
@keyframes islamGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(201,168,76,0.42); }
  50% { text-shadow: 0 0 45px rgba(201,168,76,1), 0 0 90px rgba(201,168,76,0.35); }
}
.gate-islam .gate-interior {
  background: radial-gradient(ellipse at center, rgba(10,80,30,0.82) 0%, rgba(2,8,3,0.96) 100%);
}
.gate-islam:hover { box-shadow: 0 22px 65px rgba(20,160,60,0.32); }

/* ======================================
   GATE 7: LITTÉRATURE
   Haussmann door — book spines, candles
   ====================================== */
.gate-litterature .gate-bg {
  background: radial-gradient(ellipse at 50% 28%, rgba(100,60,10,0.38) 0%, #0A0705 52%, #060404 100%);
}
.gate-litterature .gate-door-surface {
  background:
    repeating-linear-gradient(90deg,
      #2A1A08 0px, #2A1A08 16px,
      #1E1206 16px, #1E1206 18px,
      #351F0A 18px, #351F0A 34px,
      #280F05 34px, #280F05 36px,
      #1A1008 36px, #1A1008 52px,
      #100A04 52px, #100A04 54px
    );
  border-right: 1px solid rgba(140,90,20,0.38);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.65);
}
.gate-litterature .candle {
  position: absolute;
  bottom: 14%;
  z-index: 2;
}
.gate-litterature .candle-left { left: 18%; }
.gate-litterature .candle-right { right: 18%; }
.gate-litterature .candle-flame {
  width: 8px; height: 18px;
  background: radial-gradient(ellipse at 50% 72%, #FFF5C0, #FFB800 38%, #FF6600 68%, transparent 100%);
  border-radius: 50% 50% 28% 28% / 58% 58% 38% 38%;
  margin: 0 auto;
  animation: flameFlicker 1.4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255,150,0,0.65), 0 0 32px rgba(255,100,0,0.22);
  will-change: transform;
}
.gate-litterature .candle-body {
  width: 10px; height: 42px;
  background: linear-gradient(180deg, #F5F0E8, #E0D8C8);
  margin: 0 auto; border-radius: 2px;
}
@keyframes flameFlicker {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(-2deg); opacity: 0.92; }
  25% { transform: scaleX(0.82) scaleY(1.12) rotate(2deg); opacity: 1; }
  75% { transform: scaleX(1.12) scaleY(0.92) rotate(-1deg); opacity: 0.85; }
}
.gate-litterature .gate-interior {
  background: radial-gradient(ellipse at 50% 28%, rgba(100,60,10,0.65) 0%, rgba(5,3,1,0.96) 80%);
}
.gate-litterature:hover { box-shadow: 0 22px 65px rgba(180,110,20,0.32); }

/* ======================================
   GATE 8: HISTOIRE
   Maya temple — stone, serpents, sepia
   ====================================== */
.gate-histoire .gate-bg {
  background: radial-gradient(ellipse at 50% 0%, rgba(80,65,28,0.38) 0%, #0A0906 52%, #070605 100%);
}
.gate-histoire .gate-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(80,65,28,0.03) 20px, rgba(80,65,28,0.03) 21px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(80,65,28,0.02) 28px, rgba(80,65,28,0.02) 29px);
}
.gate-histoire .gate-door-surface {
  background: linear-gradient(180deg, #2A230E 0%, #1E1A0C 50%, #15120A 100%);
  border-right: 1px solid rgba(140,120,50,0.38);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.52), inset 0 -2px 0 rgba(80,65,28,0.28);
}
.gate-histoire .gate-door-surface::before {
  content: '';
  position: absolute;
  top: 28%; left: 50%;
  transform: translateX(-50%);
  width: 55px; height: 55px;
  border: 1px solid rgba(140,120,50,0.48);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(140,120,50,0.22);
}
.gate-histoire .gate-door-surface::after {
  content: 'HISTORIA';
  position: absolute;
  top: 52%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: 0.6rem;
  color: rgba(140,120,50,0.55);
  letter-spacing: 0.35em;
}
.gate-histoire .gate-interior {
  background: radial-gradient(ellipse at center, rgba(80,65,28,0.65) 0%, rgba(6,5,3,0.96) 100%);
}
.gate-histoire:hover { box-shadow: 0 22px 65px rgba(140,120,50,0.28); }

/* ======================================
   GATE 9: GÉOGRAPHIE
   Moon gate — white wall, pine tree, bamboo
   ====================================== */
.gate-astronomie .gate-bg {
  background: radial-gradient(ellipse at 50% 58%, rgba(20,60,10,0.38) 0%, #06090A 52%, #040706 100%);
}
.gate-astronomie .gate-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(14deg, transparent, transparent 18px, rgba(40,100,20,0.05) 18px, rgba(40,100,20,0.05) 19px),
    repeating-linear-gradient(-14deg, transparent, transparent 26px, rgba(40,100,20,0.04) 26px, rgba(40,100,20,0.04) 27px);
}
.gate-astronomie .gate-door-surface {
  background: linear-gradient(135deg, #0E1A06 0%, #152204 50%, #0A1203 100%);
  border-radius: 50%;
  transform: scale(0.75);
  border: 8px solid rgba(205,195,175,0.4);
  box-shadow: 0 0 30px rgba(100,160,200,0.12), inset 0 0 40px rgba(20,60,10,0.3);
}
.gate-astronomie .gate-door-surface::before {
  content: '◉';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.5rem;
  color: rgba(60,160,30,0.55);
  text-shadow: 0 0 22px rgba(60,160,30,0.45);
}
.geo-particle {
  position: absolute;
  width: 4px; height: 1px;
  background: rgba(120,200,60,0.42);
  border-radius: 50%;
  animation: geoWind 3.2s linear infinite;
  will-change: transform;
}
@keyframes geoWind {
  0% { transform: translateX(-40px) translateY(0); opacity: 0; }
  18% { opacity: 0.8; }
  82% { opacity: 0.6; }
  100% { transform: translateX(420px) translateY(-22px); opacity: 0; }
}
.gate-astronomie .gate-interior {
  background: radial-gradient(ellipse at 50% 68%, rgba(20,80,10,0.72) 0%, rgba(3,6,2,0.96) 100%);
}
.gate-astronomie:hover { box-shadow: 0 22px 65px rgba(40,140,20,0.28); }

/* ======================================
   GATE 10: CINÉMA
   Art Deco — velvet, gold, neon
   ====================================== */
.gate-cinema .gate-bg {
  background: radial-gradient(ellipse at 50% 0%, rgba(80,10,10,0.48) 0%, #080205 52%, #060203 100%);
}
.gate-cinema .gate-door-surface {
  background:
    linear-gradient(180deg, #1A0808 0%, #120505 50%, #0A0303 100%);
  border-right: 1px solid rgba(180,20,20,0.38);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.65);
}
.gate-cinema .marquee-border {
  position: absolute; inset: 8px;
  border: 1px solid rgba(180,20,20,0.28);
  pointer-events: none; z-index: 1;
}
.cinema-light {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #FFD700;
  box-shadow: 0 0 7px #FFD700;
  animation: lightBlink 1.6s step-end infinite;
  will-change: opacity;
}
.cinema-light-t { top: 16px; }
.cinema-light-b { bottom: 16px; }
@keyframes lightBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.gate-cinema .gate-door-surface::before {
  content: 'CINÉMA';
  position: absolute; top: 24%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: 1.05rem; letter-spacing: 0.32em;
  color: rgba(200,20,20,0.92);
  text-shadow: 0 0 16px rgba(200,20,20,0.65), 0 0 32px rgba(200,20,20,0.32);
  animation: neonFlicker 5s ease-in-out infinite;
}
.gate-cinema .gate-door-surface::after {
  content: '⏿';
  position: absolute; top: 55%; left: 50%;
  transform: translateX(-50%);
  font-size: 3.2rem;
  color: rgba(200,180,20,0.58);
  animation: reelSpin 5s linear infinite;
}
@keyframes neonFlicker {
  0%, 90%, 100% { opacity: 1; }
  92%, 96% { opacity: 0.3; }
  94% { opacity: 0.95; }
}
@keyframes reelSpin { to { transform: translateX(-50%) rotate(360deg); } }
.gate-cinema .gate-interior {
  background: radial-gradient(ellipse at center, rgba(100,10,10,0.72) 0%, rgba(5,1,1,0.97) 100%);
}
.gate-cinema:hover { box-shadow: 0 22px 65px rgba(180,20,20,0.38); }

/* ======================================
   GATE 11: SPORT
   Stadium tunnel — concrete, orange LED
   ====================================== */
.gate-sport .gate-bg {
  background: radial-gradient(ellipse at 50% 50%, rgba(80,40,0,0.38) 0%, #0A0602 52%, #070503 100%);
}
.gate-sport .gate-door-surface {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(60,60,60,0.07) 22px, rgba(60,60,60,0.07) 24px),
    linear-gradient(180deg, #1A1206 0%, #101004 50%, #080804 100%);
  border-right: 1px solid rgba(220,120,0,0.38);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.52);
}
.sport-line {
  position: absolute;
  left: 0; height: 2px;
  background: linear-gradient(to right, transparent, rgba(220,120,0,0.65), transparent);
  border-radius: 1px;
  animation: sportLine 2.2s ease-in-out infinite;
  will-change: transform, opacity;
}
.sport-line:nth-child(1) { top: 20%; width: 60%; animation-delay: 0s; }
.sport-line:nth-child(2) { top: 40%; width: 80%; animation-delay: 0.35s; }
.sport-line:nth-child(3) { top: 60%; width: 52%; animation-delay: 0.7s; }
.sport-line:nth-child(4) { top: 78%; width: 72%; animation-delay: 1.05s; }
@keyframes sportLine {
  0%   { transform: translateX(-105%); opacity: 0; }
  48%  { opacity: 1; }
  100% { transform: translateX(105%); opacity: 0; }
}
.gate-sport .gate-door-surface::before {
  content: '⚡';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.2rem;
  color: rgba(220,120,0,0.92);
  text-shadow: 0 0 32px rgba(220,120,0,0.85), 0 0 65px rgba(255,200,50,0.32);
  animation: sportFlash 3.2s ease-in-out infinite;
}
@keyframes sportFlash {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
}
.gate-sport .gate-interior {
  background: radial-gradient(ellipse at center, rgba(80,40,0,0.72) 0%, rgba(5,3,0,0.97) 100%);
}
.gate-sport:hover { box-shadow: 0 22px 65px rgba(220,120,0,0.32); }

/* ======================================
   GATE 12: ART
   Florentine Renaissance — fresco, palette
   ====================================== */
.gate-art .gate-bg {
  background: radial-gradient(ellipse at 50% 38%, rgba(60,20,80,0.38) 0%, #06030A 52%, #050308 100%);
}
.gate-art .gate-door-surface {
  background: linear-gradient(135deg, #0F0A18 0%, #1A1228 28%, #0A0814 68%, #06040E 100%);
  border-right: 1px solid rgba(150,50,200,0.28);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.52);
  overflow: hidden;
}
.art-splash {
  position: absolute;
  border-radius: 50%;
  filter: blur(7px);
  animation: artSplash 6.5s ease-in-out infinite;
  will-change: opacity, transform;
}
.art-splash:nth-child(1) { width: 42px; height: 42px; top: 18%; left: 22%; background: rgba(220,50,50,0.32); animation-delay: 0s; }
.art-splash:nth-child(2) { width: 28px; height: 28px; top: 52%; left: 14%; background: rgba(50,50,220,0.32); animation-delay: 1.1s; }
.art-splash:nth-child(3) { width: 38px; height: 38px; top: 28%; left: 62%; background: rgba(50,180,50,0.32); animation-delay: 2.2s; }
.art-splash:nth-child(4) { width: 22px; height: 22px; top: 68%; left: 58%; background: rgba(220,200,50,0.32); animation-delay: 3.3s; }
.art-splash:nth-child(5) { width: 32px; height: 32px; top: 43%; left: 42%; background: rgba(200,50,200,0.32); animation-delay: 4.4s; }
@keyframes artSplash {
  0%, 100% { opacity: 0.38; transform: scale(1); }
  50% { opacity: 0.92; transform: scale(1.35); }
}
.gate-art .gate-door-surface::before {
  content: '✦';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.2rem;
  background: linear-gradient(135deg, #FF6B6B, #FFE66D, #4ECDC4, #A855F7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(168,85,247,0.55));
  animation: artRotate 8s linear infinite;
}
@keyframes artRotate {
  to { filter: drop-shadow(0 0 12px rgba(168,85,247,0.55)) hue-rotate(360deg); }
}
.gate-art .gate-interior {
  background: radial-gradient(ellipse at center, rgba(80,20,100,0.65) 0%, rgba(4,2,7,0.97) 100%);
}
.gate-art:hover { box-shadow: 0 22px 65px rgba(150,50,200,0.32); }

/* ======================================
   GATE 13: NATURE
   Enchanted forest — branches, deer, fireflies
   ====================================== */
.gate-nature .gate-bg {
  background: radial-gradient(ellipse at 50% 58%, rgba(10,60,10,0.48) 0%, #040A04 52%, #020603 100%);
}
.gate-nature .gate-door-surface {
  background:
    repeating-linear-gradient(5deg, rgba(22,80,12,0) 0px, rgba(22,80,12,0) 15px, rgba(15,55,8,0.08) 15px, rgba(15,55,8,0.08) 16px),
    linear-gradient(180deg, #061206 0%, #040C04 50%, #020803 100%);
  border-right: 1px solid rgba(30,120,30,0.35);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.52);
  overflow: hidden;
}

/* Firefly animation on SVG elements */
.firefly {
  animation: fireflyPulse 3s ease-in-out infinite;
  will-change: opacity, transform;
}
.firefly:nth-child(odd) { animation-duration: 2.8s; }
.firefly:nth-child(3n) { animation-delay: 1s; }
.firefly:nth-child(4n) { animation-delay: 1.8s; }
.firefly:nth-child(5n) { animation-delay: 0.6s; }
@keyframes fireflyPulse {
  0%, 100% { opacity: 0.15; transform: translateY(0) scale(0.8); filter: blur(0.5px); }
  50% { opacity: 0.9; transform: translateY(-4px) scale(1.2); filter: blur(0px) drop-shadow(0 0 4px rgba(180,255,80,0.9)); }
}

.leaf {
  position: absolute;
  width: 12px; height: 12px;
  background: rgba(30,160,30,0.58);
  border-radius: 50% 10% 50% 10%;
  animation: leafFall 4.5s ease-in infinite;
  will-change: transform;
}
.leaf:nth-child(1) { left: 22%; top: -12px; animation-delay: 0s; }
.leaf:nth-child(2) { left: 52%; top: -12px; animation-delay: 1.3s; width: 9px; height: 9px; background: rgba(60,180,40,0.5); }
.leaf:nth-child(3) { left: 76%; top: -12px; animation-delay: 2.6s; width: 11px; height: 11px; }
@keyframes leafFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(420px) rotate(400deg) translateX(35px); opacity: 0; }
}

.dewdrop {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50% 50% 50% 0;
  background: rgba(150,220,255,0.52);
  box-shadow: 0 0 5px rgba(150,220,255,0.32);
  animation: dewFloat 5.5s ease-in-out infinite;
  will-change: opacity;
}
.dewdrop:nth-child(1) { bottom: 28%; left: 24%; animation-delay: 0s; }
.dewdrop:nth-child(2) { bottom: 44%; left: 62%; animation-delay: 2.2s; width: 5px; height: 5px; }
@keyframes dewFloat {
  0%, 100% { opacity: 0.38; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-6px); }
}

.gate-nature .gate-interior {
  background: radial-gradient(ellipse at 50% 78%, rgba(10,80,10,0.72) 0%, rgba(2,5,2,0.97) 100%);
}
.gate-nature:hover { box-shadow: 0 22px 65px rgba(20,160,20,0.32); }

/* ---- Responsive Grid ---- */
@media (max-width: 1100px) {
  .gates-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (max-width: 640px) {
  .gates-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .gate-outer { height: 340px; }
  .cave-hero { padding: calc(var(--navbar-h) + 3rem) 1.5rem 3rem; }
}