/* ============================================================
   MasqproT.com — generative carnival cathedral
   palette: candy-bright over marble milk
   typography: variable-fluid Fraunces + Bricolage Grotesque
   ============================================================ */

/* ---- Custom @property registrations for animatable variable axes ---- */
@property --wght {
    syntax: '<number>';
    inherits: false;
    initial-value: 400;
}
@property --soft {
    syntax: '<number>';
    inherits: false;
    initial-value: 50;
}
@property --opsz {
    syntax: '<number>';
    inherits: false;
    initial-value: 14;
}
@property --soap-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

:root {
    /* Candy-bright palette over marble milk */
    --meringue-vellum: #FFF5F8;
    --sugared-petal: #F2D6E5;
    --bubblegum-aria: #FF8FB1;
    --soap-cyan: #7CD3E0;
    --iris-lavender: #B6A6FF;
    --stage-yellow: #FFE27A;
    --plum-velvet: #5C3A6B;
    --backstage-indigo: #1B1330;
    --carrara-cream: #E9E2D2;
    --vein-tan: #C8B8A0;
    --vein-deep: #9D8B7C;

    /* Variable-fluid type axes (set per element) */
    --cursor-dx: 0;
    --cursor-dy: 0;
    --scroll-y: 0;

    /* Soft hover-lift shadow */
    --candy-shadow: 0 14px 38px -10px rgba(255, 143, 177, 0.55);
    --soap-shadow: 0 8px 22px -6px rgba(124, 211, 224, 0.6);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background: var(--meringue-vellum);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(242, 214, 229, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(182, 166, 255, 0.4) 0%, transparent 55%),
        var(--meringue-vellum);
    color: var(--plum-velvet);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.78;
    overflow-x: hidden;
    cursor: none;
}

/* Hide native cursor anywhere we have hover-targets */
a, button, [data-hover] { cursor: none; }

/* ============================================================
   IRIDESCENT SOAP-FILM OVERLAY (fixed, slow rotation)
   ============================================================ */
.soap-film {
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.14;
    mix-blend-mode: screen;
    background: conic-gradient(
        from var(--soap-angle, 0deg) at 50% 50%,
        var(--bubblegum-aria) 0deg,
        var(--soap-cyan) 90deg,
        var(--iris-lavender) 180deg,
        var(--stage-yellow) 270deg,
        var(--bubblegum-aria) 360deg
    );
    animation: soap-rotate 90s linear infinite;
    filter: blur(40px);
}
@keyframes soap-rotate {
    from { --soap-angle: 0deg; transform: rotate(0deg); }
    to   { --soap-angle: 360deg; transform: rotate(360deg); }
}

/* ============================================================
   BUBBLE CHORUS (persistent rising chorus)
   ============================================================ */
.bubble-chorus {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.chorus-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 28% 28%,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.25) 24%,
        rgba(124,211,224,0.4) 60%,
        rgba(124,211,224,0.75) 100%
    );
    box-shadow:
        inset 0 -2px 4px rgba(92,58,107,0.12),
        0 2px 8px rgba(124,211,224,0.35);
    will-change: transform, opacity;
    pointer-events: auto;
}
.chorus-bubble.small  { width: 5px; height: 5px; }
.chorus-bubble.medium { width: 13px; height: 13px; }
.chorus-bubble.large  { width: 28px; height: 28px; }

@keyframes bubble-rise {
    0%   { transform: translate3d(0, 105vh, 0); opacity: 0; }
    8%   { opacity: 0.85; }
    50%  { transform: translate3d(calc(var(--wobble, 12px) * 1), 50vh, 0); }
    92%  { opacity: 0.85; }
    100% { transform: translate3d(0, -10vh, 0); opacity: 0; }
}

.chorus-bubble.popping {
    animation: bubble-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes bubble-pop {
    0%   { transform: scale(1); opacity: 1; }
    60%  { transform: scale(1.6); opacity: 0.6; }
    100% { transform: scale(0); opacity: 0; }
}

.pop-ring {
    position: fixed;
    pointer-events: none;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--bubblegum-aria);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.9;
    animation: ring-fade 1400ms ease-out forwards;
}
@keyframes ring-fade {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; border-width: 1.5px; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; border-width: 0.2px; }
}

