/* ==========================================================================
   Welcome Home — static rebuild
   Tokens mirror the original Core Framework dark palette and fluid scale
   (1rem = 10px; fluid values clamp between 320px and 1366px viewports).
   Breakpoints (desktop-first): 992 / 768 / 480.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/Lora-Medium.woff") format("woff");
}
@font-face {
  font-family: "Lora";
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Lora-Bold.woff") format("woff");
}

:root {
  /* colour */
  --bg-body: hsl(0 0% 8%);
  --bg-surface: hsl(240 2% 12%);
  --text-body: hsl(0 0% 75%);
  --text-title: hsl(0 0% 100%);
  --border-primary: hsl(0 0% 50% / 0.25);
  --primary: hsl(0 0% 82%);
  --light: #fff;
  --light-20: hsl(0 0% 100% / 0.2);
  --light-30: hsl(0 0% 100% / 0.3);
  --dark: #000;
  --row-border: #616161;
  --divider: #f5f5f5;

  /* type */
  --font-heading: "Lora", Georgia, serif;
  --font-body: "Helvetica", "Helvetica Neue", Arial, sans-serif;

  --text-xs: clamp(1.26rem, calc(-0.24vw + 1.34rem), 1.01rem);
  --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
  --text-l: clamp(1.8rem, calc(0.57vw + 1.62rem), 2.4rem);
  --text-xl: clamp(2.02rem, calc(1.12vw + 1.67rem), 3.2rem);
  --text-2xl: clamp(2.28rem, calc(1.9vw + 1.67rem), 4.26rem);
  --text-3xl: clamp(2.56rem, calc(2.98vw + 1.61rem), 5.68rem);
  --text-4xl: clamp(2.88rem, calc(4.49vw + 1.45rem), 7.58rem);

  /* space */
  --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
  --space-xs: clamp(1.02rem, calc(0.36vw + 0.91rem), 1.4rem);
  --space-s: clamp(1.28rem, calc(0.67vw + 1.07rem), 1.98rem);
  --space-m: clamp(1.6rem, calc(1.15vw + 1.23rem), 2.8rem);
  --space-l: clamp(2rem, calc(1.87vw + 1.4rem), 3.96rem);
  --space-xl: clamp(2.5rem, calc(2.96vw + 1.55rem), 5.6rem);
  --space-2xl: clamp(3.13rem, calc(4.58vw + 1.66rem), 7.92rem);
  --space-3xl: clamp(3.91rem, calc(6.97vw + 1.68rem), 11.19rem);
  --space-4xl: clamp(4.88rem, calc(10.46vw + 1.53rem), 15.83rem);

  --radius-m: clamp(1rem, calc(0.19vw + 0.94rem), 1.2rem);
  --radius-full: 999rem;

  --content-max: 1580px;
  --container-max: 1366px;

  /* motion */
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-mask: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-arrow: cubic-bezier(0.1, 0, 0.3, 1);
  --ease-underline: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 62.5%;
  background-color: var(--bg-body);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: 1.7;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-title);
  text-rendering: optimizeLegibility;
}
h1, h2 { line-height: 1.2; }
h3 { line-height: 1.3; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; height: 1em; width: auto; fill: currentColor; flex-shrink: 0; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100000;
  padding: 1rem 1.6rem;
  background: var(--light);
  color: var(--dark);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Scrollbar (as on the original) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--light-20); }
::-webkit-scrollbar-thumb:hover { background: var(--light-30); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Split-text blocks shrink-wrap their text unless a width is set below */
[data-anim="blade"],
[data-anim="blur"] { width: fit-content; max-width: 100%; }

/* Shared section title (Global crisis / India) */
.section-title {
  width: fit-content;
  max-width: 100%;
  font-size: var(--text-xl);
  text-transform: uppercase;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--space-xl);
  height: 100vh;
  padding: 100px 50px;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 90%, var(--bg-body));
  pointer-events: none;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(80deg, var(--dark), rgba(0, 0, 0, 0));
}
.reveal.hero__poster { width: 100%; height: 100%; }

