/* ==========================================================================
   devanshi jain — front page
   A full-bleed moving image; the index on the right; each section opens as
   text on the left over the blurred image. Light + bold italic, lowercase.
   ========================================================================== */

/* Brand fonts are declared in fonts.css (shared with the other front-end pages). */

:root {
  --frost: #f4f2ec;
  --frost-soft: rgba(244, 242, 236, 0.86);
  --ground: #3a3b39;
  --font: "Avenir", "Avenir Next", "Nunito Sans DJ", "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Playfair Display", Georgia, serif;

  --edge-x: clamp(16px, 2.4vw, 38px);   /* left/right page margin */
  /* proportions taken from the homepage concept (1586×992 artboard) */
  --edge-y: clamp(18px, 5.6vh, 64px);   /* bottom margin */
  --side: clamp(20px, 3.4vw, 64px);     /* shared left edge: logo, popups, footer */
  --logo-w: clamp(104px, 7.4vw, 136px); /* restrained, editorial */
  --right: clamp(20px, 4.2vw, 76px);    /* shared right edge: index numbers + sound */
  --text: 16px;                         /* one text size for the whole front page (popup copy, index, footer, sound) */
  --ease: cubic-bezier(.22, .61, .25, 1);
  --slow: 1.3s;
  color-scheme: dark;
}

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

/* no grey/blue flash when tapping on phones (keyboard focus still shows via :focus-visible) */
html { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--ground);
  color: var(--frost);
  font-family: var(--font);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, button { color: inherit; font: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { text-decoration: none; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 1px dotted var(--frost); outline-offset: 4px; }

/* ---------- stage: moving image ---------- */

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--ground); }
.stage__media {
  position: absolute; inset: -4%;
  transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease);
  will-change: filter, transform;
}
.stage__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-media .stage__media {
  /* until the film is uploaded: a soft stone + daylight study */
  background:
    radial-gradient(ellipse 30% 42% at 50% 34%, rgba(214, 222, 205, .55), transparent 70%),
    radial-gradient(ellipse 34% 14% at 51% 66%, rgba(54, 54, 52, .85), transparent 72%),
    linear-gradient(180deg, #8f918e 0%, #a6a8a4 38%, #7c7e7b 62%, #5d5f5c 100%);
}
.stage__veil {
  position: absolute; inset: 0;
  background: rgba(24, 25, 23, 0.08); /* the film stays clear and bright */
  transition: background var(--slow) var(--ease);
}
.is-blurred .stage__media { filter: blur(26px) saturate(.85); transform: scale(1.06); }
.is-blurred .stage__veil { background: rgba(24, 25, 23, 0.40); }

/* optional overlay ('overlay' in content/home.php): deepens the edges where text sits,
   keeps the centre of the film clear */
.stage__veil::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--slow) var(--ease);
  background:
    linear-gradient(90deg, rgba(20, 20, 18, .42) 0%, rgba(20, 20, 18, .14) 30%, rgba(20, 20, 18, .06) 50%, rgba(20, 20, 18, .14) 70%, rgba(20, 20, 18, .42) 100%),
    linear-gradient(0deg, rgba(20, 20, 18, .34) 0%, rgba(20, 20, 18, 0) 32%),
    linear-gradient(180deg, rgba(20, 20, 18, .22) 0%, rgba(20, 20, 18, 0) 22%);
}
.has-overlay .stage__veil::after { opacity: 1; }

/* ---------- chrome (logo, index, footer, sound) ---------- */

.chrome { transition: opacity 1s var(--ease) .35s, visibility 0s linear 1.35s; }
/* the film is bright and changes frame to frame: a soft, wide shadow keeps light type legible
   without reading as an effect */
.index, .foot, .chapter-bar, .sound, .film-toggle { text-shadow: 0 0 14px rgba(20, 20, 18, .30), 0 1px 2px rgba(20, 20, 18, .16); }
.foot__icons svg, .sound__wave { filter: drop-shadow(0 0 6px rgba(20, 20, 18, .28)); }
.is-intro .chrome { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s; }
body:not(.is-intro) .chrome { opacity: 1; visibility: visible; transition-delay: .35s, 0s; }

.logo { position: fixed; z-index: 4; top: clamp(18px, 5.3vh, 60px); left: var(--side); }
.logo a { display: block; }
/* optional ('logo_haze' in content/home.php): a soft light haze behind the wordmark only,
   so its dark script reads on the film. Fades with the logo; the logo file is untouched. */
/* Part of the overlay, not a shape around the logo: a wide, soft light falling from the
   screen's top-left corner, so there is no visible edge or glow on any film. */