/* ============================================================
   CURSOR MASK (Bauta) — follows cursor with 80ms lerp
   ============================================================ */
.cursor-mask {
    position: fixed;
    top: 0; left: 0;
    width: 36px;
    height: 45px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: filter 220ms ease, opacity 220ms ease;
    filter: drop-shadow(0 4px 6px rgba(92,58,107,0.35));
}
.cursor-mask svg { width: 100%; height: 100%; }
.cursor-mask.clicking {
    animation: mask-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mask-pop {
    0%   { transform: translate(-50%, -50%) scale(1); }
    40%  { transform: translate(-50%, -50%) scale(1.5); filter: drop-shadow(0 0 12px var(--soap-cyan)); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
   SEED BADGE (numbered edition)
   ============================================================ */
.seed-badge {
    position: fixed;
    top: 22px;
    right: 26px;
    z-index: 100;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--plum-velvet);
    padding: 6px 10px;
    border: 1px solid rgba(92,58,107,0.3);
    border-radius: 2px;
    background: rgba(255,245,248,0.7);
    backdrop-filter: blur(6px);
}

/* ============================================================
   FOLIO BASE (magazine-spread double-page)
   ============================================================ */
.folios {
    position: relative;
    z-index: 5;
}
.folio {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    align-items: stretch;
    overflow: hidden;
    padding: 4rem 0;
}

.folio-page {
    position: relative;
    padding: 3rem 4rem;
}
.folio-left  { background: linear-gradient(95deg, rgba(255,245,248,1) 0%, rgba(255,245,248,0.95) 100%); }
.folio-right { background: linear-gradient(85deg, rgba(255,245,248,0.95) 0%, rgba(255,245,248,1) 100%); }

/* Binding gutter — subtle shadow down the spine */
.binding-gutter {
    width: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(92,58,107,0.2) 20%,
        rgba(92,58,107,0.4) 50%,
        rgba(92,58,107,0.2) 80%,
        transparent 100%
    );
    box-shadow:
        -6px 0 12px -6px rgba(92,58,107,0.25),
         6px 0 12px -6px rgba(92,58,107,0.25);
}

/* Page numbers */
.page-num {
    position: absolute;
    bottom: 1.4rem;
    left: 2rem;
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--plum-velvet);
    opacity: 0.65;
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 240ms ease;
}
.page-num::after {
    content: ' ❦';
    color: var(--bubblegum-aria);
    font-style: normal;
}
.page-num-right {
    left: auto;
    right: 2rem;
}
.folio:hover .page-num { transform: translateY(-3px); opacity: 0.95; }

.stage-direction {
    position: absolute;
    top: 1.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-style: italic;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--plum-velvet);
    opacity: 0.45;
}
.stage-left  { left: 2rem; }
.stage-right { right: 2rem; }

/* ============================================================
   FOLIO CONTENT WRAPPER (centered on the spread)
   ============================================================ */
.folio-content {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    z-index: 5;
    padding: 5rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    pointer-events: none;
}
.folio-content > * { pointer-events: auto; }

.folio-heading {
    max-width: 720px;
}
.folio-heading-centered {
    margin: 0 auto;
    text-align: center;
    max-width: 760px;
}

.folio-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--bubblegum-aria);
    margin-bottom: 0.6rem;
}

.folio-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.05;
    color: var(--plum-velvet);
    font-variation-settings: 'wght' var(--wght, 480), 'opsz' var(--opsz, 56);
    transition: font-variation-settings 320ms ease;
}

.folio-prose {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.22rem;
    color: var(--plum-velvet);
    opacity: 0.86;
    line-height: 1.7;
    margin-top: 1.2rem;
}

