/* ---- the book itself ---- */

/*
  The book is always a 9:16 portrait stage.
  Phone  : fills the screen edge to edge.
  Tablet : fills the height, breathes at the sides.
  Desktop: a tall centred book on a dark table.
  The painted art is composed for 9:16, so the composition never breaks.
*/
.book{
  position:relative;
  width:100vw;
  height:100dvh;
  max-width:calc(100dvh * 9 / 16);
  max-height:100dvh;
  overflow:hidden;
  background:var(--dusk);
  isolation:isolate;
}

@media (min-aspect-ratio: 9/16){
  .book{
    border-radius:clamp(0px, 1.2vh, 18px);
    box-shadow:0 4vh 12vh rgba(0,0,0,.55), 0 0 0 1px rgba(240,217,160,.08);
  }
}

/* ---- painted layers ---- */

.stage{ position:absolute; inset:0; }

.layer{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  will-change:transform, opacity;
  transform:translate3d(0,0,0);
}

/* the painted scene, held a little larger than the frame so it can drift */
.layer--art{
  z-index:1;
  transform:scale(1.09);
  transition:background-image 0s;
}

/* slow living light over the paint: it breathes, it never sits still */
.layer--glow{
  z-index:2;
  pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:.62;
  background:
    radial-gradient(58% 42% at 52% 26%, rgba(255,238,196,.55) 0%, rgba(255,238,196,0) 70%),
    radial-gradient(70% 55% at 30% 82%, rgba(120,170,160,.30) 0%, rgba(120,170,160,0) 72%);
  animation:breathe 13s ease-in-out infinite alternate;
}
@keyframes breathe{
  from{ transform:scale(1)    translate3d(0,0,0);        opacity:.52; }
  to  { transform:scale(1.09) translate3d(1.5%,-1.5%,0); opacity:.76; }
}

/* the paper edge: keeps the eye in the middle of the page */
.layer--vign{
  z-index:3;
  pointer-events:none;
  background:radial-gradient(120% 78% at 50% 46%,
    rgba(0,0,0,0) 42%, rgba(6,10,10,.32) 78%, rgba(6,10,10,.62) 100%);
}

.layer--fx   { z-index:5; pointer-events:none; width:100%; height:100%; }
.layer--touch{ z-index:9; }

/* page turn: the old page folds away like a petal, the new one opens */
.stage.is-turning .layer--art,
.stage.is-turning .layer--glow,
.stage.is-turning .layer--vign{
  transition:opacity var(--turn-ms) var(--ease-petal),
             transform var(--turn-ms) var(--ease-petal);
}
.stage.is-out .layer--art { opacity:0; transform:scale(1.16) translateY(-2%); }
.stage.is-in  .layer--art { opacity:0; transform:scale(1.02) translateY(2.5%); }
.stage.is-out .layer--glow,
.stage.is-in  .layer--glow{ opacity:0; }
.stage.is-out .layer--vign,
.stage.is-in  .layer--vign{ opacity:0; }

/* ---- story text ---- */

.prose{
  position:absolute;
  left:0; right:0;
  bottom:0;
  z-index:8;
  padding:var(--prose-pad);
  padding-bottom:calc(var(--prose-pad) + var(--safe-b) + 2.6rem);
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(12,18,18,.88) 0%,
    rgba(12,18,18,.72) 38%,
    rgba(12,18,18,.34) 68%,
    rgba(12,18,18,0)   100%);
}

/* some pages read better with the words up in the sky */
.prose.is-top{
  bottom:auto; top:0;
  padding-top:calc(var(--prose-pad) + var(--safe-t) + 3.2rem);
  background:linear-gradient(to bottom,
    rgba(12,18,18,.88) 0%,
    rgba(12,18,18,.72) 38%,
    rgba(12,18,18,.34) 68%,
    rgba(12,18,18,0)   100%);
}

.prose__text{
  margin:0;
  font-size:var(--prose-size);
  line-height:var(--prose-lead);
  color:var(--paper);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  max-width:34ch;
  text-wrap:pretty;
}

.prose__text em{ color:var(--gold-soft); font-style:italic; }
.prose__text strong{
  display:block;
  margin-top:.7em;
  font-weight:400;
  font-style:italic;
  color:var(--gold-soft);
}

/* words arrive one line at a time, like being read to */
.prose__line{
  display:block;
  opacity:0;
  transform:translateY(.45em);
  animation:lineIn .9s var(--ease-soft) forwards;
}
@keyframes lineIn{ to{ opacity:1; transform:none; } }

/* ---- nudge: a small breathing dot when a page waits for a touch ---- */

