/* MIAO SILVER ATELIER - black & silver museum aesthetic */

:root {
    --bg: #0a0a0b;
    --surface: #111113;
    --surface-2: #161619;
    --line: #26262a;
    --line-soft: #1d1d21;
    --text: #f4f4f5;
    --muted: #8e8e96;
    --faint: #5c5c64;
    --silver: #d4d4d8;
    --silver-bright: #ececee;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Cormorant Garamond', serif; }

/* small caps label */
.eyebrow {
    font-size: 10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.hairline { border-color: var(--line); }

/* hairline section divider */
.divide-silver > * + * { border-top: 1px solid var(--line-soft); }

/* nav */
.nav-link {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    transition: color .4s ease;
    padding-bottom: 4px;
}
.nav-link:hover { color: var(--text); }
.nav-link.active {
    color: var(--silver-bright);
    border-bottom: 1px solid var(--silver);
}

.btn-silver {
    background: var(--silver);
    color: #0a0a0b;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 14px 32px;
    transition: background .4s ease, transform .4s ease;
}
.btn-silver:hover { background: var(--silver-bright); }

.btn-ghost {
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 13px 31px;
    transition: border-color .4s ease, color .4s ease;
}
.btn-ghost:hover { border-color: var(--silver); color: var(--silver-bright); }

/* product card - museum plate */
.plate {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    transition: border-color .5s ease, transform .5s ease;
    position: relative;
    overflow: hidden;
}
.plate:hover { border-color: var(--line); transform: translateY(-2px); }
.plate img {
    mix-blend-mode: normal;
    transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.plate:hover img { transform: scale(1.03); }

.plate-sku {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--faint);
}

/* image treatment: neutral dark frame */
.img-frame {
    background:
        radial-gradient(ellipse at 50% 40%, #1c1c20 0%, #131316 60%, #0e0e10 100%);
    border: 1px solid var(--line-soft);
}

/* subtle grain overlay for depth */
.grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* inquiry drawer */
#inquiryDrawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 92vw);
    background: var(--surface);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
    z-index: 100;
    display: flex;
    flex-direction: column;
}
#inquiryDrawer.open { transform: translateX(0); }

#drawerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: 99;
}
#drawerOverlay.open { opacity: 1; pointer-events: auto; }

/* fade-in on scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: none; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2e; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3a40; }

::selection { background: var(--silver); color: #0a0a0b; }