/* GENERATED by build.mjs — edit partials/sections/<name>.css instead. */

/* ---------- film ---------- */
/* ==========================================================================
   THE PAPER KINGDOM — the picture is the page
   No frame, no letterbox: the animation fills the screen and the words live
   on top of it, the way the illustration sits behind the text on a page.
   ========================================================================== */
.film {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--paper-1);
  cursor: pointer;
}
.film__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ---- the words, over the picture ---- */
/* Title sits above the middle; the caption lives in the lower third, so the
   play button between them never lands on a word. */
.film__over {
  position: absolute; inset: 0;
  padding: clamp(20px, 5vw, 80px);
  text-align: center;
  pointer-events: none;
}
.film__title {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  width: min(92%, 20ch);
}
.film.is-rolling .film__title { opacity: 0; transform: translate(-50%, -60%) scale(.96); }

.film__caption {
  position: absolute; left: 50%; bottom: clamp(86px, 11vh, 150px);
  transform: translate(-50%, 14px);
}
.film__caption.is-on { transform: translate(-50%, 0); }
.film__title {
  margin: 0;
  font-family: var(--font-hand); font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 8rem);
  line-height: .95; letter-spacing: var(--tr-tight);
  color: var(--paper-0);
  text-shadow: 0 6px 0 rgba(30,26,22,.35), 0 2px 26px rgba(30,26,22,.45);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}

/* the caption: this is the 30 percent that is words */
.film__caption {
  margin: 0;
  width: min(94%, 26ch);
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 3.75rem);
  line-height: 1.18; text-wrap: balance;
  color: #fff;
  text-shadow: 0 4px 0 rgba(30,26,22,.4), 0 2px 24px rgba(30,26,22,.6);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.film__caption.is-on { opacity: 1; }

/* when the words are showing, the picture behind them dims a little so a
   child can always read them, whatever is happening in the scene */
.film::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,26,22,0) 52%, rgba(30,26,22,.34) 78%, rgba(30,26,22,.60) 100%);
  opacity: 0; transition: opacity var(--d-slow) var(--e-out);
}
.film.is-reading::after { opacity: 1; }

/* ---- the one big button ---- */
.film__big {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  width: clamp(96px, 15vw, 170px); height: clamp(96px, 15vw, 170px);
  display: grid; place-items: center;
  background: var(--crayon-flame);
  border: 7px solid var(--ink-900);
  border-radius: 50%;
  box-shadow: 0 8px 0 var(--ink-900), 0 20px 40px -10px rgba(30,26,22,.5);
  transition: transform var(--d-fast) var(--e-bounce), opacity var(--d-base) var(--e-out);
  z-index: 3;
}
.film__big svg { width: 44%; height: 44%; fill: #fff; margin-left: 6%; }
.film__big:hover { transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); }
.film.is-rolling .film__big { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.5); }

/* ---- controls, floating at the foot ---- */
.film__controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(8px, 1.2vw, 14px);
  padding: clamp(10px, 2vh, 22px) clamp(12px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(30,26,22,0), rgba(30,26,22,.45));
  z-index: 4;
}
.film__btn {
  min-height: 52px; padding: 12px 24px;
  font-family: var(--font-hand); font-weight: 700; font-size: var(--t-sm);
  color: var(--ink-900); background: var(--paper-0);
  border: 4px solid var(--ink-900); border-radius: var(--r-pill);
  box-shadow: 0 4px 0 var(--ink-900);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.film__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink-900); }
.film__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink-900); }
.film__btn--go { background: var(--crayon-green); color: #fff; }

.film__bar {
  flex: 1 1 160px; min-width: 100px; max-width: 340px; height: 16px;
  background: rgba(255,255,255,.5);
  border: 4px solid var(--ink-900); border-radius: var(--r-pill);
  overflow: hidden;
}
.film__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--crayon-flame); }
.film__scene {
  font-family: var(--font-hand); font-weight: 700; font-size: var(--t-sm);
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); white-space: nowrap;
}

@media (max-width: 560px) { .film__scene { display: none; } .film__btn { padding: 12px 16px; } }
@media (prefers-reduced-motion: reduce) {
  .film__caption, .film__title, .film__big, .film__btn, .film::after { transition: none; }
}