/* eZephyr v2 — scene copy and scene-specific artwork.
 * Copy sizes use var(--u): 1px when stacked, one world unit in the journey,
 * so text keeps its place in the illustrated composition at any height.
 */

/* Copy sits above the tint (7) and above lit things (9: lamps, glows), so no light crosses a board. */
.scene__copy { position: relative; z-index: 10; }

/* ================= Scene 01 · Opening Mumbai ================= */
.opening-copy {
  width: min(100%, calc(420 * var(--u)));
  margin-inline: auto;
  padding: calc(40 * var(--u)) 16px calc(24 * var(--u));
  text-align: center;
}
.opening-copy__logo {
  width: calc(340 * var(--u));
  max-width: 100%;
  height: auto;
  margin: 0 auto calc(14 * var(--u));
}
.opening-copy__title {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(34 * var(--u));
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: calc(8 * var(--u));
  border-bottom: calc(3 * var(--u)) solid var(--yellow);
}
.opening-copy__lead {
  margin-top: calc(14 * var(--u));
  font-family: var(--font-display);
  font-size: calc(22 * var(--u));
  line-height: 1.2;
  color: var(--ink-strong);
}
.opening-copy__body {
  max-width: calc(330 * var(--u));
  margin: calc(10 * var(--u)) auto 0;
  font-size: calc(17 * var(--u));
  line-height: 1.4;
}
.opening-copy__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--u));
  margin-top: calc(20 * var(--u));
}
.opening-copy__hint {
  margin-top: calc(18 * var(--u));
  font-family: var(--font-display);
  font-size: calc(15 * var(--u));
  letter-spacing: 0.04em;
  color: var(--ink);
}
.opening-copy__hint::after { content: ' →'; }

