/* =========================================================
   ANANDA SECTION 2 — REVISED

   Behaviour:
   1. The hero remains bright and shrinks from the centre.
   2. The olive background is revealed equally on all 4 sides.
   3. The oversized words move continuously, independently of scroll.
   4. One Ananda International signature sits above the shrinking hero.
   5. The hero and signature disappear, then a full-page company
      statement is revealed.
   6. No extra contour artwork is added here. Your existing fixed
      topographic canvas remains the only line design.
   ========================================================= */

:root {
 --story-bg: #004B49;
--story-bg-deep: #003735;
  --story-ivory: #f5efe4;
  --story-cream: #f3eadc;
  --story-ink: #102A43; 
  --story-accent: #f93822;
  --story-marquee-red: #ffff;
  --story-marquee-blue:#000080;
  --story-muted: rgba(245, 239, 228, 0.72);
  --story-cream-muted: rgba(36, 27, 23, 0.58);
}


/* =========================================================
   LAYERING WITH THE EXISTING HERO
   ========================================================= */

.fan-section {
  position: relative;
  z-index: 20;
}

.fan-sticky {
  background: transparent;
}

/*
  section.js adds this class only after all 11 cards have opened.
  It freezes the completed hero in the viewport while it shrinks,
  instead of allowing the sticky hero to slide upward.
*/
.fan-sticky.is-section-transitioning {
  position: fixed;
  inset: 0;
  z-index: 30;

  width: 100%;
  height: 100svh;

  overflow: hidden;
  pointer-events: none;
}

.stage {
  transform-origin: 50% 50%;
  will-change: transform, opacity, border-radius, box-shadow;
}


/* =========================================================
   STORY SECTION
   ========================================================= */

.ananda-story {
  position: relative;

  /*
    100svh overlaps the final viewport of the hero.
    The upward box-shadow places olive behind the hero before
    the story itself reaches the top of the browser.
  */
  height: 400svh;
  margin-top: -100svh;

  color: var(--story-ivory);
  background: var(--story-bg);
  box-shadow: 0 -100svh 0 var(--story-bg);
}

.ananda-story__sticky {
  position: sticky;
  top: 0;
  z-index: 5;

  width: 100%;
  height: 100svh;
  overflow: hidden;

  /* No extra contour pattern or texture. */
  background: var(--story-bg);
}


/* =========================================================
   CONTINUOUS MOVING WORDS
   ========================================================= */

.ananda-story__marquee {
  position: fixed;
  inset: 0;
  z-index: 20;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 4.5vh, 68px);

  overflow: hidden;
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

.ananda-story__marquee-row {
  width: 100%;
  overflow: hidden;
}

.ananda-story__marquee-track {
  display: flex;
  width: max-content;
  flex: none;

  white-space: nowrap;
  will-change: transform;
}

.ananda-story__marquee-track span {
  display: block;
  flex: none;

  font-size: clamp(64px, 8.6vw, 154px);
  line-height: 0.80;
  letter-spacing: -0.066em;
  text-transform: uppercase;
}

.ananda-story__marquee-row--top {
  color: var(--story-marquee-red);
}

.ananda-story__marquee-row--top
.ananda-story__marquee-track span {
  font-family: "Bodoni Moda", "Cormorant Garamond", serif;
  font-weight: 600;
}

.ananda-story__marquee-row--bottom {
  color: var(--story-marquee-blue);
}

