/* =================================================================
   Swan in the Circle — single-page narrative
   Visual system from the official design handoff
   (claude.ai/design — bundle README + colors_and_type.css).

   - Dark first. Antique gold for headlines. Cream for body.
   - No rounded corners. Anywhere.
   - Cinzel for display, Cormorant Garamond for body.
   - Ceremonial motion: slow fades, no scale, no bounce.
   ================================================================= */

/* ─── Foundations: tokens ────────────────────────────────────── */
:root {
  /* heritage palette */
  --ink-black:        #0c0805;
  --ink-1:            #1a1208;  /* primary background */
  --ink-2:            #241910;  /* raised surface */
  --ink-3:            #2e2014;  /* card surface */
  --leather:          #3d2b1f;
  --leather-light:    #5a3f2c;

  --gold:             #c9a84c;
  --gold-bright:      #e0bf66;
  --gold-deep:        #8a6f2c;
  --gold-tarnish:     #6b5630;

  --cream:            #f5f0e8;
  --cream-2:          #d8cfbf;
  --cream-3:          #a59986;

  --rule:             rgba(201, 168, 76, 0.35);
  --shadow-portrait:  0 8px 30px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
  --shadow-inset:     inset 0 0 0 1px var(--leather);

  /* type families */
  --font-display:  'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  --font-serif:    'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-smallcaps:'Cormorant SC', 'Cinzel', 'Cormorant Garamond', serif;

  /* tracking */
  --track-wide:    0.08em;
  --track-wider:   0.16em;
  --track-widest:  0.24em;

  /* layout */
  --container:        1180px;
  --container-narrow: 720px;

  /* motion */
  --ease-slow: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-ceremony: 900ms;
  --dur-normal:   280ms;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; }

html {
  scroll-behavior: smooth;
}
body {
  background: var(--ink-1);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Subtle warm vignette over whole page */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(61,43,31,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(12,8,5,0.85) 0%, transparent 65%);
  background-attachment: fixed;
}

::selection { background: var(--gold); color: var(--ink-1); }

/* ─── Type roles ─────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gold);
  letter-spacing: var(--track-wide);
  line-height: 1.05;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin: 0;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin: 0;
}

.t-caption {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--gold-tarnish);
}

.t-lead {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.6;
  font-style: italic;
  color: var(--cream);
}

p { margin: 0 0 1em; }

/* ─── Ornament: line · diamond · line ────────────────────────── */
.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  margin: 22px auto;
  width: fit-content;
}
.ornament .line { width: 70px; height: 1px; background: currentColor; opacity: 0.5; }
.ornament .diamond { width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); display: inline-block; }
.ornament.flush-left { margin-left: 0; }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  padding: 16px 32px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-normal) var(--ease-slow),
              color var(--dur-normal) var(--ease-slow),
              border-color var(--dur-normal) var(--ease-slow);
  border-radius: 0;
}
.btn-solid {
  background: var(--gold);
  color: var(--ink-1);
  border: 1px solid var(--gold);
}
.btn-solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-solid:active { background: var(--gold-deep); color: var(--cream); border-color: var(--gold-deep); }
.btn-link {
  background: transparent;
  color: var(--cream);
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0;
  font-size: 11px;
}
.btn-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