/* ================= Scene 02 · CSMT / About (id "vt") ================= */
.vt-copy {
  width: min(100%, 30rem);
  margin-inline: auto;
  padding: 32px 16px 24px;
}
.vt-copy__eyebrow {
  font-family: var(--font-display);
  font-size: calc(15 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.vt-copy__title {
  margin-top: calc(6 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(30 * var(--u));
  line-height: 1.12;
  color: var(--ink-strong);
}
.vt-copy__close {
  margin-top: calc(18 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.4;
}
.vt-copy__close strong { font-weight: 700; }

/* The evolution, drawn like a local-train line: one stop after another. */
.evolution {
  position: relative;
  margin-top: calc(18 * var(--u));
  padding-left: calc(30 * var(--u));
}
.evolution::before {
  content: '';
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  width: calc(4 * var(--u));
  background: var(--ink-strong);
}
.evolution li {
  position: relative;
  padding: calc(4 * var(--u)) 0;
  font-family: var(--font-display);
  font-size: calc(19 * var(--u));
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.evolution__dot {
  position: absolute;
  left: calc(-30 * var(--u));
  top: 50%;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin-top: calc(-10 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink-strong);
  border-radius: 50%;
  background: var(--paper);
}
.evolution li:last-child .evolution__dot { background: var(--yellow); }

/* A scene's link to its internal page (e.g. VT → /about/). */
.scene__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: max(24px, calc(36 * var(--u)));
  margin-top: calc(14 * var(--u));
  font-family: var(--font-display);
  font-size: calc(17 * var(--u));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-strong);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: calc(4 * var(--u));
  text-underline-offset: calc(6 * var(--u));
}
.scene__link:hover { text-decoration-color: var(--ink-strong); }

/* ================= Journey placement of copy ================= */
.is-journey .opening-copy {
  position: absolute;
  top: calc(58 * var(--u));
  left: 0;
  right: 0;
  margin-inline: auto;
  padding: 0;
}
.is-journey .opening-copy .btn {
  min-height: calc(44 * var(--u));
  padding: calc(8 * var(--u)) calc(17 * var(--u));
  border-width: calc(2 * var(--u));
  font-size: calc(17 * var(--u));
}
.is-journey .btn--primary { box-shadow: 0 calc(3 * var(--u)) 0 var(--ink-strong); }

.is-journey .vt-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(360 * var(--u));
  min-height: calc(618 * var(--u));
  margin: 0;
  padding: calc(76 * var(--u)) calc(30 * var(--u)) calc(24 * var(--u));
  background: rgba(255, 255, 255, 0.68); /* the original About panel, made a touch more legible */
}

/* Evening and night (device-time light, js/daypart.js): copy set straight on the sky sits on
 * paper, like the stops' boards, so it stays legible on the dark sky. */
html.is-journey[data-lights="on"] .opening-copy {
  top: calc(52 * var(--u)); /* clear of the header band; with the card's padding, the copy stays about where it was */
  width: min(100%, calc(460 * var(--u)));
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(255, 250, 240, 0.94);
}
html.is-journey[data-lights="on"] .vt-copy { background: rgba(255, 250, 240, 0.92); }

/* ================= Stops 03+ · copy on street-level boards (Milestone 5C) =================
 * Each stop's copy is real HTML on something physical in the street: a hoarding, a
 * promenade kiosk, a scoreboard. Journey: placed in world units at --x (width --w) and
 * standing on the road. Stacked: a card above the scene. */
.board {
  --board: var(--yellow);
  --board-ink: var(--ink-strong);
  --board-mark: var(--paper);
  --board-accent: var(--ink-strong);
  width: min(100% - 32px, 30rem);
  margin: 24px auto 0;
}
.board__panel {
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u));
  border: max(3px, calc(6 * var(--u))) solid var(--ink-strong);
  background: var(--board);
  color: var(--board-ink);
}
.board__stop {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font: 400 calc(13 * var(--u))/1.2 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.board__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: var(--ink-strong);
  color: var(--yellow);
  font-size: calc(12 * var(--u));
  letter-spacing: 0;
}
.board__title {
  margin-top: calc(10 * var(--u));
  font: 400 calc(34 * var(--u))/1 var(--font-display);
  text-transform: uppercase;
}
/* The logo's highlighter, behind the key word */
.board__mark { padding: 0 0.06em; background: linear-gradient(transparent 58%, var(--board-mark) 58%, var(--board-mark) 92%, transparent 92%); }
.board__lead { margin-top: calc(12 * var(--u)); font: 400 calc(19 * var(--u))/1.25 var(--font-display); }
.board__text { margin-top: calc(10 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.45; }
.board__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: max(24px, calc(34 * var(--u)));
  margin-top: calc(12 * var(--u));
  font: 400 calc(15 * var(--u))/1.2 var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--board-accent);
  text-decoration-thickness: max(2px, calc(3 * var(--u)));
  text-underline-offset: calc(5 * var(--u));
}
.board__link:focus-visible { outline: 3px solid var(--ink-strong); outline-offset: 3px; }
/* A second service on the same board (2026-10-22 restructure): its own heading, one line
 * and its own link, under a rule in the board's accent. */
