/* ppuzzl.bid — Luxury Auction Gold */
:root {
    --bg: #0A0A0A;
    --gold: #C9A54E;
    --text: #B0A890;
    --surface: #141414;
    --sold: #8B0000;
    --gold-dim: #2A2418;
    --gold-light: #E8D5A3;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg); overflow-x: hidden; }

#hero { height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero-content { text-align: center; }
.mark { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: 48px; letter-spacing: 0.04em; color: var(--gold); opacity: 0; transition: opacity 0.8s; }
.mark.on { opacity: 1; }
.gold-rule { width: 0; height: 1px; background: var(--gold); opacity: 0.6; margin: 16px auto; transition: width 0.4s ease-out; }
.gold-rule.on { width: 200px; }
.bid-label { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: 28px; letter-spacing: 0.08em; color: var(--gold); opacity: 0; transition: opacity 0.3s; }
.bid-label.on { opacity: 1; }

.countdown { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; opacity: 0; transition: opacity 0.3s; }
.countdown.on { opacity: 1; }
.digit-box { width: 40px; height: 52px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; background: var(--surface); }
.digit { font-family: 'Bodoni Moda', serif; font-weight: 900; font-size: 28px; color: var(--gold); font-variant-numeric: tabular-nums; }
.colon { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: 28px; color: var(--gold); opacity: 0.5; padding: 0 4px; }

.lot-section { min-height: 80vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 80px 20%; max-width: 1000px; margin: 0 auto; }
.lot-number { position: absolute; top: 40px; left: 40px; font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: 80px; color: var(--gold); opacity: 0; transition: opacity 0.3s; }
.lot-section.visible .lot-number { opacity: 0.4; }
.lot-content { text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.4s 0.2s, transform 0.4s 0.2s; }
.lot-section.visible .lot-content { opacity: 1; transform: translateY(0); }
.lot-title { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: 48px; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 16px; }
.lot-desc { font-weight: 300; font-size: 16px; color: var(--text); max-width: 600px; margin: 0 auto 32px; }

.bid-display { display: flex; align-items: center; justify-content: center; gap: 12px; }
.bid-arrow { width: 16px; height: 24px; animation: bidPulse 1.5s infinite; }
@keyframes bidPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.bid-amount { font-family: 'Bodoni Moda', serif; font-weight: 900; font-size: 56px; color: var(--gold); font-variant-numeric: tabular-nums; }
.sold-text { color: var(--sold); font-size: 48px; }
.gavel-icon { width: 24px; height: 24px; }

.frame-corners { position: absolute; inset: 20px; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.lot-section.visible .frame-corners { opacity: 1; }
.frame-corners::before, .frame-corners::after { content: ''; position: absolute; width: 16px; height: 16px; border-color: var(--gold); border-style: solid; }
.frame-corners::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.frame-corners::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.lot-divider { text-align: center; position: relative; padding: 20px 0; max-width: 1000px; margin: 0 auto; }
.lot-divider::before { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 1px; background: var(--gold); opacity: 0.3; }
.lot-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); background: var(--bg); font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: 14px; color: var(--gold); position: relative; z-index: 1; }

.bottom-strip { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--surface); border-top: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; gap: 24px; z-index: 100; transform: translateY(100%); transition: transform 0.3s; }
.bottom-strip.on { transform: translateY(0); }
.strip-info { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: 14px; color: var(--gold); letter-spacing: 0.04em; }
.strip-arrow { background: none; border: none; font-size: 18px; color: var(--gold); cursor: pointer; padding: 8px; transition: opacity 0.2s; }
.strip-arrow:hover { opacity: 0.7; }

@media (max-width: 768px) {
    .lot-section { padding: 60px 8%; }
    .lot-title { font-size: 32px; }
    .bid-amount { font-size: 36px; }
    .lot-number { font-size: 48px; left: 20px; top: 20px; }
    .mark { font-size: 36px; }
}