.hero__inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  row-gap: 50px;
  width: 100%;
  max-width: var(--content-max);
}

.hero__content {
  display: flex;
  flex-direction: column;
  row-gap: 50px;
  width: fit-content;
}

.hero__title { display: flex; flex-direction: column; }
.hero__title .twist__text {
  font-size: calc(2 * var(--text-4xl));
  line-height: 1;
  text-transform: uppercase;
}

.hero__tagline {
  width: fit-content;
  font-size: var(--text-xl);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--light);
}

.hero__text {
  width: 50ch;
  max-width: 100%;
  font-size: var(--text-l);
  line-height: 1.3;
}

.hero__btn { margin-top: auto; }

/* Share */
.share {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: center;
  gap: var(--space-m);
}
.share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: var(--text-l);
  color: var(--light);
}
.share__link svg { width: 1em; height: 1em; fill: currentColor; }
.share__link--telegram svg { margin-left: -2px; }

/* Mask button */
.mask-btn {
  --x: 0;
  --y: 0;
  --active: 0;
  position: relative;
  display: grid;
  width: fit-content;
  padding: 15px 30px;
  overflow: hidden;
  background: var(--light);
  color: hsl(0 0% 90%);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.mask-btn__back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.mask-btn__back > span {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: 50%;
  aspect-ratio: 1;
  border-radius: 100px;
  background: var(--dark);
  transform: translate(-50%, -50%) scale(var(--active));
  transition: transform 0.25s;
  pointer-events: none;
}
.mask-btn:is(:hover, :focus-visible) { --active: 1.5; }
.mask-btn:active { --active: 3; }
.mask-btn:active .mask-btn__back > span { transition: transform 0.15s; }
@supports (transition-timing-function: linear(0, 1)) {
  .mask-btn:is(:hover, :focus-visible) .mask-btn__back > span {
    transition-duration: 0.5s;
    transition-timing-function: linear(0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1);
  }
}
.mask-btn__label { position: relative; mix-blend-mode: difference; }

/* ==========================================================================
   Global crisis
   ========================================================================== */
.crisis {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-m) 50px;
}
.crisis__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 50px;
  width: 100%;
  max-width: var(--content-max);
  padding: var(--space-xl) 0;
}

.crisis__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
}

.stat-card {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 25px;
  border: 1px solid var(--border-primary);
  background-color: var(--bg-surface);
}
.stat-card__head {
  display: flex;
  align-items: flex-end;
  column-gap: var(--space-xs);
}
.stat-card__icon {
  box-sizing: content-box;
  padding: 10px;
  font-size: var(--text-xl);
}
.stat-card__figure { display: block; font-weight: 700; }
.stat-card__figure .counter { font-size: var(--text-2xl); line-height: normal; }
.stat-card__unit { font-size: var(--text-l); }
.stat-card__body { display: flex; flex-direction: column; row-gap: 5px; }
.stat-card__title { width: fit-content; font-size: var(--text-m); }
.stat-card__text { font-size: var(--text-m); }

.crisis__caption {
  width: 70ch;
  max-width: 100%;
  font-size: var(--text-l);
  line-height: 1.3;
  color: var(--text-title);
}

/* ==========================================================================
   India stats
   ========================================================================== */
.india {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 50px 100px;
}
.india__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 35px;
  width: 100%;
  max-width: var(--content-max);
}

.divider { width: 100%; }
.divider__line { display: block; width: 100%; border-top: 1px solid var(--divider); }

.india__body {
  position: relative;
  display: grid;
  gap: var(--space-2xl);
  width: 100%;
  padding-bottom: var(--space-2xl);
}
.india__text {
  width: 70ch;
  max-width: 100%;
  font-size: var(--text-l);
  line-height: 1.5;
  color: var(--text-title);
}

.india__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}
.india-stat__head {
  display: flex;
  align-items: center;
  column-gap: var(--space-s);
}
.india-stat__icon { font-size: var(--text-xl); }
.india-stat__figure { font-size: var(--text-2xl); }
.india-stat__unit { font-size: var(--text-l); }
.india-stat__text { width: 40ch; max-width: 100%; }