.nudge{
  position:absolute;
  z-index:9;
  left:50%; bottom:calc(var(--safe-b) + 6.2rem);
  transform:translateX(-50%);
  pointer-events:none;
}
.nudge__dot{
  display:block; width:12px; height:12px;
  border-radius:50%;
  background:var(--gold-soft);
  box-shadow:0 0 0 0 rgba(240,217,160,.55);
  animation:pulse 2.1s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(240,217,160,.5);   opacity:.95; }
  70% { box-shadow:0 0 0 22px rgba(240,217,160,0); opacity:.55; }
  100%{ box-shadow:0 0 0 0 rgba(240,217,160,0);    opacity:.95; }
}

/* ---- star tally ---- */

.tally{
  position:absolute;
  z-index:9;
  top:calc(var(--safe-t) + .9rem);
  left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem;
  pointer-events:none;
}
.tally__star{
  width:14px; height:14px;
  opacity:.22;
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-petal), filter .6s;
  background:currentColor;
  color:var(--gold-soft);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.tally__star.is-lit{
  opacity:1;
  transform:scale(1.25);
  filter:drop-shadow(0 0 8px rgba(240,217,160,.9));
}

/* ---- chrome ---- */

.chrome{
  position:fixed;
  z-index:20;
  top:calc(var(--safe-t) + .75rem);
  right:calc(50vw - min(50vw, 50dvh * 9 / 16) + .85rem);
  display:flex; gap:.45rem;
}
.chrome__btn{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  font-size:.74rem; letter-spacing:.04em;
  color:var(--paper);
  background:rgba(12,18,18,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(240,217,160,.16);
  transition:background .3s, transform .3s var(--ease-soft);
}
.chrome__btn:active{ transform:scale(.9); }
.chrome__btn.is-muted .wave{ opacity:.2; }

/* ---- turning ---- */

/* the whole page carries the story on: a child taps anywhere */
.turn--next{
  position:fixed;
  z-index:14;
  inset:0;
  width:auto;
  opacity:0;
}

/* a narrow strip down the left edge goes back */
.turn--back{
  position:fixed;
  z-index:15;
  top:0; bottom:0;
  left:calc(50vw - min(50vw, 50dvh * 9 / 16));
  width:min(12vw, 64px);
  opacity:0;
}

.turn[disabled]{ pointer-events:none; }

/* ---- the quiet 'and then?' ---- */

/* a page that is waiting for a game says nothing about carrying on */
.onward[hidden]{ display:none; }

.onward{
  position:absolute;
  z-index:11;
  right:1.15rem;
  bottom:calc(var(--safe-b) + 1.15rem);
  display:flex; align-items:center; gap:.4rem;
  padding:.34rem .7rem .34rem .85rem;
  border-radius:999px;
  background:rgba(14,20,20,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,238,196,.18);
  color:rgba(255,247,228,.8);
  font-size:.78rem; letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
  animation:onwardIn 1.4s var(--ease-soft) 2.6s both;
}
@keyframes onwardIn{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; } }

.onward__arrow{
  width:15px; height:15px;
  animation:onwardNod 2.4s var(--ease-soft) infinite;
}
@keyframes onwardNod{
  0%,100%{ transform:translateX(0);   opacity:.7; }
  50%    { transform:translateX(4px); opacity:1; }
}

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

.cover{
  position:fixed; inset:0;
  z-index:40;
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 40%, #24352f 0%, #141d1d 60%, #0d1414 100%);
  transition:opacity 1s var(--ease-petal), visibility 1s;
}
.cover.is-open{ opacity:0; visibility:hidden; }

.cover__inner{ text-align:center; padding:2rem; }

.cover__eyebrow{
  margin:0 0 .6rem;
  font-size:.82rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(240,217,160,.62);
}
.cover__title{
  margin:0;
  font-size:clamp(3rem, 15vw, 5.5rem);
  font-weight:400; line-height:1;
  color:var(--gold-soft);
  text-shadow:0 0 40px rgba(240,217,160,.28);
}
.cover__sub{
  margin:.5rem 0 2.4rem;
  font-size:clamp(1rem, 4.6vw, 1.4rem);
  font-style:italic;
  color:rgba(247,240,226,.78);
}
.cover__open{
  padding:.85rem 2rem;
  border-radius:999px;
  font-size:.94rem; letter-spacing:.05em;
  color:var(--dusk);
  background:var(--gold-soft);
  transition:transform .3s var(--ease-soft), box-shadow .3s;
  box-shadow:0 6px 30px rgba(240,217,160,.22);
}
.cover__open:active{ transform:scale(.95); }

.cover__again{
  display:block;
  margin:1rem auto 0;
  font-size:.84rem;
  letter-spacing:.04em;
  color:rgba(247,240,226,.5);
  text-decoration:underline;
  text-underline-offset:.28em;
}