a:focus-visible, button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ─── Reveal-on-scroll ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-ceremony) var(--ease-slow),
              transform var(--dur-ceremony) var(--ease-slow);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hook-line { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── Section 1 — The Hook ───────────────────────────────────── */
.hook {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 80px;
  text-align: center;
  position: relative;
}
.hook-mark {
  width: 72px;
  height: 72px;
  opacity: 0.85;
  margin-bottom: 56px;
  /* gold tint via CSS filter on white SVG */
  filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(640%) hue-rotate(2deg) brightness(95%) contrast(86%);
  animation: fade-in 1400ms var(--ease-slow) both;
}
.hook-lines {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(26px, 5.2vw, 44px);
  line-height: 1.45;
  color: var(--cream);
  max-width: 780px;
}
.hook-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: hook-fade var(--dur-ceremony) var(--ease-slow) forwards;
}
.hook-line:nth-child(1) { animation-delay: 600ms; }
.hook-line:nth-child(2) { animation-delay: 1500ms; }
.hook-line:nth-child(3) {
  animation-delay: 2400ms;
  color: var(--gold);
  font-style: normal;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: clamp(22px, 4.4vw, 36px);
  margin-top: 18px;
}
@keyframes hook-fade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 0.85; }
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold-tarnish);
  opacity: 0;
  animation: fade-in 1200ms var(--ease-slow) 3500ms forwards;
  text-decoration: none;
}
.scroll-cue::after {
  content: '';
  display: block;
  margin: 12px auto 0;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--gold-tarnish), transparent);
}

/* ─── Generic story sections (Billy, Jack, Wayne) ────────────── */
.story-section {
  padding: 120px 32px;
  max-width: var(--container);
  margin: 0 auto;
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-grid.flip { direction: rtl; }
.story-grid.flip > * { direction: ltr; }

.story-eyebrow-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.story-eyebrow-row .index {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--gold-deep);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.story-text h2 { margin-bottom: 6px; }
.story-text .place {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--gold-tarnish);
  margin-bottom: 24px;
}
.story-text .body {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.75;
  color: var(--cream);
  max-width: 540px;
}
.story-text .body p + p { margin-top: 1em; }

.pull-quote {
  margin: 32px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.5;
  color: var(--gold);
  max-width: 540px;
}
.pull-quote .attrib {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 10px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold-tarnish);
  margin-top: 14px;
}

.closing-quote {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--leather);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--cream);
  max-width: 540px;
}

/* ─── Image plates (placeholders + real photos) ──────────────── */
.plate {
  position: relative;
  background: var(--ink-2);
  padding: 14px;
  box-shadow: var(--shadow-inset), var(--shadow-portrait);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.plate::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 2;
}
.plate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9) brightness(0.95);
  transition: filter 600ms var(--ease-slow), transform 1200ms var(--ease-slow);
}
.plate:hover .plate-img { filter: contrast(1.1) saturate(0.95) brightness(1); }

/* image placeholder — when no real photo yet */
.plate-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(201,168,76,0.04) 14px 15px),
    var(--ink-3);
  position: relative;
}
.plate-placeholder .ph-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold);
  max-width: 280px;
  line-height: 1.7;
}
.plate-placeholder .ph-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ─── Section 5 — The Reveal ─────────────────────────────────── */
.reveal-section {
  background: var(--ink-2);
  border-top: 1px solid var(--leather);
  border-bottom: 1px solid var(--leather);
  padding: 140px 32px;
}
.reveal-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}
.reveal-photo .plate { aspect-ratio: 1 / 1; max-width: 540px; }
.reveal-text { max-width: 480px; }
.reveal-text h2.t-display {
  font-size: clamp(40px, 6vw, 72px);
  margin: 18px 0 4px;
}
.reveal-text .sub {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}
.reveal-spec {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.8;
  color: var(--cream-2);
  margin: 24px 0 32px;
}
.reveal-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 24px;
}
.reveal-price .amount {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: var(--track-wide);
  color: var(--cream);
}
.reveal-price .currency {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--track-widest);
  color: var(--gold-tarnish);
  text-transform: uppercase;
}
.reveal-cta-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.reveal-cta-row .btn { min-width: 240px; text-align: center; }
.reveal-foot {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--gold-tarnish);
  margin-top: 20px;
}

/* ─── Section 6 — Six Symbols ────────────────────────────────── */
.symbols {
  padding: 140px 32px;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.symbols-head { margin-bottom: 64px; }
.symbols-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
  border-top: 1px solid var(--leather);
  border-bottom: 1px solid var(--leather);
}
.symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 16px;
  border-left: 1px solid var(--leather);
  text-align: center;
}
.symbol:first-child { border-left: 0; }
.symbol .icon {
  width: 44px;
  height: 44px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(640%) hue-rotate(2deg) brightness(95%) contrast(86%);
}
.symbol .label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold);
}
.symbol .meaning {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream-2);
  max-width: 140px;
}

