/* MONTEREY atmosphere primitives - shared by every Filament panel (loaded
   next to monterey-theme.css by App\Support\MontereyTheme::customStylesheet)
   and by the standalone login, 2FA and error pages.

   .mn-room     the room behind the page: concrete, neon haze, grain, foliage
                (markup: App\Support\MontereyTheme::roomBackdrop)
   .mn-foliage  a tropical frond in a screen corner, lit from below
   .mn-mark     the chrome mark/lockup
   .mn-shine    a highlight sweeping across chrome, masked to the artwork
                (markup: App\Support\MontereyTheme::logo / ::shine)
   .mn-ripple   the press bloom added by MontereyTheme's ripple script

   Colors come from the same --mn-* channels as monterey-theme.css; standalone
   pages declare them themselves. Motion: transform/opacity only on anything
   large, and all of it stops under prefers-reduced-motion. */

:root {
    --mn-primary: 31, 191, 107;
    --mn-primary-2: 91, 245, 160;
    --mn-accent: 18, 160, 87;
    --mn-accent-bright: 111, 231, 172;
    --mn-concrete-950: 7, 9, 10;

    /* Chrome, sampled off the mark itself: the blown highlight along its top
       bevel down to the graphite in its shadow side. */
    --mn-chrome-hi: 246, 249, 252;
    --mn-chrome: 232, 237, 242;
    --mn-chrome-mid: 184, 194, 204;
    --mn-chrome-lo: 140, 150, 163;

    /* Planted edges. Where a page needs a decorated boundary - the foot of the
       sidebar, the bottom of a hero panel, an empty table - foliage grows
       along it. Every tile is seamless under repeat-x. */
    --mn-foliage-band: url("/images/monterey-band.svg?v=1");
    --mn-foliage-band-deep: url("/images/monterey-band-deep.svg?v=1");
    --mn-vine-line: url("/images/monterey-vine.svg?v=1");
    --mn-frond-lines: url("/images/monterey-fronds-line.svg?v=1");

    /* A second frond arrangement so opposite corners aren't the same plant
       mirrored, and the trailing stems that hang from the ceiling. */
    --mn-frond-2: url("/images/monterey-frond-2.svg?v=1");
    --mn-hanging: url("/images/monterey-hanging.svg?v=1");

    /* Poured concrete: fine grain, so large flat panels never band. */
    --mn-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    --mn-frond: url("/images/monterey-frond.svg?v=1");
}

/* Generic drift/breathe, shared by the planted edges in monterey-theme.css
   and monterey-pages.css. The distance in the name is the tile width the
   animation is paired with, so a strip loops without a visible jump. */
@keyframes mn-drift-800 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-800px, 0, 0); } }
@keyframes mn-drift-800-rev { from { transform: translate3d(-800px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes mn-drift-120 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-120px, 0, 0); } }
@keyframes mn-swell { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }

/* ---------- The room ---------- */
.mn-room {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 78% -14%, rgba(var(--mn-primary), 0.10), transparent 64%),
        radial-gradient(900px 560px at -10% 108%, rgba(var(--mn-accent-bright), 0.06), transparent 58%),
        linear-gradient(180deg, rgb(18, 22, 21) 0%, rgb(var(--mn-concrete-950)) 52%, rgb(3, 4, 5) 100%);
}

/* Neon haze: the wash a room full of plants throws back at the ceiling. Two
   slow, out-of-phase blooms so the edges never pulse in lockstep. */
.mn-room-haze {
    position: absolute;
    inset: -10vh -10vw;
    background:
        radial-gradient(48% 42% at 6% 96%, rgba(var(--mn-primary), 0.22), transparent 70%),
        radial-gradient(42% 38% at 96% 8%, rgba(var(--mn-primary-2), 0.13), transparent 70%),
        radial-gradient(38% 30% at 88% 98%, rgba(var(--mn-chrome-lo), 0.07), transparent 72%);
    will-change: opacity, transform;
    animation: mn-haze 24s ease-in-out infinite alternate;
}

@keyframes mn-haze {
    0% { opacity: 0.55; transform: translate3d(-1.2%, 1%, 0) scale(1); }
    100% { opacity: 1; transform: translate3d(1.2%, -1%, 0) scale(1.04); }
}

/* Concrete grain over the whole ground, so the large dark panels read as a
   poured surface rather than flat #000. */
.mn-room-grain {
    position: absolute;
    inset: 0;
    background-image: var(--mn-grain);
    background-size: 160px 160px;
    opacity: 0.045;
    mix-blend-mode: overlay;
}

/* ---------- Foliage ---------- */
/* The room is planted: a frond in each corner, trailing stems hanging from
   the ceiling edge. All of it sits in .mn-room, which is fixed at z-index -1,
   so it can never cover a table or a form - it only fills the margins the
   reading column leaves empty. */

/* Stems trailing down from the top edge. The tile repeats horizontally and is
   seamless, so it spans any width; it drifts slowly sideways rather than
   swaying, which at this scale reads as the whole planting shifting in the
   draught rather than each stem twitching. */
.mn-hanging {
    position: absolute;
    top: 0;
    left: -600px;
    width: calc(100% + 1200px);
    height: clamp(180px, 26vh, 340px);
    background: var(--mn-hanging) repeat-x top center / 1200px 340px;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    will-change: transform;
    animation: mn-drift-1200 180s linear infinite;
}

/* The neon the ceiling strips throw up into the hanging leaves. */
.mn-hanging::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--mn-primary), 0.5), transparent 70%);
    -webkit-mask-image: var(--mn-hanging);
    mask-image: var(--mn-hanging);
    -webkit-mask-size: 1200px 340px;
    mask-size: 1200px 340px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    mix-blend-mode: screen;
    opacity: 0.6;
}

@keyframes mn-drift-1200 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-1200px, 0, 0); }
}

/* Corner fronds. They lean in and out on a long cycle; the ::after under each
   one is the neon uplight the room's floor strips throw onto the leaves. */
.mn-foliage {
    position: absolute;
    width: clamp(280px, 32vw, 560px);
    aspect-ratio: 333 / 323;
    background: var(--mn-frond) center / contain no-repeat;
    opacity: 0.85;
    will-change: transform;
}

.mn-foliage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 55% at 40% 70%, rgba(var(--mn-primary), 0.5), transparent 72%);
    -webkit-mask-image: var(--mn-frond);
    mask-image: var(--mn-frond);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0.8;
}

/* Every frond pivots about its own centre. The artwork fans out of its
   top-left, so each corner just needs the right mirror - and mirroring about
   the centre is the only origin that leaves the box where it was placed. An
   edge origin (8% 10%, say) throws a flipped element a whole height across
   the screen, which is how the bottom-left plant once ended up mid-page. */
.mn-foliage {
    transform-origin: 50% 50%;
}

.mn-foliage--tl {
    top: -2vh;
    left: -2vw;
    animation: mn-sway 21s ease-in-out infinite alternate;
}

.mn-foliage--br {
    right: -2vw;
    bottom: -2vh;
    scale: -1 -1;
    opacity: 0.6;
    animation: mn-sway 27s ease-in-out infinite alternate-reverse;
    animation-delay: -6s;
}

/* The other two corners take the second arrangement so opposite corners are
   not one plant mirrored twice. The flips use the standalone `scale` property
   rather than transform, leaving `transform` free for the sway keyframes. */
.mn-foliage--tr,
.mn-foliage--bl {
    background-image: var(--mn-frond-2);
    aspect-ratio: 384 / 359;
}

.mn-foliage--tr::after,
.mn-foliage--bl::after {
    -webkit-mask-image: var(--mn-frond-2);
    mask-image: var(--mn-frond-2);
}

.mn-foliage--tr {
    top: -2vh;
    right: -2vw;
    scale: -1 1;
    opacity: 0.55;
    animation: mn-sway 24s ease-in-out infinite alternate-reverse;
    animation-delay: -11s;
}

.mn-foliage--bl {
    bottom: -2vh;
    left: -2vw;
    scale: 1 -1;
    opacity: 0.5;
    animation: mn-sway 30s ease-in-out infinite alternate;
    animation-delay: -3s;
}

@keyframes mn-sway {
    0% { transform: rotate(-1.6deg) translate3d(0, 0, 0); }
    100% { transform: rotate(1.8deg) translate3d(0.8%, -1.2%, 0); }
}

/* ---------- Chrome ---------- */
/* A highlight travelling across the metal every few seconds. It is masked to
   the artwork's own alpha (--mn-art, set inline next to the <img>), so it
   lights the letterforms and never the box around them. */
.mn-mark {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.mn-mark img {
    display: block;
    max-width: 100%;
}

/* In a panel sidebar the lockup is handed a fixed height by Filament
   (->brandLogoHeight), so it has to scale off that height, not off the
   column's width - otherwise it overflows and the header clips the
   wordmark clean off. */
.mn-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mn-lockup .mn-mark {
    display: block;
    height: 100%;
    max-width: 100%;
}

.mn-lockup .mn-mark-img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.mn-shine {
    isolation: isolate;
}

.mn-shine::after,
.mn-shine-pass {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 38%,
        rgba(var(--mn-chrome-hi), 0.0) 44%,
        rgba(var(--mn-chrome-hi), 0.85) 50%,
        rgba(var(--mn-chrome-hi), 0.0) 56%,
        transparent 62%
    );
    background-size: 260% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image: var(--mn-art);
    mask-image: var(--mn-art);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mix-blend-mode: screen;
    animation: mn-sweep 7s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes mn-sweep {
    0%, 62% { background-position: 180% 0; }
    88%, 100% { background-position: -80% 0; }
}

/* The wordmark set in type rather than artwork (headings, the sidebar label):
   the same chrome ramp poured into the glyphs. */
.mn-chrome-text {
    background: linear-gradient(
        176deg,
        rgb(var(--mn-chrome-hi)) 0%,
        rgb(var(--mn-chrome)) 26%,
        rgb(var(--mn-chrome-lo)) 52%,
        rgb(var(--mn-chrome)) 70%,
        rgb(var(--mn-chrome-hi)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---------- Ripple ---------- */
.mn-ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.30) 0, rgba(var(--mn-primary-2), 0.24) 38%, transparent 68%);
    transform: scale(0);
    animation: mn-ripple 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mn-ripple {
    to { transform: scale(1); opacity: 0; }
}

/* ---------- Mobile: quieter room ---------- */
@media (max-width: 767px) {
    /* On a phone the reading column is the whole screen - four fronds would
       sit under the content rather than beside it. Keep one corner and the
       hanging stems, which stay above the fold and out of the way. */
    .mn-foliage--br,
    .mn-foliage--tr,
    .mn-foliage--bl {
        display: none;
    }

    .mn-foliage--tl {
        width: 220px;
        opacity: 0.3;
    }

    .mn-hanging {
        height: 140px;
        opacity: 0.32;
    }

    .mn-room-grain {
        display: none;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mn-room *,
    .mn-mark,
    .mn-shine::after {
        animation: none !important;
    }

    .mn-shine::after,
    .mn-shine-pass,
    .mn-ripple {
        display: none;
    }
}