/* ============================================================
   SHRINKING HERO: the first frame of the pinned stage
   The full-bleed front cover sits on top of the WebGL canvas and
   shrinks to the projected front-panel size. The canvas and book edges
   emerge underneath the still-opaque image; the photo is hidden only
   once the 3D panel is aligned.
   ============================================================ */
.hero-shrink-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.hero-shrink-container {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  will-change: transform, width, height, border-radius, box-shadow, opacity;
}

.hero-shrink-container picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The wordmark sits in the middle of the artwork, which is where the copy
   wants to be, so at full bleed the picture is scaled up a little about its
   bottom centre. That lifts the arch and wordmark clear of the text while
   keeping the image centred in the frame -- an off-centre origin here is
   what makes the artwork creep sideways as the box shrinks. The timeline
   eases the scale back to 1, so the image fills its frame exactly at the
   end and lands flush on the mesh. The JS reads this computed value on reset
   and eases the image back to 1 while it shrinks.

   1.17, not 1.1: the artwork carries its own gold rule and emblem directly
   beneath "Academics", so the wordmark's ink reaches 56.1% down the image.
   Measured at 1584x805, the hero eyebrow's top edge sits at y=404 and the
   wordmark's bottom at y=418 at scale 1.1 -- a real 14px collision, with the
   eyebrow's letters landing on the artwork's own gold rule. Scaling about the
   bottom edge moves that boundary to y=398 at 1.17, clearing the eyebrow with
   room to spare. */
#hero-shrink-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.17);
  transform-origin: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 768px), (max-aspect-ratio: 1/1) {
  #hero-shrink-img { object-fit: cover; }
}

/* A light gradient shadow laid over the whole cover picture -- the one that
   is about to become the book. It lives inside the shrinking frame, so it is
   always exactly the size of the image and travels with it down to the size
   of the book; the timeline lifts it away over the last of the shrink.
   A single soft top-to-bottom grade, kept deliberately pale so the artwork
   still reads. No blur: a blurred veil turns the frame to frosted glass,
   which is not the look here. */
.hero-shrink-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(3, 14, 10, .2) 0%,
    rgba(3, 14, 10, .09) 34%,
    rgba(3, 14, 10, .09) 66%,
    rgba(3, 14, 10, .2) 100%);
  opacity: 1;
}

/* Copy sits over the cover and is tweened out by the timeline. It is
   centred and lifted on its own soft panel so it reads clearly against the
   artwork, which is a light cream field through the middle. */
/* The artwork's arch and wordmark own the middle of the frame, so the copy
   is centred horizontally but sits low, over the dark green waves. Light
   type on the waves needs almost no help; the pool under it is just enough
   to keep the descenders off the artwork's gold line work. */
.hero-shrink-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 96px 24px 34px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

/* No .hero-eyebrow rule. The cover artwork already prints "SEEKING KNOWLEDGE
   IS WORSHIP" in gold directly beneath the wordmark, so the hero used to
   stack a second, identical line on top of it -- the two collided, and the
   overlay copy sat on the artwork's own gold rule. The artwork's line is the
   better one anyway: it is part of the cover, so it shrinks away with the
   picture and lands flush on the mesh. Anything set here would have to
   animate in step with it, which is not worth a duplicate. */

/* The copy stays integrated with the cover. On narrow screens a broad,
   feathered shade sits behind it to protect contrast without creating a box. */
.hero-shrink-headings {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}

.hero-shrink-title {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: #FBF8EF;
  margin: 0 0 16px;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .85), 0 0 40px rgba(0, 0, 0, .55);
}

.hero-shrink-title em { color: var(--gold-soft); font-style: italic; }

.hero-shrink-desc {
  font-size: clamp(13px, 1.45vw, 16px);
  line-height: 1.62;
  color: #F4F6EE;
  max-width: 620px;
  margin: 0 auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 26px rgba(0, 0, 0, .6);
}

/* The hero's own Apply button, under the hadith. It rides the overlay, so it
   fades out with the rest of the copy when the cover starts to shrink. */
.hero-apply-btn {
  margin-top: 26px;
  pointer-events: auto;
  padding: 15px 46px;
  font-size: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(184, 148, 77, .3);
}

.hero-shrink-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.hero-shrink-cue .scroll-wheel {
  width: 22px;
  height: 36px;
  border: 2px solid var(--gold);
  border-radius: 12px;
  display: block;
  box-shadow: 0 0 15px rgba(184,148,77,.3);
  position: relative;
}

.hero-shrink-cue .scroll-wheel::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
  animation: heroWheel 1.6s ease-in-out infinite;
}

@keyframes heroWheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(12px); opacity: .15; }
}

.hero-shrink-overlay .word { opacity: 1; transform: none; }

