/* Lizardi Institutoa — the artwork is the interface.
   This only places it, and adds a few quiet controls. */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

:root {
  --ochre: #c48c33; /* the book's cover */
  --garden: #9da94a; /* the garden in the book: the shelf, so the cover stands out against it */
  --paper: #f5f1f8; /* the diary's paper */
  --grape: #5d157f; /* the diary's ink */
  --lilac: #b596d6; /* that ink, thinned */
  --dark: #2b2118;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  /* Room for the status bar, the rounded corners and the home indicator. */
  --top: env(safe-area-inset-top, 0px);
  --right: env(safe-area-inset-right, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --left: env(safe-area-inset-left, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
/* It behaves like an app: no pinch or double-tap zoom, no text selection, no long-press menus. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y; overscroll-behavior: none; } /* and no rubber-band bounce past the ends */
body, h1, h2, ol, figure { margin: 0; padding: 0; }
body { -webkit-user-select: none; user-select: none; }
a { -webkit-touch-callout: none; }
ol { list-style: none; }
img, svg, picture { display: block; }
/* Artwork behaves like part of an app: no callout, no selection, no ghost image when dragged. */
img { max-width: 100%; height: auto; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- The collage: the cut-out drawings behind everything ---------- */

/* assets/wall.js scatters them and slides each one past at its own speed as the page scrolls.
   The layer fills the window but is sticky, not fixed: it belongs to the page, so if a browser lets
   the page bounce past its end the drawings go with it instead of hanging over the bare edge. */
.wall { position: sticky; top: 0; height: 100dvh; margin-bottom: -100dvh; overflow: hidden; }
/* Drawings fade into the background at the top and bottom edge instead of being cut off there. */
.wall::before, .wall::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 72px; pointer-events: none; }
.wall::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.wall::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
.sprite {
  position: absolute; top: 0; max-width: none; opacity: 0; scale: .4; cursor: pointer; will-change: translate; touch-action: manipulation;
  transition: opacity .4s calc(var(--i, 0) * 20ms), scale .7s var(--pop) calc(var(--i, 0) * 20ms);
  animation: bob var(--t, 5s) ease-in-out var(--d, 0s) infinite alternate;
}
.wall.ready .sprite { opacity: 1; scale: 1; }
/* Poke one: it gives under the finger, then springs up, and the ones around it jump too. */
.wall.settled .sprite { transition: scale .3s var(--pop); }
.wall.settled .sprite.press { scale: .84; transition: scale .07s ease-out; }
.sprite.hop { animation: hop .72s var(--wait, 0s) both; }
@keyframes bob { to { transform: translateY(var(--b, -8px)); } }
@keyframes hop {
  0% { transform: none; animation-timing-function: ease-out; }
  16% { transform: translateY(5px) scale(1.14, .82); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  48% { transform: translateY(var(--jump, -52px)) scale(.9, 1.12) rotate(var(--kick, 8deg)); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  72% { transform: translateY(2px) scale(1.1, .9); animation-timing-function: ease-out; }
  86% { transform: translateY(-7px) scale(.98, 1.03); animation-timing-function: ease-in; }
  100% { transform: none; }
}

/* ---------- The shelf: the book and the diary, lying on the collage ---------- */

/* One screen that never scrolls or bounces. A swipe stirs the collage instead (assets/wall.js). */
.home { --bg: var(--garden); background: var(--bg); height: 100dvh; overflow: hidden; touch-action: none; }
.shelf { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 7vw, 96px); padding: var(--top) var(--right) var(--bottom) var(--left); pointer-events: none; }
.work { position: relative; flex: none; height: min(64dvh, 40vw); overflow: hidden; pointer-events: auto; box-shadow: 0 1px 0 rgb(0 0 0 / .2), 10px 14px 0 rgb(0 0 0 / .2); transition: scale .25s var(--pop), rotate .4s var(--pop); animation: arrive .5s var(--pop) backwards; touch-action: manipulation; }
.work img, .work picture { width: 100%; height: 100%; }
.work.book { aspect-ratio: 1288 / 1820; rotate: -4deg; border-radius: 3px 9px 9px 3px; }
.work.book img { object-fit: cover; object-position: 100% 50%; } /* the front cover is the right half of the first spread */
.work.book::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; background: linear-gradient(90deg, #0003, #fff2 40%, #0000); }
.work.diary { aspect-ratio: 2550 / 3300; rotate: 3deg; border-radius: 3px; background: #fff; animation-delay: .08s; }
.work:active { scale: .95; }
.work:focus-visible { outline-color: #fff; }
@media (hover: hover) { .work:hover { rotate: 0deg; } }
@keyframes arrive { from { opacity: 0; scale: .8; } }
/* Lucas and Ida, small in a free corner: the way in to the page about them. */
.faces { position: absolute; left: calc(var(--left) + 12px); bottom: calc(var(--bottom) + 10px); display: flex; align-items: flex-end; gap: 3px; pointer-events: auto; animation: arrive .5s var(--pop) .16s backwards; }
.faces a { width: max(44px, min(17vw, 10dvh)); transition: scale .25s var(--pop); touch-action: manipulation; }
.faces a:active { scale: .9; }
.faces a:focus-visible { outline-color: #fff; }
/* Upright phone: one above the other, corner to corner. */
@media (max-aspect-ratio: 1/1) {
  .shelf { flex-direction: column; gap: 0; }
  .work { height: auto; width: min(60vw, 35dvh); }
  .work.book { align-self: flex-start; margin-left: calc(50% - min(60vw, 35dvh) * .76); }
  .work.diary { align-self: flex-end; margin-right: calc(50% - min(60vw, 35dvh) * .76); margin-top: -4%; }
  .faces { left: calc(var(--left) + 8px); gap: 2px; } /* narrow enough to stay clear of the diary's corner */
  .faces a { width: max(44px, min(14vw, 10dvh)); }
}

/* ---------- Controls: bare glyphs, no plates and no shadows ---------- */

.ic { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; touch-action: manipulation; transition: scale .2s var(--pop), opacity .2s; }
.ic:active { scale: .8; }
.ic[disabled] { opacity: 0; pointer-events: none; }
.ic:focus-visible { outline-width: 2px; outline-offset: -6px; border-radius: 8px; }
.ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- The picture book ---------- */

/* Set by assets/book.js: --page is the colour of the page on screen, --ink-l and --ink-r a shade of it
   for the controls on the left and on the right. */
.reader { height: 100dvh; overflow: hidden; overscroll-behavior: none; background: var(--page); --page: var(--ochre); --ink-l: #fff; --ink-r: #fff; }
.tint { display: none; position: fixed; z-index: 1; inset: 0 0 auto; height: 12px; background: var(--page); pointer-events: none; } /* what iOS colours the status bar from */
.pages { --h: 100dvh; display: flex; height: var(--h); overflow: auto hidden; scroll-snap-type: x mandatory; overscroll-behavior: none; scrollbar-width: none; touch-action: pan-x; cursor: pointer; } /* cursor: iOS only sends taps to things that look clickable */
.pages::-webkit-scrollbar { display: none; }
.pages:focus-visible { outline: none; }
.spread { position: relative; flex: none; height: 100%; display: grid; place-items: center; background: linear-gradient(90deg, var(--l) 50%, var(--r) 0); }
.spread > img { max-width: none; }
.spread > i { position: absolute; top: 0; left: 0; width: 50%; height: 100%; pointer-events: none; }
.spread > i + i { left: 50%; }

.chrome { transition: opacity .25s; }
.quiet .chrome { opacity: 0; pointer-events: none; }
.chrome .ic, .chrome .progress { position: fixed; z-index: 2; }
.back { top: calc(var(--top) + 4px); left: calc(var(--left) + 4px); }
.back, .prev { color: var(--ink-l); }
.next { color: var(--ink-r); }
.chrome .progress { height: 3px; pointer-events: none; }
.chrome .progress::before, .chrome .progress i { content: ""; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--ink-l) 50%, var(--ink-r) 0); }
.chrome .progress::before { opacity: .3; }
.chrome .progress i { clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 2px); transition: clip-path .3s; }

/* Wide windows: one spread at a time, arrows at the sides. */
@media (min-aspect-ratio: 1001/1000) {
  .spread { width: 100vw; scroll-snap-align: center; scroll-snap-stop: always; }
  .spread > img { width: min(100vw, var(--h) * var(--ar)); }
  .prev, .next { top: calc(50% - 22px); }
  .prev { left: calc(var(--left) + 4px); }
  .next { right: calc(var(--right) + 4px); }
  .chrome .progress { left: calc(50% - min(18vw, 130px)); width: min(36vw, 260px); bottom: calc(var(--bottom) + 14px); }
}
/* Tall windows: one page at a time (two stops per spread). The page leaves a band of its own colour
   above and below; the controls sit in those bands, off the artwork. */
@media (max-aspect-ratio: 1/1) {
  .pages { --pw: min(100vw, var(--h) * var(--ar) / 2); padding-inline: calc((100vw - var(--pw)) / 2); }
  .spread > img { width: calc(var(--pw) * 2); }
  .spread > i { scroll-snap-align: center; scroll-snap-stop: always; }
  .tint { display: block; }
  .prev, .next { bottom: calc(var(--bottom) + 4px); }
  .prev { left: calc(var(--left) + 4px); }
  .next { right: calc(var(--right) + 4px); }
  .chrome .progress { left: calc(var(--left) + 64px); right: calc(var(--right) + 64px); bottom: calc(var(--bottom) + 24px); }
}

/* ---------- The diary ---------- */

.diary { --bg: #e9e2f0; background: var(--bg); } /* a shade under the comic's paper, so the pages stand out */
/* Here the collage stays in the background: still, and in the diary's own purple. */
.diary .wall { pointer-events: none; }
.diary .sprite { animation: none; filter: grayscale(1) sepia(1) hue-rotate(225deg) saturate(3) contrast(.8) brightness(1.02); }

.strip { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; padding-bottom: calc(var(--bottom) + 30vh); touch-action: pan-y; }
.chapter + .chapter { margin-top: clamp(120px, 34vw, 220px); } /* a window onto the collage between chapters */
.page img { width: 100%; background-color: #fff; }
@media (min-width: 800px) {
  .strip { padding-top: 24px; }
  .page + .page { margin-top: 16px; }
  .page img { border-radius: 2px; }
}

/* A bar in the diary's ink. It slides away when you read on and comes back when you scroll up or tap.
   Sticky like the collage, so it stays with the page. */
.bar { position: sticky; z-index: 2; top: 0; display: flex; align-items: flex-end; justify-content: space-between; height: calc(var(--top) + 46px); padding: 0 calc(var(--right) + 2px) 1px calc(var(--left) + 2px); background: var(--grape); color: var(--paper); transition: translate .3s cubic-bezier(.2, .8, .3, 1); }
.quiet .bar { translate: 0 -46px; }
.quiet .bar .ic { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.bar .progress { position: absolute; inset: 100% 0 auto; height: 3px; pointer-events: none; }
.bar .progress i { display: block; height: 100%; background: var(--lilac); transform-origin: 0 50%; scale: var(--p, 0) 1; transition: scale .3s; }

/* Chapters: a sheet that slides up, showing the first page of each. */
.sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 760px; max-height: 84dvh; margin: 0 auto; padding: 0; border: 0; border-radius: 18px 18px 0 0; background: var(--paper); overflow: hidden auto; overscroll-behavior: contain; }
.sheet[open] { animation: sheet-up .3s cubic-bezier(.2, .9, .3, 1); }
.sheet.closing { animation: sheet-down .2s ease-in forwards; }
.sheet::backdrop { background: rgb(43 20 60 / .5); animation: fade .3s; }
.grab { position: sticky; top: 0; z-index: 1; height: 22px; background: var(--paper); }
.grab::after { content: ""; position: absolute; inset: 8px calc(50% - 18px) auto; height: 5px; border-radius: 3px; background: var(--lilac); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; padding: 4px 14px calc(var(--bottom) + 16px); }
.thumbs a { display: block; overflow: hidden; border-radius: 4px; outline: 1px solid var(--lilac); transition: scale .2s var(--pop); }
.thumbs a:active { scale: .94; }
.thumbs a[aria-current] { outline: 3px solid var(--grape); }
.thumbs a:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; }
.thumbs img { width: 100%; background-color: #fff; }
@keyframes sheet-up { from { translate: 0 100%; } }
@keyframes sheet-down { to { translate: 0 100%; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- About: the two of them, on the diary's paper ---------- */

.about { background: var(--paper); color: var(--grape); font: 1.0625rem/1.5 ui-rounded, system-ui, sans-serif; }
.about .back { position: absolute; z-index: 1; } /* scrolls away with the page, so text never runs under it */
.people { min-height: 100dvh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10vmin; padding: calc(var(--top) + 56px) calc(var(--right) + 24px) calc(var(--bottom) + 48px) calc(var(--left) + 24px); }
.person { width: min(100%, 320px); text-align: center; overflow-wrap: anywhere; scroll-margin-top: calc(var(--top) + 56px); }
.person img { width: min(64%, 32dvh); aspect-ratio: 4 / 5; margin-inline: auto; object-fit: contain; object-position: 50% 100%; }
.person h2 { margin-top: 10px; font-size: 1.375rem; line-height: 1.25; text-wrap: balance; }
.person p { margin: .7em 0 0; text-align: left; }
.person h2, .person p { -webkit-user-select: text; user-select: text; }
.person .role { margin-top: 2px; text-align: center; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition-duration: .01s !important; }
  @view-transition { navigation: none; }
}