/* ==========================================================================
   MOONCRAFT — Shared visual layer
   Unified aurora, starfield, and moon-orb treatment across login,
   maintenance, public and admin pages. Loaded after the page-specific CSS
   so these rules win.
   ========================================================================== */

/* ── Shared dark canvas ─────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
    --mc-link-color: var(--color-primary, var(--admin-primary, #9fd0ff));
    --mc-link-hover: var(--color-primary-hover, var(--admin-primary-hover, #c2e1ff));
    --mc-link-visited: color-mix(in srgb, var(--mc-link-color) 72%, #d9b8ff 28%);
}

:root[data-theme="light"] {
    --mc-link-color: var(--color-primary, var(--admin-primary, #1f5fbf));
    --mc-link-hover: var(--color-primary-hover, var(--admin-primary-hover, #174a95));
    --mc-link-visited: color-mix(in srgb, var(--mc-link-color) 72%, #5a2ca0 28%);
}

/* ── Global overflow safety (all app shells) ─────────────────────── */
html,
body {
    max-width: 100%;
    overflow-x: clip !important;
}

a {
    color: var(--mc-link-color);
}

a:visited {
    color: var(--mc-link-visited);
}

a:hover {
    color: var(--mc-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--mc-link-color);
    outline-offset: 2px;
}