.has-logo-haze .stage__veil::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* above the edge overlay (::after) */
  background: radial-gradient(ellipse 80% 70% at 0% 0%,
    rgba(244, 242, 236, .44) 0%, rgba(244, 242, 236, .30) 18%, rgba(244, 242, 236, .14) 42%, rgba(244, 242, 236, .04) 70%, rgba(244, 242, 236, 0) 100%);
}
/* the original wordmark's ink starts 2/600 in; pull it back so it lines up with the footer */
.logo img { display: block; width: var(--logo-w); height: auto; margin-left: calc(var(--logo-w) * -2 / 600); }
.logo__text {
  display: block;
  font-family: var(--serif); font-style: normal; font-weight: 300;
  font-size: clamp(24px, 2.25vw, 32px); line-height: 1; letter-spacing: 0.16em;
  color: var(--frost-soft);
}

/* right-hand index */
.index {
  position: fixed; z-index: 4;
  top: clamp(64px, 9vh, 100px); right: var(--right);
  font-size: var(--text); line-height: 1.45;
}
.index li + li { margin-top: clamp(10px, calc(6.15vh - 1.45em), 40px); }
.index a {
  display: flex; align-items: baseline; justify-content: flex-end; gap: clamp(18px, 1.8vw, 32px);
  letter-spacing: 0.03em;
  transition: opacity .3s;
}
.index__label { transition: font-weight .2s; }
/* numbers: bold, a touch smaller than the labels */
.index__num { font-weight: 700; font-size: .9em; letter-spacing: .04em; min-width: 1.5em; text-align: right; font-variant-numeric: tabular-nums; }
.index a[aria-current="true"] .index__label { font-weight: 700; }
@media (hover: hover) { .index a:hover .index__label { font-weight: 700; } }
.has-panel .index a:not([aria-current="true"]) { opacity: .78; }