/* Drop-cap */
.dropcap {
    display: inline-block;
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-size: 1.8em;
    line-height: 1;
    color: var(--bubblegum-aria);
    margin-right: 0.08em;
    text-shadow:
        1px 1px 0 rgba(124,211,224,0.4),
        -1px -1px 0 rgba(255,226,122,0.3);
    transform: translateY(0.08em);
    transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 320ms ease;
}
.dropcap:hover {
    transform: translateY(0.06em) scale(1.06) rotate(-1.5deg);
    text-shadow:
        2px 2px 0 var(--soap-cyan),
        -2px -2px 0 var(--stage-yellow);
}

/* ============================================================
   FOLIO I — COVER
   ============================================================ */
.folio-cover {
    min-height: 100vh;
}
.cover-content {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    pointer-events: none;
}
.cover-content > * { pointer-events: auto; }

.cover-tagline-top {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--plum-velvet);
    opacity: 0.55;
    margin-bottom: 2rem;
}

.masthead {
    font-family: 'Fraunces', serif;
    font-style: normal;
    font-size: clamp(5rem, 16vw, 14rem);
    line-height: 0.86;
    color: var(--plum-velvet);
    letter-spacing: -0.02em;
    font-variation-settings:
        'wght' var(--wght, 320),
        'opsz' 144,
        'SOFT' var(--soft, 60);
    transition: font-variation-settings 200ms ease;
    margin: 0;
    background: linear-gradient(180deg, var(--plum-velvet) 0%, var(--bubblegum-aria) 60%, var(--iris-lavender) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 8px 28px rgba(255,143,177,0.35));
}

.cover-mask-stage {
    position: relative;
    margin: 1.5rem 0;
    filter: drop-shadow(0 14px 32px rgba(92,58,107,0.25));
}
.cover-mask {
    width: clamp(220px, 28vw, 360px);
    height: auto;
}
.cover-mask .eye-comedy-l,
.cover-mask .eye-comedy-r,
.cover-mask .eye-tragedy-l,
.cover-mask .eye-tragedy-r {
    transform-origin: center;
    transition: transform 110ms ease;
}
.cover-mask.blinking .eye-comedy-l,
.cover-mask.blinking .eye-comedy-r,
.cover-mask.blinking .eye-tragedy-l,
.cover-mask.blinking .eye-tragedy-r {
    transform: scaleY(0.08);
}

.cover-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    color: var(--plum-velvet);
    opacity: 0.88;
    margin-top: 1.4rem;
    letter-spacing: 0.02em;
}

.cover-foot {
    margin-top: 3rem;
}

/* ============================================================
   FOLIO II — DRAMATIS PERSONAE (marble busts)
   ============================================================ */
.folio-personae {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,143,177,0.18) 0%, transparent 65%),
        linear-gradient(180deg, var(--meringue-vellum) 0%, var(--sugared-petal) 100%);
}
.folio-content-personae {
    gap: 3rem;
}

.bust-frieze {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 3rem;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}

.bust-card {
    position: relative;
    padding: 1.5rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.bust-card:hover {
    transform: translateY(-14px) rotate(-2.5deg);
}
.bust-card:hover .bust-shadow {
    transform: translateX(-50%) scaleX(1.4);
    opacity: 0.55;
}
.bust-card:hover .bust-descriptor {
    opacity: 1;
    transform: translateY(0);
}

.bust-svg {
    width: 180px;
    height: 220px;
    overflow: visible;
}

.bust-shadow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,143,177,0.55) 0%, transparent 70%);
    opacity: 0.3;
    transition: transform 240ms ease, opacity 240ms ease;
}

.bust-label {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--plum-velvet);
    margin-top: 0.8rem;
    letter-spacing: 0.02em;
}
.bust-numeral {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--vein-deep);
    margin-top: 0.2rem;
}
.bust-descriptor {
    font-family: 'JetBrains Mono', monospace;
    font-style: italic;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--plum-velvet);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 280ms ease, transform 280ms ease;
    margin-top: 0.5rem;
    max-width: 200px;
}

/* ============================================================
   FOLIO III — BUBBLE ARIA
   ============================================================ */
.folio-aria {
    background:
        conic-gradient(
            from 30deg at 50% 50%,
            rgba(255,143,177,0.22) 0deg,
            rgba(124,211,224,0.25) 90deg,
            rgba(182,166,255,0.22) 180deg,
            rgba(255,226,122,0.18) 270deg,
            rgba(255,143,177,0.22) 360deg
        ),
        var(--meringue-vellum);
    min-height: 110vh;
}
.folio-content-aria {
    gap: 2rem;
}

