@import url('https://fonts.bunny.net/css?family=playfair-display:500,600,700,800|inter:300,400,500,600,700,800&display=swap');

:root {
    --ink-950: #090909;
    --ink-900: #0f1115;
    --ink-800: #14161a;
    --ink-700: #1a1d23;
    --ink-600: #23262e;
    --line: rgba(255,255,255,.08);
    --line-soft: rgba(255,255,255,.05);
    --gold: #7e171a;
    --gold-light: #a83338;
    --gold-deep: #5a1012;
    --bronze: #a86a44;
    --silver: #c7cad1;
    --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink-950); }
body {
    background: var(--ink-950);
    color: #f3f1ec;
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.font-display { font-family: 'Playfair Display', Georgia, serif; }

::selection { background: var(--gold); color: #0a0a0a; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* ── Layered animated backgrounds ─────────────────────────────────────── */
.bg-noise {
    position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .035; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-aurora {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.bg-aurora span {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35;
    animation: drift 22s var(--ease) infinite alternate;
}
.bg-aurora span:nth-child(1) { width: 560px; height: 560px; background: radial-gradient(circle, var(--gold) 0%, transparent 70%); top: -160px; left: -120px; }
.bg-aurora span:nth-child(2) { width: 460px; height: 460px; background: radial-gradient(circle, var(--bronze) 0%, transparent 70%); bottom: -140px; right: -100px; animation-duration: 28s; animation-delay: -6s; }
.bg-aurora span:nth-child(3) { width: 360px; height: 360px; background: radial-gradient(circle, var(--silver) 0%, transparent 70%); top: 40%; left: 55%; opacity: .14; animation-duration: 18s; animation-delay: -3s; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.15); } }

.bg-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ── Glass / gradient borders ─────────────────────────────────────────── */
.glass {
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid var(--line);
}
.glass-strong {
    background: rgba(20,22,26,.72);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid var(--line);
}
.gradient-border { position: relative; border-radius: 24px; }
.gradient-border::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(126,23,26,.5), rgba(255,255,255,.06) 40%, rgba(126,23,26,.15));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}

.text-gold-gradient {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.glow { box-shadow: 0 0 0 1px rgba(126,23,26,.15), 0 20px 60px -10px rgba(126,23,26,.25); }
.glow-hover { transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.glow-hover:hover { box-shadow: 0 0 0 1px rgba(126,23,26,.3), 0 30px 80px -15px rgba(126,23,26,.4); transform: translateY(-6px); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-gold {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 34px; border-radius: 999px; font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: #0a0a0a;
    box-shadow: 0 12px 32px -8px rgba(126,23,26,.5);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -8px rgba(126,23,26,.65); }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 34px; border-radius: 999px; font-weight: 600; font-size: 14.5px;
    border: 1px solid rgba(255,255,255,.18); color: #f3f1ec;
    transition: all .4s var(--ease);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-3px); background: rgba(255,255,255,.04); }

/* ── Magnetic button wrapper ───────────────────────────────────────────── */
.magnetic { display: inline-block; transition: transform .25s var(--ease); }

/* ── Reveal animations ─────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-scale] { opacity: 0; transform: scale(.94); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal-scale].is-visible { opacity: 1; transform: scale(1); }

/* ── Marquee ───────────────────────────────────────────────────────────── */
.marquee-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Parallax media ────────────────────────────────────────────────────── */
.parallax-img { will-change: transform; transition: transform .1s linear; }

/* ── Editorial category mosaic ────────────────────────────────────────── */
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 130px; gap: 18px; }
.mosaic .m-card:nth-child(1) { grid-column: span 4; grid-row: span 3; }
.mosaic .m-card:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.mosaic .m-card:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.mosaic .m-card:nth-child(4) { grid-column: span 3; grid-row: span 2; }
.mosaic .m-card:nth-child(5) { grid-column: span 3; grid-row: span 2; }
.mosaic .m-card:nth-child(n+6) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1024px) {
    .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
    .mosaic .m-card { grid-column: span 1 !important; grid-row: span 1 !important; }
    .mosaic .m-card:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
}

/* ── Product card image zoom ──────────────────────────────────────────── */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 1s var(--ease); }
.img-zoom:hover img { transform: scale(1.08); }

/* ── Animated underline link ──────────────────────────────────────────── */
.link-underline { position: relative; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease); }
.link-underline:hover::after { width: 100%; }

/* ── Custom scroll fade mask ──────────────────────────────────────────── */
.fade-bottom { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }

/* ── Loader ────────────────────────────────────────────────────────────── */
#pageLoader { position: fixed; inset: 0; z-index: 9999; background: var(--ink-950); display: flex; align-items: center; justify-content: center; transition: opacity .6s var(--ease), visibility .6s; }
#pageLoader.loaded { opacity: 0; visibility: hidden; }
.loader-mark { font-family: 'Playfair Display', serif; font-size: 22px; letter-spacing: .08em; color: var(--gold-light); opacity: 0; animation: loaderFade 1.4s var(--ease) forwards; }
@keyframes loaderFade { 0% { opacity: 0; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

@keyframes scrollLine { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } }

/* ── Hero dots ─────────────────────────────────────────────────────────── */
[data-hero-dot] { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.3); transition: all .4s var(--ease); }
[data-hero-dot].is-active { width: 28px; background: var(--gold); }

/* ── Counter ───────────────────────────────────────────────────────────── */
.counter-num { font-variant-numeric: tabular-nums; }

/* ── Custom range / select chrome for dark theme ──────────────────────── */
input, textarea, select { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.35); }
select option { background-color: var(--ink-800); color: #f3f1ec; }
select option:checked, select option:hover, select option:focus { background-color: var(--gold); color: #fff; }

/* ── Spec / data tables ────────────────────────────────────────────────── */
.spec-row { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.spec-row:last-child { border-bottom: none; }

/* ── Utility ───────────────────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }