/* ═══════════════════════════════════════════════════════════
   INDIAN CULTURE — LAB
   Cinematic preview build. No emojis. Real flora in SVG.
   ═══════════════════════════════════════════════════════════ */

:root {
  --rose:      #C0425A;
  --rose-dk:   #7A3048;
  --rose-lt:   #F2C4C4;
  --rose-pale: #FDF0EE;
  --sand:      #E8D5B0;
  --sand-dk:   #C4A87A;
  --cream:     #FAF6EF;
  --parchment: #F4ECDD;
  --ivory:     #FBF7EE;
  --dark:      #1E1712;
  --char:      #2A1F18;
  --herb:      #4A6741;
  --herb-lt:   #8BAA72;
  --gold:      #B8842A;
  --gold-lt:   #E8C97A;
  --saffron:   #D87C26;
  --jasmine:   #F4E4B8;
  --bone:      #EDE4D2;

  --serif: 'Playfair Display', serif;
  --sans:  'DM Sans', sans-serif;

  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 300;
}

img, svg { display: block; max-width: 100%; }
a       { color: inherit; text-decoration: none; }
button  { font-family: inherit; cursor: pointer; background: none; border: none; }

/* Film grain — subtler than the live site */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; opacity: 0.5;
  mix-blend-mode: multiply;
}

/* ═════════════════════════════════════════════════════════
   CINEMATIC NAVIGATION
   ═════════════════════════════════════════════════════════ */
.cine-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 56px;
  background: linear-gradient(180deg, rgba(250,246,239,0.85), rgba(250,246,239,0.0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cine-logo {
  font-family: var(--serif);
  font-size: 18px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dark);
}
.cine-logo em {
  font-style: italic; color: var(--rose);
  text-transform: none; letter-spacing: 0.02em;
  margin: 0 0.1em;
}
.cine-links {
  display: flex; gap: 44px;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
}
.cine-links a {
  color: rgba(30,23,18,0.55);
  transition: color 0.3s ease;
  padding: 4px 0;
}
.cine-links a:hover, .cine-links a.active { color: var(--dark); }
.cine-links a.active { border-bottom: 1px solid var(--rose); }

/* Live toggle — discreet pill */
.live-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  border: 1px solid rgba(30,23,18,0.18);
  border-radius: 40px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(30,23,18,0.6);
  transition: all 0.35s ease;
  font-weight: 400;
}
.live-toggle:hover {
  border-color: var(--dark); color: var(--dark);
  transform: translateY(-1px);
}
.live-toggle::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--herb);
  box-shadow: 0 0 0 3px rgba(74,103,65,0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,103,65,0.15); }
  50%      { box-shadow: 0 0 0 6px rgba(74,103,65,0.05); }
}

/* Mobile nav stub */
.cine-toggle {
  display: none; width: 26px; height: 26px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.cine-toggle span {
  display: block; height: 1px; width: 22px;
  background: var(--dark); transition: transform 0.3s, opacity 0.2s;
}

/* ═════════════════════════════════════════════════════════
   SCENE FOUNDATIONS — each scene is full-viewport
   ═════════════════════════════════════════════════════════ */
.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.scene-stage {
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px;
  padding: 120px 56px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* Caption pattern used across scenes */
.scene-cap {
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--sand-dk);
  margin-bottom: 32px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease-cine), transform 1.2s var(--ease-cine);
}
.scene.in-view .scene-cap { opacity: 1; transform: translateY(0); }

.scene-line {
  width: 1px; height: 60px;
  background: linear-gradient(180deg, transparent, var(--sand-dk), transparent);
  margin: 0 auto 32px;
  opacity: 0;
  transition: opacity 1.4s var(--ease-cine) 0.2s;
}
.scene.in-view .scene-line { opacity: 0.6; }

.scene h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 6.5vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin-bottom: 28px;
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.4s var(--ease-cine) 0.2s, transform 1.4s var(--ease-cine) 0.2s;
}
.scene h2 em { font-style: italic; color: var(--rose); }
.scene.in-view h2 { opacity: 1; transform: translateY(0); }

