/* ================================================================
   KARMA — "The Weave" cinematic page
   Extends style.css. Scoped to body.karma-page.
   Warm gold threads on near-black. Eternal dawn. Fate being spun.
   ================================================================ */

body.karma-page{
  --kblack: #0a0704;
  --kblack-2: #0d0906;
  --kgold: #d9a54c;
  --kgold-bright: #ffdb96;
  --kbronze: #a9763f;
  --ktext: #f0e6d2;
  --ktext-dim: #b9a986;
  background: var(--kblack);
}

/* ---------- header ---------- */
body.karma-page header.site-nav{
  position: fixed;
  width: 100%;
  transition: background .5s ease, border-color .5s ease, opacity .6s ease;
}
body.karma-page header.site-nav.hero-mode{ background: transparent; border-bottom-color: transparent; }
body.karma-page header.site-nav.nav-enter{ opacity: 0; }
body.karma-page header.site-nav.nav-enter.nav-in{ opacity: 1; }
body.karma-page .brand span{ color: var(--kgold); }
body.karma-page .links a:hover{ color: var(--kgold); }
body.karma-page .links a.active{ color: var(--kgold); border-color: var(--kgold); }

/* ================================================================
   AMBIENT LAYERS — eternal dawn gradient + two thread systems.
   .weave-bg and .thread-field-back sit behind content and are the
   layers dimmed exclusively during Kaal's section.
   .thread-field-front sits ABOVE images/text, blended, so threads
   visibly cross the story itself.
   ================================================================ */

.weave-bg{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(217,165,76,0.10), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(169,118,63,0.08), transparent 60%),
    linear-gradient(180deg, var(--kblack-2), var(--kblack) 60%);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: dawnShift 90s ease-in-out infinite;
  transition: filter 2.6s ease;
}
@keyframes dawnShift{
  0%, 100%{ background-position: 0% 0%, 100% 100%, 0 0; }
  50%{ background-position: 20% 15%, 80% 85%, 0 0; }
}

.thread-field-back,
.thread-field-front{
  position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none;
}
.thread-field-back{ z-index: 2; filter: blur(0.6px); transition: filter 2.6s ease; }
/* ambient front threads — stay subtle, avoid the earlier glitch look */
.thread-field-front{
  z-index: 6;
  mix-blend-mode: soft-light;
  opacity: .8;
  filter: blur(1.1px);
}
/* story threads — a smaller, deliberate set with more presence: a bright
   core plus a soft halo, so they read as woven light, not a pasted line */
.thread-field-story{
  position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none;
  z-index: 6.5; mix-blend-mode: overlay;
}

/* Each thread: a persistent curved path that breathes gently in place.
   No flowing/respawning — the reviewer's core point: few, real, near-still. */