.india__source {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
}

/* ==========================================================================
   Image slider
   ========================================================================== */
.gallery {
  --items-width: 40vw;
  --items-height: 500px;
  --gap: 5vw;
  position: relative;
  width: 100%;
  height: var(--items-height);
  margin-bottom: var(--space-2xl);
  overflow: hidden;
  background-color: var(--bg-body);
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.gallery.is-dragging { cursor: grabbing; }
.gallery__track { position: relative; width: 100%; height: 100%; }
.gallery__item {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--items-width);
  height: var(--items-height);
  overflow: hidden;
  will-change: transform;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* No-JS fallback: a plain horizontal scroller */
html:not(.js) .gallery { overflow-x: auto; }
html:not(.js) .gallery__track { display: flex; gap: var(--gap); }
html:not(.js) .gallery__item { position: relative; flex-shrink: 0; }

/* ==========================================================================
   About the director
   ========================================================================== */
.director {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0;
  background-color: var(--dark);
}
.director__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 50px;
  padding: 0 25px;
}
.director__intro-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-m);
  width: 100%;
  max-width: var(--content-max);
}
.director__title .twist__text {
  font-size: var(--text-3xl);
  text-transform: uppercase;
}
.director__text {
  width: 70ch;
  max-width: 100%;
  font-size: var(--text-l);
}

/* Mask-hover rows */
.reel-row { position: relative; width: 100%; }
.reel-row__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 35px 25px;
  border-top: 1px solid var(--row-border);
  border-bottom: 1px solid var(--row-border);
}
.reel-row__head-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
}
.reel-row__title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.reel-row__arrow {
  width: 50px;
  height: 50px;
  fill: var(--light);
  transform: rotate(135deg);
}
.reel-row__band {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--light);
  transform: translateY(-50%);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.6s var(--ease-mask);
}
.reel-row:hover .reel-row__band,
.reel-row:focus-within .reel-row__band { clip-path: inset(0); }

/* Tickers (director rows) */
.ticker {
  align-self: stretch;
  width: 100%;
  overflow: hidden;
}
.ticker__track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.ticker__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.ticker__item {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dark);
}
.ticker__star {
  width: 22.5px;
  height: 20px;
  margin: 0 50px;
  fill: var(--dark);
  flex-shrink: 0;
}

/* ==========================================================================
   Team bios (tabs)
   ========================================================================== */
.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2xl) var(--space-m);
}
.tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.tabs__list {
  position: relative;
  display: flex;
  margin: 0 auto var(--space-2xl);
  padding: 2px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
}
.tabs__tab {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: var(--space-2xs) var(--space-m);
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  border-radius: var(--radius-full);
}
.tabs__tab:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }
.tabs__pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 1px;
  height: 1px;
  border-radius: 100px;
  background-color: var(--light-20);
  opacity: 0;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s;
}
.tabs__pill.is-ready { opacity: 1; }

.tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-xl);
  width: var(--container-max);
  max-width: 100%;
  animation: tab-in 0.4s ease forwards;
}
.tabs__panel[hidden] { display: none; }
@keyframes tab-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.person__info {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m);
}
.person__head {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
}
.person__name { width: fit-content; font-size: var(--text-2xl); }
.person__role,
.person__role .twist__text { font-size: var(--text-l); }
.person__bio p { margin-bottom: 1.2em; }

.person__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.person__sticky {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m);
  overflow: hidden;
}
.person__photo { border-radius: var(--radius-m); }
.person__photo { max-width: 100%; }
.person__photo .reveal__img { max-width: none; }
.person__photo--mono { filter: saturate(0%); }
.person__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Arrow link (IMDb / contact / footer links) */
.arrow-link {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 15px;
  width: fit-content;
  padding: 5px;
  color: var(--text-body);
  text-decoration: none;
}
.arrow-link__icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  overflow: hidden;
}
.arrow-link__arrow {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: var(--light);
  stroke: var(--light);
  stroke-width: 0.1;
  rotate: -45deg;
  transition: transform 0.3s var(--ease-arrow);
}
.arrow-link__arrow--in { transform: translateX(-100%); }
.arrow-link:is(:hover, :focus-visible) .arrow-link__arrow--out { transform: translateX(100%); }
.arrow-link:is(:hover, :focus-visible) .arrow-link__arrow--in { transform: translateX(0); }
.arrow-link__label {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--light);
}
.arrow-link--lg .arrow-link__label { font-size: 21px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--light-30);
}
.site-footer__grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  pointer-events: none;
}

