/* ============================================================
   HERO: THE 3-CHAPTER OPENING SCENE
   Chapter 1 = bangles, 2 = vaddanam (silk), 3 = necklace (arch).
   ============================================================ */
/* ---------- cinematic story hero ---------- */
.story {
  position: relative;
  height: 100vh;
  height: 100svh;
}
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--maroon-3);
}
.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
}
.slide img,
.slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.slide.s1 img {
  object-position: 70% 50%;
}
.slide.s2 img {
  object-position: 30% 50%;
}
.slide.s3 img {
  object-position: 50% 45%;
}
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.slide.s1::after {
  background:
    linear-gradient(90deg, rgba(26, 4, 9, 0.88) 0%, rgba(26, 4, 9, 0.55) 38%, rgba(26, 4, 9, 0.05) 70%),
    linear-gradient(0deg, rgba(26, 4, 9, 0.6), transparent 30%);
}
.slide.s2::after {
  background: linear-gradient(270deg, rgba(10, 6, 4, 0.9) 0%, rgba(10, 6, 4, 0.5) 40%, transparent 70%);
}
.slide.s3::after {
  background: linear-gradient(
    0deg,
    rgba(26, 4, 9, 0.92) 0%,
    rgba(26, 4, 9, 0.45) 38%,
    rgba(26, 4, 9, 0.1) 65%
  );
}
.slide.video {
  display: none;
}
.has-video .slide.video {
  display: block;
}
.has-video .slide.video::after {
  background: linear-gradient(90deg, rgba(26, 4, 9, 0.8) 0%, rgba(26, 4, 9, 0.35) 45%, transparent 75%);
}
.grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.frame {
  position: absolute;
  inset: 22px;
  z-index: 2;
  border: 1px solid rgba(232, 207, 142, 0.18);
  pointer-events: none;
}
/* ---------- hero chapter 1: lit 3D jewel stage ---------- */
.s1-stage {
  background: radial-gradient(ellipse 60% 65% at 66% 44%, #5e1726 0%, #2c0811 48%, #0e0206 100%);
}
.slide.s1-stage::after {
  background: linear-gradient(90deg, rgba(14, 2, 6, 0.85) 0%, rgba(14, 2, 6, 0.45) 34%, transparent 60%);
}
.slide.s2-stage::after {
  background: linear-gradient(270deg, rgba(3, 12, 12, 0.88) 0%, rgba(3, 12, 12, 0.45) 34%, transparent 58%);
}
.slide.s3-stage::after {
  background: linear-gradient(0deg, rgba(3, 5, 16, 0.95) 0%, rgba(3, 5, 16, 0.55) 34%, transparent 58%);
}
.s3-stage .floor::before {
  left: 15%;
  right: 15%;
}
.s2-stage .floor::before {
  left: 0;
  right: 30%;
}
.beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.beams i {
  position: absolute;
  top: -25%;
  left: var(--x);
  width: 36vw;
  height: 135%;
  margin-left: -18vw;
  transform-origin: 50% 0;
  transform: rotate(var(--r));
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 226, 170, 0.34),
    rgba(255, 206, 140, 0.1) 55%,
    transparent 82%
  );
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  filter: blur(22px);
  animation: beam 10s ease-in-out infinite alternate;
}
.beams i:nth-child(2) {
  animation-duration: 13s;
  animation-delay: -4s;
}
.beams i:nth-child(3) {
  animation-duration: 11s;
  animation-delay: -7s;
}
@keyframes beam {
  from {
    transform: rotate(calc(var(--r) - 5deg));
  }
  to {
    transform: rotate(calc(var(--r) + 5deg));
  }
}
.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.floor::before {
  content: "";
  position: absolute;
  left: 30%;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 207, 142, 0.4), transparent);
}
.jewel-wrap {
  position: absolute;
  left: var(--jl, 64%);
  top: var(--jt, 47%);
  width: var(--jw, min(48vw, 780px));
  aspect-ratio: var(--ar, 885/577);
  perspective: 1400px;
  pointer-events: none;
}
.jewel-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--hw, 96%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 150, 0.26),
    rgba(255, 200, 130, 0.07) 45%,
    transparent 68%
  );
}
.jewel-halo .rim {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  padding: 1.5px;
  background: conic-gradient(
    from var(--a),
    transparent 0deg,
    rgba(255, 226, 170, 0.9) 50deg,
    rgba(255, 255, 255, 0.95) 80deg,
    rgba(255, 226, 170, 0.6) 110deg,
    transparent 170deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  animation: rim 9s linear infinite;
}
.jewel-halo::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(232, 207, 142, 0.18);
}
.jewel-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.jewel-3d .jw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 45px 40px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 30px rgba(255, 190, 110, 0.18))
    saturate(1.08) contrast(1.06);
}
.jw-sheen {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  -webkit-mask: url(../assets/hero/msj-bangles-pair.webp) center/100% 100% no-repeat;
  mask: url(../assets/hero/msj-bangles-pair.webp) center/100% 100% no-repeat;
  background: linear-gradient(
    112deg,
    transparent 40%,
    rgba(255, 244, 215, 0.85) 49%,
    rgba(255, 255, 255, 0.95) 51%,
    transparent 60%
  );
  background-size: 320% 100%;
  background-position: var(--sx, 120%) 0;
}
.jw-reflect {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.22;
  filter: blur(2px);
  will-change: transform;
  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 50%);
  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 50%);
}
.jw-flash {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 70%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9),
    rgba(255, 230, 180, 0.35) 30%,
    transparent 65%
  );
  mix-blend-mode: screen;
}
@media (max-width: 980px) {
  .jewel-wrap {
    left: 50%;
    top: var(--jtm, 25%);
    width: var(--jwm, min(72vw, 540px));
  }
  .slide.s2-stage::after,
  .slide.s3-stage::after {
    background: linear-gradient(0deg, rgba(8, 3, 6, 0.95) 0%, rgba(8, 3, 6, 0.7) 42%, transparent 70%);
  }
  .slide.s1-stage::after {
    background: linear-gradient(0deg, rgba(14, 2, 6, 0.95) 0%, rgba(14, 2, 6, 0.7) 42%, transparent 70%);
  }
  .beams i {
    width: 70vw;
    margin-left: -35vw;
  }
}
/* ---------- chapter II silk & chapter III arch niche ---------- */
.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.backdrop img {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  will-change: transform;
}
.backdrop.silk img {
  filter: brightness(0.95) saturate(1.2) contrast(1.12);
  animation: drift 26s ease-in-out infinite alternate;
}
.backdrop.velvet img {
  filter: hue-rotate(205deg) brightness(0.42) saturate(1.5) contrast(1.1);
  animation: drift 30s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(1.07) translate(-1.5%, -1%);
  }
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 50% 55% at var(--lx, 30%) var(--ly, 46%),
      rgba(255, 228, 180, 0.22),
      transparent 62%
    ),
    radial-gradient(ellipse at 40% 50%, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
}
.backdrop.velvet::after {
  --lx: 50%;
  --ly: 40%;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0, 2, 10, 0.75) 100%);
}
.silk-light {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 250, 235, 0.55) 48%, transparent 60%);
  background-size: 250% 100%;
  animation: silk 9s ease-in-out infinite;
}
@keyframes silk {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -40% 0;
  }
}
.s2-stage,
.s3-stage {
  background: #05070a;
}
.s2-stage .jewel-halo,
.s3-stage .jewel-halo {
  display: none;
}
.s2-stage .beams i {
  background: linear-gradient(
    180deg,
    rgba(255, 240, 210, 0.22),
    rgba(255, 230, 190, 0.06) 55%,
    transparent 82%
  );
}
.s3-stage .beams {
  opacity: 0.5;
}
.s3-stage .beams i {
  background: linear-gradient(
    180deg,
    rgba(235, 240, 255, 0.3),
    rgba(220, 230, 255, 0.07) 55%,
    transparent 82%
  );
}
.s3-stage .jewel-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 135%;
  height: 150%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 248, 232, 0.34),
    rgba(255, 240, 215, 0.12) 45%,
    transparent 75%
  );
  filter: blur(6px);
  animation: glow 4s ease-in-out infinite alternate;
}
.s3-stage .jw {
  filter: drop-shadow(0 0 1.5px rgba(255, 244, 215, 0.9)) drop-shadow(0 30px 38px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 40px rgba(255, 220, 160, 0.25)) saturate(1.15) contrast(1.1) brightness(1.08);
}
.s3-stage .jw-reflect {
  opacity: 0.3;
}
.arch {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 86%;
  width: auto;
  aspect-ratio: 400/600;
  translate: -50% 0;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(232, 180, 110, 0.18));
}
.arch rect:first-child {
  animation: glow 5s ease-in-out infinite alternate;
}
@keyframes glow {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 980px) {
  .arch {
    height: auto;
    width: 108vw;
    bottom: auto;
    top: 12%;
  }
}
/* hero chapters II & III: no white spotlights, only a soft warm glow behind the piece */
.s2-stage .beams,
.s3-stage .beams,
.s2-stage .jw-sheen,
.s3-stage .jw-sheen {
  display: none;
}
.s3-stage .jewel-wrap::before {
  background: radial-gradient(
    ellipse closest-side,
    rgba(232, 190, 120, 0.16),
    rgba(232, 190, 120, 0.05) 50%,
    transparent 78%
  );
  animation: none;
}
.s2-stage .jewel-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 220%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(232, 190, 120, 0.14), transparent 75%);
  filter: blur(8px);
}
.s3-stage .jw {
  filter: drop-shadow(0 30px 38px rgba(0, 0, 0, 0.85)) saturate(1.12) contrast(1.08) brightness(1.05);
}
/* scroll progress line under the header */
.progress-line {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold));
}
.chapter {
  position: absolute;
  z-index: 3;
  color: var(--cream);
  max-width: 560px;
}
.chapter .eyebrow {
  color: var(--gold-2);
  display: flex;
  align-items: center;
  gap: 14px;
}
.chapter .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
}
.chapter h1,
.chapter h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 22px 0 20px;
}
.chapter h1 em,
.chapter h2 em {
  color: var(--gold-2);
}
.chapter .sub {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--gold-2);
  font-style: italic;
  margin: -6px 0 18px;
}
.chapter p {
  color: rgba(251, 247, 240, 0.74);
  max-width: 46ch;
}
.chapter .ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.line > span {
  display: block;
}
.c1 {
  left: var(--pad);
  top: 50%;
  transform: translateY(-44%);
}
.c2 {
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}
.c2 .eyebrow {
  justify-content: flex-end;
}
.c2 p {
  margin-left: auto;
}
.c3 {
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  text-align: center;
  max-width: 680px;
}
.c3 .eyebrow {
  justify-content: center;
}
.c3 .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
}
.c3 h2 {
  font-size: clamp(40px, 5vw, 72px);
  margin: 16px 0 12px;
}
.c3 p {
  margin: 0 auto;
}
.chapter-meta {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gold-2);
  font-size: 11px;
  letter-spacing: 0.2em;
}
.chapter-meta .track {
  width: 120px;
  height: 1px;
  background: rgba(232, 207, 142, 0.2);
  position: relative;
}
.chapter-meta .track i {
  position: absolute;
  inset: 0;
  background: var(--gold-2);
  transform-origin: left;
  transform: scaleX(0);
}
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-2);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.scroll-cue .mouse {
  width: 20px;
  height: 32px;
  border: 1px solid rgba(232, 207, 142, 0.55);
  border-radius: 12px;
  position: relative;
}
.scroll-cue .mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  background: var(--gold-2);
  border-radius: 2px;
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}