/* ===== Aura and the Golden Feather, interactive reader ===== */

:root {
  --ink:        #2b2318;
  --ink-soft:   #6a5c45;
  --gold:       #b8860b;
  --gold-lite:  #e2be63;
  --text-light: #fdf6e6;
  --disp: "Trajan Pro", "Optima", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(130% 100% at 50% 0%, #3a2f1f 0%, #241d12 60%, #17110a 100%);
  font-family: var(--body);
  color: var(--text-light);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* the square page stage */
.stage {
  position: relative;
  width: min(94vmin, 880px);
  height: min(94vmin, 880px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: #e7dcc2;
}

/* Soft fade with no flash: the OUTGOING page stays fully opaque underneath
   (.leaving) while the INCOMING page (.active) fades in on top of it. Because a
   page is always opaque beneath, the fade never dips through the stage
   background (which is what read as a flash in a plain crossfade). */
.rpage {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.rpage.leaving { opacity: 1; visibility: visible; z-index: 1; }
.rpage.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity .4s ease;
}

/* spreads: full-bleed art + scrim + caption */
.rpage.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .artwrap is overscanned beyond the page so it can shift for parallax without
   exposing edges (the stage clips the overflow). It carries the parallax offset;
   the inner .art carries the slow ken-burns zoom. */
.rpage.spread .artwrap {
  position: absolute;
  inset: -7%;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform .35s ease-out;
  will-change: transform;
}
.rpage.spread .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 9s ease;
}
.rpage.spread.active .art { transform: scale(1); }        /* slow ken-burns */
.rpage .scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(to top,
    rgba(18,12,5,.92) 0%, rgba(18,12,5,.66) 34%, rgba(18,12,5,.28) 62%, rgba(18,12,5,0) 100%);
}
.rpage .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 8% 8%; }
.rpage .caption p {
  margin: 0;
  font-size: clamp(1rem, 3.1vmin, 1.7rem);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0,0,0,.72);
}