.thread-field-back path,
.thread-field-front path,
.thread-field-story g{
  fill: none;
  animation-name: threadBreathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.thread-field-back path{
  stroke: url(#threadGradBack);
  stroke-width: 1.2;
}
.thread-field-front path{
  stroke: url(#threadGradFront);
  stroke-width: 0.9;
}
.thread-field-story .halo{
  stroke: url(#threadGradStory);
  stroke-width: 3.4;
  opacity: .3;
  filter: blur(2.2px);
}
.thread-field-story .core{
  stroke: url(#threadGradStory);
  stroke-width: 1;
  opacity: .6;
  filter: blur(0.2px);
}
@keyframes threadBreathe{
  0%{ transform: translate(0, 0); }
  100%{ transform: translate(var(--tx, 22px), var(--ty, 14px)); }
}

/* rare "touched" vibration — brief, small, applied to one thread at a time via JS */
.thread-field-back path.vibrate,
.thread-field-front path.vibrate,
.thread-field-story g.vibrate{
  animation-name: threadVibrate;
  animation-duration: .7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
@keyframes threadVibrate{
  0%, 100%{ transform: translate(var(--tx,0), var(--ty,0)); }
  20%{ transform: translate(calc(var(--tx,0) + 4px), calc(var(--ty,0) - 3px)); }
  40%{ transform: translate(calc(var(--tx,0) - 3px), calc(var(--ty,0) + 3px)); }
  60%{ transform: translate(calc(var(--tx,0) + 2px), calc(var(--ty,0) - 2px)); }
  80%{ transform: translate(calc(var(--tx,0) - 1px), calc(var(--ty,0) + 1px)); }
}

/* threads reacting to Kaal — tighten, brighten, on top of the whole-scene dim */
.thread-field-back path.k-reactive,
.thread-field-front path.k-reactive,
.thread-field-story g.k-reactive .core{
  transition: stroke-width .8s ease, filter 1.8s ease;
}
body.kaal-dim .thread-field-back path.k-reactive,
body.kaal-dim .thread-field-front path.k-reactive,
body.kaal-dim .thread-field-story g.k-reactive .core{
  stroke-width: 1.7;
  filter: brightness(1.7) drop-shadow(0 0 3px rgba(255,219,150,0.5));
}

/* dust — tiny, near-invisible foreground particles, distinct from threads */
.dust-particles{
  position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
}
.dust-particles .speck{
  position: absolute;
  border-radius: 50%;
  background: var(--kgold-bright);
  animation-name: duskDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes duskDrift{
  0%{ transform: translate(0,0); opacity: 0; }
  20%{ opacity: .35; }
  50%{ opacity: .55; }
  80%{ opacity: .2; }
  100%{ transform: translate(var(--sdx, 10px), var(--sdy, -60px)); opacity: 0; }
}

/* hero thread — a single dedicated thread drifting between the two hero lines */
.hero-thread{
  position: absolute;
  left: 50%; top: 50%;
  width: min(90vw, 900px); height: 180px;
  transform: translate(-50%, -70%);
  z-index: 5; pointer-events: none;
  overflow: visible;
}
.hero-thread-path{
  animation: heroThreadPass 26s ease-in-out infinite;
}
@keyframes heroThreadPass{
  0%{ transform: translateX(-6%); opacity: 0; }
  8%{ opacity: .9; }
  50%{ transform: translateX(4%); opacity: .9; }
  92%{ opacity: 0; }
  100%{ transform: translateX(10%); opacity: 0; }
}

/* grain / vignette cohesion layer */
.grain{
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  opacity: .5;
}
.grain::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* ---------- Kaal exclusive dimming ---------- */
body.karma-page.kaal-dim .weave-bg{ filter: brightness(.32) saturate(.7); }
body.karma-page.kaal-dim .thread-field-back{ filter: blur(0.6px) brightness(.55); }

/* ---------- thread-snap moments (Kaal + Final) ---------- */
.snap-zone{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7;
}
.snap-line{
  position: absolute;
  top: 42%; left: 20%;
  width: 260px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,219,150,0.9), transparent);
  transform: rotate(-18deg);
  opacity: .7;
}
.snap-line .half{
  position: absolute; top: 0; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,219,150,0.9));
  transition: transform 1.1s cubic-bezier(.2,.8,.3,1), opacity 1.3s ease;
}
.snap-line .half.left{ left: 0; width: 50%; transform-origin: left; }
.snap-line .half.right{ left: 50%; width: 50%; transform-origin: right;
  background: linear-gradient(90deg, rgba(255,219,150,0.9), transparent); }
.snap-flash{
  position: absolute; top: 42%; left: 20%; width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,190,1), rgba(255,219,150,0) 70%);
  opacity: 0;
  transform: translate(60px, 0) scale(1);
}
.snap-zone.snap-active .snap-flash{
  animation: snapFlash 1.2s ease-out forwards;
}
.snap-zone.snap-active .snap-line .half.left{ transform: translate(-14px, 6px) rotate(-6deg); opacity: 0; }
.snap-zone.snap-active .snap-line .half.right{ transform: translate(14px, -6px) rotate(6deg); opacity: 0; }
@keyframes snapFlash{
  0%{ opacity: 0; transform: translate(60px,0) scale(.4); }
  15%{ opacity: 1; transform: translate(60px,0) scale(1.6); }
  100%{ opacity: 0; transform: translate(60px,0) scale(2.4); }
}

/* ================================================================
   HERO
   ================================================================ */
.karma-hero{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  position: relative; z-index: 4;
  padding: 0 24px;
}
.karma-hero .eyebrow-k{
  font-family: 'Inter', sans-serif;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--kgold); opacity: 0;
  animation: kFade 1.6s ease forwards; animation-delay: .1s;
  margin-bottom: 22px;
}
.karma-hero h1{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(44px, 9vw, 96px);
  letter-spacing: .04em;
  color: var(--kgold-bright);
  text-shadow: 0 0 70px rgba(217,165,76,0.25);
  opacity: 0;
  animation: kFade 1.8s ease forwards;
  animation-delay: .3s;
  margin-bottom: 30px;
}
.karma-hero p{
  font-family: 'EB Garamond', serif;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.7;
  color: var(--ktext);
  max-width: 24ch;
  margin: 0 auto;
  opacity: 0;
  animation: kFade 1.8s ease forwards;
  animation-delay: .7s;
}
@keyframes kFade{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

/* ================================================================
   STORY SECTIONS
   ================================================================ */
.k-story{
  padding: 110px 0;
  position: relative; z-index: 4;
}
.k-story .wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.k-story h2{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(26px, 5vw, 50px);
  line-height: 1.48;
  letter-spacing: .02em;
  color: var(--ktext);
  max-width: 20ch;
  margin: 0 auto 56px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.k-story.in-view h2{ opacity: 1; transform: none; }

.k-media{
  position: relative;
  opacity: 0; transform: translateY(26px) scale(.98);
  transition: opacity 1.4s ease .1s, transform 1.4s ease .1s;
  margin: 0 auto;
}
.k-story.in-view .k-media{ opacity: 1; transform: none; }
.k-media img{
  width: 100%;
  max-height: 78vh;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
  box-shadow: none;
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, black 32%, transparent 96%);
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, black 32%, transparent 96%);
}
/* soft ambient glow behind the image, standing in for the old hard shadow —
   reads as light falling off into the dark rather than a rectangle being cut */
