/* Ava — a story-book. Claret cloth, gold foil, ivory plates. */

:root {
  --cloth: #6f2438;
  --cloth-deep: #521a2a;
  --gold: #c9a34d;
  --gold-bright: #e8c97a;
  --paper: #f6efe1;
  --paper-shade: #e9dfc9;
  --ink: #3b3128;
  --ink-soft: #6d5f50;
  --accent: #a34a63;
  --ground-a: #241a20;
  --ground-b: #43282f;
  --serif-display: "Didot", "Bodoni MT", "Baskerville", "Hoefler Text", Georgia, serif;
  --serif-body: Georgia, "Iowan Old Style", "Palatino", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: radial-gradient(120% 90% at 50% 20%, var(--ground-b) 0%, var(--ground-a) 70%);
  color: var(--ink);
  font-family: var(--serif-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#book {
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- sheets ---------- */

.sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  perspective: 2600px;
  perspective-origin: left center;
  isolation: isolate;
  pointer-events: none;
}

/* JS adds .moving only while a sheet is flipping or being dragged. The two
   faces get their own compositor layers only for that interval. */
.sheet.moving .face { will-change: transform; }

#book.single .sheet { width: 100%; }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  /* soft, non-periodic fibre wash — no repeating period, so it cannot
     alias into stripes while the sheet is rotating */
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(59, 49, 40, .022), transparent 60%),
    radial-gradient(100% 70% at 82% 38%, rgba(59, 49, 40, .018), transparent 55%),
    radial-gradient(140% 90% at 40% 88%, rgba(59, 49, 40, .02), transparent 65%),
    var(--paper);
  border-radius: 3px 8px 8px 3px;
  pointer-events: auto;
}

.face.front {
  transform-origin: left center;
  transform: rotateY(0deg);
}

.face.back {
  left: auto;
  right: 100%;
  width: 100%;
  transform-origin: right center;
  transform: rotateY(180deg);
  border-radius: 8px 3px 3px 8px;
}

/* Gutter shading only. The paper grain used to be a 5px-period
   repeating-linear-gradient; under rotateY it beat against the device pixel
   grid and read as harsh horizontal stripes, so the grain is now the
   non-periodic wash on .face above. */
.face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(59, 49, 40, .16) 0, rgba(59, 49, 40, .045) 6%, transparent 13%);
  z-index: 3;
}
.face.back::before {
  background: linear-gradient(to left, rgba(59, 49, 40, .16) 0, rgba(59, 49, 40, .045) 6%, transparent 13%);
}
#book.single .face::before,
#book.single .face.back::before {
  background: linear-gradient(to right, rgba(59, 49, 40, .12) 0, transparent 9%);
}

/* dynamic flip shade (JS drives --shade 0..1) */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left, rgba(30, 20, 14, .5), rgba(30, 20, 14, 0) 60%);
  opacity: var(--shade, 0);
  transition: opacity var(--shade-duration, 0ms) cubic-bezier(.35,.1,.22,1);
  z-index: 4;
}

/* stack edge illusion under the block */
#book.spread.closed-front::after { left: calc(50% - 7px); }
#book.spread.closed-back::after { right: calc(50% - 7px); }
#book::after {
  content: "";
  position: absolute;
  inset: -4px -7px -9px -7px;
  z-index: -1;
  border-radius: 6px 12px 12px 6px;
  background:
    linear-gradient(var(--cloth-deep), var(--cloth-deep)) ,
    var(--cloth);
  box-shadow:
    0 30px 45px rgba(0, 0, 0, .55),
    inset 0 -4px 0 rgba(0, 0, 0, .35),
    inset 4px 0 6px rgba(255, 255, 255, .06);
}

/* ---------- page content ---------- */

.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 1.05);
}

.folio {
  font-family: var(--serif-display);
  font-size: calc(var(--u) * 1.5);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: normal;
  text-align: center;
  max-width: 100%;
  line-height: 1.25;
}

.folio.long { font-size: calc(var(--u) * 1.14); letter-spacing: .08em; }

.folio::after {
  content: "";
  display: block;
  width: calc(var(--u) * 6);
  height: 1px;
  margin: calc(var(--u) * .7) auto 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.plate {
  width: 100%;
  background: #fff;
  padding: calc(var(--u) * .55);
  box-shadow: 0 2px 10px rgba(59, 49, 40, .28);
  transform: rotate(-.4deg);
}

.plate img, .plate video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-shade);
}

.caption {
  max-width: 92%;
  text-align: center;
  color: var(--ink);
  line-height: 1.5;
}

/* ---------- collage ---------- */

.collage { position: relative; width: 100%; }
.collage.overlap { margin-bottom: calc(var(--u) * 1.9); }

.ph {
  background: #fff;
  padding: calc(var(--u) * .42) calc(var(--u) * .42) calc(var(--u) * .95);
  box-shadow: 0 3px 12px rgba(59, 49, 40, .32);
  transform: rotate(var(--r, -1.2deg));
}

