@import url('/library/drinks.css');
@import url('/lib/audio/sound.css');

/*
  The library's cinema. The foyer is the site's own ground with poster
  cards; the theatre is always dark (a cinema is), with candyfloss velvet
  curtains and a gold valance. The screen is the films' cream paper in
  both themes, so the pictures sit on what they were drawn for.
*/
.cinema {
  --velvet: #c2337f;
  --velvet-dark: #8e1f5c;
  --velvet-light: #e05a9c;
  --hall: #2a1a2c;
  --gold: #f2b632;
  --paper-film: #fffaf3;
  --ink-film: #4a2545;
  max-width: 60rem;
}
.cinema-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.cinema-top .crumb { margin: 0; }
.cinema .drinks__cup { width: 2.2rem; }
.cinema .drinks { min-height: 2.2rem; }
.cinema .drinks__coaster { padding: 0.2rem 0.7rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Foyer ------------------------------------------------------------------- */

.marquee {
  position: relative;
  margin: 0.5rem 0 1.75rem;
  padding: 1.4rem 1.25rem 1.2rem;
  border-radius: var(--radius);
  background: var(--hall);
  color: #fbe9f4;
  text-align: center;
  box-shadow: var(--shadow);
  /* A row of bulbs round the edge. */
  background-image:
    radial-gradient(circle, #ffe08a 0 0.22rem, transparent 0.26rem),
    radial-gradient(circle, #ffe08a 0 0.22rem, transparent 0.26rem);
  background-size: 1.4rem 1.4rem, 1.4rem 1.4rem;
  background-position: 0.2rem 0.2rem, 0.2rem calc(100% - 0.2rem);
  background-repeat: repeat-x, repeat-x;
}
.marquee h1 { margin: 0; color: #ffd3e8; font-size: var(--step-4); letter-spacing: 0.02em; }
.marquee p { margin: 0.3rem auto 0; max-width: 30rem; color: #e8cfe0; }
@media (prefers-reduced-motion: no-preference) {
  .marquee { animation: bulbs 1.6s steps(2) infinite; }
  @keyframes bulbs { 50% { background-position: 0.9rem 0.2rem, 0.9rem calc(100% - 0.2rem); } }
}

.posters { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.poster { display: flex; }
.poster a {
  flex: 1; display: flex; flex-direction: column;
  padding: 0.6rem; border-radius: var(--radius);
  background: var(--tint, var(--candyfloss)); color: var(--ink-film); text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}
.poster:nth-child(3n + 1) a { transform: rotate(-1deg); }
.poster:nth-child(3n + 2) a { transform: rotate(0.8deg); }
.poster:nth-child(3n) a { transform: rotate(-0.5deg); }
.poster a:hover, .poster a:focus-visible { transform: rotate(0) translateY(-3px); }
.poster--candyfloss { --tint: var(--candyfloss); }
.poster--lilac { --tint: var(--lilac); }
.poster--mint { --tint: var(--mint); }
.poster--peach { --tint: var(--peach); }
.poster__art { border-radius: calc(var(--radius) - 0.4rem); overflow: hidden; line-height: 0; }
.poster__art svg { width: 100%; height: auto; }
.poster__art canvas { width: 100%; height: auto; image-rendering: pixelated; }
.poster__art--pixels { aspect-ratio: 4 / 3; background: #2a1a2c; }
.poster__words { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; padding: 0.9rem 1rem 1rem; border-radius: calc(var(--radius) - 0.4rem); background: var(--paper-film); }
.poster__words h2 { margin: 0; font-size: var(--step-1); color: var(--ink-film); }
.poster__words p { margin: 0; color: #6a4a66; }
.poster__time { font-size: var(--step--1); }
.poster__go {
  align-self: flex-start; margin-top: auto; padding: 0.45rem 1.1rem; border-radius: 999px;
  background: var(--candyfloss); color: #3a1636; font-family: var(--font-display); font-weight: 600;
}

/* Theatre ------------------------------------------------------------------- */

.now-showing { text-align: center; margin: 0.25rem 0 0.75rem; }
.now-showing .kicker { margin: 0; font-family: var(--font-display); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--step--1); }
.now-showing h1 { margin: 0; font-size: var(--step-3); }

.stage {
  position: relative;
  padding: clamp(0.6rem, 2.5vw, 1.4rem) clamp(0.6rem, 2.5vw, 1.4rem) 0;
  border-radius: var(--radius);
  background: radial-gradient(120% 80% at 50% 0%, #4a2a4c, var(--hall) 70%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stage__frame { border-radius: 0.9rem; overflow: hidden; background: #1a0f1b; }
.stage__box { position: relative; aspect-ratio: 4 / 3; }

.screen { position: absolute; inset: 0; background: var(--paper-film); color: var(--ink-film); container-type: inline-size; cursor: pointer; user-select: none; -webkit-user-select: none; }
.screen__svg { display: block; width: 100%; height: 100%; }
.screen__pixels { image-rendering: pixelated; background: #2a1a2c; }
.screen__words { position: absolute; inset: 0; pointer-events: none; }

.bubble {
  position: absolute; left: 0; top: 0;
  max-width: 46cqw; width: max-content;
  padding: 0.45em 0.8em;
  border: 2px solid var(--ink-film); border-radius: 1.2em;
  background: #fff; color: var(--ink-film);
  font-family: var(--font-display); font-weight: 500; line-height: 1.2;
  font-size: clamp(0.8rem, 3.6cqw, 1.55rem);
  text-align: center;
  box-shadow: 0 0.15em 0 rgb(74 37 69 / 0.15);
}
.bubble::after {
  /* The tail, pointing down at whoever is talking. */
  content: ''; position: absolute; left: calc(var(--tail, 50%) - 0.45em); bottom: -0.62em;
  width: 0.8em; height: 0.8em; background: #fff;
  border-right: 2px solid var(--ink-film); border-bottom: 2px solid var(--ink-film);
  transform: rotate(45deg) skew(8deg, 8deg); border-bottom-right-radius: 0.2em;
}
.bubble--think { border-radius: 2em; border-style: dashed; }
.bubble--think::after { width: 0.5em; height: 0.5em; border: 2px solid var(--ink-film); border-radius: 50%; transform: none; bottom: -0.8em; }
@media (prefers-reduced-motion: no-preference) {
  .bubble { animation: pop-in 0.22s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes pop-in { from { scale: 0.6; opacity: 0; } }
}

.caption {
  position: absolute; left: 50%; top: 3%; translate: -50% 0; margin: 0;
  max-width: 86%; width: max-content; padding: 0.35em 1em;
  border-radius: 999px; background: rgb(74 37 69 / 0.82); color: #fffaf3;
  font-family: var(--font-display); font-size: clamp(0.8rem, 3.4cqw, 1.45rem); text-align: center;
}
.title-card {
  position: absolute; inset: 9% 8% auto 8%; padding: 0.8em 1em; text-align: center;
  border-radius: 1.2em; background: rgb(255 250 243 / 0.92); border: 3px solid var(--ink-film);
  pointer-events: none;
}
.title-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 7.5cqw, 3.2rem); line-height: 1.05; color: var(--velvet); }
.title-card__sub { margin: 0.25em 0 0; font-family: var(--font-display); font-size: clamp(0.8rem, 3.2cqw, 1.3rem); color: #6a4a66; }
.paused {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; gap: 0.5em; align-items: center;
  padding: 0.5em 1.2em; border-radius: 999px; background: rgb(74 37 69 / 0.85); color: #fffaf3;
  font-family: var(--font-display); font-size: clamp(1rem, 4.5cqw, 1.8rem); pointer-events: none;
}

/* Curtains: velvet pleats, closed until the film starts. */
.curtain {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 2;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 30%, rgb(0 0 0 / 0.18)),
    repeating-linear-gradient(90deg, var(--velvet-dark) 0, var(--velvet) 1.2rem, var(--velvet-light) 2.1rem, var(--velvet) 3rem, var(--velvet-dark) 3.8rem);
  transition: transform 2.2s cubic-bezier(.6, 0, .3, 1);
  box-shadow: inset 0 -1.2rem 1rem -0.6rem rgb(0 0 0 / 0.25);
}
.curtain::after {
  /* A gold tie-back tassel near the outer edge. */
  content: ''; position: absolute; top: 55%; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px #a87412;
}
.curtain--left { left: 0; transform-origin: left; border-right: 3px solid var(--velvet-dark); }
.curtain--left::after { left: 0.4rem; }
.curtain--right { right: 0; transform-origin: right; border-left: 3px solid var(--velvet-dark); }
.curtain--right::after { right: 0.4rem; }
.is-open .curtain--left { transform: translateX(-92%) scaleX(0.9); }
.is-open .curtain--right { transform: translateX(92%) scaleX(0.9); }
.is-calm .curtain { transition-duration: 0.01s; }
.valance {
  /* Above the screen, so it never hides the picture. */
  position: relative; z-index: 3; height: clamp(1.1rem, 4vw, 2rem);
  background: radial-gradient(circle 1.2rem at 50% 0, var(--velvet) 96%, transparent 100%) 0 0 / 2.4rem 100% repeat-x;
  border-top: 0.45rem solid var(--gold);
  pointer-events: none;
}
.curtain-words, .the-end {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1rem;
  text-align: center;
}
.curtain-words[hidden], .the-end[hidden], .paused[hidden] { display: none; }
.curtain-words__title, .the-end__words {
  margin: 0; padding: 0.3em 0.9em; border-radius: 0.6em;
  background: var(--paper-film); color: var(--velvet); border: 4px solid var(--gold);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 5vw, 2.6rem); line-height: 1.1;
  box-shadow: 0 0.4rem 0 #a87412;
  rotate: -2deg;
}
.the-end__words { font-size: clamp(2rem, 9vw, 4.4rem); }
.the-end__go { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.cinema .start { font-size: var(--step-1); padding: 0.7rem 1.6rem; }
.cinema .curtain-words button.primary, .cinema .the-end button.primary { color: #3a1636; }
.cinema .the-end button:not(.primary) { background: var(--paper-film); color: var(--ink-film); border-color: #f3d6e6; }
@media (prefers-reduced-motion: no-preference) {
  .the-end:not([hidden]) .the-end__words { animation: drop 0.7s cubic-bezier(.3, 1.5, .5, 1); }
  @keyframes drop { from { translate: 0 -12rem; } }
}

.audience { height: clamp(1.4rem, 5vw, 2.6rem); margin-top: -0.2rem; line-height: 0; }
.audience svg { width: 100%; height: 100%; fill: #1a0f1b; }

.controls { position: relative; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.share-note:empty { display: none; }
.share-note { margin: 0; padding: 0.3em 0.9em; border-radius: 0.8em; background: var(--paper-film); color: var(--ink-film); font-size: var(--step--1); max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.share-note--bar { position: absolute; right: 0; bottom: calc(100% + 0.5rem); z-index: 5; box-shadow: var(--shadow); border: 2px solid #f3d6e6; }
.curtain-words__gift { margin: 0; padding: 0.15em 0.8em; border-radius: 999px; background: var(--gold); color: #3a1636; font-family: var(--font-display); font-weight: 600; rotate: 2deg; }
.cinema .ctl { min-width: 2.75rem; min-height: 2.75rem; padding: 0.3rem 0.7rem; font-size: 1.05rem; }
.progress { flex: 1; height: 0.6rem; border-radius: 999px; background: var(--rule); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--candyfloss); }
.clock { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: var(--step--1); white-space: nowrap; }
.extras { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 0.8rem; }
.extras .silent-hint { margin: 0; }

/* Wide, short screens (a landscape tablet is about 800 px tall): the screen
   is sized by the height, so the controls stay in view. */
@media (min-aspect-ratio: 1/1) {
  .hall:not(.is-full) .stage__frame, .hall:not(.is-full) .audience { width: min(100%, (100svh - 21.5rem) * 4 / 3); margin-inline: auto; }
}

/* Full screen ------------------------------------------------------------------ */

.cinema .full-start { background: var(--paper-film); color: var(--ink-film); border-color: #f3d6e6; font-size: var(--step--1); }
.cinema .ctl--full { white-space: nowrap; }
html.cinema-full { overflow: hidden; }
.hall.is-full {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, #4a2a4c, var(--hall) 70%);
  padding-block: calc(var(--edge-y) + env(safe-area-inset-top)) calc(var(--edge-y) + env(safe-area-inset-bottom));
}
.hall.is-full .stage { width: 100%; padding: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
/* The 4:3 screen as big as fits, leaving room for the audience and the controls. */
.hall.is-full { --room: calc(10rem + 2 * var(--edge-y)); }
.hall.is-full .stage__frame { width: min(100vw - 1rem, (100dvh - var(--room)) * 4 / 3); margin: 0 auto; }
.hall.is-full .audience { width: min(100vw - 1rem, (100dvh - var(--room)) * 4 / 3); margin: -0.2rem auto 0; }
@media (max-height: 32rem) {
  .hall.is-full { --room: calc(6rem + 2 * var(--edge-y)); }
  .hall.is-full .audience { display: none; }
}
.hall.is-full .controls {
  width: min(100vw - 1rem, 56rem); margin: 0.5rem auto 0; padding: 0.35rem 0.6rem;
  border-radius: 999px; background: rgb(26 15 27 / 0.7);
  transition: opacity 0.4s;
}
.hall.is-full .clock { color: #f3d6e6; }
.hall.is-full .progress { background: rgb(255 255 255 / 0.2); }
.hall.is-full.idle { cursor: none; }
.hall.is-full.idle .controls { opacity: 0; pointer-events: none; }
@media (max-width: 30rem) { .ctl__words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.voice-toggle { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-soft); }
.voice-toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--candyfloss-deep); }
.back { margin-top: 1.5rem; font-family: var(--font-display); }
.back a { color: var(--ink-soft); }