.board__also {
  margin-top: calc(10 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: max(2px, calc(2 * var(--u))) dashed var(--board-accent);
}
.board__also-title { font: 400 calc(24 * var(--u))/1 var(--font-display); text-transform: uppercase; }
.board__also .board__text { margin-top: calc(6 * var(--u)); }
.board__also .board__link { margin-top: calc(4 * var(--u)); }
.board__lamps, .board__legs { display: none; }

/* Journey: standing in the street */
.is-journey .board {
  position: absolute;
  left: calc(var(--x) * var(--u));
  bottom: calc(27 * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
  display: flex;
  flex-direction: column;
}
.is-journey .board__legs { display: flex; justify-content: space-between; height: calc(64 * var(--u)); padding-inline: 14%; }
.is-journey .board__legs::before,
.is-journey .board__legs::after {
  content: '';
  width: calc(18 * var(--u));
  border-inline: calc(4 * var(--u)) solid var(--ink);
  background: repeating-linear-gradient(45deg, transparent 0 calc(7 * var(--u)), var(--ink) calc(7 * var(--u)) calc(10 * var(--u)));
}
.is-journey .board__lamps { display: flex; justify-content: space-around; height: calc(22 * var(--u)); padding-inline: 12%; }
.is-journey .board__lamps span { position: relative; width: calc(20 * var(--u)); border-left: calc(4 * var(--u)) solid var(--ink); border-top: calc(4 * var(--u)) solid var(--ink); }
.is-journey .board__lamps span::after { content: ''; position: absolute; top: calc(-2 * var(--u)); right: calc(-10 * var(--u)); width: calc(14 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--ink); }

/* Gateway · Branding & Creative: a yellow hoarding with lamps */
.board--branding { --board: var(--yellow); --board-mark: var(--paper); }

/* Marine Drive (Wankhede Stadium) · Performance Marketing and Social Media: the scoreboard */
.board--score { --board: var(--ink-strong); --board-ink: #fff; --board-mark: #e31e24; --board-accent: var(--yellow); }
.board--score .board__panel { border-color: var(--ink); }
.board--score .board__stop {
  margin: calc(-20 * var(--u)) calc(-22 * var(--u)) calc(4 * var(--u));
  padding: calc(9 * var(--u)) calc(22 * var(--u));
  background: #e31e24;
  color: #fff;
}
.board--score .board__num { background: #fff; color: var(--ink-strong); }
.board--score .board__title { color: #fff; }
.board--score .board__lead { color: var(--yellow); }
.scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u)) calc(14 * var(--u));
  margin-top: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: max(2px, calc(2 * var(--u))) solid #5b5b5d;
  background: #1f1f20;
}
.scoreboard li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font: 400 calc(14 * var(--u))/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.scoreboard__lamp {
  flex: none;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 calc(8 * var(--u)) rgba(248, 216, 16, 0.8);
}
.is-journey .board--score .board__legs { height: calc(70 * var(--u)); padding-inline: 20%; }
.is-journey .board--score .board__legs::before,
.is-journey .board--score .board__legs::after { width: calc(22 * var(--u)); background: var(--ink); }

/* ================= Stops 05–06 (Milestone 5D) ================= */
/* A hyphenated key word (E-commerce) stays on one line under its highlighter. */
.board__mark { white-space: nowrap; }

/* Dadar · Website Development: a station-style signboard — the yellow name strip
 * over a deep blue board — with the floors of the build lit like a lift panel. */
.board--web { --board: #003399; --board-ink: #fff; --board-mark: #0099ff; --board-accent: var(--yellow); }
.board--web .board__panel { border-color: var(--ink-strong); }
.board--web .board__stop {
  margin: calc(-20 * var(--u)) calc(-22 * var(--u)) calc(4 * var(--u));
  padding: calc(9 * var(--u)) calc(22 * var(--u));
  background: var(--yellow);
  color: var(--ink-strong);
}
.board--web .board__num { background: var(--ink-strong); color: var(--yellow); }
.board--web .board__lead { color: var(--yellow); }
.floors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8 * var(--u)) calc(14 * var(--u));
  margin-top: calc(14 * var(--u));
}
.floors li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font: 400 calc(14 * var(--u))/1.2 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.floors__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border: max(2px, calc(2 * var(--u))) solid var(--yellow);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink-strong);
  font-size: calc(12 * var(--u));
  letter-spacing: 0;
  box-shadow: 0 0 calc(8 * var(--u)) rgba(248, 216, 16, 0.7);
}
.is-journey .board--web .board__legs { height: calc(64 * var(--u)); padding-inline: 18%; }
.is-journey .board--web .board__legs::before,
.is-journey .board--web .board__legs::after { width: calc(14 * var(--u)); background: var(--ink); }

/* Matunga · Selected Work: a plain information board in the street beside Don Bosco High School
 * (2026-10-23: the cinema marquee's bulbs and red frame removed) — paper, the ink frame and
 * the yellow highlighter, on plain ink legs. */