.marquee {
  position: relative;
  padding: var(--space-xs) 0;
  overflow: hidden;
  background-color: var(--bg-surface);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; flex-shrink: 0; }
.marquee__item {
  display: block;
  min-width: 300px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 100px;
  padding: var(--space-m) var(--space-2xl);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 2fr 0.75fr;
  gap: 15px;
  width: 100%;
  max-width: var(--content-max);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 25px;
}
.site-footer__caption {
  padding: 0 5px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text-body);
}
.site-footer__caption--tight { line-height: 1.4; }

/* Hover underline */
.underline { position: relative; display: block; }
.underline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.7s var(--ease-underline);
}
.underline:hover::before { transform: scaleX(1); transform-origin: left center; }

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-xl);
}

/* Split button */
.split-btn {
  position: relative;
  z-index: 1;
  width: fit-content;
}
.split-btn__trigger {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--dark);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s;
}
.split-btn__trigger:active { transform: translateY(2px); }
.split-btn__trigger:focus-visible { outline: none; }
.split-btn__trigger:focus-visible ~ .split-btn__bg {
  box-shadow: 0 0 0 2px var(--light), 0 0 0 4px hsl(230 7% 23%);
}
.split-btn__icon { width: 12px; height: 12px; }
.split-btn__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--primary);
  box-shadow:
    0 0 0 1px hsl(230 13% 9% / 0.05),
    0 0.3px 0.4px hsl(230 13% 9% / 0.02),
    0 0.9px 1.5px hsl(230 13% 9% / 0.045),
    0 3.5px 6px hsl(230 13% 9% / 0.09);
  pointer-events: none;
  transform-origin: left top;
  transition: box-shadow 0.3s, transform 0.3s ease, width 0.3s ease, height 0.3s ease;
  will-change: transform, width, height;
}
.split-btn__menu {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}
.split-btn__list { transform: scale(0.5); transition: transform 0.3s ease; }
.split-btn__item {
  display: flex;
  margin: 4px;
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: hsl(230 13% 9%);
  text-decoration: none;
  transition: background 0.3s;
}
.split-btn__item:is(:hover, :focus-visible) { outline: none; background-color: hsl(230 13% 9% / 0.075); }
.split-btn.is-open .split-btn__trigger { opacity: 0; pointer-events: none; }
.split-btn.is-open .split-btn__menu { opacity: 1; pointer-events: auto; }
.split-btn.is-open .split-btn__list { transform: scale(1); }