/* bottom-left */
.foot { position: fixed; z-index: 4; left: var(--side); bottom: var(--edge-y); }
.foot__icons { display: flex; gap: clamp(26px, 2.4vw, 40px); margin-bottom: clamp(12px, 1.6vh, 20px); }
.foot__icons a { display: block; opacity: .95; transition: opacity .2s; }
@media (hover: hover) { .foot__icons a:hover { opacity: 1; } }
.foot__icons a[aria-disabled="true"] { cursor: default; }
.foot__icons svg { display: block; width: clamp(18px, 1.45vw, 24px); height: auto; }
.foot__links li { font-size: var(--text); line-height: 1.7; letter-spacing: 0.05em; }
/* 360° film: the canvas fills the stage; the source video is hidden unless WebGL is missing */
.stage__flat { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.no-sphere .stage__flat { position: static; width: 100%; height: 100%; opacity: 1; object-fit: cover; }
.no-sphere [data-sphere] { display: none; }
body:not(.is-intro) [data-sphere] { cursor: grab; }
body:has([data-sphere]) { touch-action: none; }
/* pause/play for the film, one line above the sound control */
.film-toggle {
  position: fixed; z-index: 4; right: var(--right); bottom: calc(var(--edge-y) + 1.7 * var(--text) + 8px);
  font-size: var(--text); line-height: 1.7; letter-spacing: 0.12em;
}
@media (hover: hover) { .film-toggle:hover { opacity: .85; } }
/* chapter pages: note / objects / index in one row along the bottom, evenly spaced —
   note on the left edge, objects centred, index on the right edge */
.chapter-bar { position: fixed; z-index: 4; left: var(--side); right: var(--right); bottom: var(--edge-y); }
.chapter-bar ul { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; }
.chapter-bar li { font-size: var(--text); line-height: 1.7; letter-spacing: 0.05em; }
.chapter-bar li:nth-child(2) { text-align: center; }
.chapter-bar li:last-child { text-align: right; }
.chapter-bar__link { position: relative; display: inline-block; -webkit-user-select: none; user-select: none; }
.chapter-bar__link::after { content: ""; position: absolute; inset: -11px -16px; }   /* finger-sized tap area */
.chapter-bar__link[aria-current="true"] { font-weight: 700; }                     /* 'note' while its text is open */
@media (hover: hover) { a.chapter-bar__link:hover { opacity: .8; } }
@media (hover: none) { a.chapter-bar__link:active { opacity: .55; } }


/* bottom-right */
.sound {
  position: fixed; z-index: 4; right: var(--right); bottom: var(--edge-y);
  display: flex; align-items: center; gap: clamp(16px, 1.7vw, 28px);
  font-size: var(--text); line-height: 1.7; letter-spacing: 0.12em; word-spacing: 0.25em;
}
@media (hover: hover) { .sound:hover { opacity: .85; } }
/* waveform: five hairline bars that breathe while the music plays */
.sound__wave { display: block; width: clamp(22px, 1.9vw, 30px); height: auto; overflow: visible; }
.sound__wave line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.sound[aria-pressed="true"] .sound__wave line { animation: wave 1.4s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(2) { animation-delay: -.5s; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(3) { animation-delay: -.9s; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(4) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound__wave line:nth-child(5) { animation-delay: -1.1s; }
.sound[aria-pressed="false"] .sound__wave line { transform: scaleY(.35); transition: transform .4s var(--ease); }
@keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }

/* inert links whose pages come later */
.is-soon { cursor: default; }

/* ---------- panels (intro + sections) ---------- */

.panel {
  position: fixed; z-index: 3; inset: 0 auto 0 0;
  display: flex; align-items: center;
  padding: 4vh 0 0 var(--side); /* same left edge as the logo + footer */
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s; /* CLOSE_MS in site.js */
}
.panel.is-open { opacity: 1; visibility: visible; transition: opacity .9s var(--ease) .15s, visibility 0s; }
.panel[hidden] { display: flex; } /* keep layout for the fade; visibility does the hiding */

.panel__inner {
  pointer-events: auto;
  font-size: var(--text);
  line-height: 1.55;
  letter-spacing: 0.01em;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: none;
  transform: translateY(8px);
  transition: transform .9s var(--ease);
}
.panel__inner::-webkit-scrollbar { display: none; }
.panel.is-open .panel__inner { transform: none; }
.panel__inner p + p { margin-top: 1.05em; }
.panel__inner b { font-weight: 700; } /* 'bolder' from Light only reaches 400, which the brand fonts don't have */
/* chapter popups: heading, with its subtitle (the year) right under it, at the one text size */
.panel__head { margin-bottom: 1.05em; }
.panel__title { font-size: inherit; font-weight: 700; letter-spacing: inherit; line-height: inherit; margin: 0; }
.panel__inner .panel__sub { margin: 0; }

.panel--section .panel__inner { width: min(25.5em, 50vw); }
.panel--medium .panel__inner { width: min(29em, 54vw); }
.panel--wide .panel__inner { width: min(34em, 58vw); }

.panel--intro { align-items: flex-start; padding-top: 45vh; padding-left: var(--side); }
.panel--intro .panel__inner { width: min(20.8em, 86vw); max-height: none; }
.is-intro .panel--intro { opacity: 1; visibility: visible; transition: none; }

.enter, .panel__link { font-weight: 700; }
.enter { font-size: inherit; letter-spacing: inherit; }
@media (hover: hover) { .enter:hover, a.panel__link:hover { opacity: .8; } }
.panel__links { margin-top: 1.05em; }

/* a small hairline × at the popup's top-right corner */
.panel--section .panel__inner { position: relative; padding-top: 2.6em; }
.panel__close {
  position: absolute; top: 0; right: 0;
  display: grid; place-items: center end; width: 28px; height: 28px;
  opacity: .85; transition: opacity .2s;
}
@media (hover: hover) { .panel__close:hover { opacity: 1; } }
.panel__close svg { display: block; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(20, 20, 18, .3)); }

/* ---------- phones ---------- */

@media (max-width: 719px) {
  :root { --edge-x: 20px; --side: 24px; --logo-w: 104px; --right: 24px; --text: 13px; --edge-y: max(22px, env(safe-area-inset-bottom)); }
  .logo { top: 22px; }
  .index { top: 112px; }
  .index li + li { margin-top: 9px; }
  .index { line-height: 22px; }
  .index a { gap: 12px; }
  .foot__icons { gap: 26px; margin-bottom: 10px; }
  .foot__icons svg { width: 17px; }
  .foot__links li { line-height: 24px; }
  .sound { gap: 12px; line-height: 24px; }
  .sound__wave { width: 20px; }

  /* sections become a full-height reading sheet over the blurred film,
     centred top to bottom (margin auto keeps long text scrollable from its start) */
  .panel--section { inset: 0; padding: 96px 52px 72px var(--side); align-items: flex-start; overflow-y: auto; }
  .panel--section .panel__inner,
  .panel--medium .panel__inner,
  .panel--wide .panel__inner { width: 100%; max-height: none; overflow: visible; margin: auto 0; line-height: 1.65; }
  body.has-panel .index,
  body.has-panel .foot,
  body.has-panel .chapter-bar,
  body.has-panel .sound { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s; }
  /* No slide on phones: a transformed parent would make the fixed × move with the text
     (it appeared down in the copy, then jumped to the corner). Popups simply fade. */
  .panel--section .panel__inner,
  .panel.is-open .panel__inner { transform: none; transition: none; }
  /* phones: the × sits in the screen's top-right corner, level with the logo */
  .panel--section .panel__inner { padding-top: 0; }
  .panel__close { position: fixed; top: 16px; right: 24px; width: 40px; height: 40px; z-index: 5; }
  .panel__close svg { width: 11px; height: 11px; }

  .panel--intro { padding: 0 52px 0 var(--side); align-items: center; }
  .panel--intro .panel__inner { line-height: 1.65; padding-top: 8vh; }
}

/* short landscape screens */
@media (max-height: 520px) and (min-width: 720px) {
  .index { top: 70px; }
  .index li + li { margin-top: 2px; }
  .foot__icons { margin-bottom: 6px; }
  .panel--intro { padding-top: 28vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- a fine, still grain over a still photo (chapter vi), like texture in the paper: it hides
   the compression of a soft photo and lets it read as a print. It never moves (moving, it flickered). */
.has-grain .stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("/assets/site/grain.png") repeat; background-size: 192px 192px;
  opacity: .2; mix-blend-mode: overlay;
}

/* ---------- installation (chapter vi): pieces laid on the photo ----------
   installation.js sets each piece's box; here they only fade in after 'discover'. */
.pieces { position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: opacity var(--slow) var(--ease), filter var(--slow) var(--ease); }
.is-intro .pieces { opacity: .35; filter: blur(26px); }
.piece {
  position: absolute; display: block; padding: 0; pointer-events: auto; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.is-intro .piece { pointer-events: none; }
.piece img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.piece:focus-visible { outline-offset: -4px; }
/* pieces that are part of the photo: invisible, with a finger-sized area even when small */
.piece:not(:has(img))::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* now and then, a faint drop lands on a piece: two hairline rings, slow, like water on ice */
.piece__drop {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(252, 252, 250, .75); box-shadow: 0 0 1px rgba(30, 34, 36, .25);
  transform: scale(.15); opacity: 0; animation: drop-fall 2.6s cubic-bezier(.2, .6, .3, 1) forwards;
}
.piece__drop::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(252, 252, 250, .6);
  transform: scale(.4); opacity: 0; animation: drop-fall-2 2.6s cubic-bezier(.2, .6, .3, 1) .35s forwards;
}
@keyframes drop-fall { 0% { transform: scale(.15); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes drop-fall-2 { 0% { transform: scale(.4); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(1.1); opacity: 0; } }
/* a single hairline ring spreads from the piece, like a drop on water */
.piece__ripple {
  position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(244, 242, 236, .85); box-shadow: 0 0 1px rgba(30, 34, 36, .3); transform: translate(-50%, -50%) scale(.2);
  pointer-events: none; animation: drop-ripple 1.1s var(--ease) forwards;
}
@keyframes drop-ripple { to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.pieces__hint {
  position: fixed; z-index: 4; left: var(--side); top: 52%; max-width: 15em;
  font-size: var(--text); font-weight: 700; line-height: 1.45;
  text-shadow: 0 0 14px rgba(20, 20, 18, .35), 0 1px 2px rgba(20, 20, 18, .2);
  opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none;
}
.pieces__hint.is-shown { opacity: 1; }
@media (max-width: 719px) { .pieces__hint { top: auto; bottom: calc(var(--edge-y) + 64px); } }

/* ---------- tap & click feel (all front-end pages) ----------
   Finger-sized tap areas without moving anything: an invisible ::after around each small
   control (sized so neighbours don't overlap), hover only on devices that really hover,
   a soft dim while pressed, no double-tap zoom, and no accidental text selection on controls. */
a, button, [data-section] { touch-action: manipulation; }
.index, .foot, .chapter-bar, .sound, .film-toggle, .enter, .panel__close, .panel__link, .logo { -webkit-user-select: none; user-select: none; }
/* (.sound and .film-toggle are position: fixed already, which anchors their ::after) */
.index a, .foot__icons a, .foot__link, .enter, .panel__link, .logo a { position: relative; }
.index a::after, .foot__icons a::after, .foot__link::after,
.sound::after, .film-toggle::after, .enter::after, .panel__link::after, .logo a::after { content: ""; position: absolute; }
.index a::after { inset: -5px -14px -5px -14px; }          /* fills the row, rows don't overlap */
.foot__icons a::after { inset: -12px -12px; }              /* 17px icon → 41px */
.foot__link { display: inline-block; }
.foot__links li + li .foot__link::after, .foot__link::after { inset: -3px -12px; }   /* stacked lines touch, never overlap */
.foot__links li:first-child:last-child .foot__link::after { inset: -11px -14px; }  /* a single line gets the full height */
.sound::after { inset: -9px -10px; }
.film-toggle::after { inset: -10px -10px -3px; }           /* stops short of the sound control below */
.enter::after, .panel__link::after { inset: -11px -14px; }
.panel--intro .panel__inner { overflow: visible; }      /* the intro never scrolls; don't clip enter's tap area */
.logo a::after { inset: -8px -8px; }
@media (hover: none) {
  .index a:active, .foot__icons a:active, .foot__link:active, .sound:active,
  .film-toggle:active, .enter:active, .panel__link:active, .panel__close:active, .logo a:active { opacity: .55; transition: opacity 0s; }
}