.board--work { --board: var(--paper); --board-mark: var(--yellow); }
.is-journey .board--work .board__legs { height: calc(60 * var(--u)); padding-inline: 18%; }
.is-journey .board--work .board__legs::before,
.is-journey .board--work .board__legs::after { width: calc(14 * var(--u)); background: var(--ink); }

/* ================= Stop 07 · Bandra (Milestone 5E) ================= */
/* Bandra · Long-term partnerships: a promenade board under two lamps. */
.board--promenade { --board: var(--paper); --board-mark: var(--yellow); --board-accent: #00777a; }
.board--promenade .board__stop {
  margin: calc(-20 * var(--u)) calc(-22 * var(--u)) calc(4 * var(--u));
  padding: calc(9 * var(--u)) calc(22 * var(--u));
  background: #00777a;
  color: #fff;
}
.board--promenade .board__num { background: #fff; color: #00777a; }
.board--promenade .board__lamps span::after { background: #fff6c4; box-shadow: 0 0 calc(16 * var(--u)) calc(4 * var(--u)) rgba(255, 222, 22, 0.55); }
.is-journey .board--promenade .board__legs { padding-inline: 20%; }
.is-journey .board--promenade .board__legs::before,
.is-journey .board--promenade .board__legs::after { width: calc(14 * var(--u)); background: #00777a; }

/* ================= Stops 08–09 (Milestone 5F) ================= */

/* Airport · Beyond Mumbai: a departures board — a dark flight-information display with
 * amber status columns. */
.board--departures { --board: #161c33; --board-ink: #fff; --board-mark: #9a6b00; --board-accent: #ffc94a; }
.board--departures .board__panel { border-color: #2d3657; border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 max(2px, calc(4 * var(--u))) var(--ink-strong); }
.board--departures .board__stop { color: #ffc94a; }
.board--departures .board__num { background: #ffc94a; color: #161c33; }
.board--departures .board__lead { color: #ffe3a0; }
.flights {
  margin-top: calc(14 * var(--u));
  border-top: max(1px, calc(2 * var(--u))) solid #2d3657;
}
.flights__row {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border-bottom: max(1px, calc(2 * var(--u))) solid #2d3657;
  font: 400 calc(15 * var(--u))/1.2 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.flights__row dd { margin: 0; color: #ffc94a; text-align: right; }
.is-journey .board--departures .board__legs { height: calc(70 * var(--u)); padding-inline: 22%; }
.is-journey .board--departures .board__legs::before,
.is-journey .board--departures .board__legs::after { width: calc(14 * var(--u)); border-inline-color: #2d3657; background: #3a4468; }

/* The plane rests mid-climb (no JS, reduced motion); with motion allowed, planes take off
 * from the runway in a forward-only, time-based loop (js/scenes/scene-12-airport.js). */
.ap-plane { transform: rotate(-10deg); transform-origin: 50% 60%; }

/* Finale · Let's work together (redesigned in the 5F corrections): no board — the copy is
 * set large in the sunrise sky. Journey: placed in the final view, left of the sun.
 * Stacked: a full-width band of night-blue sky above the illustration. */
.finale-copy {
  --fc-ink: #fff;
  --fc-soft: rgba(255, 255, 255, 0.86);
  position: relative;
  padding: 40px max(16px, calc((100% - 40rem) / 2)) 36px;
  background: linear-gradient(#111a47, #2a3176);
  color: var(--fc-ink);
}
.finale-copy__eyebrow {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font: 400 calc(14 * var(--u))/1.3 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-soft);
}
.finale-copy__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink-strong);
  font-size: calc(12 * var(--u));
  letter-spacing: 0;
}
.finale-copy__title {
  margin-top: calc(14 * var(--u));
  font: 400 clamp(2.75rem, 11vw, 4.5rem)/0.95 var(--font-display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.finale-copy__accent { color: var(--yellow); }
.finale-copy__lead {
  max-width: 34em;
  margin-top: calc(14 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.35;
}
.finale-copy__ctas { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); margin-top: calc(22 * var(--u)); }
.finale-copy__cta {
  min-height: max(44px, calc(52 * var(--u)));
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  font-size: calc(19 * var(--u));
}
.finale-copy__cta.btn--primary { border-color: var(--yellow); box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.35); }
.finale-copy__cta--ghost { border-color: #fff; color: #fff; background: rgba(17, 26, 71, 0.35); }
.finale-copy__cta--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.finale-copy .btn:focus-visible,
.finale-copy__services a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.finale-copy__services {
  margin-top: calc(20 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.finale-copy__label {
  font: 400 calc(12 * var(--u))/1.2 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-soft);
}
.finale-copy__services ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 * var(--u)) calc(18 * var(--u));
  margin: calc(6 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.finale-copy__services a {
  display: inline-block;
  min-height: 24px;
  padding-block: calc(3 * var(--u));
  font-size: calc(15.5 * var(--u));
  line-height: 1.3;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(248, 216, 16, 0.75);
  text-decoration-thickness: max(1px, calc(2 * var(--u)));
  text-underline-offset: calc(4 * var(--u));
}
.finale-copy__services a:hover { text-decoration-color: #fff; }

/* Journey: in the final view's sky, left of the sun, clear of the header and the horizon. */
.is-journey .finale-copy {
  position: absolute;
  top: calc(70 * var(--u));
  left: calc((var(--scene-w) - var(--view-w, 1280) + var(--view-w, 1280) * 0.06) * var(--u));
  width: calc(min(660, var(--view-w, 1280) * 0.58) * var(--u));
  padding: 0;
  background: none;
  text-shadow: 0 1px calc(14 * var(--u)) rgba(10, 14, 48, 0.45);
}
.is-journey .finale-copy__title { font-size: calc(72 * var(--u)); }
/* A soft pool of night behind the copy, so it reads over the brightest sky (no box). */
.is-journey .finale-copy::before {
  content: '';
  position: absolute;
  inset: calc(-60 * var(--u)) calc(-120 * var(--u)) calc(-50 * var(--u)) calc(-140 * var(--u));
  z-index: -1;
  background: radial-gradient(closest-side, rgba(14, 20, 60, 0.5), rgba(14, 20, 60, 0));
  pointer-events: none;
}

/* Morning and afternoon (device-time light): the white copy sits on a night-blue panel,
 * like the stacked finale's band, so it reads over the bright day sky. */
html.is-journey[data-lights="off"] .finale-copy {
  margin-left: calc(-28 * var(--u));
  padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(17, 26, 71, 0.86);
  text-shadow: none;
}
html.is-journey[data-lights="off"] .finale-copy::before { content: none; }
/* At night the sun is not out: the moon is in the sky, and the light on the water is its. */
html[data-daylight="night"] .fn-sun { display: none; }
html[data-daylight="night"] .fn-path { opacity: 0.55; }

/* The final view: the finale's last screen, where the skyline, the sun and its path on the
 * water are composed (--sun-at: the sun's and the pylon's place across it). The journey sets
 * --view-x/--view-w (js/scenes/scene-13-finale.js); stacked, it sits around --scene-focus. */
.finale-view {
  --sun-at: 0.72;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--view-x, 1700) * var(--a));
  width: calc(var(--view-w, 1280) * var(--a));
  pointer-events: none;
}

/* Stacked: the plane flies lower, clear of the board above the scene. */
html:not(.is-journey) .ap-plane { bottom: calc(330 * var(--a)); }
/* Stacked finale: the sunrise sky continues from the copy's night blue down to the horizon
 * (the stage's top is tucked under the copy; the horizon is at 79% of the stage). */
html:not(.is-journey) .scene--finale .scene__stage {
  background: linear-gradient(to bottom, #2a3176 0%, #3b3a80 38%, #7a5592 58%, #d9837f 70%, #f8b382 76%, #ffd29a 80%);
}
/* With the device-time light, the finale shares the journey's sky like every other scene. */
html[data-daylight]:not(.is-journey) .scene--finale .scene__stage { background: none; }