.site-footer__links {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
}
.site-footer__link-row {
  display: flex;
  align-items: center;
  column-gap: var(--space-2xs);
}
.site-footer__imdb { font-size: var(--text-2xl); }
.site-footer__legal {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
}
.site-footer__credit { font-size: var(--text-m); }
.site-footer__release {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  color: var(--light);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, color 0.4s;
  contain: layout style size;
}
.cursor.is-visible { opacity: 1; }
.cursor::before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0.2);
  transition: transform 0.25s ease-in-out, opacity 0.1s;
}
.cursor.is-pressed::before { transform: scale(0.5); }
.cursor--md::before { transform: scale(1); }
.cursor--lg::before { transform: scale(2); }
.cursor--md,
.cursor--lg { mix-blend-mode: exclusion; }
.cursor--md::before,
.cursor--lg::before { background: #fff; }
.cursor--hidden::before { transform: scale(0) !important; }

/* ==========================================================================
   Animation initial states (only when JS is running)
   ========================================================================== */
/* Twist title */
.twist { display: block; width: fit-content; perspective: 200px; }
.hero__title .twist { perspective: 1000px; }
.twist__text { display: block; }
.js .twist__text {
  opacity: 0;
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: translateY(100%) rotateX(-80deg);
  transition:
    opacity 1s var(--ease-out-cubic) 0.2s,
    transform 1s var(--ease-out-cubic) 0.2s;
}
.js .twist.is-in .twist__text { opacity: 1; transform: none; }

/* Line / word / char splitting */
.js [data-anim="blade"],
.js [data-anim="blur"] { opacity: 0; }
.js [data-anim].is-split { opacity: 1; }
.is-split { clip-path: polygon(0 0, 150% 0, 150% 150%, 0% 150%); }
.split-line { display: block; overflow: hidden; }
.split-line--blank { height: 1lh; }
.split-word,
.split-char { display: inline-block; }

/* Image reveal */
.reveal {
  display: block;
  width: fit-content;
  height: auto;
  contain: paint;
}
.reveal__inner { width: 100%; height: 100%; overflow: hidden; }
.reveal__img { transform-origin: left; }
.hero__poster .reveal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js .reveal[data-anim] .reveal__inner { visibility: hidden; }
.js .reveal--left[data-anim] .reveal__inner { transform: translateX(-100%); }
.js .reveal--left[data-anim] .reveal__img { transform: translateX(100%) scale(1.3); }
.js .reveal--top[data-anim] .reveal__inner { transform: translateY(-100%); }
.js .reveal--top[data-anim] .reveal__img { transform: translateY(100%) scale(1.3); }

/* Divider */
.js .divider__line { width: 0; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width: 992px) {
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .india__body { gap: var(--space-xl); }
  .india__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
  .tabs__panel { gap: var(--space-s); }
}

@media (max-width: 768px) {
  .hero { padding: 50px 25px; }
  /* D4: let the share row wrap below the content instead of overflowing */
  .hero { flex-wrap: wrap; }
  .hero__inner { flex-basis: 100%; }
  .hero__content { row-gap: 25px; width: 100%; }
  .hero__title .twist__text { letter-spacing: -7px; }
  .hero__btn { margin-left: auto; margin-right: auto; }
  .share { flex-direction: row; }
  .share li { margin-top: var(--space-m); }

  .crisis__cards { grid-template-columns: 1fr; gap: 50px; }

  .india__body { gap: var(--space-2xl); padding-bottom: var(--space-3xl); }
  .india__text { width: 100%; }
  .india__stats { width: 100%; }
  .india__source { left: 0; }

  .gallery { --items-width: 80vw; }

  .reel-row__title { font-size: 24px; letter-spacing: -0.5px; }
  .reel-row__arrow { width: 40px; height: 40px; }
  .ticker__item { font-size: 24px; letter-spacing: -0.5px; }

  .tabs__panel { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .person__info { order: 2; width: 100%; }
  .person__aside { order: 1; align-items: center; }
  .person__links { align-items: center; }

  .site-footer__inner { align-items: flex-start; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 480px) {
  .india__body { gap: var(--space-3xl); padding-bottom: var(--space-4xl); }
  .india__stats { grid-template-columns: minmax(0, 1fr); }
  .tabs__panel { gap: var(--space-4xl); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; row-gap: var(--space-m); }
}

/* ==========================================================================
   Reduced motion: show final states, drop transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .twist__text { opacity: 1; transform: none; transition: none; }
  .js [data-anim="blade"],
  .js [data-anim="blur"] { opacity: 1; }
  .js .reveal[data-anim] .reveal__inner { visibility: visible; transform: none; }
  .js .reveal[data-anim] .reveal__img { transform: none; }
  .js .divider__line { width: 100%; }
  .reel-row__band,
  .tabs__pill,
  .split-btn__bg,
  .split-btn__list,
  .arrow-link__arrow,
  .underline::before,
  .mask-btn__back > span { transition-duration: 0.01ms !important; }
  .tabs__panel { animation: none; }
}