/* ─── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }
a { text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* ─── Gold eyebrow ─────────────────────────────────────────── */
.gold-eyebrow {
    animation: fadeDown 1s 0.2s both;
}

/* ─── Hero title ───────────────────────────────────────────── */
.hero-title {
    animation: fadeUp 1s 0.4s both;
}

/* ─── Hero subtitle ────────────────────────────────────────── */
.hero-sub {
    animation: fadeUp 1s 0.6s both;
}

/* ─── Hero CTAs ────────────────────────────────────────────── */
header a[href="#products"],
header a[href="#visit"] {
    animation: fadeUp 1s 0.8s both;
}

/* ─── Keyframes ────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Gold button ──────────────────────────────────────────── */
.gold-btn {
    background: #d4a017;
    box-shadow: 0 4px 24px rgba(212, 160, 23, 0.25);
    transition: background 0.4s, box-shadow 0.4s, transform 0.3s;
}
.gold-btn:hover {
    background: #e6b420;
    box-shadow: 0 8px 32px rgba(212, 160, 23, 0.4);
    transform: translateY(-2px);
}

/* ─── Nav link underline on transparent ────────────────────── */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s;
}
.nav-link:hover::after {
    width: 100%;
}

/* ─── Scroll reveal base (visible by default) ──────────────── */
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ─── Scroll reveal enhanced (JS adds class) ───────────────── */
@media (prefers-reduced-motion: no-preference) {
    .reveal-up   { opacity: 0; transform: translateY(32px); }
    .reveal-left { opacity: 0; transform: translateX(-32px); }
    .reveal-right { opacity: 0; transform: translateX(32px); }

    .reveal-up.revealed,
    .reveal-left.revealed,
    .reveal-right.revealed {
        opacity: 1;
        transform: none;
    }
}

/* ─── Product card ─────────────────────────────────────────── */
.product-card {
    transition: transform 0.4s ease;
}
.product-card:hover {
    transform: translateY(-4px);
}

/* ─── Gold shadow utility ──────────────────────────────────── */
.shadow-gold {
    box-shadow: 0 8px 32px rgba(212, 160, 23, 0.35);
}