/**
 * Atelier Nusa — Liquid Glass + Micro-interactions
 * Inspired by liquidglassdesign.com + amicro.vercel.app patterns
 * (pure CSS — no React; loads after contrast-fix, no Vite rebuild needed)
 */

/* ---------- Motion system (Amicro-like easing) ---------- */
:root {
    --atn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --atn-ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
    --atn-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --atn-dur: 220ms;
    --atn-dur-slow: 420ms;
    --glass-bg: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(15, 23, 42, 0.55) 100%
    );
    --glass-border: rgba(255, 255, 255, 0.22);
    --glass-shine: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.18) 48%,
        transparent 62%
    );
}

/* ---------- Studio atmosphere (richer depth) ---------- */
body.studio-bg,
.studio-bg {
    background:
        radial-gradient(1100px 560px at 8% -8%, rgba(99, 102, 241, 0.32), transparent 55%),
        radial-gradient(900px 480px at 92% 4%, rgba(236, 72, 153, 0.18), transparent 52%),
        radial-gradient(700px 380px at 50% 110%, rgba(16, 185, 129, 0.14), transparent 48%),
        radial-gradient(600px 300px at 70% 40%, rgba(251, 191, 36, 0.06), transparent 50%),
        #020617 !important;
}

/* ---------- Liquid glass panels ---------- */
.studio-bg .glass,
.studio-bg .glass-strong {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--glass-border) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 42%),
        rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
        0 -1px 0 0 rgba(0, 0, 0, 0.25) inset,
        0 18px 40px -18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    transition:
        transform var(--atn-dur) var(--atn-ease-out),
        box-shadow var(--atn-dur) var(--atn-ease-out),
        border-color var(--atn-dur) var(--atn-ease-out),
        background var(--atn-dur) var(--atn-ease-out);
}

/* Specular edge (liquid glass highlight) */
.studio-bg .glass::before,
.studio-bg .glass-strong::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.06) 12%,
        transparent 38%
    );
    opacity: 0.85;
    z-index: 0;
}

/* Soft inner glow corner */
.studio-bg .glass::after,
.studio-bg .glass-strong::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: -40%;
    right: -20%;
    width: 55%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(165, 180, 252, 0.14), transparent 68%);
    z-index: 0;
}

.studio-bg .glass > *,
.studio-bg .glass-strong > * {
    position: relative;
    z-index: 1;
}

.studio-bg a.glass-strong:hover,
.studio-bg a.glass:hover,
.studio-bg .glass-strong.group:hover,
.studio-bg .person-card:hover {
    transform: translateY(-2px);
    border-color: rgba(199, 210, 254, 0.35) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.18) inset,
        0 22px 48px -16px rgba(79, 70, 229, 0.35),
        0 0 0 1px rgba(129, 140, 248, 0.18) !important;
}

/* KPI tiles — frosted gradient glass */
.studio-bg .kpi {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 14px 28px -12px rgba(0, 0, 0, 0.45);
    transition:
        transform var(--atn-dur) var(--atn-ease-out),
        box-shadow var(--atn-dur) var(--atn-ease-out),
        filter var(--atn-dur) var(--atn-ease-out);
}

.studio-bg .kpi::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.28) 0%,
        transparent 28%,
        transparent 55%,
        rgba(255, 255, 255, 0.06) 100%
    );
    opacity: 0.55;
}

.studio-bg .kpi:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 20px 36px -10px rgba(0, 0, 0, 0.5);
    filter: brightness(1.05);
}

/* Person / member cards — glare shine (Amicro-like) */
.studio-bg .person-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 40%),
        linear-gradient(145deg, #1e293b, #0f172a) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform var(--atn-dur) var(--atn-ease-out),
        border-color var(--atn-dur) var(--atn-ease-out),
        box-shadow var(--atn-dur) var(--atn-ease-out);
}

.studio-bg .person-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: var(--glass-shine);
    transform: skewX(-18deg);
    transition: left 0.65s var(--atn-ease-out);
    pointer-events: none;
    z-index: 2;
}

.studio-bg .person-card:hover::before {
    left: 130%;
}