body.login-page,
body.maintenance-page,
body:not(.admin):not(.login-page):not(.maintenance-page) {
    background-color: #05070d !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91, 141, 224, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(139, 92, 246, 0.14) 0%, transparent 65%),
        linear-gradient(180deg, #07091a 0%, #050810 50%, #04060f 100%) !important;
    background-attachment: fixed !important;
}

/* ── Aurora layer — colourful but dark, fully seamless loops ───────── */
body.login-page .aurora,
body.maintenance-page .aurora,
body.public-aurora .aurora,
.aurora.aurora--shared {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Override band gradients with richer palette and remove edge fades that
   prevent seamless looping. */
body.login-page .aurora__band,
body.maintenance-page .aurora__band,
body.public-aurora .aurora__band {
    position: absolute;
    left: -25vw;
    width: 150vw;
    height: 50vh;
    top: -8vh;
    transform-origin: center top;
    mix-blend-mode: screen;
    filter: blur(28px) saturate(170%);
    border-radius: 0 0 55% 45%;
    will-change: transform, opacity;
}

body.login-page .aurora__band--1,
body.maintenance-page .aurora__band--1,
body.public-aurora .aurora__band--1 {
    background: linear-gradient(95deg,
            rgba(34, 211, 238, 0.22) 0%,
            rgba(59, 130, 246, 0.32) 25%,
            rgba(139, 92, 246, 0.34) 50%,
            rgba(236, 72, 153, 0.28) 75%,
            rgba(34, 211, 238, 0.22) 100%);
    background-size: 200% 100%;
    opacity: 0.55;
    animation: mcAuroraDriftA 22s linear infinite, mcAuroraSwayA 14s ease-in-out infinite alternate;
}

body.login-page .aurora__band--2,
body.maintenance-page .aurora__band--2,
body.public-aurora .aurora__band--2 {
    top: 6vh;
    height: 44vh;
    background: linear-gradient(108deg,
            rgba(74, 222, 128, 0.22) 0%,
            rgba(34, 197, 94, 0.28) 30%,
            rgba(59, 130, 246, 0.30) 60%,
            rgba(139, 92, 246, 0.24) 85%,
            rgba(74, 222, 128, 0.22) 100%);
    background-size: 220% 100%;
    opacity: 0.42;
    animation: mcAuroraDriftB 26s linear infinite, mcAuroraSwayB 16s ease-in-out infinite alternate;
}

body.login-page .aurora__band--3,
body.maintenance-page .aurora__band--3,
body.public-aurora .aurora__band--3 {
    top: 2vh;
    height: 52vh;
    background: linear-gradient(100deg,
            rgba(249, 115, 22, 0.18) 0%,
            rgba(236, 72, 153, 0.26) 28%,
            rgba(168, 85, 247, 0.30) 55%,
            rgba(59, 130, 246, 0.24) 80%,
            rgba(249, 115, 22, 0.18) 100%);
    background-size: 220% 100%;
    opacity: 0.36;
    animation: mcAuroraDriftA 30s linear infinite reverse, mcAuroraSwayC 18s ease-in-out infinite alternate;
}

body.login-page .aurora__band--4,
body.maintenance-page .aurora__band--4,
body.public-aurora .aurora__band--4 {
    top: -3vh;
    height: 42vh;
    background: linear-gradient(92deg,
            rgba(20, 184, 166, 0.22) 0%,
            rgba(34, 197, 94, 0.20) 25%,
            rgba(139, 92, 246, 0.30) 55%,
            rgba(59, 130, 246, 0.24) 80%,
            rgba(20, 184, 166, 0.22) 100%);
    background-size: 200% 100%;
    opacity: 0.38;
    animation: mcAuroraDriftB 24s linear infinite reverse, mcAuroraSwayD 12s ease-in-out infinite alternate;
}

/* Seamless horizontal drift — both ends match because background-size is 200%
   and we shift exactly one full image (-100%) each cycle. */
@keyframes mcAuroraDriftA {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}

@keyframes mcAuroraDriftB {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 220% 50%;
    }
}

/* Subtle vertical sway / scale for parallax — start === end so seamless. */
@keyframes mcAuroraSwayA {

    0%,
    100% {
        transform: translate3d(0, 0, 0) skewX(-6deg) scaleY(1);
        opacity: 0.55;
    }

    50% {
        transform: translate3d(0, 1.5vh, 0) skewX(6deg) scaleY(1.08);
        opacity: 0.7;
    }
}

@keyframes mcAuroraSwayB {

    0%,
    100% {
        transform: translate3d(0, 0, 0) skewX(8deg) scaleY(1);
        opacity: 0.42;
    }

    50% {
        transform: translate3d(0, -1vh, 0) skewX(-4deg) scaleY(1.1);
        opacity: 0.58;
    }
}

@keyframes mcAuroraSwayC {

    0%,
    100% {
        transform: translate3d(0, 0, 0) skewX(-8deg) scaleY(1);
        opacity: 0.36;
    }

    50% {
        transform: translate3d(0, 1vh, 0) skewX(4deg) scaleY(1.06);
        opacity: 0.5;
    }
}

@keyframes mcAuroraSwayD {

    0%,
    100% {
        transform: translate3d(0, 0, 0) skewX(4deg) scaleY(1);
        opacity: 0.38;
    }

    50% {
        transform: translate3d(0, -1.5vh, 0) skewX(-6deg) scaleY(1.08);
        opacity: 0.55;
    }
}

/* ── Moon orb — restore PNG detail and seamless horizontal rotation ── */
.nav__moon,
.admin-navbar__moon {
    background-image: url('/assets/images/moon-orb.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    box-shadow:
        0 0 18px rgba(255, 220, 117, 0.36),
        0 0 32px rgba(255, 220, 117, 0.16),
        inset -6px -6px 12px rgba(0, 0, 0, 0.35),
        inset 5px 5px 12px rgba(255, 255, 255, 0.12) !important;
    filter: contrast(1.08) brightness(1.05) saturate(1.05) !important;
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: mcMoonSpin 18s linear infinite, navMoonGlow 4s ease-in-out infinite !important;
    animation-play-state: running !important;
}

/* Subtle inner highlight for depth (kept from previous) */
.nav__moon::before,
.admin-navbar__moon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.06) 32%,
            rgba(0, 0, 0, 0.10) 62%,
            rgba(0, 0, 0, 0.22) 100%);
    pointer-events: none;
    animation: none !important;
}

