/* ===========================================================
   IMMERSIVE LAYER — vanilla CSS 3D, no frameworks.
   Piano-key book cards · floating chapter cells · glass verse
   plates with mouse-parallax tilt and Z-bob drift.

   All transforms are GPU-composited (`transform`, `opacity`,
   `filter`). Honors prefers-reduced-motion.
   =========================================================== */

/* Shared 3D perspective root. Anything inside #app sits in a
   common camera frame so transforms feel related, not jittery. */
#app{
  perspective: 1600px;
  perspective-origin: 50% 35%;
  transform-style: preserve-3d;
}

/* ===========================================================
   PIANO-KEY HUB BOOK CARDS
   =========================================================== */

.book-grid{
  transform-style: preserve-3d;
  perspective: 1400px;
}

/* Reset the heavy spring on book-card-game so the piano feels light */
.book-card-game{
  transition:
    transform .55s cubic-bezier(.16,.84,.32,1),
    box-shadow .55s ease,
    border-color .45s ease,
    filter .45s ease;
  will-change: transform, filter;
  transform-origin: 50% 100% -10px;
}

/* The lifted, forward "key pressed" state on hover/focus */
.book-card-game:hover,
.book-card-game:focus-visible{
  transform:
    translate3d(0, -10px, 50px)
    rotateX(-4deg);
  z-index: 5;
}

/* Use :has() to dim the neighbors of the hovered key. Modern Chromium,
   Safari, and Firefox all support :has() as of 2024. Falls back to no
   dim where unsupported — still works, just less dramatic. */
.book-grid:has(.book-card-game:hover) .book-card-game:not(:hover){
  transform: translateZ(-20px) scale(.97);
  filter: brightness(.72) saturate(.85) blur(.5px);
  opacity: .85;
}
.book-grid:has(.book-card-game:hover) .book-card-game.tier-complete:not(:hover){
  /* Translated-locale books keep their identity even when dimmed */
  filter: brightness(.85) saturate(1);
}

/* No idle animation on the hub either — the cards sit still until
   the user moves their cursor. Hover does all the work. */

/* ===========================================================
   FLOATING CHAPTER CELLS (per-book chapter grid)
   =========================================================== */

.chapter-grid{
  transform-style: preserve-3d;
  perspective: 900px;
  gap: .55rem;
}
.chapter-cell{
  transform-style: preserve-3d;
  transition:
    transform .4s cubic-bezier(.16,.84,.32,1),
    background-color .35s ease,
    box-shadow .45s ease,
    filter .35s ease;
  will-change: transform, filter;
}
.chapter-cell:hover{
  transform: translate3d(0, -3px, 24px) rotateX(-6deg);
  z-index: 3;
}
.chapter-grid:has(.chapter-cell:hover) .chapter-cell:not(:hover){
  transform: translateZ(-10px) scale(.96);
  filter: brightness(.78);
}
.chapter-grid:has(.chapter-cell:hover) .chapter-cell.in-locale:not(:hover){
  /* Telugu/Hindi cells never lose their glow */
  filter: brightness(.92);
}

/* In-locale cells get their gold glow (from polish.css) but no idle
   drift. The translated identity is communicated by color + the small
   pulsing sparkle dot, not by the whole cell drifting. */

/* ===========================================================
   GLASSMORPHISM VERSE PLATES (chapter detail)
   =========================================================== */

.verse-block,
.doctrine-block,
.annot-section{
  position: relative;
  /* Frosted-glass plate */
  background:
    linear-gradient(180deg, rgba(244,235,217,.045), rgba(244,235,217,.02));
  border: 1px solid rgba(201,162,74,.18);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255,244,194,.08) inset,
    0 24px 60px -24px rgba(0,0,0,.55),
    0 0 0 1px rgba(201,162,74,.06) inset;
  transform-style: preserve-3d;
  transition:
    transform .55s cubic-bezier(.16,.84,.32,1),
    box-shadow .55s ease,
    border-color .45s ease;
  will-change: transform;
  /* Mouse-tracked CSS variables (set by tilt.js). Default zero. */
  --plate-tilt-x: 0deg;
  --plate-tilt-y: 0deg;
  --plate-glare-x: 50%;
  --plate-glare-y: 50%;
}

