/* =============================================================================
   centres-scroll.css — the centres, as one fall of names.

   White letters on a black frame. The first letters hang in a diagonal and
   drop one after another, each straight down its own column with a trail of
   tiny squares behind it; where each stops, its name opens out to the right
   behind a bar that runs ahead of it, and an ember pin lights to its left.

   The previous version was one centre to a screen — a stage that emptied
   and refilled — which is a slideshow, and was the wrong thing. This is one
   sheet, much taller than the frame, with every name on it in its own
   place; the frame travels down it. Everything is placed and moved by
   js/centres-scroll.js, in pixels, as a function of the scroll.
   ========================================================================== */

.cn { position: relative; background: #000; }
.cn-run { position: relative; }            /* height set by js from the number of centres */
.cn-hold {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; background: #000;
}

/* the frame's view of the sheet: moved up as the camera comes down; faded
   up behind the opening word as that goes (js/centres-scroll.js) */
.cn-sheet {
  position: absolute; left: 0; top: 0; width: 100%;
  transform: translate3d(0, var(--cam, 0px), 0);
  will-change: transform;
}

/* One setting for every letter on the sheet: the site's display face at its
   standard weight, upright capitals, and a glow made of text-shadow — never a
   filter, and never a gradient clipped to the text, which cannot take one
   (HANDOFF §8.1). */
.cn-drops, .cn-names {
  position: absolute; left: 0; top: 0; width: 100%;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  /* 5vw: Syne's capitals are wide — AHMEDABAD is 800 px of a 1440 px
     screen at this size — and at 5vw the first run holds five names, the
     diagonal in the reference; at 6vw it held three */
  font-size: clamp(2.1rem, 5vw, 7rem); line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 .03em #fff, 0 0 .14em rgba(255, 255, 255, .6),
               0 0 .38em rgba(255, 255, 255, .3), 0 0 .9em rgba(255, 255, 255, .14);
}
/* the falling letters go BEHIND the names already written: a letter drops
   straight down its column, and the name above it has usually run out over
   that column by then, so it passes behind the words, not over them */
.cn-drops { z-index: 2; }
.cn-names { z-index: 3; }
.cn-trail { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }

.cn-drop, .cn-item {
  position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap;
}
.cn-drop {
  display: block;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  will-change: transform;
}
.cn-item { transform: translate3d(var(--x, 0px), var(--y, 0px), 0); }
/* Under the pointer the LETTERS of a written name lift: they step up and to
   the left, a hard copy of them in deep gold stays behind where they were,
   and their glow turns from white to the gold neon of the figures on the
   Amrit Yatra page, with the same flicker of a tube warming up. There is no
   box: the previous version put the offset shadow on the black band the name
   stands on, so it came out the shape of the band, a rectangle. Now the
   shadow is text-shadow, the shape of the letters. */
.cn-lead, .cn-tail {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .4s ease, text-shadow .45s ease;
}
.cn-item.is-open:hover { z-index: 4; }
.cn-item.is-open:hover .cn-lead, .cn-item.is-open:hover .cn-tail {
  transform: translate(-.06em, -.06em);
  color: #fff3c4;
  text-shadow:
    .07em .07em 0 #9a6a1c,
    0 0 .04em #fff,
    0 0 .1em  rgba(255, 228, 140, .95),
    0 0 .22em rgba(250, 205, 95, .85),
    0 0 .45em rgba(232, 180, 60, .6),
    0 0 .9em  rgba(201, 150, 40, .38);
  animation: cnNeon 2.6s ease-in-out .45s infinite;
}
@keyframes cnNeon {
  0%, 100% { opacity: 1; }
  4%       { opacity: .82; }
  6%       { opacity: 1; }
  50%      { opacity: .93; }
}
/* A written name stands on a band of black the height of its capitals. A
   letter still falling drops straight down its own column, and the names
   above it have usually run out over that column by then; without the band
   it showed through the gaps between their letters and read as part of
   them — measured, the D of DELHI going down through BENGALURU spelled
   BERGALURU. With it the letter, and its trail, pass behind the word and
   come out underneath. The glow is text-shadow, which is painted with the
   text and so over the band, never under it. */
.cn-item::before {
  content: ""; position: absolute; left: -.08em; right: -.08em;
  top: var(--band-t, 0px); height: var(--band-h, 1em);
  background: #000; visibility: hidden;
}
.cn-item.is-open::before { visibility: visible; }
/* the letter that fell is the first letter of the name once it has landed */
.cn-lead { display: inline-block; visibility: hidden; }
.cn-item.is-open .cn-lead { visibility: visible; }
.cn-lead, .cn-tail { position: relative; }

/* The rest of the name, uncovered from the left behind the trailing edge of
   the bar. Its clip is the one thing a clip is right for here: it has a bar
   standing over its edge the whole time it is cut, so the edge is never
   seen, and it is taken off (clip-path: none) the moment the bar has gone,
   so the finished word's glow is never cut at all. */
.cn-tail { display: inline-block; visibility: hidden; }
.cn-item.is-open .cn-tail { visibility: visible; }

/* The bar: the slide-reveal from landonorris.com. A solid block of the
   accent colour, cap-height, whose leading edge runs out to the end of the
   name first while its trailing edge follows behind uncovering the letters,
   so it shrinks to a sliver at the end of the word and is gone. */
.cn-bar {
  position: absolute; z-index: 1; left: 0; top: 0; height: 1px; width: 0;
  background: var(--gold-bright, #e8be5a);
  box-shadow: 0 0 .5em rgba(232, 190, 90, .35);
  pointer-events: none;
}

/* the pin: one assets/ember-pin for each centre, faded up as its name opens */
.cn-pin {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  opacity: var(--o, 0);
}
/* until the fire is drawing — and if it never does — a plain gold pin */
.cn-pin::before {
  content: ""; position: absolute; inset: 12% 14% 0;
  background: url("../assets/about/pin.webp") center / contain no-repeat;
  opacity: .5; filter: sepia(1) saturate(3) hue-rotate(-14deg) brightness(1.1);
  transition: opacity .6s ease;
}
.cn-pin.ember-pin-ready::before { opacity: 0; }

/* no script: the centres as a list. With the script running the list stays
   in the page for a screen reader and is taken out of sight. */
.cn-plain {
  list-style: none; margin: 0;
  padding: clamp(3rem, 8vh, 6rem) clamp(1.4rem, 7vw, 7rem);
  max-width: 70rem;
}
.cn-plain li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem;
  padding: 1.1rem 0; border-bottom: 1px solid rgba(244, 234, 208, .1);
}
.cn-plain b {
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 2.2rem); color: #f4ead0;
}
.cn-plain span {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244, 234, 208, .45);
}
.cn:not(.cn-live) .cn-run { display: none; }
.cn.cn-live .cn-plain {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the bands ──────────────────────────────────────────────────────────────
   One across the empty half of the frame for each of the first two runs of
   names, on the slant of the fall: a pair of lines, and between them CHIN
   चिन्मय MAYA (and then YUVA युवकेंद्र KENDRA) — the English letters grey and
   spaced wide, the Devanagari in glowing yellow. Placed, measured and drawn
   in by js/centres-scroll.js; --par carries it down a little slower than the
   names so it sits further back. Behind everything else on the sheet: a
   written name stands on its own black band, over the lines, as in the
   reference. */
.cn-band {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--bl, 800px); height: var(--bw, 90px);
  transform-origin: 0 0;
  transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) + var(--par, 0px)), 0)
             rotate(var(--ang, 36deg)) translate(-50%, -50%);
  pointer-events: none;
  /* the ends run out into nothing rather than stopping */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cn-band-l {
  position: absolute; left: 0; right: 0; height: 2px; display: block;
  background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .55);
  transform: scaleX(var(--lu, 0));
}
.cn-band-l--a { top: 0; }
.cn-band-l--b { bottom: 0; }
.cn-band-t {
  position: absolute; left: 50%; top: 50%;
  transform: translate(calc(-50% + var(--tx, 0px)), -50%);
  display: flex; align-items: center; white-space: nowrap;
}
.cn-band-c {
  display: inline-block; margin: 0 .34em;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: var(--bf, 40px); line-height: 1; color: #8e8e8e;
  text-shadow: 0 0 .22em rgba(255, 255, 255, .5), 0 0 .6em rgba(255, 255, 255, .22);
  opacity: var(--o, 0);
  transform: translateY(calc((1 - var(--o, 0)) * .45em));
}
/* The Devanagari: Tiro Devanagari Sanskrit, a book face drawn for Sanskrit,
   with a steady headline and calm, even strokes. It was Kalam, a hand
   face, which the user found too handwritten and childish (2026-09-30). */