/* Seamless full 360° horizontal spin — rotateY for left→right axis. */
@keyframes mcMoonSpin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .nav__moon,
    .admin-navbar__moon {
        animation: none !important;
    }

    body.login-page .aurora__band,
    body.maintenance-page .aurora__band,
    body.public-aurora .aurora__band {
        animation: none !important;
    }
}


/* ===========================================================================
   Mooncraft moon — properly wrapped PNG sphere (2026-04-22 v2)
   ---------------------------------------------------------------------------
   The PNG (/assets/images/moon-orb.png) is a single 502×507 moon image, not
   a panoramic strip. So: render it as background-size: cover on the moon
   element, fill the orb almost completely, and add only a fixed
   lit-hemisphere highlight + limb darkening for spherical depth.
   No scrolling/stretching, no starfield.
   =========================================================================== */

/* Enlarge the orb container so the moon reads as a moon, not a dot. */
.admin-navbar__logo-orb {
    width: 54px !important;
    height: 54px !important;
}

.nav__logo {
    width: 60px !important;
    height: 60px !important;
}

/* Sphere-rotation: use the real animated moon GIF (NASA-style frame sequence)
   centered and clipped to the orb circle. The GIF itself contains the
   rotation animation, so no CSS keyframes are needed for the surface.
   The orb adds the warm glow, limb darkening, and circular crop. */
.nav__moon,
.admin-navbar__moon {
    position: absolute !important;
    inset: 3px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background-color: #000 !important;
    background-image: url('/assets/images/moon-orb.gif') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* limb darkening — dark ring at the sphere's edge */
    box-shadow:
        0 0 18px rgba(255, 220, 117, 0.34),
        0 0 36px rgba(255, 220, 117, 0.14),
        inset -6px -6px 12px rgba(0, 0, 0, 0.55),
        inset 4px 4px 10px rgba(255, 255, 255, 0.10) !important;
    transform: none !important;
    animation: mcMoonGlow 5s ease-in-out infinite !important;
    transition: filter 0.45s ease, box-shadow 0.45s ease;
    filter: contrast(1.10) brightness(1.05);
}

/* No CSS-driven texture layer needed — the GIF handles surface motion. */
.nav__moon::before,
.admin-navbar__moon::before {
    content: none !important;
    background: none !important;
    animation: none !important;
}

/* Surface scroll — left-to-right roll. One full image-width per cycle. */
@keyframes mcMoonScroll {
    from {
        background-position-x: 0%;
    }

    to {
        background-position-x: -200%;
    }
}

/* Disable the lit-hemisphere overlay — the GIF already encodes proper
   spherical lighting from its source frames. */
.nav__moon::after,
.admin-navbar__moon::after {
    content: none !important;
    background: none !important;
    animation: none !important;
}

@keyframes mcMoonGlow {

    0%,
    100% {
        box-shadow:
            0 0 18px rgba(255, 220, 117, 0.34),
            0 0 36px rgba(255, 220, 117, 0.14),
            inset -6px -6px 12px rgba(0, 0, 0, 0.55),
            inset 4px 4px 10px rgba(255, 255, 255, 0.10);
    }

    50% {
        box-shadow:
            0 0 24px rgba(255, 220, 117, 0.48),
            0 0 50px rgba(255, 220, 117, 0.20),
            inset -6px -6px 12px rgba(0, 0, 0, 0.58),
            inset 4px 4px 10px rgba(255, 255, 255, 0.14);
    }
}

/* Hover: subtle glow boost on the moon (no transform — would fight the spin). */
.admin-navbar__brand:hover .admin-navbar__moon,
.nav__brand:hover .nav__moon {
    filter: brightness(1.12) saturate(1.08);
}

.admin-navbar__brand:hover .admin-navbar__logo-orb,
.nav__brand:hover .nav__logo {
    transform: scale(1.04);
    transition: transform 0.45s ease;
}

/* Parent orb shading suppressed — the highlight now lives on .nav__moon::after
   (above the scrolling texture) instead. Keeps the spherical illusion in
   one place and avoids double-lighting. */