/* ---------- Buttons — press / spring / shine ---------- */
.studio-bg .btn-primary,
.studio-bg .btn-secondary,
.studio-bg .btn-ghost,
.studio-bg .btn-danger {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--atn-dur) var(--atn-ease-spring),
        box-shadow var(--atn-dur) var(--atn-ease-out),
        background var(--atn-dur) var(--atn-ease-out),
        border-color var(--atn-dur) var(--atn-ease-out),
        filter var(--atn-dur) var(--atn-ease-out);
    will-change: transform;
}

.studio-bg .btn-primary {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 10px 24px -8px rgba(99, 102, 241, 0.55) !important;
}

.studio-bg .btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 14px 28px -6px rgba(99, 102, 241, 0.65) !important;
}

.studio-bg .btn-primary:active,
.studio-bg .btn-secondary:active,
.studio-bg .btn-ghost:active {
    transform: scale(0.96);
}

.studio-bg .btn-secondary {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.studio-bg .btn-secondary:hover {
    background: rgba(71, 85, 105, 0.75) !important;
    border-color: rgba(199, 210, 254, 0.35) !important;
    transform: translateY(-1px);
}

/* Expand-ring focus (Amicro Expand Ring vibe) */
.studio-bg .btn-primary:focus-visible,
.studio-bg .btn-secondary:focus-visible,
.studio-bg .nav-link:focus-visible,
.studio-bg .chip-yes:focus-visible,
.studio-bg .chip-no:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #020617,
        0 0 0 4px rgba(129, 140, 248, 0.75) !important;
}

/* ---------- Nav — liquid active pill ---------- */
.studio-bg .nav-link {
    transition:
        background var(--atn-dur) var(--atn-ease-out),
        color var(--atn-dur) var(--atn-ease-out),
        transform var(--atn-dur) var(--atn-ease-out),
        box-shadow var(--atn-dur) var(--atn-ease-out);
}

.studio-bg .nav-link:hover {
    transform: translateX(2px);
}

.studio-bg .nav-link-active {
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.32),
        rgba(139, 92, 246, 0.18)
    ) !important;
    box-shadow:
        inset 0 0 0 1px rgba(165, 180, 252, 0.4),
        0 0 20px -6px rgba(99, 102, 241, 0.45) !important;
}

/* Sidebar glass rail */
.studio-bg aside {
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}

.studio-bg header.sticky {
    background: rgba(2, 6, 23, 0.55) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* ---------- Chips Yes/No — spring micro ---------- */
.studio-bg .chip-yes,
.studio-bg .chip-no {
    transition:
        transform var(--atn-dur) var(--atn-ease-spring),
        background var(--atn-dur) var(--atn-ease-out),
        box-shadow var(--atn-dur) var(--atn-ease-out),
        color var(--atn-dur) var(--atn-ease-out);
}

.studio-bg .chip-yes:hover,
.studio-bg .chip-no:hover {
    transform: scale(1.06);
}

.studio-bg .chip-yes:active,
.studio-bg .chip-no:active {
    transform: scale(0.92);
}

.studio-bg .chip-yes {
    box-shadow:
        inset 0 0 0 1px rgba(52, 211, 153, 0.45),
        0 0 16px -4px rgba(16, 185, 129, 0.45);
}

/* ---------- Tables — row lift ---------- */
.studio-bg .table-dark tbody tr {
    transition: background var(--atn-dur) var(--atn-ease-out);
}

.studio-bg .table-dark tbody tr:hover {
    background-color: rgba(129, 140, 248, 0.08) !important;
}

/* ---------- Form focus glow ---------- */
.studio-bg .form-input:focus,
.studio-bg input:focus,
.studio-bg textarea:focus,
.studio-bg select:focus {
    border-color: #a5b4fc !important;
    box-shadow:
        0 0 0 3px rgba(129, 140, 248, 0.28),
        0 0 24px -8px rgba(99, 102, 241, 0.45) !important;
    transition: box-shadow var(--atn-dur) var(--atn-ease-out), border-color var(--atn-dur) var(--atn-ease-out);
}

/* ---------- Flash messages — soft enter ---------- */
.studio-bg .flash-ok,
.studio-bg .flash-err {
    animation: atn-fade-up 0.45s var(--atn-ease-out) both;
    backdrop-filter: blur(12px);
}

/* ---------- Page content stagger ---------- */
.studio-bg main > .space-y-6 > *:nth-child(1),
.studio-bg main > .space-y-5 > *:nth-child(1) {
    animation: atn-fade-up 0.5s var(--atn-ease-out) both;
}
.studio-bg main > .space-y-6 > *:nth-child(2),
.studio-bg main > .space-y-5 > *:nth-child(2) {
    animation: atn-fade-up 0.55s var(--atn-ease-out) 0.05s both;
}
.studio-bg main > .space-y-6 > *:nth-child(3),
.studio-bg main > .space-y-5 > *:nth-child(3) {
    animation: atn-fade-up 0.55s var(--atn-ease-out) 0.1s both;
}
.studio-bg main > .space-y-6 > *:nth-child(4),
.studio-bg main > .space-y-5 > *:nth-child(4) {
    animation: atn-fade-up 0.55s var(--atn-ease-out) 0.14s both;
}

@keyframes atn-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab panels — soft crossfade when Alpine swaps */
.studio-bg [x-cloak] {
    display: none !important;
}

/* Action list items (dashboard) */
.studio-bg ul.divide-y > li > a {
    transition: background var(--atn-dur) var(--atn-ease-out), transform var(--atn-dur) var(--atn-ease-out);
}
.studio-bg ul.divide-y > li > a:hover {
    transform: translateX(3px);
}

/* Guest login card — glass on dark */
body .guest-card {
    transition: box-shadow 0.35s var(--atn-ease-out), transform 0.35s var(--atn-ease-out);
}
body .guest-card:hover {
    box-shadow: 0 24px 48px -16px rgba(99, 102, 241, 0.35);
}

/* Logo soft float */
.studio-bg img[alt="Atelier Nusa"],
.studio-bg img[alt="ATN"] {
    transition: transform var(--atn-dur-slow) var(--atn-ease-out), filter var(--atn-dur) var(--atn-ease-out);
}
.studio-bg a:hover img[alt="Atelier Nusa"],
.studio-bg a:hover img[alt="ATN"] {
    transform: scale(1.04);
    filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.25));
}

/* ---------- Accessibility: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .studio-bg *,
    .studio-bg *::before,
    .studio-bg *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .studio-bg .person-card::before {
        display: none;
    }
}

/**
 * Manual toggle: html.atn-motion-off (localStorage atn_motion=off)
 * Keeps liquid glass look, removes motion / hover lifts / glare sweep.
 */
html.atn-motion-off .studio-bg *,
html.atn-motion-off .studio-bg *::before,
html.atn-motion-off .studio-bg *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.atn-motion-off .studio-bg .kpi:hover,
html.atn-motion-off .studio-bg .person-card:hover,
html.atn-motion-off .studio-bg a.glass-strong:hover,
html.atn-motion-off .studio-bg a.glass:hover,
html.atn-motion-off .studio-bg .btn-primary:hover,
html.atn-motion-off .studio-bg .btn-secondary:hover,
html.atn-motion-off .studio-bg .btn-primary:active,
html.atn-motion-off .studio-bg .btn-secondary:active,
html.atn-motion-off .studio-bg .nav-link:hover,
html.atn-motion-off .studio-bg .chip-yes:hover,
html.atn-motion-off .studio-bg .chip-no:hover,
html.atn-motion-off .studio-bg ul.divide-y > li > a:hover {
    transform: none !important;
    filter: none !important;
}

html.atn-motion-off .studio-bg .person-card::before {
    display: none !important;
}

html.atn-motion-off .studio-bg main > .space-y-6 > *,
html.atn-motion-off .studio-bg main > .space-y-5 > * {
    opacity: 1 !important;
    transform: none !important;
}

/* Performance: skip heavy blur on very small screens if needed */
@media (max-width: 380px) {
    .studio-bg .glass,
    .studio-bg .glass-strong {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}