.cn-band-s {
  display: inline-block; margin: 0 .5em;
  font-family: 'Tiro Devanagari Sanskrit', 'Nirmala UI', 'Mangal', serif; font-weight: 400;
  font-size: var(--bs, 64px); line-height: 1.3; color: #ffec5e;
  text-shadow: 0 0 .06em #fff8b0, 0 0 .22em rgba(255, 232, 70, .85),
               0 0 .6em rgba(255, 210, 40, .5), 0 0 1.2em rgba(255, 190, 30, .25);
  opacity: var(--o, 0);
  transform: scale(calc(.9 + var(--o, 0) * .1));
}

/* ── the way in ─────────────────────────────────────────────────────────────
   One word in the middle of the black: CENTERS, its letters spaced wide
   across the frame, decoded in a code face and glitched into the display
   face in white (js/centres-scroll.js plays it). A cell to a letter, the
   two faces one over the other in it, so the change happens in place. The
   first scroll pours it down onto the fall: --iy carries the word up out of
   the frame with the camera, and the streams are drawn on .cn-trail, under
   it. A glitch is the word again in both faces, in strips (.cn-slice), each
   cut by a clip and moved on its own, and a split of white and deep gold: a
   clip is right here, because a torn edge is the look (HANDOFF §8.1 is about
   a clip nobody meant to see). When it is not glitching there are no clips
   at all, so the settled word's glow is whole. */