.aria-stage {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    margin: 0 auto;
    max-width: 1100px;
}

.aria-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 28% 28%,
        rgba(255,255,255,0.92) 0%,
        rgba(242,214,229,0.4) 28%,
        rgba(124,211,224,0.4) 60%,
        rgba(124,211,224,0.85) 100%
    );
    box-shadow:
        inset 0 -4px 8px rgba(92,58,107,0.12),
        0 6px 18px rgba(124,211,224,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem;
    text-align: center;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 600ms ease;
    will-change: transform, opacity;
}
.aria-bubble-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--plum-velvet);
}
.aria-bubble.popped {
    transform: scale(0);
    opacity: 0;
}
.aria-bubble.popped .aria-bubble-text {
    /* released into gutter — handled by JS appendChild */
}

.aria-coda {
    text-align: center;
    font-size: 0.95rem;
    color: var(--plum-velvet);
    opacity: 0.7;
}

/* ============================================================
   FOLIO IV — MASK ATLAS (4×3 grid)
   ============================================================ */
.folio-atlas {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(124,211,224,0.18) 0%, transparent 65%),
        var(--meringue-vellum);
}
.folio-content-atlas {
    gap: 2.5rem;
}

.mask-atlas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}

.mask-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(140deg, var(--meringue-vellum) 0%, var(--sugared-petal) 100%);
    border: 1px solid rgba(92,58,107,0.2);
    border-radius: 4px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 240ms ease, border-color 240ms ease;
    will-change: transform;
}
.mask-tile:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 18px rgba(124,211,224,0.55), 0 0 0 6px rgba(124,211,224,0.15);
    border-color: rgba(124,211,224,0.5);
}
.mask-tile svg {
    width: 75%;
    height: 75%;
    transition: transform 280ms ease;
}
.mask-tile:hover svg {
    animation: tile-mask-blink 480ms ease;
}
@keyframes tile-mask-blink {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.04); }
}
.mask-tile-name {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--plum-velvet);
    margin-top: 0.4rem;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

/* ============================================================
   FOLIO V — MARBLE ASIDE (colonnade)
   ============================================================ */
.folio-aside {
    background: linear-gradient(180deg, var(--meringue-vellum) 0%, rgba(233,226,210,0.6) 50%, var(--meringue-vellum) 100%);
}
.folio-content-aside {
    display: grid !important;
    grid-template-columns: 120px 1fr 120px;
    align-items: center;
    gap: 2rem;
    padding: 5rem 4rem !important;
    position: relative;
}
.colonnade {
    position: relative;
    height: 70vh;
    min-height: 520px;
}
.colonnade svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(2px 4px 8px rgba(92,58,107,0.2));
}
.aside-prose {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
}
.aside-prose p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.85;
    color: var(--plum-velvet);
    margin-bottom: 1.4rem;
}

.trapped-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.trapped-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 28% 28%,
        rgba(255,255,255,0.85) 0%,
        rgba(124,211,224,0.4) 50%,
        rgba(124,211,224,0.7) 100%
    );
    will-change: transform;
}

/* ============================================================
   FOLIO VI — CURTAIN CALL
   ============================================================ */
.folio-curtain {
    background: linear-gradient(180deg,
        var(--sugared-petal) 0%,
        var(--bubblegum-aria) 30%,
        var(--iris-lavender) 65%,
        var(--backstage-indigo) 100%
    );
    color: var(--meringue-vellum);
    min-height: 110vh;
}
.folio-curtain .folio-page {
    background: transparent;
}
.folio-curtain .page-num,
.folio-curtain .stage-direction {
    color: var(--meringue-vellum);
    opacity: 0.7;
}
.folio-curtain .page-num::after { color: var(--stage-yellow); }
.folio-curtain .binding-gutter {
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255,245,248,0.3) 20%,
        rgba(255,245,248,0.5) 50%,
        rgba(255,245,248,0.3) 80%,
        transparent 100%);
}

.folio-content-curtain {
    align-items: center;
    text-align: center;
    gap: 2rem;
}
.curtain-title {
    color: var(--meringue-vellum);
    background: linear-gradient(180deg, var(--meringue-vellum) 0%, var(--stage-yellow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.folio-curtain .folio-eyebrow { color: var(--stage-yellow); }
.folio-curtain .dropcap {
    color: var(--stage-yellow);
    text-shadow:
        2px 2px 0 rgba(255,143,177,0.5),
        -2px -2px 0 rgba(124,211,224,0.4);
}

.finale-stage {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 2 / 1;
}
.finale-mask-cloud {
    width: 100%;
    height: 100%;
}

.finale-text {
    margin-top: 2rem;
    color: var(--meringue-vellum);
}
.wordmark {
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    color: var(--meringue-vellum);
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.fin-line {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 0.9rem;
    letter-spacing: 0.4em;
    color: var(--stage-yellow);
    margin-bottom: 1.2rem;
}
.finale-credit {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--meringue-vellum);
    opacity: 0.8;
}

.finale-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.finale-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 28% 28%,
        rgba(255,255,255,0.85) 0%,
        rgba(255,226,122,0.35) 35%,
        rgba(255,143,177,0.55) 75%,
        rgba(182,166,255,0.85) 100%
    );
    will-change: transform, opacity;
}
.finale-bubble.bursting {
    animation: finale-burst 1400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes finale-burst {
    0%   { transform: translateY(0) scale(1); opacity: 0.9; }
    70%  { transform: translateY(-260px) scale(1.4); opacity: 0.7; }
    100% { transform: translateY(-380px) scale(0); opacity: 0; }
}

/* ============================================================
   TEAR-STRIP TRANSITIONS (between folios)
   ============================================================ */
.tear-strip {
    height: 24px;
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(92,58,107,0.06) 50%, transparent 100%);
    overflow: hidden;
}
.tear-strip svg {
    width: 100%;
    height: 100%;
    display: block;
}
.tear-path {
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1200ms cubic-bezier(0.65, 0, 0.35, 1);
}
.tear-strip.revealed .tear-path {
    stroke-dashoffset: 0;
}

/* ============================================================
   CHERUB FLOURISHES (margins)
   ============================================================ */
.cherub {
    position: fixed;
    width: 48px;
    height: 48px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 4;
    transition: opacity 320ms ease, transform 320ms ease;
}
.cherub-tl { top: 80px; left: 24px; animation: cherub-bob 6s ease-in-out infinite; }
.cherub-br { bottom: 80px; right: 24px; animation: cherub-bob 7s ease-in-out infinite reverse; }
@keyframes cherub-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .folio { grid-template-columns: 1fr; }
    .binding-gutter { display: none; }
    .folio-content { padding: 4rem 2rem; }
    .folio-content-aside {
        grid-template-columns: 1fr !important;
        padding: 4rem 2rem !important;
    }
    .colonnade { height: 200px; min-height: 200px; }
    .bust-frieze { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
    .mask-atlas { grid-template-columns: repeat(3, 1fr); }
    .seed-badge { top: 12px; right: 12px; font-size: 10px; }
    .cherub { width: 32px; height: 32px; }
}
@media (max-width: 600px) {
    .bust-frieze { grid-template-columns: 1fr 1fr; }
    .mask-atlas { grid-template-columns: repeat(2, 1fr); }
    .folio-page { padding: 2rem 1.5rem; }
    .cover-tagline-top { font-size: 0.66rem; }
    .stage-direction { font-size: 0.58rem; }
    body { cursor: auto; }
    .cursor-mask { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .soap-film { animation: none; }
    .chorus-bubble { animation-duration: 80s !important; }
    .cover-mask.blinking .eye-comedy-l,
    .cover-mask.blinking .eye-comedy-r,
    .cover-mask.blinking .eye-tragedy-l,
    .cover-mask.blinking .eye-tragedy-r { transform: scaleY(1); }
    .mask-tile:hover svg { animation: none; }
    .cherub { animation: none; }
}