/* ============================================================
   AI tint: the living wall light (driven by js/ai-tint.js)
   ------------------------------------------------------------
   Everything here is inert until the script arms it: the layer
   (.mcb-ait) only exists once ai-tint.js appends it, and
   html.mcb-ait-on is what hands the wall from <body> to the
   layer. No JS, or mcbTint.off(), and the site is exactly the
   wall it was.

   Colours are set inline by the script (background-color on the
   light sources, --ait-glow on the focused poster/post, --ait-read
   on the lit paragraph) and fade with plain colour transitions,
   so nothing here needs @property.
   ============================================================ */

/* html has its own wall background (assembly-site.css), so body's
   background would paint over a z-index:-1 layer. Hand it over. */
html.mcb-ait-on > body.mcb-assembly { background: transparent; }

.mcb-ait {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}
.mcb-ait > div { position: absolute; pointer-events: none; }

/* the wall itself: same layers as body.mcb-assembly in assembly-site.css */
.mcb-ait-wall {
    inset: 0;
    background-color: #d2cabb;
    background-image:
        radial-gradient(130% 90% at 50% 0%, rgba(255, 250, 236, 0.5) 0%, rgba(255, 250, 236, 0) 46%),
        radial-gradient(120% 100% at 50% 108%, rgba(90, 76, 55, 0.28) 0%, rgba(90, 76, 55, 0) 44%),
        radial-gradient(42% 30% at 12% 38%, rgba(120, 100, 70, 0.10) 0%, rgba(120, 100, 70, 0) 100%),
        radial-gradient(36% 26% at 88% 64%, rgba(120, 100, 70, 0.09) 0%, rgba(120, 100, 70, 0) 100%),
        linear-gradient(180deg, #d6cec0 0%, #d2cabb 30%, #cdc4b3 100%);
}

/* Light sources are flat colour masked into soft pools, so a colour
   change is an ordinary background-color fade. */
.mcb-ait-sky {
    left: -20vw;
    right: -20vw;
    top: -30vh;
    height: 95vh;
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
    transition: background-color 6s ease;
}

.mcb-ait-lamp,
.mcb-ait-drift {
    left: 0;
    top: 0;
    width: 78vmax;
    height: 78vmax;
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.14) 66%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.14) 66%, transparent 100%);
    will-change: transform, opacity;
}
.mcb-ait-lamp {
    /* parked mid-screen until the script places it */
    transform: translate3d(calc(50vw - 39vmax), calc(32vh - 39vmax), 0);
    transition:
        transform 1.9s cubic-bezier(0.22, 0.7, 0.2, 1),
        background-color 2.4s ease;
}
.mcb-ait-drift {
    width: 64vmax;
    height: 64vmax;
    transform: translate3d(-12vmax, 30vh, 0);
    transition: background-color 3.2s ease;
}

/* late-night vignette: the wall's edges fall into shadow, posters stay lit */
.mcb-ait-night {
    inset: 0;
    background-color: #17120c;
    opacity: 0;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, transparent 35%, #000 100%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, transparent 35%, #000 100%);
    transition: opacity 6s ease;
}

/* breathing + wandering: slow enough to read as calm, never as motion */
@media (prefers-reduced-motion: no-preference) {
    .mcb-ait-lamp { animation: mcb-ait-breathe 8.5s ease-in-out infinite alternate; }
    .mcb-ait-drift { animation: mcb-ait-wander 64s ease-in-out infinite alternate; }
    .mcb-ait-sky { animation: mcb-ait-sway 90s ease-in-out infinite alternate; }
}
@keyframes mcb-ait-breathe {
    from { opacity: 0.74; }
    to { opacity: 1; }
}
@keyframes mcb-ait-wander {
    0%   { transform: translate3d(-14vmax, 34vh, 0) scale(1); }
    35%  { transform: translate3d(48vw, 58vh, 0) scale(1.12); }
    70%  { transform: translate3d(70vw, 6vh, 0) scale(0.92); }
    100% { transform: translate3d(14vw, -10vh, 0) scale(1.05); }
}
@keyframes mcb-ait-sway {
    from { transform: translate3d(-6vw, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 3vh, 0) scale(1.08); }
}

/* ============ the poster in focus ============ */
/* z-index makes the poster its own stacking context, so the glow's
   z-index:-1 tucks behind its own paper rather than behind the wall */
.mcb-home .mcb-poster.mcb-ait-lit { z-index: 2; }
.mcb-home .mcb-poster.mcb-ait-fade { z-index: 1; }
.mcb-home .mcb-poster:hover,
.mcb-home .mcb-poster:focus-within { z-index: 6; }
.mcb-home .mcb-poster::before {
    content: "";
    position: absolute;
    inset: -34px -30px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, var(--ait-glow, transparent) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 1.4s ease;
}
.mcb-home .mcb-poster.mcb-ait-lit::before { opacity: 1; }

/* ============ the post being read ============ */
.mcb-postpage .mcb-post-full {
    transition: box-shadow 2s ease;
}
.mcb-postpage .mcb-post-full.mcb-ait-lit {
    box-shadow:
        0 1px 2px rgba(34, 28, 20, 0.28),
        0 12px 26px rgba(34, 28, 20, 0.22),
        0 0 90px 4px var(--ait-glow, transparent);
}

/* the paragraph on the reading line: a faint tinted wash that reaches
   a little past the text (a box-shadow, so no line moves) and a thin
   guide bar in the left margin, both fading in and out */
.mcb-postpage .mcb-ait-p {
    position: relative;
    border-radius: 3px;
    transition: background-color 1.1s ease, box-shadow 1.1s ease;
    box-shadow: 0 0 0 0.4em transparent;
}
.mcb-postpage .mcb-ait-p::before {
    content: "";
    position: absolute;
    left: -1.05em;
    top: 0.2em;
    bottom: 0.2em;
    width: 3px;
    border-radius: 2px;
    background: var(--ait-bar, transparent);
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1);
    pointer-events: none;
}
.mcb-postpage .mcb-ait-p.mcb-ait-read {
    background-color: var(--ait-read);
    box-shadow: 0 0 0 0.4em var(--ait-read);
}
.mcb-postpage .mcb-ait-p.mcb-ait-read::before { opacity: 1; transform: none; }

@media print {
    .mcb-ait { display: none; }
    .mcb-postpage .mcb-ait-p.mcb-ait-read { background: none; box-shadow: none; }
    .mcb-postpage .mcb-ait-p::before { display: none; }
}