/* ─── Section 7 — Wayne's Note ───────────────────────────────── */
.wayne-note {
  padding: 140px 32px;
  background: var(--ink-1);
}
.wayne-note .inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.wayne-note .plate { aspect-ratio: 4 / 5; max-width: 460px; }
.wayne-note .text { max-width: 520px; }
.wayne-note .text p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.8;
  color: var(--cream);
}

/* ─── Section 8 — Final CTA ──────────────────────────────────── */
.final {
  padding: 160px 32px 180px;
  text-align: center;
  border-top: 1px solid var(--leather);
  background: var(--ink-black);
}
.final .closing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.45;
  color: var(--cream);
  max-width: 720px;
  margin: 0 auto 48px;
}
.final .closing strong {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--gold);
  margin-top: 12px;
}
.final .btn { padding: 20px 44px; font-size: 13px; }

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
  background: var(--ink-black);
  padding: 56px 32px 36px;
  border-top: 1px solid var(--leather);
  text-align: center;
}
.footer .mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(640%) hue-rotate(2deg) brightness(95%) contrast(86%);
  opacity: 0.7;
}
.footer .tag {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--gold);
}
.footer .small {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--gold-tarnish);
  margin-top: 14px;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { font-size: 17px; }

  .story-section { padding: 80px 24px; }
  .story-grid,
  .story-grid.flip {
    grid-template-columns: 1fr;
    gap: 40px;
    direction: ltr;
  }
  .story-grid.flip .story-text { order: 1; }
  .story-grid.flip .story-photo { order: 2; }

  .reveal-section { padding: 80px 24px; }
  .reveal-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .reveal-photo .plate { max-width: none; }

  .symbols { padding: 80px 24px; }
  .symbols-grid {
    grid-template-columns: repeat(2, 1fr);
    border-top: none;
  }
  .symbol {
    border-left: 0;
    border-top: 1px solid var(--leather);
    padding: 32px 16px;
  }
  .symbol:nth-child(2n) { border-left: 1px solid var(--leather); }
  .symbol:nth-child(1),
  .symbol:nth-child(2) { border-top: 0; }

  .wayne-note { padding: 80px 24px; }
  .wayne-note .inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wayne-note .plate { max-width: none; }

  .final { padding: 100px 24px 120px; }

  .pull-quote { font-size: 20px; }
  .closing-quote { font-size: 22px; }

  .story-eyebrow-row .index { font-size: 44px; }
  .t-h1 { font-size: 28px; }

  .reveal-cta-row { align-items: stretch; }
  .reveal-cta-row .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hook { padding: 32px 20px 64px; }
  .story-section { padding: 64px 20px; }
  .symbols-grid { grid-template-columns: 1fr; }
  .symbol { border-left: 0 !important; border-top: 1px solid var(--leather); }
  .symbol:first-child { border-top: 0; }
  .reveal-text h2.t-display { font-size: 36px; }
}

/* ─── Handoff — Pendant Passing Photo ───────────────────────
   Static section. Hand illustrations removed 2026-05-04.
──────────────────────────────────────────────────────────────── */
/* ─── Handoff Animation ───────────────────────────────────────
   Between Section 2 (Jack) and Section 3 (Wayne).
   Scroll-driven via GSAP ScrollTrigger.
──────────────────────────────────────────────────────────────── */
.handoff-section {
  height: 100vh;
  position: relative;
}

.handoff-sticky {
  position: relative;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--ink-black);
  background-image: radial-gradient(
    ellipse 75% 75% at 50% 50%,
    var(--ink-1) 0%,
    var(--ink-black) 100%
  );
}

.handoff-scene {
  position: relative;
  width: 100%;
  height: 100%;
}