.scene p.lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--sand-dk);
  max-width: 580px;
  margin: 0 auto 24px;
  line-height: 1.4;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.4s var(--ease-cine) 0.4s, transform 1.4s var(--ease-cine) 0.4s;
}
.scene.in-view p.lead { opacity: 1; transform: translateY(0); }

.scene p.body {
  font-size: 15px; line-height: 1.85;
  color: rgba(30,23,18,0.65);
  max-width: 480px;
  margin: 0 auto;
  font-weight: 300;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.4s var(--ease-cine) 0.6s, transform 1.4s var(--ease-cine) 0.6s;
}
.scene.in-view p.body { opacity: 1; transform: translateY(0); }

.scene-flora {
  width: clamp(260px, 38vw, 480px);
  margin: 56px auto 0;
  opacity: 0; transform: translateY(40px) scale(0.95);
  transition: opacity 1.8s var(--ease-cine) 0.3s, transform 1.8s var(--ease-cine) 0.3s;
}
.scene.in-view .scene-flora { opacity: 1; transform: translateY(0) scale(1); }

/* ═════════════════════════════════════════════════════════
   SCENE 0 — OPENING HERO
   ═════════════════════════════════════════════════════════ */
.scene-open {
  background: radial-gradient(ellipse at 50% 60%, var(--cream) 0%, var(--parchment) 80%, #ECE0C7 100%);
  text-align: center;
}
.cine-eyebrow {
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 48px;
  display: inline-flex; align-items: center; gap: 14px;
  opacity: 0;
  animation: cineFadeUp 1.4s var(--ease-cine) 0.4s forwards;
}
.cine-eyebrow::before, .cine-eyebrow::after {
  content: ''; display: inline-block;
  width: 28px; height: 1px; background: var(--gold);
}
.cine-hero-title {
  font-family: var(--serif);
  font-size: clamp(72px, 14vw, 220px);
  font-weight: 400; line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--dark);
  margin-bottom: 30px;
}
.cine-hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(60px);
  animation: cineFadeUp 1.4s var(--ease-cine) forwards;
}
.cine-hero-title .line:nth-child(1) { animation-delay: 0.6s; }
.cine-hero-title .line:nth-child(2) { animation-delay: 0.9s; font-style: italic; color: var(--rose); }
.cine-hero-tag {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2vw, 28px);
  color: var(--sand-dk);
  letter-spacing: 0.02em;
  opacity: 0;
  animation: cineFadeUp 1.4s var(--ease-cine) 1.2s forwards;
  margin-bottom: 56px;
}
.cine-hero-flora {
  width: clamp(280px, 40vw, 480px);
  margin: 0 auto 48px;
  opacity: 0;
  animation: cineFloraIn 2s var(--ease-cine) 1.5s forwards;
}
.cine-scroll-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: rgba(30,23,18,0.4);
  opacity: 0;
  animation: cineFadeUp 1s var(--ease-cine) 2.2s forwards;
}
.cine-scroll-hint::after {
  content: ''; display: block;
  width: 1px; height: 50px;
  background: linear-gradient(180deg, var(--sand-dk), transparent);
  animation: scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(8px); }
}
@keyframes cineFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cineFloraIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═════════════════════════════════════════════════════════
   SCENE BACKGROUNDS — per-scene atmospheres
   ═════════════════════════════════════════════════════════ */