.admin-navbar__logo-orb::after,
.nav__logo::after {
    content: none !important;
    background: none !important;
    animation: none !important;
}

/* Light-theme: tone down the warm glow on a bright background. */
:root[data-theme="light"] .nav__moon,
:root[data-theme="light"] .admin-navbar__moon {
    box-shadow:
        0 0 14px rgba(108, 99, 255, 0.22),
        0 0 28px rgba(108, 99, 255, 0.10),
        inset -6px -6px 12px rgba(0, 0, 0, 0.30),
        inset 4px 4px 10px rgba(255, 255, 255, 0.20) !important;
}

/* Reduced-motion: stop the surface scroll and glow pulse but keep shading. */
@media (prefers-reduced-motion: reduce) {

    .nav__moon,
    .admin-navbar__moon,
    .nav__moon::before,
    .admin-navbar__moon::before {
        animation: none !important;
        transform: none !important;
        background-position: center !important;
    }
}

/* ==========================================================================
   Public de-overlay reset
   Removes the bright feathered/starfield wash and frosted glass layers that
   were sitting over public, login, and maintenance views.
   ========================================================================== */

body.public-aurora,
body.login-page,
body.maintenance-page {
    background-attachment: fixed !important;
}

body.public-aurora::before,
body.public-aurora::after,
body.public-aurora.site--modal-open::before,
body.login-page::before,
body.login-page::after,
body.maintenance-page::before,
body.maintenance-page::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
    opacity: 0 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.public-aurora .aurora,
body.login-page .aurora,
body.maintenance-page .aurora {
    display: none !important;
}

body.public-aurora .nav__inner,
body.login-page .nav__inner {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

body.public-aurora .hero__label,
body.public-aurora .service-card,
body.public-aurora .portfolio-card,
body.public-aurora .testimonial-card,
body.public-aurora .pricing-card,
body.public-aurora .contact-form,
body.public-aurora .cta__box,
body.public-aurora .skill-card,
body.public-aurora .value-card,
body.public-aurora .about-intro__image,
body.public-aurora .glass-panel,
body.public-aurora .site-modal {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--shadow) !important;
}

body.public-aurora .service-card::after,
body.public-aurora .portfolio-card::after,
body.public-aurora .testimonial-card::after,
body.public-aurora .pricing-card::after,
body.public-aurora .contact-form::after,
body.public-aurora .cta__box::after,
body.public-aurora .skill-card::after,
body.public-aurora .value-card::after {
    content: none !important;
    display: none !important;
}

body.public-aurora .btn--primary,
body.public-aurora .btn--outline,
body.login-page .login-btn,
body.maintenance-page .maintenance-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.login-page .login-card {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
}

