/* =====================================================
   ANNA GREYHEM — QR EDITIONS · shared base
   The pages a reader reaches by scanning a code in the
   printed book. Chrome-less, immersive, quiet by law.
   Built on the Anna Greyhem Design System.
   ===================================================== */

:root {
  --ink:     #0a0a0c;
  --bone:    #eeeae0;
  --bone-2:  #c9c4b8;
  --bone-3:  #8a8478;
  --bone-4:  #2a2823;

  --cherry:   #9e2438;
  --cherry-2: #6b1825;
  --cherry-3: #c33149;
  --drowned-3:#6b8095;

  --serif: 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --read:  'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gutter: clamp(22px, 7vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* one immersive reading size — book passages, sized to be read at length */
  --read-immersive: clamp(21px, 5.6vw, 24px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100svh;
  font-family: var(--read);
  font-weight: 400;
  overflow-x: hidden;
}
/* iOS Safari rubber-bands past the real scroll bounds; while it does, fixed
   elements (the foot scrim, .qr-legal) briefly lag behind and unmasked story
   text shows through underneath them. Killing the bounce keeps the scrim's
   coverage honest. */
html, body { overscroll-behavior-y: none; }

/* ===================== FILM GRAIN ===================== */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 70;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05; mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)} 40%{transform:translate(3%,-3%)}
  60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
}

/* ===================== IMMERSIVE PROSE ===================== */
.scene {
  max-width: 36rem;
  margin: 0 auto;
  padding: clamp(64px, 16vh, 160px) var(--gutter) 120px;
}
.scene .eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 6vw, 30px);
  letter-spacing: 0.01em;
  color: var(--bone);
  margin: 0 0 clamp(36px, 8vh, 64px);
  line-height: 1.1;
}
.scene p {
  font-family: var(--read);
  font-weight: 400;
  font-size: var(--read-immersive);
  line-height: 1.78;
  color: var(--bone);
  margin: 0 0 1.5em;
  max-width: 34ch;
  text-wrap: pretty;
}
.scene p:last-child { margin-bottom: 0; }
.scene em { font-family: var(--serif); font-style: italic; font-size: 1.08em; color: #f6f2e8; }

/* fade-in reading rhythm — each line settles as you arrive */
.fade {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.fade.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .fade { opacity: 1; transform: none; transition: none; }
}

/* ===================== FOOT SCRIM =====================
   The legal line must stay legible even when a scene runs imagery
   or light colour to the bottom edge (e.g. Branch). A fixed scrim
   darkens the foot of every page back to ink. Kept SEPARATE from
   .qr-legal so it never fades with the line — it is always fully
   present; over the pure-ink text scenes it is simply invisible. */
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: calc(-20px + var(--qr-toolbar-gap, 0px));
  height: 170px;
  background: linear-gradient(to top,
              var(--ink) 20%,
              rgba(10,10,12,0.75) 45%,
              transparent 100%);
  pointer-events: none;
  z-index: 75;            /* above grain (70), below .qr-legal (80) */
}

/* ===================== QUIET LEGAL FOOTER =====================
   Permanently present. By default faint enough to disappear into
   the dark; brightens the moment a reader approaches (hover / focus
   / touch). Compact + centred so it never intercepts the taps that
   drive the interactive scenes. */
.qr-legal {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom) + var(--qr-toolbar-gap, 0px));
  transform: translateX(-50%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  opacity: 0.26;
  transition: opacity 0.7s var(--ease);
}
.qr-legal:hover,
.qr-legal:focus-within,
.qr-legal[data-near="true"] { opacity: 1; }
.qr-legal .mark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--bone-2);
  text-decoration: none;
}
.qr-legal .mark em { font-style: italic; }
.qr-legal a:not(.mark) {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
  text-decoration: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  transition: color 0.4s ease;
}
.qr-legal a:not(.mark):hover { color: var(--bone); }
.qr-legal a:focus-visible { outline: 1px solid var(--cherry-3); outline-offset: 3px; }
.qr-legal .sep { color: var(--bone-4); font-size: 10px; }

/* ===================== TAP / HINT CUES ===================== */
.cue {
  position: fixed;
  left: 50%;
  bottom: 18vh;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-3);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 40;
}
.cue.on {
  opacity: 1;
  /* a slow "breathing" pulse so the hint is noticed sooner without
     breaking the calm, immersive mood. delay 0.6s lets the fade-in
     (transition above) finish before the pulse begins. */
  animation: qr-cue-breathe 3.6s ease-in-out 0.6s infinite;
}
@keyframes qr-cue-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .cue.on { animation: none; }
}