.cn-intro {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: grid; place-items: center;
}
.cn-word {
  position: relative; margin: 0; white-space: nowrap;
  /* seven cells of 1.5em, a gap of nearly half a letter between each:
     about 88% of a laptop's width, as in the reference */
  font-size: clamp(1.4rem, min(8.4vw, 16vh), 9.5rem); line-height: 1;
  transform: translate3d(var(--gx, 0em), var(--iy, 0px), 0);
  will-change: transform;
  color: #fff;
}
.cn-row { display: flex; justify-content: center; }
.cn-l {
  display: grid; place-items: center;
  width: 1.5em; height: 1em;
}
.cn-l > span { grid-area: 1 / 1; display: block; line-height: 1; }
/* the code: a monospaced terminal face, white, a little dim until each
   letter has settled */
.cn-lc {
  font-family: 'Share Tech Mono', ui-monospace, 'Consolas', monospace; font-weight: 400;
  font-size: 1.14em;
  color: rgba(255, 255, 255, .7);
}
.cn-lc.is-set { color: #fff; text-shadow: 0 0 .1em rgba(255, 255, 255, .6), 0 0 .3em rgba(255, 255, 255, .25); }
/* the display face, in the setting of every name in the fall: Syne 800,
   white, with a glow made of text-shadow that comes up as it arrives */
.cn-lf {
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  visibility: hidden;
  color: #fff;
  text-shadow:
    0 0 calc(.03em * var(--glow, 1)) #fff,
    0 0 calc(.14em * var(--glow, 1)) rgba(255, 255, 255, .6),
    0 0 calc(.38em * var(--glow, 1)) rgba(255, 255, 255, .3),
    0 0 calc(.9em * var(--glow, 1)) rgba(255, 255, 255, .14);
}
.cn-word.is-final .cn-row--main .cn-lc { opacity: 0; }
.cn-word.is-final .cn-row--main .cn-lf { visibility: visible; }
/* the split: while it glitches, a white copy one way and a deep gold one the
   other, hard, no blur */
.cn-word.is-glitch .cn-row--main .cn-lc, .cn-word.is-glitch .cn-row--main .cn-lf {
  text-shadow: var(--split, .03em) 0 0 rgba(255, 255, 255, .8), calc(var(--split, .03em) * -1) 0 0 #9a6a1c;
}
.cn-slice {
  position: absolute; inset: 0; visibility: hidden;
  display: flex; justify-content: center;
}
.cn-slice .cn-lc { color: #fff; }
.cn-slice .cn-lf { visibility: hidden; }
.cn-slice.is-final .cn-lc { visibility: hidden; }
.cn-slice.is-final .cn-lf { visibility: inherit; }
.cn-word:not(.is-glitch) .cn-slice { visibility: hidden !important; }
.cn-cue {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 6vh, 3.4rem); transform: translateX(-50%);
  margin: 0; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700;
  font-size: .66rem; letter-spacing: .4em; text-indent: .4em; text-transform: uppercase;
  color: rgba(246, 217, 138, .85); white-space: nowrap;
  opacity: 0; transition: opacity .8s ease;
}
.cn-intro.is-ready .cn-cue { opacity: var(--cue-o, 1); }
.cn-cue::after {
  content: ""; display: block; width: 1px; height: 2.2rem; margin: .9rem auto 0;
  background: linear-gradient(rgba(246, 217, 138, .8), transparent);
  animation: cnCue 1.8s ease-in-out infinite;
}
@keyframes cnCue {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}.cn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* no motion wanted: the finished gallery, every name written and every pin
   lit, as a still picture rather than a fall; no opening word */
.cn.cn-still .cn-hold { position: relative; height: auto; }
.cn.cn-still .cn-intro { display: none; }
.cn.cn-still .cn-band { --lu: 1; }
.cn.cn-still .cn-band-c, .cn.cn-still .cn-band-s { --o: 1; }
@media (prefers-reduced-motion: reduce) {
  .cn-item { transition: none; }
}