body.maintenance-page .maintenance-card {
    background: #121a28 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="light"] body.public-aurora .nav__inner,
:root[data-theme="light"] body.login-page .nav__inner,
:root[data-theme="light"] body.login-page .login-card,
:root[data-theme="light"] body.maintenance-page .maintenance-card {
    background: #ffffff !important;
    border-color: var(--color-border-light) !important;

    /* ==========================================================================
   MOONCRAFT — Unified Modal System  (.mc-overlay / .mc-modal)
   Loaded by admin, clientside, and public pages.
   New features use these classes; legacy code keeps its own classes.
   ========================================================================== */

    .mc-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 3200;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(7px) saturate(140%);
        -webkit-backdrop-filter: blur(7px) saturate(140%);
        align-items: center;
        justify-content: center;
        padding: 1.25rem;
    }

    .mc-overlay.is-open {
        display: flex;
        animation: mcOverlayIn 180ms ease forwards;
    }

    @keyframes mcOverlayIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .mc-modal {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 560px;
        max-height: min(90vh, 840px);
        background: var(--admin-bg-card, rgba(18, 22, 34, 0.96));
        border: 1px solid var(--admin-border, rgba(42, 45, 58, 0.45));
        border-radius: 20px;
        box-shadow:
            0 32px 80px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(255, 255, 255, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        overflow: hidden;
        animation: mcModalIn 240ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    }

    @keyframes mcModalIn {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.96);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* ── Size variants ── */
    .mc-modal--sm {
        max-width: 380px;
    }

    .mc-modal--md {
        max-width: 560px;
    }

    .mc-modal--lg {
        max-width: 780px;
    }

    .mc-modal--xl {
        max-width: min(1100px, 94vw);
    }

    .mc-modal--iframe {
        max-width: min(1100px, 94vw);
        height: min(88vh, 820px);
        max-height: min(88vh, 820px);
    }

    /* ── Parts ── */
    .mc-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--admin-border, rgba(42, 45, 58, 0.4));
        background: rgba(108, 99, 255, 0.05);
        flex-shrink: 0;
    }

    .mc-modal__title {
        font-size: 1rem;
        font-weight: 650;
        color: var(--admin-text-heading, #fff);
        margin: 0;
    }

    .mc-modal__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--admin-text-muted, #94a3b8);
        cursor: pointer;
        transition: background 180ms ease, color 180ms ease;
    }

    .mc-modal__close:hover {
        background: var(--admin-danger-bg, rgba(255, 77, 106, 0.15));
        color: var(--admin-danger, #ff4d6a);
    }

    .mc-modal__close svg {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }

    .mc-modal__body {
        padding: 1.25rem;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    .mc-modal__body--no-pad {
        padding: 0;
    }

    .mc-modal__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 0.9rem 1.25rem;
        border-top: 1px solid var(--admin-border, rgba(42, 45, 58, 0.4));
        background: rgba(108, 99, 255, 0.03);
        flex-shrink: 0;
    }

    /* iframe variant: fill height, no body padding */
    .mc-modal--iframe .mc-modal__body {
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .mc-modal--iframe iframe {
        display: block;
        width: 100%;
        flex: 1;
        border: none;
        min-height: 0;
    }

    /* Quick form fields inside mc-modal__body */
    .mc-form-row {
        margin-bottom: 1rem;
    }

    .mc-form-label {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--admin-text-muted, #94a3b8);
        margin-bottom: 0.35rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mc-form-input,
    .mc-form-select,
    .mc-form-textarea {
        width: 100%;
        padding: 0.55rem 0.85rem;
        background: var(--admin-bg-input, rgba(10, 13, 22, 0.5));
        border: 1px solid var(--admin-border, rgba(42, 45, 58, 0.45));
        border-radius: 10px;
        color: var(--admin-text, #e4e6f0);
        font-size: 0.875rem;
        transition: border-color 180ms ease, box-shadow 180ms ease;
        box-sizing: border-box;
    }

    .mc-form-input:focus,
    .mc-form-select:focus,
    .mc-form-textarea:focus {
        outline: none;
        border-color: var(--admin-primary, #6c63ff);
        box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
    }

    /* ── Toast notifications ── */
    .mc-toast-shelf {
        position: fixed;
        bottom: 5.5rem;
        right: 1.75rem;
        z-index: 4000;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-end;
        pointer-events: none;
    }

    .mc-toast {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.65rem 1rem;
        background: var(--admin-bg-card, rgba(22, 26, 38, 0.96));
        border: 1px solid var(--admin-border, rgba(42, 45, 58, 0.45));
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        color: var(--admin-text, #e4e6f0);
        font-size: 0.85rem;
        pointer-events: auto;
        animation: mcToastIn 220ms ease forwards;
        min-width: 200px;
        max-width: 340px;
        backdrop-filter: blur(12px);
    }

    .mc-toast--success {
        border-left: 3px solid #34d399;
    }

    .mc-toast--error {
        border-left: 3px solid #ff4d6a;
    }

    @keyframes mcToastIn {
        from {
            opacity: 0;
            transform: translateX(20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes mcToastOut {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(20px);
        }
    }
}