@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Noto+Serif:ital,wght@0,400;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════ */
:root {
  --brand-gold:    #c1a004;
  --brand-crimson: #7e1f17;
  --deva-bg1:   #c1d7e4;
  --deva-bg2:   #efe7db;
  --deva-text:  #000000;
  --asura-bg:   #06402b;
  --asura-text: #bb0a1e;
  --human-bg:   #223b05;
  --human-text: #b35642;
  --animal-bg:   #886806;
  --animal-text: #010048;
  --preta-bg:   #d6d3ca;
  --preta-text: #000000;
  --naraka-bg:   #ca3f27;
  --naraka-text: #000000;
}

/* ════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'EB Garamond', Georgia, serif; min-height: 100vh; overflow-x: hidden; }

/* ════════════════════════════════════════════
   SHARED HEADER / NAV
   ════════════════════════════════════════════ */
header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: stretch;
}

.page-home   header { justify-content: flex-end; background: #0d0705;              border-bottom: 3px solid var(--brand-crimson); }
.page-jataka header { justify-content: center;   background: var(--brand-crimson); border-bottom: 2px solid #5a1010; }
.page-deva   header { justify-content: flex-end; background: var(--brand-crimson); border-bottom: 2px solid #5a1010; }
.page-asura  header { justify-content: flex-end; background: #021a12;              border-bottom: 2px solid var(--asura-text); }
.page-human  header { justify-content: flex-end; background: #111e03;              border-bottom: 2px solid var(--human-text); }
.page-animal header { justify-content: flex-end; background: #4a3803;              border-bottom: 2px solid var(--animal-text); }
.page-preta  header { justify-content: flex-end; background: #9a9790;              border-bottom: 2px solid #555; }
.page-naraka header { justify-content: flex-end; background: #7a2010;              border-bottom: 2px solid #000; }

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.6rem;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  background: transparent;
  transition: background 0.3s, color 0.3s;
  min-width: 72px;
}

.page-home   .nav-btn { border-left: 2px solid var(--brand-crimson); color: var(--brand-gold); background: rgba(126,31,23,0.15); }
.page-home   .nav-btn:hover { background: rgba(126,31,23,0.45); color: #e8c832; }
.page-jataka .nav-btn,
.page-deva   .nav-btn { border-right: 1px solid rgba(255,255,255,0.18); color: #f5e090; }
.page-jataka .nav-btn:hover,
.page-deva   .nav-btn:hover { background: rgba(0,0,0,0.25); }
.page-asura  .nav-btn { border-left: 1px solid rgba(187,10,30,0.4);  color: var(--asura-text); }
.page-asura  .nav-btn:hover { background: rgba(187,10,30,0.15); }
.page-human  .nav-btn { border-left: 1px solid rgba(179,86,66,0.4);  color: var(--human-text); }
.page-human  .nav-btn:hover { background: rgba(179,86,66,0.15); }
.page-animal .nav-btn { border-left: 1px solid rgba(1,0,72,0.4);     color: var(--animal-text); }
.page-animal .nav-btn:hover { background: rgba(1,0,72,0.15); }
.page-preta  .nav-btn { border-left: 1px solid rgba(0,0,0,0.2);      color: #222; }
.page-preta  .nav-btn:hover { background: rgba(0,0,0,0.1); }
.page-naraka .nav-btn { border-left: 1px solid rgba(0,0,0,0.4);      color: #000; }
.page-naraka .nav-btn:hover { background: rgba(0,0,0,0.2); }

.nav-btn svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ════════════════════════════════════════════
   SHARED ROUND BUTTON
   ════════════════════════════════════════════ */
.round-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.3s;
  cursor: pointer;
}
.round-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.round-btn-dark    { background: #1a1a1a; border: 2px solid #444; color: white; width: 52px; height: 52px; }
.round-btn-dark:hover { background: #333; border-color: var(--brand-gold); }
.round-btn-crimson { background: var(--brand-crimson); border: 2px solid #5a1010; color: #f5e090; }
.round-btn-crimson:hover { background: #5a1010; border-color: var(--brand-gold); box-shadow: 0 0 16px rgba(193,160,4,0.35); }
.round-btn-asura   { background: var(--asura-bg);  border: 2px solid var(--asura-text);  color: var(--asura-text); }
.round-btn-asura:hover  { filter: brightness(1.4); }
.round-btn-human   { background: var(--human-bg);  border: 2px solid var(--human-text);  color: var(--human-text); }
.round-btn-human:hover  { filter: brightness(1.4); }
.round-btn-animal  { background: var(--animal-bg); border: 2px solid var(--animal-text); color: var(--animal-text); }
.round-btn-animal:hover { filter: brightness(1.3); }
.round-btn-preta   { background: #9a9790; border: 2px solid #555; color: #111; }
.round-btn-preta:hover  { filter: brightness(0.9); }
.round-btn-naraka  { background: #7a1a05; border: 2px solid #000; color: #000; }
.round-btn-naraka:hover { filter: brightness(1.2); }

/* ════════════════════════════════════════════
   SHARED REALM LAYOUT
   ════════════════════════════════════════════ */
.realm-main {
  position: relative;
  z-index: 1;
  padding: 2rem 2.5rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}

.realm-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  text-align: center;
  letter-spacing: 0.15em;
  margin-bottom: 2rem;
  animation: title-in 1s ease forwards;
  opacity: 0;
  transform: translateY(-10px);
}
@keyframes title-in { to { opacity: 1; transform: translateY(0); } }

.content-grid {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  gap: 1.5rem;
  align-items: start;
}

.idol-frame { border-radius: 4px; overflow: hidden; transition: box-shadow 0.4s, transform 0.4s; }
.idol-frame:hover { transform: scale(1.03); }

.idol-placeholder {
  width: 100%; aspect-ratio: 3/4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
}
.idol-icon  { font-size: 3rem; }
.idol-label { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }

.center-col { display: flex; flex-direction: column; gap: 1.5rem; }

.hero-image-wrap { width: 100%; border-radius: 3px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.hero-image-placeholder { width: 100%; aspect-ratio: 16/7; display: flex; align-items: center; justify-content: center; }
.placeholder-text { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.45; }

.body-text { padding: 1.4rem 1.6rem; border-radius: 0 4px 4px 0; }
.body-text p { font-size: 1.1rem; line-height: 1.9; }
.body-text p + p { margin-top: 1rem; }

.descend-row { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-top: 0.5rem; }
.descend-text { display: flex; flex-direction: column; align-items: flex-end; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; }

/* ════════════════════════════════════════════
   HOME PAGE
   ════════════════════════════════════════════ */
.page-home body { background: #0d0705; color: var(--brand-gold); }

.page-home main {
  display: flex; flex-direction: column; align-items: center;
  padding: 2.5rem 2rem 0;
  min-height: calc(100vh - 58px);
  background: linear-gradient(180deg, #0d0705 0%, #1a0808 100%);
}

.title-block { text-align: center; margin-bottom: 2rem; }
.title-block h1 { font-family: 'Cinzel Decorative', serif; font-size: clamp(3rem, 8vw, 5.5rem); color: var(--brand-gold); letter-spacing: 0.08em; line-height: 1; }
.title-block .sanskrit { font-family: 'EB Garamond', serif; font-size: clamp(1rem, 2.5vw, 1.6rem); color: var(--brand-gold); opacity: 0.75; letter-spacing: 0.05em; margin-top: 0.4rem; }

.wheel-section { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 1100px; }
.wheel-container { display: flex; align-items: center; justify-content: center; }
#wheel-svg { width: 100%; max-width: 720px; height: auto; cursor: pointer; filter: drop-shadow(0 0 40px rgba(126,31,23,0.7)); }

.realm-segment { transition: all 0.25s ease; cursor: pointer; }
.realm-segment:hover .realm-fill { filter: brightness(1.5) saturate(1.3); }
.realm-fill { transition: filter 0.25s ease, opacity 0.25s ease; }
.realm-glow { opacity: 0; transition: opacity 0.25s ease; }
.realm-segment:hover .realm-glow { opacity: 1; }
@keyframes realm-pulse { 0%,100%{opacity:0.5} 50%{opacity:0.9} }
.realm-segment.hovered .realm-glow { animation: realm-pulse 1s ease-in-out infinite; }

#realm-tooltip {
  position: fixed;
  background: rgba(10,5,2,0.97); border: 1px solid var(--brand-gold); color: var(--brand-gold);
  font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.6rem 1.2rem; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 100; white-space: nowrap;
}
#realm-tooltip.visible { opacity: 1; }

.page-home footer {
  width: 100%; background: #220808; border-top: 3px solid var(--brand-crimson);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 3rem; margin-top: auto;
}
.page-home footer p { font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--brand-gold); }

/* Text block below the wheel */
.wheel-caption {
  max-width: 560px;
  margin: 1.8rem auto 0;
  text-align: center;
  padding: 0 1rem 2rem;
}
.wheel-caption p {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(193,160,4,0.75);
}

/* ════════════════════════════════════════════
   JATAKA PAGE
   ════════════════════════════════════════════ */
.page-jataka body {
  background: #0d0705; color: #e8dcc8;
  background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(126,31,23,0.25) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(126,31,23,0.10) 0%, transparent 60%);
}
.page-jataka main { max-width: 820px; margin: 0 auto; padding: 3rem 2rem 5rem; display: flex; flex-direction: column; gap: 2.5rem; }
.jataka-title { text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(193,160,4,0.3); }
.jataka-title h1 { font-family: 'Cinzel Decorative', serif; font-size: clamp(2rem, 6vw, 3.5rem); color: var(--brand-gold); letter-spacing: 0.1em; line-height: 1.1; }
.jataka-title h2 { font-family: 'Cinzel', serif; font-size: clamp(1.2rem, 3vw, 1.8rem); color: rgba(193,160,4,0.6); font-weight: 400; letter-spacing: 0.15em; margin-top: 0.3rem; }
.jataka-title h2 .number { color: var(--brand-gold); }
.opening-row { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; }
.story-image-wrap { border: 2px solid rgba(193,160,4,0.35); border-radius: 3px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.5); flex-shrink: 0; }
.story-image-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, #3a2010 0%, #6a4020 50%, #2a1808 100%); display: flex; align-items: center; justify-content: center; }
.img-label { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.15em; color: rgba(193,160,4,0.4); text-transform: uppercase; }
.opening-text p, .story-body p { font-size: 1.1rem; line-height: 1.9; color: #e8dcc8; }
.story-body { display: flex; flex-direction: column; gap: 1.5rem; }
.next-row { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(193,160,4,0.2); }
.next-label { display: flex; flex-direction: column; align-items: flex-end; }
.next-title { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; color: var(--brand-gold); letter-spacing: 0.05em; }
.next-sub { font-family: 'Cinzel', serif; font-size: 0.8rem; color: rgba(193,160,4,0.6); letter-spacing: 0.05em; }

/* ════════════════════════════════════════════
   DEVA  —  #c1d7e4 / #efe7db / black text
   Font: EB Garamond
   ════════════════════════════════════════════ */
.page-deva body { background: var(--deva-bg1); color: var(--deva-text); position: relative; }
.page-deva .realm-main { font-family: 'EB Garamond', serif; }
.page-deva .realm-title { color: #1a1a1a; text-shadow: 0 0 30px rgba(193,160,4,0.25); }
.bg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-clouds {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,0.6) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(255,230,120,0.3) 0%, transparent 55%),
    radial-gradient(ellipse 60% 30% at 20% 30%, rgba(239,231,219,0.4) 0%, transparent 60%),
    linear-gradient(180deg, var(--deva-bg1) 0%, var(--deva-bg2) 60%, #ddd5c8 100%);
}
.bg-glow {
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(193,215,228,0.4) 0%, transparent 70%),
    radial-gradient(circle, rgba(255,220,80,0.9)  1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.7) 1px,   transparent 1px),
    radial-gradient(circle, rgba(200,220,255,0.6) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,230,120,0.5) 1px,   transparent 1px);
  background-size: auto, 160px 160px, 110px 110px, 80px 80px, 200px 200px;
  background-position: center, 22px 35px, 68px 82px, 138px 55px, 50px 140px;
  animation: glow-breathe 6s ease-in-out infinite, deva-float 12s ease-in-out infinite;
}
@keyframes glow-breathe { 0%,100%{opacity:0.65} 50%{opacity:1} }
@keyframes deva-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.page-deva .hero-image-placeholder { background: linear-gradient(135deg, var(--deva-bg1) 0%, var(--deva-bg2) 100%); }
.page-deva .hero-image-wrap { border: 2px solid rgba(0,0,0,0.15); }
.page-deva .idol-frame { border: 2px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.35); backdrop-filter: blur(4px); }
.page-deva .idol-frame:hover { box-shadow: 0 0 25px rgba(193,160,4,0.35); }
.page-deva .idol-placeholder { background: linear-gradient(160deg, rgba(255,255,255,0.3), rgba(193,215,228,0.3)); }
.page-deva .idol-label { color: rgba(0,0,0,0.4); }
.page-deva .body-text { background: rgba(239,231,219,0.7); backdrop-filter: blur(6px); border-left: 3px solid rgba(0,0,0,0.2); }
.page-deva .body-text p { color: #000; }
.page-deva .descend-text { color: #000; }

/* Body text + Karmadhatu side-by-side row */
.deva-body-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1.5rem;
  align-items: start;
}

.deva-karmadhatu {
  position: sticky;
  top: 1rem;
}

.deva-karmadhatu img {
  width: 100%;
  display: block;
  border-radius: 4px;
}

/* Uniform idol size + background blending */
.page-deva .idol-frame {
  border: none;
  background: transparent !important;
  width: 180px;
  height: 270px;
  overflow: visible;
  border-radius: 0;
}

/* Canvas (Brama — white bg stripped via JS) */
.page-deva .idol-left .idol-frame canvas {
  width: 180px;
  height: 270px;
  display: block;
  object-fit: cover;
}

/* Karmadhatu has black bg — screen makes black transparent */
.page-deva .idol-frame img {
  width: 180px;
  height: 270px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.page-deva .idol-right .idol-frame img {
  mix-blend-mode: screen;
  filter: brightness(1.1);
}

/* Remove hover box-shadow inherited from shared rules */
.page-deva .idol-frame:hover {
  box-shadow: none;
}

/* ════════════════════════════════════════════
   ASURA  —  #06402b bg / #bb0a1e text
   Font: Crimson Text
   ════════════════════════════════════════════ */
.page-asura body { background: var(--asura-bg); color: var(--asura-text); }
.page-asura .realm-main { font-family: 'Crimson Text', serif; }
.page-asura .realm-title { color: var(--asura-text); text-shadow: 0 0 40px rgba(187,10,30,0.5), 0 0 80px rgba(187,10,30,0.2); }
.page-asura .hero-image-placeholder { background: linear-gradient(135deg, #021a12 0%, #06402b 50%, #041f16 100%); }
.page-asura .hero-image-wrap { border: 2px solid rgba(187,10,30,0.5); }
.page-asura .idol-frame { border: 2px solid rgba(187,10,30,0.5); background: rgba(0,0,0,0.2); }
.page-asura .idol-frame:hover { box-shadow: 0 0 25px rgba(187,10,30,0.5); }
.page-asura .idol-placeholder { background: linear-gradient(160deg, rgba(6,64,43,0.8), rgba(187,10,30,0.1)); }
.page-asura .idol-label { color: rgba(187,10,30,0.6); }
.page-asura .body-text { background: rgba(0,0,0,0.25); border-left: 3px solid var(--asura-text); }
.page-asura .body-text p { color: #c0e8c8; font-size: 1.15rem; }
.page-asura .descend-text { color: var(--asura-text); }

/* Asura body row — text left, image right */
.asura-body-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.5rem;
  align-items: start;
}

.asura-idol {
  position: sticky;
  top: 1rem;
}

.asura-idol img {
  width: 100%;
  display: block;
  border-radius: 4px;
  mix-blend-mode: screen;
}

/* ════════════════════════════════════════════
   HUMAN  —  #223b05 bg / #b35642 text
   Font: Libre Baskerville
   ════════════════════════════════════════════ */
.page-human body { background: var(--human-bg); color: var(--human-text); }
.page-human .realm-main { font-family: 'Libre Baskerville', serif; }
.page-human .realm-title { color: var(--human-text); text-shadow: 0 0 30px rgba(179,86,66,0.4); }
.page-human .hero-image-placeholder { background: linear-gradient(135deg, #111e03 0%, #223b05 50%, #1a2e04 100%); }
.page-human .hero-image-wrap { border: 2px solid rgba(179,86,66,0.45); }
.page-human .idol-frame { border: 2px solid rgba(179,86,66,0.45); background: rgba(0,0,0,0.2); }
.page-human .idol-frame:hover { box-shadow: 0 0 25px rgba(179,86,66,0.4); }
.page-human .idol-placeholder { background: linear-gradient(160deg, rgba(34,59,5,0.8), rgba(179,86,66,0.1)); }
.page-human .idol-label { color: rgba(179,86,66,0.6); }
.page-human .body-text { background: rgba(0,0,0,0.2); border-left: 3px solid var(--human-text); }
.page-human .body-text p { color: #c0d890; font-size: 1.05rem; }
.page-human .descend-text { color: var(--human-text); }

/* ════════════════════════════════════════════
   ANIMAL  —  #886806 bg / #010048 text
   Font: Noto Serif
   ════════════════════════════════════════════ */
.page-animal body { background: var(--animal-bg); color: var(--animal-text); }
.page-animal .realm-main { font-family: 'Noto Serif', serif; }
.page-animal .realm-title { color: var(--animal-text); text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.page-animal .hero-image-placeholder { background: linear-gradient(135deg, #4a3803 0%, #886806 50%, #5a4504 100%); }
.page-animal .hero-image-wrap { border: 2px solid rgba(1,0,72,0.45); }
.page-animal .idol-frame { border: 2px solid rgba(1,0,72,0.45); background: rgba(0,0,0,0.15); }
.page-animal .idol-frame:hover { box-shadow: 0 0 25px rgba(1,0,72,0.4); }
.page-animal .idol-placeholder { background: linear-gradient(160deg, rgba(136,104,6,0.7), rgba(1,0,72,0.15)); }
.page-animal .idol-label { color: rgba(1,0,72,0.55); }
.page-animal .body-text { background: rgba(0,0,0,0.18); border-left: 3px solid var(--animal-text); }
.page-animal .body-text p { color: #fff4c0; font-size: 1.1rem; }
.page-animal .descend-text { color: var(--animal-text); }

/* ════════════════════════════════════════════
   PRETA  —  #d6d3ca bg / #000 text
   Font: Cormorant Garamond
   ════════════════════════════════════════════ */
.page-preta body { background: var(--preta-bg); color: var(--preta-text); }
.page-preta .realm-main { font-family: 'Cormorant Garamond', serif; }
.page-preta .realm-title { color: #111; letter-spacing: 0.2em; }
.page-preta .hero-image-placeholder { background: linear-gradient(135deg, #b0ada5 0%, #d6d3ca 50%, #c4c0b8 100%); }
.page-preta .hero-image-wrap { border: 2px solid rgba(0,0,0,0.2); }
.page-preta .idol-frame { border: 2px solid rgba(0,0,0,0.2); background: rgba(255,255,255,0.3); }
.page-preta .idol-frame:hover { box-shadow: 0 0 20px rgba(0,0,0,0.2); }
.page-preta .idol-placeholder { background: linear-gradient(160deg, rgba(214,211,202,0.6), rgba(180,177,168,0.4)); }
.page-preta .idol-label { color: rgba(0,0,0,0.4); }
.page-preta .body-text { background: rgba(255,255,255,0.45); border-left: 3px solid rgba(0,0,0,0.3); }
.page-preta .body-text p { color: #111; font-size: 1.15rem; }
.page-preta .descend-text { color: #111; }

/* ════════════════════════════════════════════
   NARAKA  —  #ca3f27 bg / #000 text
   Font: Cinzel (harsh, monumental)
   ════════════════════════════════════════════ */
.page-naraka body { background: var(--naraka-bg); color: var(--naraka-text); }
.page-naraka .realm-main { font-family: 'Cinzel', serif; }
.page-naraka .realm-title { color: #000; letter-spacing: 0.25em; }
.page-naraka .hero-image-placeholder { background: linear-gradient(135deg, #7a1a05 0%, #ca3f27 50%, #a02010 100%); }
.page-naraka .hero-image-wrap { border: 2px solid rgba(0,0,0,0.5); }
.page-naraka .idol-frame { border: 2px solid rgba(0,0,0,0.5); background: rgba(0,0,0,0.2); }
.page-naraka .idol-frame:hover { box-shadow: 0 0 25px rgba(0,0,0,0.5); }
.page-naraka .idol-placeholder { background: linear-gradient(160deg, rgba(202,63,39,0.6), rgba(0,0,0,0.3)); }
.page-naraka .idol-label { color: rgba(0,0,0,0.5); }
.page-naraka .body-text { background: rgba(0,0,0,0.2); border-left: 3px solid rgba(0,0,0,0.6); }
.page-naraka .body-text p { color: #1a0a06; font-size: 1rem; letter-spacing: 0.02em; }
.page-naraka .descend-text { color: #000; }

/* ── Single-column realm layout (no idol columns) ── */
.realm-simple {
  max-width: 900px;
}

.realm-simple .hero-image-wrap {
  margin-bottom: 1.5rem;
}

.realm-simple .body-text {
  margin-bottom: 1.5rem;
}

.realm-simple .descend-row {
  justify-content: flex-end;
}

/* Hero images: no transition by default (instant on) */
image.realm-hero {
  transition: none;
}
/* Fade-out class applied on mouseleave only */
image.realm-hero.fading {
  transition: opacity 0.5s ease;
}

/* ════════════════════════════════════════════
   REALM BACKGROUND TEXTURES — via .bg-texture div
   ════════════════════════════════════════════ */
.bg-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── ASURA: fractured rock veins + blood-red pulsing vignette ── */
.bg-texture-asura {
  background-image:
    repeating-linear-gradient(17deg,  transparent 0, transparent 38px, rgba(0,0,0,0.22) 38px, rgba(0,0,0,0.22) 40px),
    repeating-linear-gradient(103deg, transparent 0, transparent 52px, rgba(0,0,0,0.16) 52px, rgba(0,0,0,0.16) 54px),
    repeating-linear-gradient(62deg,  transparent 0, transparent 70px, rgba(187,10,30,0.14) 70px, rgba(187,10,30,0.14) 72px);
  animation: asura-pulse 5s ease-in-out infinite;
}

.bg-texture-asura::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 55% at 50% 0%,   rgba(10,5,0,0.6)    0%, transparent 55%),
    radial-gradient(ellipse 110% 55% at 50% 100%, rgba(10,5,0,0.7)    0%, transparent 55%),
    radial-gradient(ellipse 30% 100% at 0% 50%,   rgba(187,10,30,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(187,10,30,0.18) 0%, transparent 65%);
  animation: asura-pulse 5s ease-in-out infinite;
}

@keyframes asura-pulse {
  0%,100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* ── HUMAN: woven textile crosshatch + warm earthy vignette ── */
.bg-texture-human {
  background-image:
    repeating-linear-gradient(0deg,   transparent 0, transparent 9px, rgba(180,120,40,0.09) 9px, rgba(180,120,40,0.09) 10px),
    repeating-linear-gradient(90deg,  transparent 0, transparent 9px, rgba(140,100,30,0.07) 9px, rgba(140,100,30,0.07) 10px),
    repeating-linear-gradient(45deg,  transparent 0, transparent 18px, rgba(100,70,20,0.04) 18px, rgba(100,70,20,0.04) 19px);
}

.bg-texture-human::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 45%, rgba(220,170,60,0.1)  0%, transparent 60%),
    radial-gradient(ellipse 110% 35% at 50% 0%,   rgba(0,0,0,0.5)    0%, transparent 55%),
    radial-gradient(ellipse 110% 35% at 50% 100%, rgba(0,0,0,0.55)   0%, transparent 55%),
    radial-gradient(ellipse 20% 100% at 0% 50%,   rgba(0,0,0,0.25)   0%, transparent 65%),
    radial-gradient(ellipse 20% 100% at 100% 50%, rgba(0,0,0,0.25)   0%, transparent 65%);
}

/* ── ANIMAL: dappled forest canopy light + dark jungle vignette ── */
.bg-texture-animal {
  background-image:
    radial-gradient(ellipse 8%  5%  at 12% 18%, rgba(255,230,100,0.28) 0%, transparent 100%),
    radial-gradient(ellipse 5%  8%  at 42%  8%, rgba(255,230,100,0.22) 0%, transparent 100%),
    radial-gradient(ellipse 10% 6%  at 68% 22%, rgba(255,235,110,0.25) 0%, transparent 100%),
    radial-gradient(ellipse 6%  9%  at 83% 52%, rgba(255,230,100,0.20) 0%, transparent 100%),
    radial-gradient(ellipse 9%  5%  at 28% 62%, rgba(255,230,100,0.24) 0%, transparent 100%),
    radial-gradient(ellipse 5%  7%  at 58% 78%, rgba(255,230,100,0.20) 0%, transparent 100%),
    radial-gradient(ellipse 7%  4%  at  8% 82%, rgba(255,230,100,0.16) 0%, transparent 100%),
    radial-gradient(ellipse 6%  8%  at 88% 12%, rgba(255,230,100,0.22) 0%, transparent 100%);
  animation: animal-dapple 10s ease-in-out infinite;
}

.bg-texture-animal::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 45% at 50% 0%,   rgba(5,12,0,0.65)  0%, transparent 55%),
    radial-gradient(ellipse 120% 55% at 50% 100%, rgba(2,8,0,0.75)   0%, transparent 55%),
    radial-gradient(ellipse 28% 110% at 0% 50%,   rgba(5,12,0,0.5)   0%, transparent 65%),
    radial-gradient(ellipse 28% 110% at 100% 50%, rgba(5,12,0,0.5)   0%, transparent 65%);
}

@keyframes animal-dapple {
  0%,100% { transform: translate(0,0);      opacity: 0.75; }
  33%      { transform: translate(8px,-5px); opacity: 1; }
  66%      { transform: translate(-5px,7px); opacity: 0.82; }
}

/* ── PRETA: cracked dry earth + bleached dusty haze ── */
.bg-texture-preta {
  background-image:
    repeating-linear-gradient(23deg,  transparent 0, transparent 26px, rgba(90,85,75,0.22) 26px, rgba(90,85,75,0.22) 28px),
    repeating-linear-gradient(112deg, transparent 0, transparent 32px, rgba(90,85,75,0.18) 32px, rgba(90,85,75,0.18) 34px),
    repeating-linear-gradient(67deg,  transparent 0, transparent 46px, rgba(70,65,55,0.13) 46px, rgba(70,65,55,0.13) 48px),
    repeating-linear-gradient(145deg, transparent 0, transparent 20px, rgba(90,85,75,0.11) 20px, rgba(90,85,75,0.11) 22px);
  animation: preta-haze 9s ease-in-out infinite;
}

.bg-texture-preta::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(255,252,240,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 110% 45% at 50% 0%,   rgba(70,65,55,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 110% 45% at 50% 100%, rgba(50,45,35,0.5) 0%, transparent 55%);
  animation: preta-haze 9s ease-in-out infinite;
}

@keyframes preta-haze {
  0%,100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* ── NARAKA: lava vein cracks + hellfire glow + falling embers ── */
.bg-texture-naraka {
  background-image:
    repeating-linear-gradient(
      8deg,
      transparent 0,           transparent 43px,
      rgba(100,10,0,0.45)    43px, rgba(100,10,0,0.45)    45px,
      rgba(255,80,0,0.22)    45px, rgba(255,80,0,0.22)    47px,
      transparent            47px
    ),
    repeating-linear-gradient(
      97deg,
      transparent 0,           transparent 58px,
      rgba(80,10,0,0.38)     58px, rgba(80,10,0,0.38)     60px,
      rgba(255,60,0,0.16)    60px, rgba(255,60,0,0.16)    62px,
      transparent            62px
    ),
    repeating-linear-gradient(
      52deg,
      transparent 0,           transparent 78px,
      rgba(120,20,0,0.28)    78px, rgba(120,20,0,0.28)    80px,
      transparent            80px
    );
  animation: naraka-flicker 3s ease-in-out infinite;
}

.bg-texture-naraka::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(165deg, transparent 0, transparent 54px, rgba(255,110,10,0.12) 54px, rgba(255,110,10,0.12) 56px),
    repeating-linear-gradient(150deg, transparent 0, transparent 79px, rgba(255,70,0,0.09)  79px, rgba(255,70,0,0.09)  81px),
    radial-gradient(ellipse 120% 55% at 50% 100%, rgba(200,40,0,0.55)  0%, transparent 50%),
    radial-gradient(ellipse 80%  35% at 50% 0%,   rgba(40,5,0,0.65)   0%, transparent 45%);
  animation: naraka-flicker 3s ease-in-out infinite 0.4s;
}

@keyframes naraka-flicker {
  0%,100% { opacity: 0.75; }
  25%      { opacity: 1; }
  50%      { opacity: 0.82; }
  75%      { opacity: 0.95; }
}