.ph img { display: block; width: 100%; height: auto; background: var(--paper-shade); }

.ph.main { width: 86%; margin-inline: auto; }

.ph.side {
  position: absolute;
  width: 38%;
  right: calc(var(--u) * -.3);
  bottom: calc(var(--u) * -2.1);
  z-index: 2;
}

.ph.side.left { right: auto; left: calc(var(--u) * -.3); }

/* washi tape strips */
.tape { position: relative; }
.tape::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * -.5);
  left: 50%;
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 1.05);
  transform: translateX(-50%) rotate(-3.5deg);
  background: color-mix(in srgb, var(--gold) 38%, transparent);
  box-shadow: 0 1px 2px rgba(59, 49, 40, .18);
  z-index: 3;
}
.ph.side.tape::before { transform: translateX(-50%) rotate(4deg); }

.caption p + p { margin-top: calc(var(--u) * .6); }

.quote {
  font-family: var(--serif-display);
  font-size: calc(var(--u) * 1.5);
  font-style: italic;
  color: var(--accent);
}

.aside { font-style: italic; color: var(--ink-soft); font-size: calc(var(--u) * .92); }

/* ---------- cover ---------- */

.cover {
  background:
    radial-gradient(140% 110% at 30% 0%, rgba(255, 255, 255, .07), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--cloth) 0%, var(--cloth-deep) 100%);
}

.cover-frame {
  position: absolute;
  inset: calc(var(--u) * 1.6);
  border: 1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  outline: 3px double color-mix(in srgb, var(--gold) 45%, transparent);
  outline-offset: calc(var(--u) * .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2);
}

.cover h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: calc(var(--u) * 7.5);
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(232, 201, 122, .25);
}

.cover-rule {
  width: calc(var(--u) * 10);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.cover-fleuron { color: var(--gold); font-size: calc(var(--u) * 1.6); }
.cover-fleuron.dark { color: var(--accent); }

.cover-sub {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: calc(var(--u) * 1.7);
  letter-spacing: .1em;
  color: var(--gold);
}

.cover-byline {
  font-family: var(--serif-body);
  font-size: calc(var(--u) * .95);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 75%, #fff 10%);
}

.back-cover .cover-frame {
  border: none;
  outline: none;
  text-align: center;
}

/* ---------- dedication / end card ---------- */

.dedication {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  text-align: center;
}

.ded-line {
  font-family: var(--serif-display);
  font-size: calc(var(--u) * 2.3);
  line-height: 1.3;
  color: var(--ink);
}

.endcard .ded-line { color: var(--accent); }

.ded-body { max-width: 78%; line-height: 1.6; color: var(--ink-soft); }

.ded-sign {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: calc(var(--u) * 1.4);
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- press cuttings ---------- */

.cutting {
  position: relative;
  width: min(72%, calc(var(--u) * 22));
  transform: rotate(1.2deg);
  /* reserve room for the toggle pill that overhangs the bottom edge */
  margin-bottom: calc(var(--u) * 2.1);
}

.cutting-inner {
  position: relative;
  box-shadow: 0 3px 12px rgba(59, 49, 40, .35);
  perspective: 900px;
}

.cutting img,
.cutting video {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .45s ease;
}

.cutting-original {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
  background: #efe8d8;
  opacity: 0;
}

.cutting.show-original .cutting-original { opacity: 1; }
.cutting.show-original .cutting-cartoon { opacity: 0; }
.cutting-original.rotate-180 { transform: rotate(180deg); }

.cutting-toggle {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -1.4);
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: calc(var(--u) * .78);
  letter-spacing: .06em;
  padding: calc(var(--u) * .32) calc(var(--u) * .9);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 99px;
  background: var(--paper);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.cutting.show-original .cutting-toggle { background: var(--accent); color: var(--paper); }

.archive {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--u) * 1.2);
  width: 100%;
}

.archive .cutting { width: 30%; margin-bottom: calc(var(--u) * 1.9); }
.archive .cutting-toggle { bottom: calc(var(--u) * -1.2); }

/* tilt the paper, not the whole unit, so the toggle pills stay level */
.tilt-l .cutting-inner, .snap.tilt-l { transform: rotate(-2.3deg); }
.tilt-r .cutting-inner, .snap.tilt-r { transform: rotate(1.8deg); }
.tilt-l2 .cutting-inner { transform: rotate(-1.2deg); }

/* ---------- storybook-to-real reveals ---------- */

.story-reveal {
  transform: none;
  margin-bottom: calc(var(--u) * 1.8);
}

.story-reveal .cutting-inner {
  aspect-ratio: 16 / 9;
  padding: calc(var(--u) * .42);
  background: #fff;
}

