/* CSEOBA 2026 hero brand identity: navy + metallic gold (matches the event flyer) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Great+Vibes&display=swap');

:root {
    --cseoba-navy: #0b1a3a;
    --cseoba-gold: #c9a24a;
    --cseoba-gold-light: #f1d68a;
    --cseoba-gold-deep: #a8832f;
}

.font-display {
    font-family: 'Cinzel', Georgia, serif;
    letter-spacing: 0.08em;
}

.font-script {
    font-family: 'Great Vibes', cursive;
    letter-spacing: 0;
}

/* Metallic gold text */
.text-gold-gradient {
    background: linear-gradient(180deg, var(--cseoba-gold-light) 0%, var(--cseoba-gold) 45%, var(--cseoba-gold-deep) 70%, var(--cseoba-gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* text-shadow bleeds through clipped text; use drop-shadow instead */
    text-shadow: none !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* Gold sparkle dust overlay */
.gold-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 12%, var(--cseoba-gold-light), transparent),
        radial-gradient(1px 1px at 15% 30%, var(--cseoba-gold), transparent),
        radial-gradient(2px 2px at 5% 55%, var(--cseoba-gold-light), transparent),
        radial-gradient(1px 1px at 12% 80%, var(--cseoba-gold), transparent),
        radial-gradient(1.5px 1.5px at 88% 15%, var(--cseoba-gold-light), transparent),
        radial-gradient(1px 1px at 93% 35%, var(--cseoba-gold), transparent),
        radial-gradient(2px 2px at 85% 60%, var(--cseoba-gold-light), transparent),
        radial-gradient(1px 1px at 95% 85%, var(--cseoba-gold), transparent),
        radial-gradient(1px 1px at 30% 8%, var(--cseoba-gold), transparent),
        radial-gradient(1px 1px at 70% 6%, var(--cseoba-gold-light), transparent),
        radial-gradient(1.5px 1.5px at 25% 92%, var(--cseoba-gold-light), transparent),
        radial-gradient(1px 1px at 75% 94%, var(--cseoba-gold), transparent);
    opacity: 0.8;
    animation: sparkle 4s ease-in-out infinite alternate;
}

@keyframes sparkle {
    from { opacity: 0.45; }
    to { opacity: 0.9; }
}

/* Thin gold rule with a diamond in the middle */
.gold-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--cseoba-gold);
}

.gold-divider::before,
.gold-divider::after {
    content: '';
    height: 1px;
    width: min(9rem, 30vw);
    background: linear-gradient(90deg, transparent, var(--cseoba-gold));
}

.gold-divider::after {
    background: linear-gradient(90deg, var(--cseoba-gold), transparent);
}

.gold-divider span {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--cseoba-gold);
    transform: rotate(45deg);
}

/* Primary call to action */
.btn-gold {
    background: linear-gradient(180deg, var(--cseoba-gold-light) 0%, var(--cseoba-gold) 50%, var(--cseoba-gold-deep) 100%);
    color: var(--cseoba-navy);
    font-family: 'Cinzel', Georgia, serif;
    letter-spacing: 0.1em;
    box-shadow: 0 0 18px rgba(201, 162, 74, 0.35);
}

.btn-gold:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 28px rgba(241, 214, 138, 0.55);
}

.btn-gold-outline {
    border: 1px solid var(--cseoba-gold);
    color: var(--cseoba-gold-light);
    font-family: 'Cinzel', Georgia, serif;
    letter-spacing: 0.1em;
}

.btn-gold-outline:hover {
    background: rgba(201, 162, 74, 0.15);
}
