/* ===========================================================================
   ARORA SHOP — cinema.css
   =========================================================================== */

/* ------------------------------------------------------------------- film */
.film {
  position: relative;
  background: var(--ink);
  isolation: isolate;
}

.act {
  --act-h: 150vh;
  height: var(--act-h);
  position: relative;
}
.act-1 { --act-h: 180vh; }
.act-2 { --act-h: 140vh; }

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------- plates */
.plates {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 58%;
}
.pl {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 55%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* atmospheric veils sit between plates */
.veil { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.veil-dawn   { background: linear-gradient(180deg, rgba(255,196,120,.16), transparent 46%, rgba(10,15,26,.5)); }
.veil-warm   { background: radial-gradient(70% 55% at 50% 46%, rgba(255,206,126,.28), transparent 70%); mix-blend-mode: screen; }
.veil-gold   { background: radial-gradient(46% 40% at 50% 50%, rgba(255,214,132,.55), rgba(226,168,58,.14) 55%, transparent 76%); mix-blend-mode: screen; }
.veil-deep   { background: linear-gradient(180deg, rgba(10,15,26,.62), transparent 34%, transparent 62%, rgba(10,15,26,.86)); }
.veil-black  { background: var(--ink); }
.veil-vig    { background: radial-gradient(112% 88% at 50% 46%, transparent 44%, rgba(6,9,16,.72)); }

/* one grain pass unifies the vector plates into a single image */
.film::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* canvas effects ride above the plates, below the type */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.fx-water { top: auto; bottom: 0; height: 56%; }

/* --------------------------------------------------------------- captions */
.cap {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
  will-change: transform, opacity;
}
.cap-in {
  max-width: 40rem;
  display: grid;
  gap: 1.15rem;
}
.cap-r { margin-left: auto; text-align: right; }
.cap-r .eyebrow { justify-content: flex-end; }
.cap-r .eyebrow::before { order: 2; }
.cap-r .marker { justify-content: flex-end; }
.cap-c { margin-inline: auto; text-align: center; }
.cap-c .eyebrow { justify-content: center; }
.cap-c .lede { margin-inline: auto; }
.cap-c .marker { justify-content: center; }

.cap h2 {
  font-family: var(--display);
  font-size: var(--t-1);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(6,9,16,.6);
}
.cap .lede { text-shadow: 0 1px 20px rgba(6,9,16,.75); }

/* the act marker: roman numeral + the Gurmukhi name of the place */
.marker {
  display: flex; align-items: baseline; gap: .85rem;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.marker .rn {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: none;
}
.marker .pa { font-family: var(--gurmukhi); letter-spacing: .06em; font-weight: 500; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: var(--gut);
  will-change: transform, opacity;
}
.hero-in { display: grid; gap: clamp(.9rem, 2vh, 1.6rem); justify-items: center; }
.hero-pa {
  font-family: var(--gurmukhi);
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold-hi);
}
.hero-en {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.03em;
  text-shadow: 0 4px 60px rgba(6,9,16,.55);
}
.hero-rule {
  width: min(46vw, 22rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  animation: rule 1.6s var(--ease-o) .55s forwards;
}
@keyframes rule { to { transform: scaleX(1); } }
.hero-sub {
  font-size: clamp(.95rem, 1.35vw, 1.16rem);
  color: color-mix(in srgb, var(--marble) 82%, transparent);
  max-width: 34rem;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(6,9,16,.8);
}
.hero-est {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}

/* page-load sequence: the hero assembles once, then never again */
.hero-in > * { opacity: 0; transform: translateY(16px); animation: rise 1.15s var(--ease-o) forwards; }
.hero-in > *:nth-child(1) { animation-delay: .25s; }
.hero-in > *:nth-child(2) { animation-delay: .40s; }
.hero-in > *:nth-child(3) { animation: none; opacity: 1; transform: none; }
.hero-in > *:nth-child(4) { animation-delay: .78s; }
.hero-in > *:nth-child(5) { animation-delay: .92s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.cue {
  position: absolute;
  left: 50%; bottom: clamp(1.5rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  z-index: 7;
  display: grid; gap: .6rem; justify-items: center;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--marble) 62%, transparent);
  animation: rise 1s var(--ease-o) 1.5s forwards;
  opacity: 0;
  will-change: opacity;
}
.cue i {
  display: block; width: 1px; height: 3.25rem;
  background: linear-gradient(180deg, var(--gold), transparent);
  position: relative; overflow: hidden;
}
.cue i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gold-hi);
  animation: drip 2.1s var(--ease) infinite;
}
@keyframes drip {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------- horizontal rail */
.rail { position: relative; }
.rail-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center;
}
.rail-track {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--gut);
  will-change: transform;
}
.rail-card {
  flex: none;
  width: min(78vw, 27rem);
  background: #fff;
  border: 1px solid var(--marble-2);
  border-radius: var(--r-2);
  padding: clamp(1.4rem, 2.6vw, 2.15rem);
  display: grid;
  gap: .85rem;
  align-content: start;
  min-height: min(62vh, 26rem);
  color: var(--ink);
}
.rail-card .rc-n {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .12em; color: var(--gold-dim);
}
.rail-card h3 { font-family: var(--display); font-size: 1.55rem; font-weight: 400; line-height: 1.14; letter-spacing: -.012em; }
.rail-card .rc-pa { font-family: var(--gurmukhi); font-size: 1.1rem; font-weight: 500; color: var(--gold-dim); }
.rail-card p { font-size: var(--t-s); line-height: 1.6; color: color-mix(in srgb, var(--ink) 66%, transparent); }
.rail-card .rc-mk { margin-top: auto; width: 44px; opacity: .5; }
.rail-head {
  position: absolute; top: clamp(2rem, 8vh, 5rem); left: 0; right: 0;
  padding-inline: var(--gut);
  max-width: var(--shell); margin-inline: auto;
  pointer-events: none;
}
.rail-static .rail-pin { position: static; height: auto; padding-block: var(--bay); }
.rail-static .rail-track { flex-wrap: wrap; transform: none !important; }
.rail-static .rail-card { width: min(100%, 22rem); }