.verse-block{
  padding: 1.4rem 1.5rem;
  margin: 1rem 0;
}
.doctrine-block{
  padding: 1.1rem 1.2rem;
}
.annot-section{
  padding: 1.6rem 1.4rem;
  margin: 1.4rem auto;
}

/* Specular highlight that tracks the cursor */
.verse-block::before,
.doctrine-block::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--plate-glare-x) var(--plate-glare-y),
    rgba(255,244,194,.10),
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.verse-block.tilting::before,
.doctrine-block.tilting::before,
.verse-block:hover::before,
.doctrine-block:hover::before{ opacity: 1; }

/* Active tilt state from JS */
.verse-block.tilting,
.doctrine-block.tilting{
  transform:
    perspective(900px)
    rotateX(var(--plate-tilt-x))
    rotateY(var(--plate-tilt-y))
    translateZ(8px);
  border-color: rgba(233,200,112,.4);
  box-shadow:
    0 1px 0 rgba(255,244,194,.12) inset,
    0 36px 80px -28px rgba(0,0,0,.65),
    0 0 28px rgba(233,200,112,.18);
}

/* No idle animation on reading surfaces. Verse plates stay still
   until the user interacts (scroll = entry reveal; mouse = tilt).
   Reading content should never demand attention from the reader. */

/* The chapter detail container gets perspective so the plates feel 3D */
.chapter-detail{
  perspective: 1200px;
  perspective-origin: 50% 30%;
}

/* ===========================================================
   GLASS NAVIGATION PLATES (back / next / return)
   =========================================================== */

.return-btn,
.nav-btn,
.btn.ghost{
  background: linear-gradient(180deg, rgba(244,235,217,.06), rgba(244,235,217,.025));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(201,162,74,.28);
  box-shadow:
    0 0 0 1px rgba(255,244,194,.04) inset,
    0 18px 40px -18px rgba(0,0,0,.6);
}

.chapter-nav{
  perspective: 800px;
}
.chapter-nav .nav-btn{
  transition:
    transform .45s cubic-bezier(.16,.84,.32,1),
    box-shadow .45s ease,
    border-color .45s ease;
}
.chapter-nav .nav-btn:hover:not([disabled]){
  transform: translate3d(0, -3px, 20px);
  border-color: var(--gold-bright);
  box-shadow:
    0 0 0 1px rgba(255,244,194,.08) inset,
    0 28px 60px -20px rgba(0,0,0,.7),
    0 0 24px rgba(233,200,112,.25);
}

/* ===========================================================
   FLUID-TUNNEL SCROLL FEEL (chapter pages)
   =========================================================== */

@supports (animation-timeline: scroll()){
  .chapter-detail .annot-section{
    animation: tunnel-pass linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes tunnel-pass{
    from{ opacity: 0; transform: translate3d(0, 40px, -120px) rotateX(8deg); filter: blur(2px); }
    50% { opacity: 1; transform: translate3d(0, -4px,    0)   rotateX(0deg); filter: blur(0); }
    to  { opacity: 1; transform: translate3d(0, 0,       0)   rotateX(0deg); filter: blur(0); }
  }
}

/* ===========================================================
   REDUCED-MOTION OVERRIDE
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  .book-card-game,
  .chapter-cell,
  .verse-block,
  .doctrine-block,
  .annot-section{
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
  .book-grid:has(.book-card-game:hover) .book-card-game:not(:hover),
  .chapter-grid:has(.chapter-cell:hover) .chapter-cell:not(:hover){
    transform: none !important;
    filter: none !important;
  }
}

/* ===========================================================
   FIREFOX FALLBACK
   ===========================================================
   Firefox supports backdrop-filter as of v103. Where unsupported,
   the linear-gradient background still provides a tinted plate.
   =========================================================== */
@supports not (backdrop-filter: blur(1px)){
  .verse-block,
  .doctrine-block,
  .annot-section,
  .return-btn,
  .nav-btn,
  .btn.ghost{
    background: linear-gradient(180deg, rgba(20,24,38,.55), rgba(10,14,26,.55));
  }
}