/*
 * GSAP owns the transform on .hand-give-mover and .hand-receive-mover.
 * The pendulum runs on the inner <img> only — no conflict, no jolt.
 */

  50%  { transform: rotate(2deg); }
  100% { transform: rotate(-2deg); }
}

/* Static reveal image — crossfades in as animated hands exit */
.handoff-reveal {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  will-change: opacity;
}

.handoff-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Text sits over the lower third of the reveal image */
.handoff-reveal-text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.handoff-reveal-text em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(26px, 5.2vw, 44px);
  line-height: 1.45;
  color: var(--cream);
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

/* Disable on reduced-motion */
@media (prefers-reduced-motion: reduce) {
        .handoff-reveal { opacity: 1 !important; }
  .handoff-section { height: 100vh; }
  .handoff-sticky { position: relative; }
}

@media (max-width: 768px) {
  .hand-give-mover,
  }

/* ─── Desktop: static reveal, no scroll animation ─── */
@media (min-width: 769px) {
  /* Section is single viewport height — no scroll-pin needed */
  .handoff-section {
    height: 100vh;
  }
  .handoff-sticky {
    position: relative;
  }

  /* Hide the animated hands entirely */
  .hand-give-mover,
  .hand-receive-mover {
    display: none !important;
  }

  /* Photo visible from the start */
  .handoff-reveal {
    opacity: 1 !important;
  }

  /* Text lines: start hidden, reveal on scroll via IntersectionObserver */
  .handoff-reveal-text em {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 900ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .handoff-reveal-text em.reveal-line:nth-child(1).is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
  }
  .handoff-reveal-text em.reveal-line:nth-child(2).is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 700ms;
  }
}

/* ─── Book flip — Jack photo section ─────────────────────────── */
.book-flip {
  perspective: 1400px;
  transform-style: preserve-3d;
  /* override plate overflow so 3D fold is visible outside flat bounds */
  overflow: visible;
  border-radius: 0 14px 14px 0; /* aged book edge — free corners only */
}

/* keep the inner border frame clipped correctly */
.book-flip::after {
  z-index: 10;
  pointer-events: none;
}

.book-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.book-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Subtle attribution label bottom-right */
.page-attrib {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.55);
  pointer-events: none;
}

.book-page--front {
  z-index: 3;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.book-page--mid {
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.book-page--back {
  z-index: 1;
}

/*
 * Corner peel — idle-state “lip” at bottom-right of the AWM photo.
 * Simulates the page corner being slightly lifted: upper-left triangle
 * shows the shadow cast on the photo; lower-right triangle shows the
 * aged-paper back of the page.
 * GSAP shrinks this to 0×0 as the full flip begins.
 */
.book-corner-peel {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 52px;
  height: 52px;
  z-index: 4;              /* above both book-pages */
  pointer-events: none;
  /* 135° = top-left → bottom-right diagonal split:
     upper-left half = translucent shadow on the photo
     lower-right half = aged paper colour peeking through */
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.45)  0%,
    rgba(0, 0, 0, 0.20)  43%,
    rgba(120, 96, 44, 0.95) 45%,   /* paper edge */
    #e4d4aa              52%,      /* paper back highlight */
    #d6c390              100%      /* aged paper body */
  );
  /* Shadow the corner casts up/left onto the photo */
  box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.55);
  will-change: width, height;
}

/*
 * Fold crease — gradient overlay placed INSIDE .book-page--front so it
 * rotates in 3D with the page. Darkens the left edge (the hinge side)
 * as the page angles away from the viewer. GSAP fades it in then out.
 */
.flip-crease {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.70)  0%,
    rgba(0, 0, 0, 0.35)  18%,
    rgba(0, 0, 0, 0.00)  50%
  );
  opacity: 0;
  will-change: opacity;
}

/* Reduced-motion: just show the portrait */
@media (prefers-reduced-motion: reduce) {
  .book-page--front { display: none; }
}