.ananda-story__marquee-row--bottom
.ananda-story__marquee-track span {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

.ananda-story__scroll-more {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 58px);

  margin: 0;
  transform: translateX(-50%);

  color: rgba(245, 239, 228, 0.82);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ananda-story__scroll-more span {
  display: inline-block;
  margin-left: 8px;
  animation: anandaScrollMore 1.25s ease-in-out infinite;
}

@keyframes anandaScrollMore {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/*
  These animations run with time, not scroll.
  section.js only fades the complete marquee in and out.
*/

.ananda-story__marquee-track--left {
  animation: anandaMarqueeLeft 22s linear infinite;
}

.ananda-story__marquee-track--right {
  transform: translateX(-50%);
  animation: anandaMarqueeRight 24s linear infinite;
}

@keyframes anandaMarqueeLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes anandaMarqueeRight {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.ananda-story__marquee {
  -webkit-mask-image:
    radial-gradient(
      ellipse 36% 44% at 50% 50%,
      rgba(0,0,0,0.58) 0%,
      rgba(0,0,0,0.68) 48%,
      rgba(0,0,0,0.90) 76%,
      #000 100%
    );

  mask-image:
    radial-gradient(
      ellipse 36% 44% at 50% 50%,
      rgba(0,0,0,0.58) 0%,
      rgba(0,0,0,0.68) 48%,
      rgba(0,0,0,0.90) 76%,
      #000 100%
    );
}
/* MARQUEE FULLY VISIBLE AFTER HERO SHRINK — START */

.ananda-story__marquee.marquee-full-visible {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* MARQUEE FULLY VISIBLE AFTER HERO SHRINK — END */

/* =========================================================
   SINGLE SIGNATURE ABOVE THE SHRINKING HERO
   ========================================================= */

.ananda-story__intro-mark {
  position: fixed;
  inset: 0;
  z-index: 130;

  display: grid;
  place-items: center;

  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
}

.ananda-story__signature {
  display: inline-block;

  color: var(--story-accent);

  font-family: "Lora", Georgia, serif;
  font-size: clamp(88px, 8.8vw, 184px);

  font-style: italic;
  font-weight: 600;

  line-height: 0.95;
  letter-spacing: -0.065em;

  white-space: nowrap;

  /* Makes the italic noticeably stronger */
  transform: skewX(-8deg);
  transform-origin: center;

  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);

  will-change: transform, opacity, filter;
}

/* =========================================================
   FULL-PAGE COMPANY STATEMENT
   ========================================================= */

.ananda-story__content {
  position: absolute;
  inset: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  padding: clamp(24px, 4vw, 72px);

  overflow: hidden;
  text-align: center;

  /*
    This solid page grows over the continuously moving words.
    At a tiny scale it looks like a new page emerging from the
    point where the hero disappeared; at scale 1 it fills the screen.
  */
  background: var(--story-cream);
  color: var(--story-ink);

  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform, opacity, border-radius, box-shadow;
}

.ananda-story__emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 12px;
  color: var(--story-cream-muted);
}

.ananda-story__emblem span {
  width: 30px;
  height: 1px;
  background: currentColor;
}

.ananda-story__emblem b {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border: 1px solid currentColor;
  border-radius: 50%;

  font-family: "Bodoni Moda", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.ananda-story__eyebrow {
  margin: 0 0 clamp(26px, 4vh, 48px);

  color: var(--story-cream-muted);

  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ananda-story__statement {
  width: min(1320px, calc(100% - 72px));
  margin: 0;

  color: var(--story-ink);

  font-family: "Inter", sans-serif;
  font-size: clamp(35px, 4.95vw, 78px);
  font-weight: 700;
  line-height: 0.91;
  letter-spacing: -0.064em;
  text-transform: uppercase;
}

.ananda-story__statement-line {
  display: block;
  overflow: hidden;
  padding: 0.035em 0 0.075em;
}

.ananda-story__statement-line > span {
  display: block;
  will-change: transform, opacity, filter;
}

.ananda-story__statement em {
  color: var(--story-accent);

  font-family: "Bodoni Moda", "Cormorant Garamond", serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.055em;
}


/* =========================================================
   KEEP THE EXISTING INTERACTIVE OVERLAY ABOVE THIS SECTION
   ========================================================= */

.ambient-background {
  z-index: 140;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .ananda-story {
    height: 370svh;
  }

  .ananda-story__marquee-track span {
    font-size: clamp(58px, 12.5vw, 110px);
  }

  .ananda-story__statement {
    width: min(760px, calc(100% - 42px));
  }

  .ananda-story__statement {
    font-size: clamp(33px, 7.2vw, 60px);
    line-height: 0.94;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  .ananda-story {
    height: 350svh;
  }

  .ananda-story__marquee {
    gap: 4px;
  }

  .ananda-story__marquee-track span {
    font-size: clamp(52px, 18vw, 82px);
  }

  .ananda-story__signature {
    max-width: 92vw;
    font-size: clamp(39px, 12.4vw, 68px);
  }

  .ananda-story__statement {
    width: calc(100% - 28px);
  }

  .ananda-story__emblem {
    margin-bottom: 10px;
  }

  .ananda-story__eyebrow {
    margin-bottom: 24px;
    font-size: 8px;
    letter-spacing: 0.18em;
  }

  .ananda-story__statement {
    font-size: clamp(27px, 8.4vw, 46px);
    line-height: 0.98;
    letter-spacing: -0.052em;
  }

  .ananda-story__statement-line {
    padding-bottom: 0.12em;
  }
}


/* =========================================================
   REDUCED MOTION / STATIC FALLBACK
   ========================================================= */

.ananda-story.is-static {
  height: 100svh;
  margin-top: 0;
  box-shadow: none;
}

.ananda-story.is-static .ananda-story__marquee,
.ananda-story.is-static .ananda-story__intro-mark {
  display: none;
}

.ananda-story.is-static .ananda-story__content {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .ananda-story__marquee-track {
    animation-play-state: paused;
  }
}

/* =========================================================
   SECTION 3 — EDITORIAL HORIZONTAL STORY
   Keeps the existing emerald / cream Ananda palette.
   ========================================================= */

.horizontal-story {
  position: relative;
  z-index: 15;
  background: var(--story-bg);
  color: var(--story-ivory);
}

.horizontal-story__transition {
  height: clamp(130px, 22svh, 240px);
  background: linear-gradient(to bottom, var(--story-cream) 0%, #c8d9d5 38%, var(--story-bg) 100%);
}

.horizontal-story__pin {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--story-bg);
}

.horizontal-story__track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.horizontal-story__panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(245,239,228,.08);
  isolation: isolate;
}

/* subtle editorial guide lines */
.horizontal-story__panel::after {
  content: "";
  position: absolute;
  left: clamp(26px,4vw,70px);
  right: clamp(26px,4vw,70px);
  bottom: clamp(24px,4vh,46px);
  height: 1px;
  background: rgba(245,239,228,.12);
  pointer-events: none;
}

.story-chapter__copy,
.story-chapter__closing-copy { position:absolute; z-index:6; }

.story-chapter__label {
  display:block;
  margin-bottom:18px;
  color:rgba(245,239,228,.66);
  font-family:"Inter",sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.horizontal-story .story-chapter h2,
.horizontal-story .story-chapter h3 {
  width:auto;
  max-width:none;
  margin:0;
  color:var(--story-ivory);
  font-family:"Bodoni Moda","Cormorant Garamond",serif;
  font-size:clamp(48px,5.2vw,84px);
  font-weight:500;
  line-height:.91;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.story-chapter__body {
  max-width:430px;
  margin:22px 0 0;
  color:rgba(245,239,228,.72);
  font-family:"Inter",sans-serif;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.6;
}

.story-chapter__statement {
  display:block;
  max-width:480px;
  margin-top:20px;
  color:var(--story-ivory);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,1.7vw,29px);
  font-weight:600;
  line-height:1.08;
}

.story-chapter__year {
  position:absolute;
  z-index:1;
  color:rgba(245,239,228,.055);
  font-family:"Bodoni Moda",serif;
  font-size:clamp(160px,25vw,390px);
  font-style:italic;
  line-height:.8;
  pointer-events:none;
}

.story-image {
  position:absolute;
  z-index:3;
  margin:0;
  overflow:hidden;
  background:#173f3d;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.story-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(.82) contrast(.96);
  transition:filter .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}

.story-image:hover img { filter:saturate(1) contrast(1); transform:scale(1.025); }

/* 01 — OPENING: quiet, editorial */
.story-chapter--opening .story-chapter__copy {
  left:12vw;
  top:50%;
  transform:translateY(-50%);
  width:min(720px,72vw);
}
.story-chapter--opening h2 { font-size:clamp(64px,7.3vw,116px)!important; }
.story-chapter__question {
  margin:28px 0 0;
  color:var(--story-accent);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(24px,2.2vw,38px);
  font-style:italic;
}
.story-chapter--opening .story-chapter__body { margin-left:24vw; }

/* 02 — 1960: photo left, text right, detail below */
.story-chapter--source .story-chapter__year { left:4vw; top:8vh; }
.story-chapter--source .story-chapter__copy { left:61vw; top:22vh; width:33vw; }
.story-chapter--source .story-image--large { left:5vw; top:16vh; width:32vw; height:47vh; }
.story-chapter--source .story-image--detail { left:35vw; top:57vh; width:20vw; height:25vh; }

/* 03 — 1980: central archive image + small artifact */
.story-chapter--making .story-chapter__year { right:3vw; bottom:5vh; }
.story-chapter--making .story-chapter__copy { left:8vw; top:17vh; width:29vw; }
.story-chapter--making .story-image--archive-main { left:39vw; top:28vh; width:38vw; height:53vh; }
.story-chapter--making .story-image--archive-small { right:5vw; top:14vh; width:17vw; height:25vh; transform:rotate(2deg); }
.story-chapter__principles { margin-top:28px; display:grid; gap:7px; }
.story-chapter__principles span { font:600 clamp(16px,1.4vw,22px)/1.15 "Cormorant Garamond",serif; }

/* 04 — INDIA: archival wall */
.story-chapter--india .story-chapter__copy { left:38vw; top:17vh; width:35vw; }
.story-chapter--india .story-image--product-one { left:5vw; top:16vh; width:25vw; height:39vh; transform:rotate(-1.5deg); }
.story-chapter--india .story-image--product-two { right:6vw; bottom:16vh; width:21vw; height:32vh; transform:rotate(1.5deg); }
.story-chapter__places {
  position:absolute; z-index:5; left:6vw; right:6vw; bottom:7vh;
  display:flex; gap:24px; align-items:center; overflow:hidden; white-space:nowrap;
  color:rgba(245,239,228,.48); font:700 9px/1 "Inter",sans-serif; letter-spacing:.16em;
}
.story-chapter__places span::after { content:" —"; margin-left:24px; color:var(--story-accent); }

/* 05 — WORLD: text left, cinematic photo */
.story-chapter--world .story-chapter__copy { left:7vw; top:18vh; width:36vw; }
.story-chapter--world .story-chapter__visual .story-image { left:50vw; top:18vh; width:43vw; height:59vh; }
.story-chapter--world .story-chapter__statement--large { color:var(--story-accent); font-size:clamp(25px,2.1vw,36px); }

/* 06 — INNOVATION: controlled collage */
.story-chapter--innovation .story-chapter__copy { left:6vw; top:12vh; width:31vw; }
.story-chapter--innovation .story-image--machine { left:40vw; top:13vh; width:34vw; height:47vh; }
.story-chapter--innovation .story-image--ingredients { right:5vw; top:18vh; width:17vw; height:25vh; }
.story-chapter--innovation .story-image--hands { left:29vw; bottom:9vh; width:20vw; height:25vh; }
.story-chapter__numbers {
  position:absolute; z-index:5; right:6vw; bottom:10vh; width:39vw;
  display:grid; grid-template-columns:repeat(2,1fr); gap:15px 30px;
}
.story-stat { border-top:1px solid rgba(245,239,228,.25); padding-top:9px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:end; }
.story-stat strong { color:var(--story-accent); font:500 clamp(26px,3vw,48px)/.9 "Bodoni Moda",serif; }
.story-stat span { color:rgba(245,239,228,.65); font:500 10px/1.3 "Inter",sans-serif; }
.story-chapter__innovation-line { position:absolute; z-index:6; left:6vw; bottom:8vh; width:20vw; margin:0; color:rgba(245,239,228,.72); font:500 13px/1.5 "Inter",sans-serif; }
.story-chapter__innovation-line strong { color:var(--story-ivory); }

/* 07 — QUESTIONS: intentional visual pause */
.story-chapter--questions .story-chapter__copy { left:11vw; top:15vh; width:78vw; }
.story-chapter--questions h2 { width:34vw!important; }
.story-questions { position:absolute; left:43vw; top:4vh; width:37vw; }
.story-questions p { margin:0; padding:15px 0; border-bottom:1px solid rgba(245,239,228,.16); color:rgba(245,239,228,.76); font:500 clamp(16px,1.35vw,22px)/1.25 "Inter",sans-serif; }
.story-questions p:last-child { color:var(--story-ivory); }

/* 08 — TODAY: premium hero reveal */
.story-chapter--today .story-chapter__copy { left:7vw; top:18vh; width:31vw; }
.story-chapter--today .story-image--hero-product { left:43vw; top:11vh; width:42vw; height:68vh; }
.story-chapter__legacy { margin-top:36px; display:grid; gap:14px; }
.story-chapter__legacy > div { display:grid; grid-template-columns:100px 1fr; align-items:baseline; border-top:1px solid rgba(245,239,228,.18); padding-top:9px; }
.story-chapter__legacy strong { color:var(--story-accent); font:500 clamp(25px,2.5vw,42px)/1 "Bodoni Moda",serif; }
.story-chapter__legacy span { color:rgba(245,239,228,.65); font:500 11px/1.35 "Inter",sans-serif; }

/* 09 — CLOSING */
.story-chapter--closing .story-chapter__closing-copy { left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px,84vw); text-align:center; }
.story-chapter--closing h2 { font-size:clamp(48px,5.6vw,88px)!important; }
.story-chapter__closing-small { margin:18px 0 5px; color:rgba(245,239,228,.52); font:700 9px/1 "Inter",sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.story-chapter__closing-question,.story-chapter__closing-answer { margin:0; font:500 clamp(25px,2.5vw,42px)/1.05 "Cormorant Garamond",serif; }
.story-chapter__closing-answer { color:var(--story-accent); font-style:italic; }
.story-chapter__closing-note { margin:22px 0 0; color:rgba(245,239,228,.64); font:500 13px/1.5 "Inter",sans-serif; }
.story-chapter__brand { margin-top:34px; display:grid; gap:5px; }
.story-chapter__brand strong { font:600 clamp(19px,1.8vw,29px)/1 "Bodoni Moda",serif; letter-spacing:.04em; }
.story-chapter__brand span { font:600 14px/1.3 "Cormorant Garamond",serif; }
.story-chapter__brand small { color:rgba(245,239,228,.5); font:600 9px/1.4 "Inter",sans-serif; letter-spacing:.16em; text-transform:uppercase; }

@media (max-width:760px) {
  .horizontal-story__transition { height:16svh; }
  .horizontal-story__panel { flex-basis:100vw; width:100vw; }
  .horizontal-story .story-chapter h2 { font-size:clamp(42px,11vw,66px); }
  .story-chapter__copy,.story-chapter__closing-copy { left:24px!important; right:24px!important; top:13vh!important; width:auto!important; transform:none!important; }
  .story-chapter__year { font-size:38vw; opacity:.7; }
  .story-image { transform:none!important; }
  .story-chapter--source .story-image--large,
  .story-chapter--making .story-image--archive-main,
  .story-chapter--world .story-chapter__visual .story-image,
  .story-chapter--today .story-image--hero-product { left:24px; right:24px; top:auto; bottom:9vh; width:auto; height:38vh; }
  .story-chapter--source .story-image--detail,
  .story-chapter--making .story-image--archive-small,
  .story-chapter--india .story-image--product-two,
  .story-chapter--innovation .story-image--ingredients,
  .story-chapter--innovation .story-image--hands { display:none; }
  .story-chapter--india .story-image--product-one { left:24px; top:auto; bottom:15vh; width:45vw; height:30vh; }
  .story-chapter__places { left:24px; right:24px; bottom:8vh; }
  .story-chapter__numbers { left:24px; right:24px; bottom:7vh; width:auto; }
  .story-chapter--innovation .story-image--machine { right:24px; left:auto; top:auto; bottom:28vh; width:43vw; height:28vh; }
  .story-chapter__innovation-line { display:none; }
  .story-questions { position:static; width:auto; margin-top:25px; }
  .story-chapter--questions h2 { width:auto!important; }
  .story-chapter__legacy { margin-top:24px; }
}

@media (prefers-reduced-motion:reduce) {
  .horizontal-story__track { width:100%; height:auto; display:block; transform:none!important; }
  .horizontal-story__pin { height:auto; overflow:visible; }
  .horizontal-story__panel { width:100%; min-height:100svh; }
}
/* =========================================================
   ANANDA LAST SECTION REBUILD — START
   Append this block at the VERY END of styles/section.css.
   It does not alter the cream→emerald transition or horizontal GSAP.
   ========================================================= */

.horizontal-story .story-rebuild__panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--story-bg, #004B49);
  color: var(--story-ivory, #f5efe4);
}

.horizontal-story .story-rebuild__panel::after {
  content: none !important;
  display: none !important;
}

.story-rebuild__panel--blank {
  background: linear-gradient(135deg, var(--story-bg, #004B49), var(--story-bg-deep, #003735));
}

.story-source__background {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: #163c3a;
}

.story-source__background img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.035);
  filter: saturate(.82) contrast(1.04) brightness(.82);
}

.story-source__veil {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.story-source__veil--top {
  top: 0;
  height: 51%;
  background: linear-gradient(to bottom, rgba(0,39,38,.74) 0%, rgba(0,58,56,.42) 48%, rgba(0,58,56,.05) 100%);
  transform: translateY(-100%);
}

.story-source__veil--bottom {
  bottom: 0;
  height: 68%;
  background: linear-gradient(to top, rgba(0,35,34,.96) 0%, rgba(0,47,45,.82) 35%, rgba(0,55,53,.34) 72%, rgba(0,55,53,.02) 100%);
  transform: translateY(100%);
}

.story-rebuild__panel--source::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,42,40,.95) 0%, rgba(0,45,43,.86) 23%, rgba(0,45,43,.42) 43%, rgba(0,45,43,.07) 65%, transparent 82%);
}

.story-source__topline {
  position: absolute;
  z-index: 8;
  top: clamp(24px,5vh,54px);
  left: clamp(28px,4.2vw,72px);
  right: clamp(28px,4.2vw,72px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.story-source__brandline {
  margin: 0;
  color: rgba(245,239,228,.72);
  font-family: "Inter", sans-serif;
  font-size: clamp(8px,.70vw,11px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.story-source__story-mark {
  display: grid;
  justify-items: end;
  gap: 13px;
  color: rgba(245,239,228,.82);
}

.story-source__story-mark span {
  font-family: "Inter", sans-serif;
  font-size: clamp(8px,.70vw,11px);
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.story-source__story-mark i {
  display: block;
  width: clamp(42px,5vw,76px);
  height: 1px;
  background: rgba(245,239,228,.60);
}

.story-source__copy {
  position: absolute;
  z-index: 8;
  left: clamp(30px,4.3vw,74px);
  bottom: clamp(40px,7vh,84px);
  width: min(480px,37vw);
}

.story-source__year-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.story-source__year {
  display: block;
  color: #f1e2c9;
  font-family: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(86px,9.4vw,154px);
  font-weight: 500;
  line-height: .72;
  letter-spacing: -.075em;
}

.story-source__leaf-mark {
  width: 46px;
  height: 26px;
  opacity: .26;
  border-top: 1px solid rgba(245,239,228,.70);
  border-radius: 100% 0;
  transform: rotate(-18deg);
}

.story-source__chapter {
  margin: clamp(20px,2.8vh,30px) 0 0;
  color: rgba(245,239,228,.92);
  font-family: "Inter", sans-serif;
  font-size: clamp(11px,1vw,16px);
  font-weight: 600;
  letter-spacing: .36em;
  text-transform: uppercase;
}

.story-source__rule {
  display: block;
  width: 72px;
  height: 1px;
  margin: clamp(24px,3.5vh,38px) 0 clamp(21px,3vh,32px);
  background: rgba(245,239,228,.70);
}

.horizontal-story .story-source__copy h2 {
  width: 100%;
  max-width: 455px;
  margin: 0;
  color: #f5efe4;
  font-family: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(42px,3.6vw,62px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.story-source__body {
  max-width: 430px;
  margin: clamp(22px,3vh,30px) 0 0;
  color: rgba(245,239,228,.78);
  font-family: "Inter", sans-serif;
  font-size: clamp(11px,.92vw,14px);
  line-height: 1.58;
}

.story-source__signature {
  margin: clamp(34px,3.8vh,40px) 0 0;
  color: rgba(245,239,228,.92);
  font-family: "Lora", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(18px,1.72vw,28px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.24;
  transform: rotate(-0deg);
  transform-origin: left center;
}

.story-source__origin {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 7px;
  color: rgba(245,239,228,.88);
}

.story-source__origin strong {
  font-family: "Inter", sans-serif;
  font-size: clamp(9px,.84vw,13px);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.story-source__origin span {
  color: rgba(245,239,228,.72);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(13px,1.13vw,18px);
  font-style: italic;
  line-height: 1.18;
}

.story-source__origin--himalayas { top: 23%; left: 55%; }
.story-source__origin--ghats { right: 7%; top: 53%; }

.story-source__index {
  position: absolute;
  z-index: 8;
  right: clamp(28px,4.2vw,72px);
  bottom: clamp(25px,4vh,45px);
  margin: 0;
  color: rgba(245,239,228,.54);
  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
}

/* CSS scroll-driven entrance. Existing horizontal GSAP stays untouched. */
@supports (animation-timeline: view()) {
  .story-rebuild__panel--source {
    view-timeline-name: --ananda-source-panel;
    view-timeline-axis: inline;
  }

  .story-source__veil--top {
    animation: anandaSourceTopVeil linear both;
    animation-timeline: --ananda-source-panel;
    animation-range: entry 0% entry 62%;
  }

  .story-source__veil--bottom {
    animation: anandaSourceBottomVeil linear both;
    animation-timeline: --ananda-source-panel;
    animation-range: entry 0% entry 68%;
  }

  .story-source__enter-from-top {
    animation: anandaSourceEnterTop linear both;
    animation-timeline: --ananda-source-panel;
    animation-range: entry 15% entry 72%;
  }

  .story-source__enter-from-bottom {
    animation: anandaSourceEnterBottom linear both;
    animation-timeline: --ananda-source-panel;
    animation-range: entry 18% entry 78%;
  }
}

@keyframes anandaSourceTopVeil {
  from { transform: translateY(-100%); opacity: .20; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes anandaSourceBottomVeil {
  from { transform: translateY(100%); opacity: .10; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes anandaSourceEnterTop {
  from { transform: translateY(-64px); opacity: 0; filter: blur(7px); }
  to   { transform: translateY(0); opacity: 1; filter: blur(0); }
}

@keyframes anandaSourceEnterBottom {
  from { transform: translateY(76px); opacity: 0; filter: blur(8px); }
  to   { transform: translateY(0); opacity: 1; filter: blur(0); }
}

@supports not (animation-timeline: view()) {
  .story-source__veil--top,
  .story-source__veil--bottom {
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .story-source__copy { width: min(490px,52vw); }
  .horizontal-story .story-source__copy h2 { font-size: clamp(38px,5.2vw,57px); }
  .story-source__origin--himalayas { left: 60%; }
  .story-source__origin--ghats { right: 5%; }
}

@media (max-width: 620px) {
  .story-source__background img { object-position: 62% 50%; }

  .story-rebuild__panel--source::before {
    background: linear-gradient(to top, rgba(0,40,38,.98) 0%, rgba(0,46,44,.88) 44%, rgba(0,46,44,.20) 74%, transparent 100%);
  }

  .story-source__brandline { max-width: 210px; line-height: 1.45; }
  .story-source__story-mark { display: none; }

  .story-source__copy {
    left: 22px;
    right: 22px;
    bottom: 44px;
    width: auto;
  }

  .story-source__year { font-size: clamp(76px,25vw,112px); }
  .horizontal-story .story-source__copy h2 { max-width: 360px; font-size: clamp(36px,10.6vw,53px); }
  .story-source__body { max-width: 330px; font-size: 11px; }
  .story-source__signature { margin-top: 22px; font-size: clamp(17px,5.5vw,25px); }
  .story-source__origin { display: none; }
  .story-source__index { bottom: 20px; right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-source__veil--top,
  .story-source__veil--bottom {
    transform: translateY(0) !important;
    animation: none !important;
  }

  .story-source__enter-from-top,
  .story-source__enter-from-bottom {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =========================================================
   ANANDA LAST SECTION REBUILD — END
   ========================================================= */

   /* =========================================================
   ANANDA 1960 STORY — SCROLL REVEAL SUPPORT START
   ========================================================= */


/*
  GSAP controls transform + opacity.
  CSS only prepares the elements for smooth movement.
*/

.story-source__brandline,
.story-source__story-mark,

.story-source__year,
.story-source__chapter,
.story-source__rule,
.story-source__copy h2,
.story-source__body,
.story-source__signature,

.story-source__origin--himalayas,
.story-source__origin--ghats,

.story-source__index {

  will-change:
    transform,
    opacity,
    filter;
}


/*
  Important:
  Do NOT place transition: ... here.

  GSAP is directly connected to scroll position,
  so CSS transitions would make the movement lag.
*/


/* Main heading gets a subtle cinematic blur while entering */

.story-source__copy h2 {
  will-change:
    transform,
    opacity,
    filter;
}


/* =========================================================
   ANANDA 1960 STORY — SCROLL REVEAL SUPPORT END
   ========================================================= */
   

   /* =========================================================
   ANANDA CINEMATIC HISTORY — START
   WORKING VERSION FOR THE EXISTING GSAP HORIZONTAL TRACK

   IMPORTANT:
   - Do not create another horizontal flex track inside this.
   - Every scene below is a DIRECT child of [data-horizontal-track].
   - Your existing GSAP/Lenis horizontal logic remains in control.
   ========================================================= */


/* =========================================================
   1. SHARED CONTINUOUS MOVIE LANGUAGE
   ========================================================= */

.horizontal-story .history-scene {
  position: relative;

  /*
    Slightly less than 100vw + negative overlap creates a continuous
    camera-travel feeling instead of separate full-screen slides.
  */
  flex: 0 0 96vw;
  width: 96vw;
  height: 100%;

  margin-right: -8vw;

  overflow: hidden;
  isolation: isolate;

  color: #efe3cf;

  background:
    radial-gradient(
      circle at 62% 42%,
      rgba(105, 72, 46, 0.18),
      transparent 44%
    ),
    linear-gradient(
      90deg,
      #211912 0%,
      #241a13 52%,
      #1b1511 100%
    );
}


/* final scene must finish normally */
.horizontal-story .history-scene:last-child {
  margin-right: 0;
}


/*
  No hard separator line from the older horizontal panel design.
*/
.horizontal-story .history-scene::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 40;

  pointer-events: none;

  /*
    Grain extends over the whole scene but has no visible edge.
  */
  opacity: 0.10;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.030) 0px,
      rgba(255,255,255,0.030) 1px,
      transparent 1px,
      transparent 3px
    );

  mix-blend-mode: soft-light;
}


/*
  This soft dark dissolve hides the physical boundary between
  one scene and the next.
*/
.horizontal-story .history-scene::before {
  content: "";

  position: absolute;
  top: -10%;
  right: -10vw;
  bottom: -10%;

  width: 22vw;

  z-index: 35;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(28, 20, 15, 0.16) 24%,
      rgba(27, 19, 14, 0.58) 62%,
      rgba(26, 18, 14, 0.78) 78%,
      transparent 100%
    );

  filter: blur(28px);
}


/* =========================================================
   2. PHOTO TREATMENT
   ========================================================= */

.history-photo {
  position: absolute;
  z-index: 8;

  margin: 0;

  overflow: hidden;

  background: #2a1f17;

  border: 1px solid rgba(222, 199, 166, 0.16);

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.29);

  transform-origin: 50% 50%;
}


.history-photo::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(245, 222, 187, 0.06),
      rgba(51, 30, 20, 0.12)
    );

  mix-blend-mode: soft-light;
}


.history-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    sepia(0.64)
    saturate(0.66)
    contrast(1.04)
    brightness(0.79);
}


/* =========================================================
   3. SMOKE / ATMOSPHERE
   ========================================================= */

.history-smoke {
  position: absolute;
  z-index: 25;

  pointer-events: none;

  width: 30vw;
  height: 115%;

  opacity: 0.28;

  filter: blur(24px);

  background:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(255, 244, 225, 0.22) 0%,
      rgba(255, 244, 225, 0.10) 27%,
      transparent 68%
    );
}


.history-smoke--making {
  right: -8vw;
  top: -8%;

  transform: rotate(8deg);
}


.history-smoke--world {
  left: -10vw;
  top: -5%;

  transform: rotate(-7deg);
}


/* =========================================================
   4. SHARED TYPOGRAPHY
   ========================================================= */

.history-copy {
  position: absolute;

  z-index: 26;

  color: #f0e4d2;
}


.history-index {
  display: block;

  margin-bottom: 15px;

  color: rgba(239, 227, 207, 0.54);

  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.23em;
}


.history-year {
  margin: 0;

  color: #e8d6b8;

  font-family:
    "Bodoni Moda",
    "Cormorant Garamond",
    serif;

  font-size: clamp(86px, 9.5vw, 154px);
  font-weight: 500;
  line-height: 0.73;

  letter-spacing: -0.073em;
}


.history-kicker {
  margin: 22px 0 0;

  color: rgba(239, 226, 205, 0.76);

  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;

  letter-spacing: 0.28em;
  text-transform: uppercase;
}


.history-rule {
  display: block;

  width: 66px;
  height: 1px;

  margin: 23px 0 23px;

  background: rgba(238, 224, 202, 0.58);
}


.horizontal-story .history-copy h2 {
  width: auto;
  max-width: 510px;

  margin: 0;

  color: #f1e4d1;

  font-family:
    "Bodoni Moda",
    "Cormorant Garamond",
    serif;

  font-size: clamp(42px, 4.35vw, 72px);
  font-weight: 500;
  line-height: 0.94;

  letter-spacing: -0.047em;
}


.history-body {
  max-width: 420px;

  margin: 22px 0 0;

  color: rgba(239, 227, 207, 0.70);

  font-family: "Inter", sans-serif;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 400;
  line-height: 1.58;
}


.history-small {
  margin: 22px 0 0;

  color: rgba(239, 227, 207, 0.56);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.50;
}


.history-emphasis {
  display: block;

  max-width: 420px;

  margin-top: 14px;

  color: #e9d5b7;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: clamp(21px, 1.72vw, 29px);
  font-weight: 600;
  line-height: 1.08;
}


/* =========================================================
   5. VINTAGE PAPER NOTES
   ========================================================= */

.history-paper-note {
  position: absolute;

  z-index: 29;

  padding: 15px 18px;

  color: #4d3626;

  background:
    linear-gradient(
      145deg,
      #d0b68e,
      #b99a72
    );

  border: 1px solid rgba(75, 51, 34, 0.18);

  box-shadow:
    0 15px 38px rgba(0, 0, 0, 0.26);

  font-family:
    "Lora",
    "Cormorant Garamond",
    serif;

  font-size: clamp(16px, 1.42vw, 23px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.24;

  transform: rotate(-4deg);
}


.history-caption {
  position: absolute;

  z-index: 27;

  max-width: 320px;

  margin: 0;

  color: rgba(239, 227, 207, 0.73);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.55;
}


/* =========================================================
   6. 1980 — THE MAKING
   ========================================================= */

.history-scene--making {
  background:
    radial-gradient(
      circle at 66% 37%,
      rgba(121, 82, 48, 0.20),
      transparent 43%
    ),
    linear-gradient(
      90deg,
      #211812 0%,
      #261b13 58%,
      #1e1712 100%
    );
}


.history-copy--making {
  left: 4.4vw;
  top: 8vh;

  width: 29vw;
}


.history-photo--making-main {
  left: 31vw;
  top: 7vh;

  width: 35vw;
  height: 72vh;

  transform: rotate(-1.2deg);
}


.history-photo--making-building {
  left: 55vw;
  bottom: 5vh;

  width: 30vw;
  height: 31vh;

  z-index: 10;

  transform: rotate(1deg);
}


.history-photo--brand-one {
  right: 6vw;
  top: 8vh;

  width: 14vw;
  height: 21vh;

  z-index: 15;

  transform: rotate(2.8deg);
}


.history-photo--brand-two {
  right: 16vw;
  top: 31vh;

  width: 14vw;
  height: 23vh;

  z-index: 16;

  transform: rotate(-2.2deg);
}


.history-principles {
  display: grid;

  gap: 7px;

  margin-top: 18px;
}


.history-principles span {
  color: rgba(241, 228, 207, 0.87);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: clamp(17px, 1.40vw, 23px);
  font-weight: 600;
  line-height: 1.07;
}


.history-paper-note--making {
  left: 29vw;
  bottom: 7vh;
}


.history-caption--making {
  right: 11vw;
  top: 57vh;

  width: 17vw;
}


/* =========================================================
   7. INDIA → WORLD
   ========================================================= */
.history-body span {
  display: block;
  font: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.history-scene--world {
  background:
    radial-gradient(
      circle at 62% 40%,
      rgba(112, 76, 47, 0.18),
      transparent 44%
    ),
    linear-gradient(
      90deg,
      #211812,
      #241a13 55%,
      #1b1511
    );
}


.history-copy--world {
  left: 6vw;
  top: 12vh;

  width: 29vw;
}


.history-places {
  display: grid;

  gap: 5px;

  margin-top: 23px;

  color: rgba(239, 227, 207, 0.66);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.28;
}


.history-photo--india-temple {
  left: 29vw;
  top: 8vh;

  width: 17vw;
  height: 22vh;

  transform: rotate(-2deg);
}


.history-photo--india-market {
  right: 25vw;
  top: 5vh;

  width: 15vw;
  height: 20vh;

  transform: rotate(1.8deg);
}


.history-photo--world-export {
  right: 28vw;
  bottom: 7vh;

  width: 20vw;
  height: 22vh;

  transform: rotate(-1deg);
}


/* =========================================================
   VINTAGE WORLD MAP — START
   ========================================================= */

.history-map--image {
  position: absolute;

  /* SIZE CONTROL */
  width: 52vw;
  max-width: 900px;

  /* POSITION CONTROLS */
  left: 60%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

  pointer-events: none;
}

.history-map--image img {
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;

  /* IMPORTANT for transparent raster */
  background: transparent;

  user-select: none;
}

/* =========================================================
   VINTAGE WORLD MAP — END
   ========================================================= */


.history-paper-note--world {
  right: 22vw;
  top: 55vh;
}


/* =========================================================
   8. INGREDIENTS
   ========================================================= */

.history-scene--ingredients {
  background:
    radial-gradient(
      circle at 68% 44%,
      rgba(105, 70, 43, 0.18),
      transparent 43%
    ),
    linear-gradient(
      90deg,
      #201711,
      #211711 56%,
      #18130f
    );
}


.history-copy--ingredients {
  left: 6vw;
  top: 13vh;

  width: 29vw;
}


.history-photo--ingredients-main {
  left: 40vw;
  top: 5vh;

  width: 47vw;
  height: 77vh;
}


.history-photo--ingredients-detail {
  left: 62vw;
  bottom: 5vh;

  width: 21vw;
  height: 24vh;

  z-index: 14;

  transform: rotate(-2deg);
}


.history-vertical-list {
  position: absolute;

  right: 3vw;
  top: 28vh;

  z-index: 27;

  display: grid;

  gap: 13px;

  color: rgba(236, 220, 197, 0.58);

  font-family: "Inter", sans-serif;
  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.28em;
}


.history-paper-note--ingredients {
  left: 70vw;
  top: 43vh;
}


/* =========================================================
   9. INNOVATION
   ========================================================= */

.history-scene--innovation {
  background:
    radial-gradient(
      circle at 69% 32%,
      rgba(112, 74, 45, 0.18),
      transparent 42%
    ),
    linear-gradient(
      90deg,
      #1f1712,
      #211711 61%,
      #1a1410
    );
}


.history-copy--innovation {
  left: 5vw;
  top: 8vh;

  width: 31vw;
}


.history-stats {
  display: grid;

  gap: 15px;

  margin-top: 25px;
}


.history-stats div {
  display: grid;

  grid-template-columns: 86px 1fr;

  align-items: baseline;

  gap: 10px;
}


.history-stats strong {
  color: #dfc7a1;

  font-family: "Bodoni Moda", serif;
  font-size: clamp(30px, 3vw, 49px);
  font-weight: 500;
  line-height: 0.9;
}


.history-stats span {
  max-width: 220px;

  color: rgba(239, 225, 205, 0.64);

  font-family: "Inter", sans-serif;
  font-size: 10px;
  line-height: 1.30;
}


.history-photo--innovation-product {
  left: 34vw;
  top: 8vh;

  width: 15vw;
  height: 53vh;

  z-index: 15;
}


.history-photo--innovation-hands {
  left: 49vw;
  top: 4vh;

  width: 36vw;
  height: 47vh;
}


.history-photo--innovation-machine {
  right: 7vw;
  bottom: 6vh;

  width: 30vw;
  height: 29vh;
}


.history-caption--innovation {
  left: 38vw;
  bottom: 10vh;

  width: 20vw;
}


.history-paper-note--innovation {
  right: 10vw;
  top: 54vh;
}


/* =========================================================
   PREMIUM HISTORY STATS — START
   ========================================================= */

.history-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 34px 48px;

  margin-top: 42px;
}


/* EACH STAT */

.history-stats > div {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 5px;

  padding-top: 16px;

  border-top: 1px solid rgba(243, 234, 220, 0.28);
}


/* =========================================================
   BIG NUMBERS
   ========================================================= */

.history-stats strong {
  display: block;

  font-family: "Cormorant Garamond", Georgia, serif;

  font-size: clamp(48px, 4.2vw, 76px);

  font-weight: 500;

  line-height: 0.88;

  letter-spacing: -0.045em;

  color: #f3eadc;

  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.16);
}


/* Make HR smaller and elegant if desired */

.history-stats strong {
  font-variant-numeric: lining-nums;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.history-stats span {
  display: block;

  max-width: 220px;

  font-family: "Manrope", Arial, sans-serif;

  font-size: clamp(10px, 0.82vw, 13px);

  font-weight: 500;

  line-height: 1.45;

  letter-spacing: 0.04em;

  color: rgba(243, 234, 220, 0.72);
}


/* =========================================================
   PREMIUM HOVER DETAIL
   ========================================================= */

.history-stats > div {
  transition:
    transform 0.35s ease,
    border-color 0.35s ease;
}

.history-stats > div:hover {
  transform: translateY(-4px);

  border-color: rgba(243, 234, 220, 0.65);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .history-stats {
    gap: 24px;
  }

  .history-stats strong {
    font-size: clamp(42px, 12vw, 60px);
  }

  .history-stats span {
    font-size: 10px;
  }

}
.history-stats strong {
  color: #C89B3C;

  background: linear-gradient(
    135deg,
    #8F6722 0%,
    #D7B65D 35%,
    #F0D98A 50%,
    #C69638 70%,
    #8A611F 100%
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow: none;
}

/* =========================================================
   PREMIUM HISTORY STATS — END
   ========================================================= */


/* =========================================================
   10. QUESTIONS
   ========================================================= */

.history-scene--questions {
  background:
    radial-gradient(
      circle at 60% 41%,
      rgba(103, 70, 45, 0.18),
      transparent 44%
    ),
    linear-gradient(
      90deg,
      #1d1612,
      #211811 56%,
      #17120f
    );
}


.history-copy--questions {
  left: 5vw;
  top: 10vh;

  width: 31vw;
}


.history-question {
  margin: 10px 0 0;

  color: rgba(235, 220, 199, 0.65);

  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-style: italic;
}


.history-question-list {
  display: grid;

  gap: 8px;

  margin-top: 18px;
}


.history-question-list p {
  margin: 0;

  color: rgba(239, 228, 211, 0.73);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.32;
}


.history-photo--questions-book {
  left: 35vw;
  top: 5vh;

  width: 39vw;
  height: 73vh;

  transform: rotate(-1deg);
}


.history-photo--questions-leaf {
  right: 6vw;
  bottom: 8vh;

  width: 21vw;
  height: 29vh;

  z-index: 14;

  transform: rotate(3deg);
}


.history-caption--questions {
  right: 5vw;
  top: 34vh;

  width: 17vw;
}


.history-paper-note--questions {
  left: 72vw;
  top: 23vh;
}


/* =========================================================
   11. LEGACY
   ========================================================= */

.history-scene--legacy {
  background:
    radial-gradient(
      circle at 66% 41%,
      rgba(103, 69, 43, 0.16),
      transparent 44%
    ),
    linear-gradient(
      90deg,
      #1e1712,
      #18130f
    );
}


.history-copy--legacy {
  left: 5vw;
  top: 16vh;

  width: 31vw;
}


.history-photo--legacy-building {
  left: 39vw;
  top: 7vh;

  width: 39vw;
  height: 69vh;

  transform: rotate(-1deg);
}


.history-legacy-lines {
  margin-top: 28px;

  color: rgba(239, 225, 206, 0.83);

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(19px, 1.65vw, 27px);
  font-weight: 600;
  line-height: 1.15;
}


.history-paper-note--legacy {
  right: 5vw;
  top: 41vh;
}


/* =========================================================
   12. ATMOSPHERIC BREATH
   ========================================================= */

.history-scene--breath {
  flex-basis: 62vw;
  width: 62vw;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(110, 76, 49, 0.23),
      transparent 48%
    ),
    #18130f;
}


.history-breath__smoke {
  position: absolute;
  inset: -20%;

  opacity: 0.20;

  filter: blur(30px);

  background:
    radial-gradient(
      ellipse at 52% 45%,
      rgba(245, 231, 207, 0.27),
      transparent 54%
    );
}


.history-breath__line {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 27;

  margin: 0;

  transform: translate(-50%, -50%);

  color: rgba(239, 226, 207, 0.58);

  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.33em;
  white-space: nowrap;
}


/* =========================================================
   13. FINAL HOLD
   ========================================================= */

.history-scene--final {
  flex-basis: 72vw;
  width: 72vw;

  background:
    radial-gradient(
      circle at 63% 40%,
      rgba(82, 60, 41, 0.18),
      transparent 45%
    ),
    #15110e;
}


.history-final__copy {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 27;

  display: grid;

  justify-items: center;

  width: min(620px, 72%);

  transform: translate(-50%, -50%);

  text-align: center;
}


.history-final__copy strong {
  color: #eadbc2;

  font-family:
    "Bodoni Moda",
    "Cormorant Garamond",
    serif;

  font-size: clamp(42px, 4.8vw, 78px);
  font-weight: 500;
  line-height: 0.9;

  letter-spacing: -0.05em;
}


.history-final__copy p {
  margin: 22px 0 0;

  color: rgba(239, 227, 208, 0.72);

  font-family: "Inter", sans-serif;
  font-size: 12px;
}


.history-final__copy small {
  margin-top: 10px;

  color: rgba(239, 227, 208, 0.43);

  font-family: "Inter", sans-serif;
  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* =========================================================
   14. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .horizontal-story .history-scene {
    flex-basis: 108vw;
    width: 108vw;

    margin-right: -6vw;
  }

  .history-copy {
    width: 39vw;
  }

  .history-photo--making-main {
    left: 39vw;
    width: 34vw;
  }

  .history-photo--brand-one,
  .history-photo--brand-two {
    width: 16vw;
  }
}


@media (max-width: 620px) {

  .horizontal-story .history-scene {
    flex-basis: 132vw;
    width: 132vw;

    margin-right: -5vw;
  }

  .history-copy {
    left: 24px !important;

    width: 61vw !important;
  }

  .horizontal-story .history-copy h2 {
    font-size: clamp(37px, 10vw, 54px);
  }

  .history-year {
    font-size: clamp(74px, 22vw, 108px);
  }

  .history-paper-note,
  .history-caption,
  .history-map,
  .history-vertical-list {
    display: none;
  }

  .history-photo--making-main,
  .history-photo--questions-book {
    left: 66vw;

    width: 56vw;
  }

  .history-photo--india-temple {
    left: 69vw;

    width: 39vw;
  }

  .history-photo--india-market {
    display: none;
  }

  .history-photo--world-export {
    right: 7vw;

    width: 48vw;
  }

  .history-photo--ingredients-main {
    left: 67vw;

    width: 56vw;
  }

  .history-photo--innovation-hands {
    left: 68vw;

    width: 52vw;
  }

  .history-photo--innovation-product {
    display: none;
  }
}


/* =========================================================
   ANANDA CINEMATIC HISTORY — END
   ========================================================= */


/* =========================================================
   ANANDA HISTORY PERFORMANCE PATCH — START
   Purpose: remove GPU-heavy effects causing jitter after 1980
   ========================================================= */

/* Keep the main GSAP track on its own compositor layer. */
.horizontal-story__track {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Each history scene gets a stable compositing layer. */
.horizontal-story .history-scene {
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/*
  Heavy full-height blurred pseudo-elements were one of the biggest
  performance costs during horizontal motion. Replace them with
  simple gradients that visually preserve the dissolve.
*/
.horizontal-story .history-scene::before {
  filter: none !important;
  width: 14vw !important;
  right: -5vw !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(28, 20, 15, 0.08) 35%,
      rgba(27, 19, 14, 0.38) 72%,
      transparent 100%
    ) !important;
}

.horizontal-story .history-scene::after {
  /* Remove animated grain layer during horizontal travel. */
  opacity: 0.045 !important;
  background-image: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.012),
      rgba(0,0,0,0.025)
    ) !important;
}

/* Smoke blobs were large blurred layers; keep the mood, remove blur. */
.history-smoke {
  filter: none !important;
  opacity: 0.12 !important;
  width: 20vw !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 244, 225, 0.13) 0%,
      rgba(255, 244, 225, 0.04) 38%,
      transparent 72%
    ) !important;
}

/*
  CSS filters on multiple large moving images are expensive.
  Use opacity/overlay treatment instead of real-time sepia filters.
*/
.history-photo img {
  filter: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Add a cheap vintage tint as an overlay instead. */
.history-photo::before {
  background:
    linear-gradient(
      180deg,
      rgba(116, 72, 35, 0.16),
      rgba(50, 27, 13, 0.20)
    ) !important;
  mix-blend-mode: multiply !important;
}

/* Reduce expensive large shadows while preserving depth. */
.history-photo {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.20) !important;
}

/* Paper notes also use lighter shadows. */
.history-paper-note {
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

/*
  Avoid forcing every photo/text element into its own GPU layer.
  Only the moving horizontal track needs will-change.
*/
.history-photo,
.history-copy,
.history-paper-note,
.history-caption,
.history-map {
  will-change: auto !important;
}

/* Prevent oversized off-screen painting where supported. */
@supports (content-visibility: auto) {
  .horizontal-story .history-scene {
    content-visibility: auto;
    contain-intrinsic-size: 100vw 100vh;
  }
}

/* On smaller screens remove secondary imagery that adds little value. */
@media (max-width: 900px) {
  .history-photo--brand-two,
  .history-photo--ingredients-detail,
  .history-photo--questions-leaf {
    display: none !important;
  }
}

/* =========================================================
   ANANDA HISTORY PERFORMANCE PATCH — END
   ========================================================= */

/* =========================================================
   POST STORY PRODUCT SHOWCASE — START
   ========================================================= */


.post-story-showcase {

  position: relative;

  width: 100%;

  /*
    Gives us enough vertical travel for the reveal
    without feeling like another pinned/slideshow section.
  */
  min-height: 112vh;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #f3eadc;

  color: #102A43;

  isolation: isolate;
}


/* =========================================================
   SOFT TRANSITION FROM VINTAGE STORY → CREAM
   ========================================================= */

.post-story-showcase::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 18vh;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      to bottom,

      rgba(21, 17, 14, 0.28) 0%,

      rgba(54, 43, 34, 0.09) 32%,

      rgba(243, 234, 220, 0) 100%

    );
}


/* subtle cream light in center */

.post-story-showcase::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 58vw;
  height: 72vh;

  transform: translate(-50%, -50%);

  z-index: 0;

  pointer-events: none;

  background:

    radial-gradient(
      ellipse at center,

      rgba(255, 255, 255, 0.72),

      rgba(255, 255, 255, 0.28) 45%,

      transparent 74%

    );

}


/* =========================================================
   SUBTLE CONTOUR BACKGROUND
   ========================================================= */

.post-story-showcase__contours {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.20;

  background-image:

    radial-gradient(
      ellipse at 18% 30%,
      transparent 0 22%,
      rgba(16, 42, 67, 0.18) 22.2% 22.45%,
      transparent 22.7% 31%,
      rgba(16, 42, 67, 0.14) 31.2% 31.45%,
      transparent 31.7%
    ),

    radial-gradient(
      ellipse at 82% 68%,
      transparent 0 20%,
      rgba(16, 42, 67, 0.15) 20.2% 20.45%,
      transparent 20.7% 30%,
      rgba(16, 42, 67, 0.10) 30.2% 30.45%,
      transparent 30.7%
    );

}


/* =========================================================
   PRODUCT COMPOSITIONS
   ========================================================= */

.post-story-showcase__products {

  position: absolute;

  z-index: 4;

  margin: 0;

  pointer-events: none;

  /*
    Prevents the large PNGs creating unnecessary
    repainting while scrolling.
  */
  backface-visibility: hidden;

}


/* ---------------------------------------------------------
   LEFT
   --------------------------------------------------------- */

.post-story-showcase__products--left {

  left: -2.5vw;

  bottom: -1vh;

  width: min(49vw, 880px);

  /*
    Initial position.
    It starts outside the viewport.
  */

  transform:
    translate3d(-28%, 7%, 0)
    rotate(-2deg);

  opacity: 0;
}


/* ---------------------------------------------------------
   RIGHT
   --------------------------------------------------------- */

.post-story-showcase__products--right {

  right: -2.5vw;

  bottom: -1vh;

  width: min(49vw, 880px);

  transform:
    translate3d(28%, 7%, 0)
    rotate(2deg);

  opacity: 0;
}


.post-story-showcase__products img {

  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  /*
    Very important for your transparent raster images.
  */

  background: transparent;

  user-select: none;

}


/* =========================================================
   CENTER TEXT
   ========================================================= */

.post-story-showcase__center {

  position: relative;

  z-index: 8;

  width: min(38vw, 600px);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  /*
    Starts BELOW.
  */

  transform: translate3d(0, 130px, 0);

  opacity: 0;
}


.post-story-showcase__eyebrow {

  color: rgba(16, 42, 67, 0.55);

  font-family: "Inter", sans-serif;

  font-size: clamp(8px, 0.72vw, 11px);

  font-weight: 700;

  letter-spacing: 0.30em;

  text-transform: uppercase;

}


.post-story-showcase__line {

  width: 55px;

  height: 1px;

  margin: 22px 0 30px;

  background: rgba(16, 42, 67, 0.40);

}


/* =========================================================
   ANANDA INTERNATIONAL
   ========================================================= */

.post-story-showcase__center strong {

  display: block;

  margin: 0;

  color: #102A43;

  font-family:
    "Bodoni Moda",
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: clamp(48px, 5vw, 86px);

  font-weight: 900;

  line-height: 0.82;

  letter-spacing: -0.055em;

}


/* =========================================================
   ROOTED IN NATURE
   ========================================================= */

.post-story-showcase__center p {

 margin: clamp(25px, 3.5vh, 38px) 0 50px;
  color: #f93822;

  font-family:
    "Cormorant Garamond",
    "Lora",
    Georgia,
    serif;

  font-size: clamp(22px, 2vw, 33px);

  font-style: italic;

  font-weight: 500;

  line-height: 1.05;

}


/* =========================================================
   STILL LEARNING
   ========================================================= */

.post-story-showcase__center small {

  display: block;

  margin-top: 22px;

  color: rgba(16, 42, 67, 0.53);

  font-family: "Inter", sans-serif;

  font-size: clamp(8px, 0.78vw, 11px);

  font-weight: 700;

  letter-spacing: 0.20em;

  text-transform: uppercase;

}


/* =========================================================
   BOTTOM DETAIL
   ========================================================= */

.post-story-showcase__continue {

  position: absolute;

  z-index: 9;

  left: 50%;

  bottom: 25px;

  transform: translateX(-50%);

  display: grid;

  justify-items: center;

  gap: 12px;

  color: rgba(16, 42, 67, 0.44);

}


.post-story-showcase__continue span {

  font-family: "Inter", sans-serif;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.25em;

}


.post-story-showcase__continue i {

  display: block;

  width: 1px;
  height: 36px;

  background:

    linear-gradient(
      to bottom,

      rgba(16, 42, 67, 0.42),

      transparent

    );

}


/* =========================================================
   SCROLL-DRIVEN REVEAL
   ========================================================= */

/*
  Your GSAP horizontal section finishes first.

  Then, as normal vertical scrolling moves this section
  into the viewport:

      LEFT products   → move inward from LEFT
      RIGHT products  → move inward from RIGHT
      CENTER message  → rises from BELOW

  No JavaScript required.
*/


@supports (animation-timeline: view()) {


  .post-story-showcase {

    view-timeline-name: --post-story;

    view-timeline-axis: block;

  }


  /* =====================================================
     LEFT PRODUCTS
     ===================================================== */

  .post-story-showcase__products--left {

    animation:
      postStoryLeftReveal
      linear
      both;

    animation-timeline:
      --post-story;

    animation-range:
      entry 5%
      entry 72%;

  }


  /* =====================================================
     RIGHT PRODUCTS
     ===================================================== */

  .post-story-showcase__products--right {

    animation:
      postStoryRightReveal
      linear
      both;

    animation-timeline:
      --post-story;

    animation-range:
      entry 5%
      entry 72%;

  }


  /* =====================================================
     CENTER TEXT
     ===================================================== */

  .post-story-showcase__center {

    animation:
      postStoryCenterReveal
      linear
      both;

    animation-timeline:
      --post-story;

    animation-range:
      entry 18%
      entry 78%;

  }

}


/* =========================================================
   LEFT ANIMATION
   ========================================================= */

@keyframes postStoryLeftReveal {

  0% {

    opacity: 0;

    transform:
      translate3d(-32%, 8%, 0)
      rotate(-3deg)
      scale(0.94);

  }


  60% {

    opacity: 1;

  }


  100% {

    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotate(-1deg)
      scale(1);

  }

}


/* =========================================================
   RIGHT ANIMATION
   ========================================================= */

@keyframes postStoryRightReveal {

  0% {

    opacity: 0;

    transform:
      translate3d(32%, 8%, 0)
      rotate(3deg)
      scale(0.94);

  }


  60% {

    opacity: 1;

  }


  100% {

    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotate(1deg)
      scale(1);

  }

}


/* =========================================================
   CENTER MESSAGE ANIMATION
   ========================================================= */

@keyframes postStoryCenterReveal {

  0% {

    opacity: 0;

    transform:
      translate3d(0, 150px, 0)
      scale(0.97);

    filter: blur(8px);

  }


  42% {

    opacity: 0.58;

  }


  100% {

    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      scale(1);

    filter: blur(0);

  }

}


/* =========================================================
   FALLBACK FOR BROWSERS WITHOUT VIEW TIMELINE
   ========================================================= */

@supports not (animation-timeline: view()) {

  .post-story-showcase__products--left,
  .post-story-showcase__products--right {

    opacity: 1;

    transform: none;

  }


  .post-story-showcase__center {

    opacity: 1;

    transform: none;

    filter: none;

  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  .post-story-showcase__products--left,
  .post-story-showcase__products--right {

    width: 53vw;

  }


  .post-story-showcase__center {

    width: 38vw;

  }


  .post-story-showcase__center strong {

    font-size: clamp(40px, 5.4vw, 68px);

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .post-story-showcase {

    min-height: 105vh;

  }


  .post-story-showcase__products--left {

    width: 69vw;

    left: -29vw;

    bottom: 2vh;

    opacity: 0.72;

  }


  .post-story-showcase__products--right {

    width: 69vw;

    right: -29vw;

    bottom: 2vh;

    opacity: 0.72;

  }


  .post-story-showcase__center {

    width: min(78vw, 430px);

  }


  .post-story-showcase__center strong {

    font-size: clamp(43px, 13vw, 66px);

  }


  .post-story-showcase__center p {

    font-size: clamp(21px, 6vw, 29px);

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .post-story-showcase__products,
  .post-story-showcase__center {

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;

    animation: none !important;

  }

}


/* =========================================================
   POST STORY PRODUCT SHOWCASE — END
   ========================================================= */
   /* =========================================================
   POST STORY EASY CONTROLS — START
   ========================================================= */

:root {

  /* ==========================
     LEFT IMAGE
     ========================== */

  /* Bigger number = bigger image */
  --showcase-left-size: 58vw;

  /* Negative = move LEFT
     Positive = move RIGHT */
  --showcase-left-x: -1vw;

  /* Positive = move UP
     Negative = move DOWN */
  --showcase-left-y: 0vh;


  /* ==========================
     RIGHT IMAGE
     ========================== */

  /* Bigger number = bigger image */
  --showcase-right-size: 52vw;

  /* Negative = move RIGHT
     Positive = move LEFT */
  --showcase-right-x: 1vw;

  /* Positive = move UP
     Negative = move DOWN */
  --showcase-right-y: 0vh;


  /* ==========================
     CENTER TEXT
     ========================== */

  /* Positive = move DOWN
     Negative = move UP */
  --showcase-text-y: 0px;
}


/* LEFT IMAGE */

.post-story-showcase__products--left {
  width: var(--showcase-left-size) !important;

  left: var(--showcase-left-x) !important;

  bottom: var(--showcase-left-y) !important;
}


/* RIGHT IMAGE */

.post-story-showcase__products--right {
  width: var(--showcase-right-size) !important;

  right: var(--showcase-right-x) !important;

  bottom: var(--showcase-right-y) !important;
}


/* CENTER TEXT */

.post-story-showcase__center {
  margin-top: var(--showcase-text-y) !important;
}


/* =========================================================
   TRANSITION TIMING
   Start only when section is roughly halfway visible.
   ========================================================= */

@supports (animation-timeline: view()) {

  .post-story-showcase__products--left {
    animation-range:
      entry 48%
      entry 92% !important;
  }

  .post-story-showcase__products--right {
    animation-range:
      entry 48%
      entry 92% !important;
  }

  .post-story-showcase__center {
    animation-range:
      entry 58%
      entry 100% !important;
  }

}


/* =========================================================
   POST STORY EASY CONTROLS — END
   ========================================================= */
   /* =========================================================
   1960 IMAGE OVERLAY — LIGHTER
   ========================================================= */

.story-source__veil--top {
  opacity: 0.3!important;
}

.story-source__veil--bottom {
  opacity: 0.2 !important;
}

/* =========================================================
   1960 TEXT REVEAL — DELAY UNTIL HALFWAY
   ========================================================= */

[data-story-source-panel] .story-source__enter-from-top,
[data-story-source-panel] .story-source__enter-from-bottom,
[data-story-source-panel] .story-source__copy,
[data-story-source-panel] .story-source__brandline,
[data-story-source-panel] .story-source__story-mark,
[data-story-source-panel] .story-source__year,
[data-story-source-panel] .story-source__chapter,
[data-story-source-panel] .story-source__rule,
[data-story-source-panel] .story-source__body,
[data-story-source-panel] .story-source__signature,
[data-story-source-panel] .story-source__origin,
[data-story-source-panel] .story-source__index {
  animation-delay: 0.5s !important;
}