/* text cards (title / quote / note / back cover) */
.rpage.textcard { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 10%; }
.rpage.textcard .inner { max-width: 100%; }
.rpage.title { background: radial-gradient(120% 100% at 50% 30%, #fbf5e7 0%, #f1e4c9 100%); color: var(--ink); }
.rpage.quote, .rpage.back { background: linear-gradient(160deg, #221a0f 0%, #3a2e1a 100%); }
.rpage.note { background: #f6efdd; color: var(--ink); text-align: left; }

.title h1 { font-family: var(--disp); font-size: clamp(1.6rem, 5.2vmin, 2.8rem); color: #3a2c12; margin: 0; line-height: 1.14; }
.title .subtitle { font-style: italic; color: var(--ink-soft); margin-top: 14px; font-size: clamp(.9rem, 2.4vmin, 1.15rem); }
.title .ornament { color: var(--gold); margin: 24px 0; font-size: 1.4rem; }
.title .byline { color: #4a3c22; font-size: clamp(.9rem, 2.4vmin, 1.1rem); }

.quote .mark { font-family: var(--disp); font-size: 4rem; color: var(--gold); line-height: 0; margin-bottom: 26px; }
.quote blockquote { margin: 0; font-style: italic; font-size: clamp(1.2rem, 3.6vmin, 1.8rem); line-height: 1.5; }
.quote cite { display: block; margin-top: 22px; font-style: normal; color: var(--gold-lite); letter-spacing: 1.5px; font-size: clamp(.8rem, 2vmin, 1rem); }

.note .inner { max-height: 84%; overflow: auto; }
.note .eyebrow { font-family: var(--disp); text-transform: uppercase; letter-spacing: 3px; color: var(--gold); margin-bottom: 14px; font-size: .9rem; }
.note p { margin: 0 0 12px; line-height: 1.55; font-size: clamp(.85rem, 2.2vmin, 1.02rem); }
.note h3 { font-family: var(--disp); color: #3a2c12; margin: 18px 0 8px; }
.note ul { margin: 0; padding-left: 1.2em; }
.note li { margin-bottom: 6px; line-height: 1.5; color: var(--ink-soft); }

.back .series { font-family: var(--disp); text-transform: uppercase; letter-spacing: 4px; color: var(--gold-lite); font-size: .8rem; margin-bottom: 20px; }
.back .blurb p { margin: 0 0 14px; font-size: clamp(1rem, 2.8vmin, 1.2rem); line-height: 1.55; }
.back .blurb p:last-child { font-style: italic; color: var(--gold-lite); }
.back .byline { margin-top: 22px; color: #e9dcc0; }

/* word-by-word animation (applied to .anim elements) */
.anim .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
  transition-delay: var(--d, 0ms);
}
.rpage.active .anim .w { opacity: 1; transform: none; }

/* navigation */
.nav { position: fixed; top: 0; bottom: 0; z-index: 10; border: 0; background: transparent; cursor: pointer; }
.nav.prev { left: 0; width: 32%; cursor: w-resize; }
.nav.next { right: 0; width: 68%; cursor: e-resize; }
.arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 11;
  font-size: 2.2rem; line-height: 1; color: rgba(255,255,255,.5);
  background: none; border: 0; cursor: pointer; padding: 12px; transition: color .2s;
}
.arrow:hover { color: #fff; }
.arrow.prev { left: max(10px, 2.5vw); }
.arrow.next { right: max(10px, 2.5vw); }
.arrow[disabled] { opacity: .18; cursor: default; }
.counter { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 11; color: rgba(255,255,255,.6); font-size: .85rem; letter-spacing: 1px; }
.hint { position: fixed; bottom: 16px; right: 20px; z-index: 11; color: rgba(255,255,255,.32); font-size: .75rem; }

/* install-to-home-screen prompt */
.install {
  position: fixed; left: 50%; bottom: 46px;
  transform: translateX(-50%) translateY(8px);
  z-index: 20;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 540px);
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  background: rgba(23,17,10,.94);
  border: 1px solid rgba(226,190,99,.4);
  color: var(--text-light);
  font-size: .9rem; line-height: 1.35;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.install.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.install .share { color: var(--gold-lite); flex: 0 0 auto; }
.install .msg { flex: 1 1 auto; }
.install .install-btn {
  flex: 0 0 auto; background: var(--gold); color: #1a140c; border: 0;
  border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer;
}
.install .install-x {
  flex: 0 0 auto; background: none; border: 0; color: rgba(255,255,255,.55);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.install .install-x:hover { color: #fff; }

@media (max-width: 640px) { .arrow { display: none; } .hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .rpage.spread .art { transition: none; transform: none; }
  .rpage.spread .artwrap { transition: none; transform: none; }
  .anim .w { transition: none; }
}

/* ===== Start gate (tap to begin; the tap unlocks audio) ===== */
.startgate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; cursor: pointer;
  color: var(--text-light);
  background: radial-gradient(130% 100% at 50% 30%, #3a2f1f 0%, #241d12 60%, #17110a 100%);
  transition: opacity .55s ease, visibility .55s ease;
}
.startgate.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.startgate .sg-inner { max-width: 32rem; }
.startgate .sg-title {
  font-family: var(--disp); color: var(--gold-lite);
  font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: .02em; margin-bottom: .6rem;
}
.startgate .sg-sub { font-size: clamp(1rem, 3vw, 1.25rem); opacity: .85; margin-bottom: 2.4rem; }
.startgate .sg-cta {
  display: inline-block; font-family: var(--disp);
  font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .7rem 1.6rem; border: 1px solid var(--gold); border-radius: 999px;
  animation: sg-pulse 2.4s ease-in-out infinite;
}
@keyframes sg-pulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .startgate .sg-cta { animation: none; } }

/* ===== Narration toggle on the start gate ===== */
.sg-toggle {
  display: inline-block; margin: 0 0 1.6rem; cursor: pointer;
  font-family: var(--body); font-size: .95rem; letter-spacing: .02em;
  padding: .5rem 1.1rem; border-radius: 999px;
  color: var(--text-light); background: transparent;
  border: 1px solid rgba(226, 190, 99, .5);
  transition: background .2s ease, border-color .2s ease;
}
.sg-toggle[aria-pressed="true"] { background: rgba(226, 190, 99, .16); border-color: var(--gold-lite); }
.sg-toggle:hover { border-color: var(--gold-lite); }

/* ===== Persistent narration toggle (corner, during reading) ===== */
.vo-toggle {
  position: fixed; z-index: 30; top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  cursor: pointer; font-family: var(--body); font-size: .8rem; letter-spacing: .02em;
  padding: .4rem .8rem; border-radius: 999px;
  color: var(--text-light); background: rgba(23, 17, 10, .55);
  border: 1px solid rgba(253, 246, 230, .28); backdrop-filter: blur(6px);
  transition: opacity .2s ease;
}
.vo-toggle:hover { opacity: .85; }
.vo-toggle .vo-off { display: none; }
.vo-toggle[aria-pressed="false"] .vo-on { display: none; }
.vo-toggle[aria-pressed="false"] .vo-off { display: inline; }

/* ===== Closing "join the list" page (email capture) ===== */
.rpage.join {
  background: radial-gradient(130% 110% at 50% 18%, #fdf7ea 0%, #f3e7cb 55%, #ecdcbb 100%);
  color: var(--ink);
}
.rpage.join .inner { max-width: 34rem; }
.rpage.join .ornament { color: var(--gold); font-size: 1.4rem; margin-bottom: 1rem; opacity: .9; }
.rpage.join .eyebrow {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; color: #a97f1e; margin-bottom: .9rem;
}
.rpage.join .join-h {
  font-family: var(--disp); font-weight: 600; font-size: clamp(1.9rem, 5.5vw, 2.7rem);
  line-height: 1.08; color: #2f2410; margin: 0 0 .7rem;
}
.rpage.join .join-p {
  font-size: clamp(1rem, 2.6vw, 1.12rem); line-height: 1.55; color: #6a5c45;
  margin: 0 auto 1.9rem; max-width: 27rem;
}
/* input + button as one soft, modern pill */
.signup {
  display: flex; gap: .35rem; align-items: stretch; max-width: 25rem; margin: 0 auto;
  background: #fff; padding: .34rem; border-radius: 999px;
  border: 1px solid rgba(58,44,18,.10);
  box-shadow: 0 1px 2px rgba(58,44,18,.08), 0 14px 34px -14px rgba(58,44,18,.4);
  transition: box-shadow .18s ease;
}
.signup:focus-within {
  box-shadow: 0 1px 2px rgba(58,44,18,.08), 0 0 0 3px rgba(226,190,99,.45), 0 14px 34px -14px rgba(58,44,18,.4);
}
.signup input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  padding: .72rem .5rem .72rem 1.15rem; font-size: 1rem; font-family: var(--body); color: var(--ink);
}
.signup input::placeholder { color: #a99a80; }
.signup button {
  flex: 0 0 auto; padding: .72rem 1.6rem; font-size: .98rem; font-family: var(--disp);
  letter-spacing: .04em; cursor: pointer; color: #fff; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #c6920f 0%, #9a6f08 100%);
  transition: filter .15s ease, transform .05s ease;
}
.signup button:hover { filter: brightness(1.07); }
.signup button:active { transform: translateY(1px); }
.signup button:disabled { opacity: .6; cursor: default; }
.signup-msg { margin-top: 1.1rem; font-size: .95rem; min-height: 1.2em; color: var(--ink-soft); }
.signup-msg.ok { color: #2e7d32; font-weight: 600; }
.signup-msg.err { color: #b23c17; }
/* the closing page's full-screen page-flip zones must not swallow form taps */
body.on-join .nav { pointer-events: none; }