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

   .mn-room     the room behind the page: a lotus pond at night - moonlight
                haze, grain, drifting petals, a flower in each corner
                (markup: App\Support\RanToRamTheme::roomBackdrop)
   .mn-foliage  a corner slot: a lotus seen from above in the top corners,
                blooms standing on the water in the bottom ones
   .mn-mark     the chrome mark / the sidebar lockup
   .mn-shine    a highlight sweeping across chrome, masked to the artwork
                (markup: App\Support\RanToRamTheme::logo / ::shine)
   .mn-ripple   the press bloom added by RanToRamTheme's ripple script

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

:root {
    /* Moonlit silver: the brushed face of the mark (primary), its blown
       highlight (primary-2), the steel of its bevels (accent) and a brighter
       steel for small lit details (accent-bright). */
    --mn-primary: 214, 221, 231;
    --mn-primary-2: 248, 250, 252;
    --mn-accent: 138, 152, 173;
    --mn-accent-bright: 190, 201, 216;
    --mn-concrete-950: 6, 7, 9;

    /* Chrome, sampled off the mark itself: the highlight along its top bevel
       down to the blue steel in its shadow side. */
    --mn-chrome-hi: 248, 250, 252;
    --mn-chrome: 226, 231, 238;
    --mn-chrome-mid: 176, 188, 204;
    --mn-chrome-lo: 120, 138, 162;

    /* The waterline. Where a page needs a decorated boundary - the foot of
       the sidebar, the bottom of a hero panel, an empty table - lily pads and
       small lotuses float along it. Every tile is seamless under repeat-x.
       (The variable names are the old slots; the art is the pond.) */
    --mn-foliage-band: url("/images/rantoram-band.svg?v=1");
    --mn-foliage-band-deep: url("/images/rantoram-band-deep.svg?v=1");
    --mn-vine-line: url("/images/rantoram-ripple.svg?v=1");
    --mn-frond-lines: url("/images/rantoram-lotus-line.svg?v=1");

    /* The corner flowers and the petals drifting across the top. */
    --mn-lotus-top: url("/images/rantoram-lotus-top.svg?v=1");
    --mn-frond: url("/images/rantoram-lotus.svg?v=1");
    --mn-frond-2: url("/images/rantoram-lotus-2.svg?v=1");
    --mn-hanging: url("/images/rantoram-petals.svg?v=1");

    /* Fine grain, so large flat dark 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");
}

/* Generic drift/breathe, shared by the planted edges in rantoram-theme.css
   and rantoram-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 640px at 72% -16%, rgba(var(--mn-primary-2), 0.075), transparent 64%),
        radial-gradient(900px 560px at -10% 110%, rgba(var(--mn-chrome-lo), 0.10), transparent 58%),
        linear-gradient(180deg, rgb(14, 16, 21) 0%, rgb(var(--mn-concrete-950)) 55%, rgb(3, 3, 5) 100%);
}

/* Moonlight: the pale wash a clear night throws down onto still water. Two
   slow, out-of-phase blooms so the light never pulses in lockstep. */
.mn-room-haze {
    position: absolute;
    inset: -10vh -10vw;
    background:
        radial-gradient(40% 36% at 78% 4%, rgba(var(--mn-primary-2), 0.10), transparent 70%),
        radial-gradient(46% 40% at 8% 98%, rgba(var(--mn-chrome-mid), 0.09), transparent 70%),
        radial-gradient(36% 28% at 92% 96%, rgba(var(--mn-chrome-lo), 0.08), transparent 72%);
    will-change: opacity, transform;
    animation: mn-haze 26s ease-in-out infinite alternate;
}

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

.mn-room-grain {
    position: absolute;
    inset: 0;
    background-image: var(--mn-grain);
    background-size: 160px 160px;
    opacity: 0.04;
    mix-blend-mode: overlay;
}

/* ---------- Drifting petals ---------- */
/* Loose petals carried across the top of the room. The tile repeats
   horizontally and is seamless, so it spans any width; it drifts slowly
   sideways, which at this scale reads as a night breeze over the pond rather
   than as anything falling. Masked out well before the reading column. */
.mn-hanging {
    position: absolute;
    top: 0;
    left: -600px;
    width: calc(100% + 1200px);
    height: clamp(180px, 30vh, 340px);
    background: var(--mn-hanging) repeat-x top center / 1200px 340px;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
    will-change: transform;
    animation: mn-drift-1200 200s linear infinite;
}

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

/* ---------- Lotuses ---------- */
/* All of it sits in .mn-room, fixed at z-index -1, so a flower can never
   cover a table or a form - it only fills the margins the reading column
   leaves empty. The ::after under each one is moonlight caught on the petals:
   a pale bloom masked to the artwork and screened over it. */
.mn-foliage {
    position: absolute;
    background: var(--mn-frond) center / contain no-repeat;
    will-change: transform;
}

.mn-foliage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(55% 50% at 50% 42%, rgba(var(--mn-primary-2), 0.55), transparent 72%);
    -webkit-mask: var(--mn-frond) center / contain no-repeat;
    mask: var(--mn-frond) center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: 0.55;
}

/* Top corners: the flower seen from above, turning very slowly on the water.
   A rosette reads right way up at any angle, which is why it - and not the
   side-view bloom - is the one that can sit against the ceiling. Two thirds
   of it hang off-screen. */
.mn-foliage--tl,
.mn-foliage--tr {
    --mn-lotus-size: clamp(300px, 30vw, 520px);
    width: var(--mn-lotus-size);
    aspect-ratio: 1;
    background-image: var(--mn-lotus-top);
    transform-origin: 50% 50%;
}

.mn-foliage--tl::after,
.mn-foliage--tr::after {
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--mn-primary-2), 0.6), transparent 70%);
    -webkit-mask-image: var(--mn-lotus-top);
    mask-image: var(--mn-lotus-top);
}

.mn-foliage--tl {
    top: calc(var(--mn-lotus-size) * -0.42);
    left: calc(var(--mn-lotus-size) * -0.36);
    opacity: 0.5;
    animation: mn-turn 260s linear infinite;
}

.mn-foliage--tr {
    --mn-lotus-size: clamp(220px, 20vw, 360px);
    top: calc(var(--mn-lotus-size) * -0.46);
    right: calc(var(--mn-lotus-size) * -0.30);
    opacity: 0.32;
    animation: mn-turn 320s linear infinite reverse;
}

@keyframes mn-turn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bottom corners: blooms standing on the water line. They sway from the
   stem - the pivot is the bottom centre of the box - and mirror only
   sideways, so a flower is never stood on its head. The two corners carry
   different arrangements so one isn't the other flipped. */
.mn-foliage--bl,
.mn-foliage--br {
    width: clamp(260px, 26vw, 460px);
    aspect-ratio: 420 / 400;
    bottom: -1.5vh;
    transform-origin: 50% 100%;
}

.mn-foliage--bl {
    left: -1.5vw;
    opacity: 0.8;
    animation: mn-sway 22s ease-in-out infinite alternate;
}

.mn-foliage--br {
    right: -1.5vw;
    background-image: var(--mn-frond-2);
    opacity: 0.62;
    scale: -1 1;
    animation: mn-sway 28s ease-in-out infinite alternate-reverse;
    animation-delay: -7s;
}

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

@keyframes mn-sway {
    0% { transform: rotate(-1.2deg) translate3d(0, 0, 0); }
    100% { transform: rotate(1.4deg) translate3d(0.6%, -0.8%, 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 arrows and never the box around them. */
.mn-mark {
    position: relative;
    display: inline-block;
    line-height: 0;
}

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

/* The sidebar lockup: the mark beside the wordmark. Filament hands the
   wrapper a fixed height (->brandLogoHeight), so the mark scales off that
   height and the wordmark is sized to sit level with it. */
.mn-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 100%;
}

.mn-lockup .mn-mark {
    display: block;
    height: 100%;
    flex-shrink: 0;
}

.mn-lockup .mn-mark-img {
    width: auto;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(var(--mn-chrome-mid), 0.18));
}

/* The wordmark, set in type: the chrome ramp poured into Unbounded, with the
   "To" in the middle dropped to a hairline weight - the exchange the arrows
   in the mark are drawing. */
.mn-wordmark {
    font-family: 'Unbounded', 'Onest', sans-serif;
    font-weight: 600;
    font-size: 1.28rem;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(
        176deg,
        rgb(var(--mn-chrome-hi)) 0%,
        rgb(var(--mn-chrome)) 34%,
        rgb(var(--mn-chrome-mid)) 62%,
        rgb(var(--mn-chrome-hi)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.mn-wordmark b {
    font-weight: 300;
    margin-inline: 0.04em;
    background: linear-gradient(176deg, rgb(var(--mn-chrome-mid)), rgb(var(--mn-chrome-lo)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.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.9) 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; }
}

/* Headings and figures set in the same chrome as the wordmark. */
.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 ---------- */
/* On a silver button a white bloom would vanish, so the press shows as a
   ring of light spreading across the water instead: bright rim, clear
   centre. */
.mn-ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.34) 52%, rgba(var(--mn-chrome-lo), 0.18) 60%, transparent 70%);
    transform: scale(0);
    animation: mn-ripple 760ms 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 flowers would
       sit under the content rather than beside it. Keep the top-left one and
       the drifting petals, which stay above the fold and out of the way. */
    .mn-foliage--br,
    .mn-foliage--tr,
    .mn-foliage--bl {
        display: none;
    }

    .mn-foliage--tl {
        --mn-lotus-size: 260px;
        opacity: 0.28;
    }

    .mn-hanging {
        height: 150px;
        opacity: 0.4;
    }

    .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;
    }
}