.story-reveal .cutting-cartoon {
  height: 100%;
  object-fit: contain;
  background: linear-gradient(135deg, var(--paper-shade), #ddd0b7);
}

.story-reveal .cutting-original {
  inset: calc(var(--u) * .42);
  width: calc(100% - var(--u) * .84);
  height: calc(100% - var(--u) * .84);
  object-fit: contain;
}

.story-reveal .cutting-toggle {
  bottom: calc(var(--u) * -1.25);
}

.reveal-wide { width: min(92%, calc(var(--u) * 20)); }
.reveal-portrait { width: min(86%, calc(var(--u) * 18)); }

.growing-page {
  gap: calc(var(--u) * .5);
  padding-block: calc(var(--u) * 1.4);
}

.growing-reveals {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .5);
  width: 100%;
}

.growing-reveals .story-reveal {
  width: min(72%, calc(var(--u) * 13));
  margin-bottom: calc(var(--u) * .55);
}

.growing-reveals .story-reveal:nth-child(1) { transform: translateX(calc(var(--u) * -1.1)); }
.growing-reveals .story-reveal:nth-child(2) { transform: translateX(calc(var(--u) * 1.15)); }
.growing-reveals .story-reveal:nth-child(3) { transform: translateX(calc(var(--u) * -.45)); }

.growing-reveals .cutting-toggle {
  bottom: calc(var(--u) * -.72);
  max-width: 96%;
  padding: calc(var(--u) * .25) calc(var(--u) * .5);
  font-size: max(10px, calc(var(--u) * .62));
}

.harvester-moments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.1);
  width: 100%;
  margin-bottom: calc(var(--u) * .8);
}

.harvester-moments .story-reveal {
  width: min(69%, calc(var(--u) * 15));
  margin-bottom: calc(var(--u) * 1.6);
}

.harvester-side {
  width: 25%;
  padding: calc(var(--u) * .38) calc(var(--u) * .38) calc(var(--u) * .85);
  background: #fff;
  box-shadow: 0 3px 12px rgba(59, 49, 40, .32);
  transform: rotate(3deg);
}

.harvester-side img {
  display: block;
  width: 100%;
  height: auto;
}

.harvester-page .caption {
  max-width: 100%;
  font-size: calc(var(--u) * .86);
  line-height: 1.35;
}

/* ---------- snapshots (real photos) ---------- */

.snapshots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  width: 100%;
}

.snap {
  width: 42%;
  background: #fff;
  padding: calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * 1.6);
  box-shadow: 0 3px 12px rgba(59, 49, 40, .35);
}

.snap img { display: block; width: 100%; height: auto; }

.snapshots.three .snap { width: 30%; padding-bottom: calc(var(--u) * 1.1); }
.snap.tilt-c { transform: rotate(.6deg) translateY(calc(var(--u) * .6)); }

/* ---------- extended real-us gallery ---------- */

.real-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.35);
  width: 100%;
}

.real-gallery.two .snap {
  width: 43%;
  padding-bottom: calc(var(--u) * .9);
}

.real-gallery.two img {
  max-height: calc(var(--u) * 19);
  object-fit: contain;
}

.real-gallery.three {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: calc(var(--u) * .9) calc(var(--u) * 1.2);
  width: 86%;
}

.real-gallery.three .snap {
  width: 100%;
  padding-bottom: calc(var(--u) * .7);
}

.real-gallery.three .wide {
  grid-column: 1 / -1;
  justify-self: center;
  width: 76%;
  transform: rotate(.8deg);
}

.real-gallery.three img {
  max-height: calc(var(--u) * 12);
  object-fit: contain;
}

.real-gallery.three .wide img { max-height: calc(var(--u) * 7.2); }

/* ---------- film plate ---------- */

.plate-film { transform: none; background: #201a16; }
.plate-video video { max-height: 100%; }

/* ---------- navigation ---------- */

.nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(232, 201, 122, .4);
  color: var(--gold-bright);
  font-size: 20px;
  font-family: var(--serif-body);
  cursor: pointer;
  transition: opacity .3s, background .2s;
  /* no backdrop-filter: it forces a readback of the animating book beneath
     these buttons on every frame of a flip */
  background-color: rgba(36, 26, 32, .72);
}

.nav:hover { background: rgba(82, 26, 42, .8); }
.nav:focus-visible, .cutting-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.nav[disabled] { opacity: 0; pointer-events: none; }

#nav-prev { left: max(12px, env(safe-area-inset-left)); }
#nav-next { right: max(12px, env(safe-area-inset-right)); }

#hint {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(246, 239, 225, .55);
  transition: opacity 1s;
  pointer-events: none;
}

#hint.fade { opacity: 0; }

/* narrow screens: keep the nav arrows clear of in-page video controls */
@media (max-width: 700px) {
  .nav { top: auto; bottom: max(52px, calc(env(safe-area-inset-bottom) + 40px)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none !important; }
  .cutting img { transition: none; }
}