@media (max-width: 768px), (max-aspect-ratio: 1/1) {
  .hero-shrink-overlay { padding: 88px 16px 28px; }
  .hero-shrink-headings {
    position: relative;
    isolation: isolate;
    padding: 14px 12px 16px;
  }
  .hero-shrink-title {
    font-size: clamp(22px, 5.5vw, 26px);
    line-height: 1.15;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .96),
      0 7px 26px rgba(0, 0, 0, .86),
      0 0 52px rgba(0, 0, 0, .68);
  }
  .hero-shrink-title em {
    color: #F4D58D;
    text-shadow: 0 1px 0 rgba(57, 37, 4, .68), 0 0 20px rgba(216, 188, 126, .42);
  }
  .hero-shrink-desc { font-size: 12px; }
  .hero-apply-btn { margin-top: 20px; padding: 12px 34px; font-size: 14px; }
  .hero-shrink-cue { font-size: 9px; letter-spacing: 1.6px; margin-top: 20px; }

  /* The printed wordmark and its arch occupy the upper half of a phone crop.
     Give the quote a larger, deeper pool of shade, feathered well beyond the
     copy so it reads as part of the image rather than a card. It is inside the
     overlay, so it fades with the quote before the 3D handoff. */
  .hero-shrink-headings::before {
    content: "";
    position: absolute;
    inset: -38px -42px -42px;
    z-index: -1;
    pointer-events: none;
    border-radius: 12px;
    background: linear-gradient(180deg,
      rgba(2, 12, 8, .58) 0%,
      rgba(2, 12, 8, .72) 50%,
      rgba(2, 12, 8, .58) 100%);
    box-shadow: 0 0 34px 18px rgba(2, 12, 8, .34);
    filter: blur(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shrink-cue .scroll-wheel::after { animation: none; }
}

/* ============================================================
   MASEEL 3D BOOK STAGE
   Scroll-driven Three.js book + verse spotlight, layered on
   top of the sticky hero and pinned until the sequence ends.
   ============================================================ */

/* The book section owns the top of the page: its own first frame is the
   full-bleed hero, and ScrollTrigger pins the whole thing while the sequence
   plays. At rest, z-index 30 matches the courses section; later DOM order lets
   the cards cover it at handoff. While pinned, the body class briefly raises
   the book above the cards to prevent reverse-scroll overlap. */
.book3d {
  position: relative;
  z-index: 30;
  width: 100%;
  background: #030806;
  box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.98);
  border-top: 1px solid rgba(216, 188, 126, 0.18);
  touch-action: pan-y !important;
}

.book3d-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #173d31 0%, #0a241d 54%, #020705 100%);
  background-repeat: no-repeat;
  touch-action: pan-y !important;
}

.book3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Hidden on load: the front-cover photo leads, then this canvas eases in
     beneath it during the final shrink so the book edges emerge around
   the still-solid artwork. */
  opacity: 0;
  pointer-events: none;
  touch-action: pan-y !important;
}

.book3d-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* --- verse spotlight: subtractive only, so text stays legible --- */
.book3d-spotlight {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  touch-action: pan-y !important;
}

/* Five composited layers feather only above and below each ayah. The full
   horizontal span remains clear, with no side spotlight or vignette. */
.book3d-spot-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  will-change: transform, height;
  contain: strict;
}

.book3d-spot-layer-0,
.book3d-spot-layer-4 {
  background: #000;
}

.book3d-spot-layer-1 {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0) 100%);
}

.book3d-spot-layer-3 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0) 100%);
}

.book3d-spot-layer-2 {
  background: transparent;
}

/* --- soft all-side handoff light --- */
.book3d-ambient-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 25% 58% at 0% 50%, rgba(50, 145, 108, .22) 0%, transparent 78%),
    radial-gradient(ellipse 25% 58% at 100% 50%, rgba(50, 145, 108, .22) 0%, transparent 78%),
    radial-gradient(ellipse 64% 22% at 50% 0%, rgba(225, 193, 126, .12) 0%, transparent 80%),
    radial-gradient(ellipse 64% 22% at 50% 100%, rgba(225, 193, 126, .12) 0%, transparent 80%),
    radial-gradient(ellipse 24% 34% at 50% 50%, rgba(247, 231, 190, .08) 0%, transparent 82%);
}


/* Caption is a full-width bottom bar, not floating text, so it can never
   collide with the book regardless of viewport or camera framing. */
.book3d-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: linear-gradient(to top, rgba(3, 10, 8, 0.94) 0%, rgba(3, 10, 8, 0.86) 55%, rgba(3, 10, 8, 0) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s var(--ease, ease);
  pointer-events: none;
}

.book3d-caption.on {
  opacity: 1;
  transform: translateY(0);
}

.book3d-caption b {
  display: block;
  margin-bottom: 5px;
  color: var(--gold-soft, #d8bc7e);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.book3d-caption span {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  color: rgba(247, 243, 232, 0.9);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: balance;
}

.book3d-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8vw;
  text-align: center;
  color: rgba(247, 243, 232, 0.7);
  font-size: 15px;
  line-height: 1.7;
}

.book3d.no-webgl .book3d-fallback {
  display: flex;
}

@media (max-width: 700px) {
  .book3d-caption { padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px)); }
  .book3d-caption span { font-size: 14px; line-height: 1.5; }
  .book3d-caption b { font-size: 10px; letter-spacing: 1.6px; }
}