/* ------------------------------------------------------------ visit block */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.visit-card {
  border: 1px solid var(--marble-3);
  border-radius: var(--r-2);
  background: #fff;
  padding: clamp(1.4rem, 2.6vw, 2.25rem);
  display: grid; gap: 1rem;
}
.visit-row { display: grid; grid-template-columns: 1.15rem 1fr; gap: .85rem; align-items: start; font-size: var(--t-s); }
.visit-row .ic { color: var(--gold-dim); margin-top: .18rem; }
.visit-row b { display: block; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); margin-bottom: .12rem; }

/* -------------------------------------------------------------- support
   A dark, standalone band — deliberately breaking from the marble sections
   around it, the way a "need help" strip usually does on a proper storefront —
   with three quick ways to reach a real person. */
.support {
  background: var(--ink);
  border-radius: var(--r-2);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.support-head { display: grid; gap: .5rem; max-width: 42rem; }
.support-head .sign-pa { color: var(--gold); font-size: var(--t-s); }
.support-head h2 { color: #fff; }
.support-head p { color: color-mix(in srgb, var(--marble) 78%, transparent); font-size: var(--t-s); line-height: 1.6; }
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.support-tile {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--ink-4);
  border-radius: var(--r-1);
  background: var(--ink-1);
  transition: border-color .25s, background .25s, transform .25s;
}
.support-tile:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--ink-1)); transform: translateY(-2px); }
.support-tile .ic {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold-hi);
}
.support-tile b { display: block; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--marble) 65%, transparent); margin-bottom: .15rem; }
.support-tile span:last-child span { color: #fff; font-size: var(--t-s); font-weight: 500; overflow-wrap: anywhere; }

/* --------------------------------------------------------- story columns */
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3.25rem); }
.story .yr {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--gold-dim);
  font-variant-numeric: lining-nums;
  display: block;
}
.story p { font-size: var(--t-s); line-height: 1.68; color: color-mix(in srgb, var(--ink) 68%, transparent); margin-top: .9rem; }
.story h3 { font-family: var(--display); font-size: 1.28rem; font-weight: 400; margin-top: .55rem; }
.story .st-b > h3:first-child { margin-top: 0; }

/* ============================================================ responsive */
@media (max-aspect-ratio: 1/1) {
  .pl { inset: -18%; width: 136%; height: 136%; }
}
@media (max-width: 980px) {
  .visit { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; gap: 2rem; }
  .story > div { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: baseline; }
  .story .yr { font-size: 2.4rem; }
}
@media (max-width: 700px) {
  .act   { --act-h: 130vh; }
  .act-1 { --act-h: 150vh; }
  .cap-in { max-width: 100%; }
  .cap-r { text-align: left; }
  .cap-r .eyebrow { justify-content: flex-start; }
  .cap-r .eyebrow::before { order: 0; }
  .rail-card { width: 84vw; min-height: 0; }
}

/* ======================================================== reduced motion */
html.reduced .act { height: auto; min-height: 100vh; }
html.reduced .pin { position: relative; min-height: 100vh; }
html.reduced .hero-in > *, html.reduced .cue { opacity: 1; transform: none; animation: none; }
html.reduced .hero-rule { transform: scaleX(1); animation: none; }
html.reduced .emerge { opacity: 1; position: relative; padding-block: var(--bay); }
html.reduced .cue i::after { animation: none; }