.scene-garden  { background: linear-gradient(180deg, var(--parchment) 0%, #F0E2C0 100%); }
.scene-pluck   { background: linear-gradient(180deg, #F0E2C0 0%, var(--rose-pale) 100%); }
.scene-grove   { background: linear-gradient(180deg, var(--rose-pale) 0%, #F2DEB5 100%); }
.scene-source  { background: linear-gradient(180deg, #F2DEB5 0%, var(--bone) 100%); }
.scene-hands   { background: linear-gradient(180deg, var(--bone) 0%, #F0E0BE 100%); }
.scene-blend   { background: linear-gradient(180deg, #F0E0BE 0%, var(--ivory) 100%); }
.scene-jar     { background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%); }
.scene-skin    { background: linear-gradient(180deg, var(--parchment) 0%, var(--rose-pale) 100%); }
.scene-cta     { background: linear-gradient(180deg, var(--rose-pale) 0%, var(--cream) 100%); }

/* ═════════════════════════════════════════════════════════
   SCENE 2 — THE PLUCK (scroll-driven petal scatter)
   ═════════════════════════════════════════════════════════ */
.pluck-stage {
  position: relative;
  width: clamp(280px, 44vw, 520px);
  height: clamp(280px, 44vw, 520px);
  margin: 56px auto 0;
}
.pluck-stage svg { width: 100%; height: 100%; overflow: visible; }

/* Petals respond to --progress 0..1 driven by scroll position */
.pluck-stage .petal {
  transform-origin: 0 0;
  transition: opacity 0.4s linear;
  will-change: transform, opacity;
}
.pluck-stage .petal-wrap {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Each petal drifts in its own direction (--r is parent rotation in deg) */
.pluck-stage .petal-wrap[data-i="0"] { --drift: -240px; --twist: 14deg; }
.pluck-stage .petal-wrap[data-i="1"] { --drift: -220px; --twist: -22deg; }
.pluck-stage .petal-wrap[data-i="2"] { --drift: -260px; --twist: 28deg; }
.pluck-stage .petal-wrap[data-i="3"] { --drift: -210px; --twist: -16deg; }
.pluck-stage .petal-wrap[data-i="4"] { --drift: -250px; --twist: 20deg; }
.pluck-stage .petal-wrap[data-i="5"] { --drift: -180px; --twist: -10deg; }
.pluck-stage .petal-wrap[data-i="6"] { --drift: -200px; --twist: 18deg; }
.pluck-stage .petal-wrap[data-i="7"] { --drift: -190px; --twist: -24deg; }
.pluck-stage .petal-wrap[data-i="8"] { --drift: -210px; --twist: 12deg; }
.pluck-stage .petal-wrap[data-i="9"] { --drift: -170px; --twist: -18deg; }

/* During pluck scene, petal-wrap translates outward by progress */
.scene-pluck.active .pluck-stage .petal-wrap {
  transform:
    rotate(var(--r)) scale(var(--s, 1))
    translateY(calc(var(--progress, 0) * var(--drift, -200px)))
    rotate(calc(var(--progress, 0) * var(--twist, 20deg)));
}
.scene-pluck.active .pluck-stage .petal {
  opacity: calc(1 - var(--progress, 0) * 0.9);
}

/* ═════════════════════════════════════════════════════════
   SCENE 3 — GROVE (sandalwood)
   ═════════════════════════════════════════════════════════ */
.grove-stage svg { overflow: visible; }
.grove-stage .branch {
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateY(40px) rotate(-3deg);
  transition: opacity 1.6s var(--ease-cine) 0.2s, transform 1.6s var(--ease-cine) 0.2s;
}
.scene-grove.in-view .grove-stage .branch {
  opacity: 1; transform: translateY(0) rotate(0deg);
}
.grove-stage .shavings {
  opacity: 0;
  transition: opacity 1.6s var(--ease-cine) 0.8s;
}
.scene-grove.in-view .grove-stage .shavings { opacity: 0.85; }

/* ═════════════════════════════════════════════════════════
   SCENE 4 — THE PATHS (India map with drawing lines)
   ═════════════════════════════════════════════════════════ */
.sourcing-stage { position: relative; width: clamp(280px, 44vw, 520px); margin: 56px auto 0; }
.sourcing-stage svg { overflow: visible; }

.sourcing-stage .map-outline {
  opacity: 0;
  transition: opacity 1.6s var(--ease-cine);
}
.scene-source.in-view .sourcing-stage .map-outline { opacity: 1; }

.sourcing-stage .map-lines path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.8s var(--ease-cine);
}
.scene-source.in-view .sourcing-stage .map-lines path { stroke-dashoffset: 0; }
.scene-source.in-view .sourcing-stage .map-lines path:nth-child(1) { transition-delay: 0.5s; }
.scene-source.in-view .sourcing-stage .map-lines path:nth-child(2) { transition-delay: 0.8s; }
.scene-source.in-view .sourcing-stage .map-lines path:nth-child(3) { transition-delay: 1.1s; }
.scene-source.in-view .sourcing-stage .map-lines path:nth-child(4) { transition-delay: 1.4s; }
.scene-source.in-view .sourcing-stage .map-lines path:nth-child(5) { transition-delay: 1.7s; }
.scene-source.in-view .sourcing-stage .map-lines path:nth-child(6) { transition-delay: 2.0s; }

.sourcing-stage .map-points > g {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.9s var(--ease-cine), transform 0.9s var(--ease-cine);
}
.scene-source.in-view .sourcing-stage .map-points > g {
  opacity: 1; transform: scale(1);
}
.scene-source.in-view .sourcing-stage .map-points > g:nth-child(1) { transition-delay: 0.4s; }
.scene-source.in-view .sourcing-stage .map-points > g:nth-child(2) { transition-delay: 0.7s; }
.scene-source.in-view .sourcing-stage .map-points > g:nth-child(3) { transition-delay: 1.0s; }
.scene-source.in-view .sourcing-stage .map-points > g:nth-child(4) { transition-delay: 1.3s; }
.scene-source.in-view .sourcing-stage .map-points > g:nth-child(5) { transition-delay: 1.6s; }
.scene-source.in-view .sourcing-stage .map-points > g:nth-child(6) { transition-delay: 1.9s; }
.scene-source.in-view .sourcing-stage .map-points > g:nth-child(7) { transition-delay: 0.3s; }
.sourcing-stage .map-points .surat-pulse {
  animation: suratPulse 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes suratPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.5); }
}

/* ═════════════════════════════════════════════════════════
   SCENE 5 — THE HANDS (cupped hands cradling the blend)
   ═════════════════════════════════════════════════════════ */
.hands-stage { position: relative; width: clamp(300px, 50vw, 580px); margin: 56px auto 0; }
.hands-stage svg { overflow: visible; }

.hands-stage .hand-left {
  opacity: 0;
  transform: translate(-30px, 24px);
  transition: opacity 1.4s var(--ease-cine) 0.1s, transform 1.4s var(--ease-cine) 0.1s;
}
.hands-stage .hand-right {
  opacity: 0;
  transform: translate(30px, 24px);
  transition: opacity 1.4s var(--ease-cine) 0.2s, transform 1.4s var(--ease-cine) 0.2s;
}
.scene-hands.in-view .hands-stage .hand-left,
.scene-hands.in-view .hands-stage .hand-right {
  opacity: 1; transform: translate(0, 0);
}

.hands-stage .hand-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s var(--ease-cine) 0.9s, transform 1.2s var(--ease-cine) 0.9s;
}
.scene-hands.in-view .hands-stage .hand-content {
  opacity: 1; transform: translateY(0);
}

.hands-stage .hand-fall {
  opacity: 0;
}
.scene-hands.in-view .hands-stage .hand-fall { animation: handFall 4.5s ease-in infinite; }
.scene-hands.in-view .hands-stage .hand-fall.f1 { animation-delay: 1.4s; }
.scene-hands.in-view .hands-stage .hand-fall.f2 { animation-delay: 2.1s; }
.scene-hands.in-view .hands-stage .hand-fall.f3 { animation-delay: 2.8s; }
@keyframes handFall {
  0%   { opacity: 0; transform: translateY(0)    rotate(0deg); }
  15%  { opacity: 0.9; }
  70%  { opacity: 0.9; transform: translateY(80px)  rotate(40deg); }
  100% { opacity: 0;   transform: translateY(100px) rotate(60deg); }
}

/* ═════════════════════════════════════════════════════════
   SCENE 6 — THE BLEND (swirling bowl)
   ═════════════════════════════════════════════════════════ */
.blend-stage { position: relative; width: clamp(280px, 42vw, 460px); height: clamp(280px, 42vw, 460px); margin: 56px auto 0; }
.blend-stage svg { width: 100%; height: 100%; overflow: visible; }
.blend-orbit {
  animation: blendOrbit 22s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes blendOrbit { to { transform: rotate(360deg); } }
.blend-stage .ingredient-spot {
  opacity: 0;
  transition: opacity 1.2s var(--ease-cine);
}
.scene-blend.in-view .blend-stage .ingredient-spot { opacity: 1; }

/* ═════════════════════════════════════════════════════════
   SCENE 5 — THE JAR
   ═════════════════════════════════════════════════════════ */
.jar-stage { position: relative; width: clamp(220px, 28vw, 320px); margin: 56px auto 0; }
.jar-stage svg { overflow: visible; }
.jar-cap {
  transform-origin: 50% 100%;
  transform: translateY(-30px);
  opacity: 0;
  transition: transform 1.4s var(--ease-cine) 0.4s, opacity 1.4s var(--ease-cine) 0.4s;
}
.scene-jar.in-view .jar-cap { transform: translateY(0); opacity: 1; }
.jar-fill {
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 1.6s var(--ease-cine) 0.8s;
}
.scene-jar.in-view .jar-fill { transform: scaleY(1); }

/* ═════════════════════════════════════════════════════════
   SCENE 6 — THE SKIN (profile silhouette)
   ═════════════════════════════════════════════════════════ */
.skin-stage { position: relative; width: clamp(280px, 38vw, 420px); margin: 56px auto 0; }
.skin-stage svg { overflow: visible; }
.skin-mask {
  opacity: 0;
  transition: opacity 1.6s var(--ease-cine) 0.4s;
}
.scene-skin.in-view .skin-mask { opacity: 0.8; }
.skin-particle {
  opacity: 0;
  transition: opacity 1.6s var(--ease-cine);
}
.scene-skin.in-view .skin-particle { opacity: 0.85; }
.scene-skin.in-view .skin-particle.p1 { transition-delay: 0.8s; }
.scene-skin.in-view .skin-particle.p2 { transition-delay: 1.0s; }
.scene-skin.in-view .skin-particle.p3 { transition-delay: 1.2s; }
.scene-skin.in-view .skin-particle.p4 { transition-delay: 1.4s; }
.scene-skin.in-view .skin-particle.p5 { transition-delay: 0.9s; }

/* ═════════════════════════════════════════════════════════
   SCENE 7 — CTA
   ═════════════════════════════════════════════════════════ */
.cta-action {
  display: inline-flex; gap: 16px; margin-top: 48px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.4s var(--ease-cine) 0.8s, transform 1.4s var(--ease-cine) 0.8s;
}
.scene-cta.in-view .cta-action { opacity: 1; transform: translateY(0); }
.cine-btn {
  padding: 16px 40px;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  background: var(--dark); color: var(--cream);
  border-radius: 0;
  transition: all 0.4s var(--ease-soft);
}
.cine-btn:hover { background: var(--rose); transform: translateY(-2px); }
.cine-btn.ghost { background: transparent; color: var(--dark); border: 1px solid rgba(30,23,18,0.3); }
.cine-btn.ghost:hover { border-color: var(--rose); color: var(--rose); background: transparent; }

/* ═════════════════════════════════════════════════════════
   END CARD
   ═════════════════════════════════════════════════════════ */
.end-card {
  text-align: center;
  padding: 80px 48px 48px;
  background: var(--dark); color: var(--cream);
}
.end-mark {
  font-family: var(--serif); font-style: italic;
  font-size: 32px; color: var(--rose-lt);
  margin-bottom: 18px;
}
.end-card-tag {
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(250,246,239,0.4);
  margin-bottom: 12px;
}
.end-card-copy {
  font-size: 13px; color: rgba(250,246,239,0.5);
  letter-spacing: 0.05em;
}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .cine-nav { padding: 20px 24px; }
  .cine-links { display: none; }
  .cine-toggle { display: flex; }
  .scene-stage { padding: 100px 24px; }
  .cine-hero-title { font-size: clamp(56px, 18vw, 120px); }
  .scene h2 { font-size: clamp(32px, 9vw, 60px); }
  .scene-flora, .pluck-stage, .blend-stage, .jar-stage, .skin-stage {
    width: clamp(220px, 70vw, 360px);
  }
  .pluck-stage { height: auto; aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .blend-orbit { animation: none; }
  .cine-scroll-hint::after { animation: none; }
}