.k-media::before{
  content: "";
  position: absolute;
  inset: -16%;
  z-index: -1;
  background: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(217,165,76,0.22), transparent 78%);
  filter: blur(46px);
}
/* Kaal's image is exempt from both the edge feather and the glow */
.k-media.kaal-image img{
  mask-image: none;
  -webkit-mask-image: none;
  filter: brightness(1.4) contrast(1.12) saturate(1.05);
  position: relative; z-index: 2;
}
.k-media.kaal-image::before{ display: none; }

/* ---------- per-section choreography — each emotion enters differently ---------- */
.shravan-scene .k-media{ transform: translateY(10px); transition-duration: 1.1s; }
.shravan-scene h2{ transform: translateY(10px); transition-duration: 1.1s; }

.rama-scene .k-media{ transform: translateY(20px); transition-duration: 1.3s; }
.rama-scene h2{ transform: translateY(20px); transition-duration: 1.3s; }

.bedroom-scene .k-media{
  transform: none; opacity: 0;
  transition: opacity 2.2s ease;
}
.bedroom-scene.in-view .k-media{ opacity: 1; transform: none; }

.kaal-scene h2, .kaal-scene .k-media{ transform: none; transition: opacity 1.8s ease; }

.k-story p{
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  line-height: 1.9;
  color: var(--ktext-dim);
  max-width: 56ch;
  margin: 44px auto 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.3s ease .2s, transform 1.3s ease .2s;
}
.k-story.in-view p{ opacity: 1; transform: none; }

/* Kaal section — single sentence, generous silence */
.k-story.kaal-scene{
  padding: 140px 0 160px;
}
.k-story.kaal-scene p.kaal-line{
  font-family: 'Cormorant SC', serif;
  font-size: clamp(22px, 3.2vw, 32px);
  color: var(--kgold-bright);
  letter-spacing: .03em;
  max-width: 22ch;
  margin: 56px auto 0;
}

/* ================================================================
   FINAL — generous space, sequential questions, cover reveal
   ================================================================ */
.k-final{
  min-height: auto;
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 180px 24px 160px;
  gap: 30px;
}
.k-question{
  font-family: 'Cormorant SC', serif;
  font-size: clamp(24px, 4vw, 40px);
  color: var(--ktext);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease;
}
.k-question em{
  font-style: normal;
  color: var(--kgold);
}
.k-final.in-view .k-question.q1{ transition-delay: .1s; opacity: 1; transform: none; }
.k-final.in-view .k-question.q2{ transition-delay: .6s; opacity: 1; transform: none; }
.k-final.in-view .k-question.q3{ transition-delay: 1.1s; opacity: 1; transform: none; }

.k-cover-reveal{
  margin-top: 50px;
  opacity: 0; transform: translateY(20px) scale(.97);
  transition: opacity 1.8s ease, transform 1.8s ease;
  transition-delay: 1.9s;
  display: flex; flex-direction: column; align-items: center; gap: 34px;
}
.k-final.in-view .k-cover-reveal{ opacity: 1; transform: none; }
.k-cover-reveal h3{
  font-family: 'Cormorant SC', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.6;
  color: var(--ktext);
  max-width: 30ch;
  margin: 0;
}
.k-cover-reveal .btn.primary{
  background: transparent;
  border-color: var(--kbronze);
  color: var(--ktext);
}
.k-cover-reveal .btn.primary:hover{
  background: var(--kgold);
  border-color: var(--kgold);
  color: var(--kblack);
}

@media (max-width: 640px){
  .karma-hero{ padding: 0 20px; }
  .k-story{ padding: 80px 0; }
  .k-story .wrap{ padding: 0 20px; }
  .k-story h2{ margin-bottom: 36px; }
  .k-media img{ max-height: 46vh; }
  .k-story p{ font-size: 17px; margin-top: 32px; }
  .k-final{ padding: 100px 20px 90px; gap: 22px; }
  .hero-thread{ width: 100vw; height: 140px; }
}

@media (prefers-reduced-motion: reduce){
  .thread-field-back path, .thread-field-front path, .thread-field-story g,
  .hero-thread-path, .dust-particles .speck, .weave-bg{ animation: none; }
  .k-story h2, .k-media, .k-story p, .k-question, .k-cover-reveal{
    opacity: 1 !important; transform: none !important; transition-delay: 0s !important;
  }
}