/*
 * How a book page is drawn. Shared, byte for byte, by the editor preview, the
 * flipbook and the print PDF (Gotenberg inlines tokens.css + this file + print.css),
 * so everything here must look the same in a browser and in Chromium's print.
 * Sizes inside a page are in cqi (percent of the page width): a page looks the same
 * at any size.
 */

/* ---------- the page ---------- */
.page { position: relative; container-type: inline-size; aspect-ratio: 148 / 210; background: #FFFDF9; border-radius: 6px; box-shadow: 0 10px 30px rgba(60, 30, 20, .12); display: flex; flex-direction: column; overflow: hidden; color: var(--ink); font-family: var(--font-body); line-height: 1.5; }
.page__scene { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding-top: 16px; overflow: hidden; }
.page__character svg { width: 100%; height: auto; display: block; }
.page__text { font-family: var(--font-display); font-weight: 600; font-size: 4.9cqi; line-height: 1.3; text-align: center; margin: 0; padding: 4.5cqi 5.5cqi 6.4cqi; }
.scene--playa { background: linear-gradient(#BFE6F2 0 55%, #F3DDB3 55% 100%); }
.scene--volcan { background: linear-gradient(#CFE3D3 0 60%, #7FA77F 60% 100%); }
.scene--lluvia { background: linear-gradient(#C9D3DD, #EEF1F4); }
.scene--ciudad { background: linear-gradient(#F4D9C6 0 60%, #D9C2B0 60% 100%); }
.scene--corazones { background: radial-gradient(circle at 20% 30%, #F6CFC4 0 8%, transparent 9%), radial-gradient(circle at 80% 20%, #F6CFC4 0 6%, transparent 7%), #FBF1EC; }

/* characters drawn on a page until it's illustrated */
.page__character { width: 46cqi; }
.page__character .art img {
    /* the portrait's paper-white background melts into the scene: multiply + soft edges (bottom stays solid) */
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%);
    mask-composite: intersect;
}
.page__art { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.page__scene--illustrated { padding-top: 0; }
.page__illustration { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pictures don't drag, select or offer "save image": taps land on the clear shield over them. */
.page__scene img { pointer-events: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.page__shield { position: absolute; inset: 0; }
.page__scene > .art__badge { position: absolute; }

/* ---------- a character's picture (portrait or sketch) ---------- */
.art { position: relative; margin: 0; }
.art img { width: 100%; height: auto; display: block; }
.art__sketch svg { width: 100%; height: auto; display: block; }
.art__canvas { position: relative; overflow: hidden; }
.art__canvas img { width: 100%; height: auto; display: block; }
.art__badge { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(255, 253, 249, .8); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; padding: 6px 14px 6px 10px; font: 500 .85rem var(--font-body); display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 16px rgba(120, 60, 40, .16); white-space: nowrap; z-index: 3; }
.pet-placeholder { display: grid; place-items: center; aspect-ratio: 1; width: 100%; font-size: clamp(2rem, 8vw, 5rem); background: #F3E6DA; }

/* ---------- painting: iridescent shimmer, previews sweeping in, the picture developing ----------
   .iris sits over the old picture (or sketch) and under the previews; .iris-sheen sweeps
   over everything. Previews are appended one per pass, each revealed top to bottom. */
.iris, .iris-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.iris { background: #FBEFF3; opacity: .88; animation: iris-in .6s ease-out both; z-index: 1; }
.iris::before, .iris::after { content: ''; position: absolute; inset: -50%; }
/* a slow-turning swirl of nacre colors… */
.iris::before {
    background: conic-gradient(from 0deg at 42% 46%, #FFB3C8, #FFD1A6, #FFF1B0, #B4EDD3, #A6D5FF, #CDB4FF, #FFB3C8);
    filter: blur(28px) saturate(1.15);
    animation: iris-spin 9s linear infinite;
}
/* …with soft lights drifting the other way, so the colors keep shifting like oil on water */
.iris::after {
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent) 22% 28% / 46% 46% no-repeat,
        radial-gradient(closest-side, rgba(255, 160, 196, .7), transparent) 74% 62% / 52% 52% no-repeat,
        radial-gradient(closest-side, rgba(140, 210, 255, .65), transparent) 34% 80% / 42% 42% no-repeat;
    filter: blur(14px);
    animation: iris-drift 6s ease-in-out infinite alternate;
}
.iris-sheen {
    z-index: 2;
    /* fine grain, so it reads as something being made rather than a flat gradient */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .35 0 0 0 0 .4 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    transition: opacity .6s;
}
.iris-sheen::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 210, 234, .35) 44%, rgba(255, 255, 255, .7) 48%, rgba(186, 230, 255, .35) 52%, transparent 58%);
    animation: iris-sweep 2.6s cubic-bezier(.45, .05, .25, 1) infinite;
}
.art__canvas > .art__preview, .page__art > .art__preview {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
    filter: blur(1.5px) saturate(1.05);
    -webkit-mask: linear-gradient(#000 45%, transparent 55%) 0 0 / 100% 250% no-repeat;
    mask: linear-gradient(#000 45%, transparent 55%) 0 0 / 100% 250% no-repeat;
    animation: iris-reveal 3.2s cubic-bezier(.35, .15, .45, 1) both;
}
.art__canvas > .art__preview--0, .page__art > .art__preview--0 { filter: blur(7px) saturate(1.25) brightness(1.04); transform: scale(1.05); }
.art:has(.art__preview--1) .iris-sheen, .page__scene:has(.art__preview--1) .iris-sheen { opacity: .45; }
/* the finished picture comes into focus, with one last glint */
.page__scene--fresh .page__illustration, .art--fresh .art__canvas > img { animation: iris-develop 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.iris-sheen--once { background: none; animation: iris-out .5s 1.3s ease-in forwards; }
.iris-sheen--once::before { animation-duration: 1.5s; animation-iteration-count: 1; }
.shimmer-text {
    background: linear-gradient(90deg, var(--ink) 0 40%, #C94F8A 47%, #6C7BE0 53%, var(--ink) 60% 100%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer-text 2.4s linear infinite;
}
.spinner { width: 48px; height: 48px; margin: 8px auto; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: spin 1s linear infinite; }
.spinner--sm { width: 16px; height: 16px; border: 0; margin: 0; flex: none; background: conic-gradient(transparent 0 12%, #F06292, #B388FF, #4FC3F7, #4DD0B1, #FFB74D); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes iris-in { from { opacity: 0; } }
@keyframes iris-out { to { opacity: 0; } }
@keyframes iris-spin { to { transform: rotate(1turn); } }
@keyframes iris-drift { from { transform: translate(-6%, 4%) rotate(0deg) scale(1); } to { transform: translate(6%, -5%) rotate(-50deg) scale(1.2); } }
@keyframes iris-sweep { from { transform: translateX(-22%); } to { transform: translateX(22%); } }
@keyframes iris-reveal { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
@keyframes iris-develop { from { filter: blur(10px) saturate(1.4) brightness(1.08); transform: scale(1.04); } }
@keyframes shimmer-text { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- page layouts (see reason_scene.slots.yaml) ---------- */
.page--text-above .page__text { order: -1; padding: 6.4cqi 5.5cqi 4.5cqi; }
.page--text-over .page__scene { position: absolute; inset: 0; }
.page--text-over .page__text { position: relative; margin-top: auto; padding-top: 14cqi; background: linear-gradient(to top, rgba(255, 253, 249, .94) 45%, rgba(255, 253, 249, 0)); }
.page--text-over .page__scene > .art__badge { top: 12px; bottom: auto; }
.page--framed .page__scene { margin: 9cqi 9cqi 0; border: 2.6cqi solid #FFFFFF; border-radius: 2px; box-shadow: 0 1.5cqi 4cqi rgba(60, 30, 20, .18); transform: rotate(-1.2deg); }
.page--framed .page__text { padding-top: 5.5cqi; }

/* ---------- covers (cover_front / cover_back templates) ---------- */
.page--cover { background: #FBF3EA; }
.page__title { margin: 0; padding: 10cqi 8cqi 5cqi; font-family: var(--font-display); font-weight: 600; font-size: 9.5cqi; line-height: 1.05; text-align: center; text-wrap: balance; }
.page__subtitle { margin: 0; padding: 4.5cqi 8cqi 8cqi; font-family: var(--font-display); font-weight: 500; font-size: 4.6cqi; color: var(--muted); text-align: center; }
.page--title-over .page__scene { position: absolute; inset: 0; }
.page--title-over .page__title { position: relative; padding-bottom: 16cqi; background: linear-gradient(rgba(251, 243, 234, .95) 40%, rgba(251, 243, 234, 0)); }
.page--title-over .page__subtitle { position: relative; margin-top: auto; padding-top: 12cqi; color: var(--ink); background: linear-gradient(to top, rgba(251, 243, 234, .92) 45%, rgba(251, 243, 234, 0)); }
.page--title-over .page__scene > .art__badge { bottom: 32%; }
.page--cover.page--framed .page__scene { margin: 0 10cqi; }
.page--back { justify-content: center; align-items: center; padding: 0 10% 12%; background: #F1E2D6; text-align: center; } /* % of the page width: a page can't use its own cqi */
.page__dedication { margin: 0 0 8cqi; font: 600 5.6cqi/1.4 var(--font-display); white-space: pre-line; text-wrap: balance; }
.page__cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 3cqi; }
.page__cast .art { width: 17cqi; aspect-ratio: 1; overflow: hidden; border: 1.2cqi solid #FFFFFF; border-radius: 50%; background: #F3E6DA; box-shadow: 0 1cqi 3cqi rgba(60, 30, 20, .18); }
.page__cast .art img, .page__cast .art svg { width: 100%; height: 100%; object-fit: cover; }
.page__cast .art__badge { display: none; }
.page__brand { position: absolute; left: 0; right: 0; bottom: 7cqi; display: flex; justify-content: center; } /* inline SVG: it has to print, where an <img> can't load */
.page__brand svg { display: block; width: 26cqi; height: 5.4cqi; }

@media (prefers-reduced-motion: reduce) {
    .iris::before, .iris::after, .iris-sheen::before, .shimmer-text, .spinner--sm { animation: none; }
    .art__canvas > .art__preview, .page__art > .art__preview { animation-duration: .01s; }
    .page__scene--fresh .page__illustration, .art--fresh .art__canvas > img { animation: none; }
}