/* ==========================================================================
   Hero layout: "Centered showcase"
   Black stage, metallic wordmark, ribbon banner, diamond-plaid corner swoops.
   Colours derive from --accent, so any accent works (gold looks best).
   ========================================================================== */
.hero-centered {
    --display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --g-hi: color-mix(in srgb, var(--accent) 35%, #ffffff);
    --g-mid: var(--accent);
    --g-lo: color-mix(in srgb, var(--accent) 55%, #000000);
    --metal: linear-gradient(180deg, var(--g-hi) 0%, var(--g-mid) 38%, var(--g-lo) 62%, var(--g-mid) 82%, var(--g-hi) 100%);
    min-height: 100vh; justify-content: center; text-align: center;
    padding: 130px 0 120px;
    background:
        radial-gradient(620px 420px at 50% 22%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
        #050505;
    --text: #f6f3ea; --muted: #b7b1a2; --card: #121212; --line: rgba(255, 255, 255, .12); --tint: rgba(255, 255, 255, .06);
    color: var(--text);
}
.hero-centered::before { display: none; }
[data-theme="emerald"] .hero-centered {
    background:
        radial-gradient(620px 420px at 50% 22%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
        #050505;
}

/* ---------- Plaid corner swoops ---------- */
.plaid { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; }
.plaid::before {
    content: ""; position: absolute; inset: -60%;
    background:
        repeating-conic-gradient(var(--g-mid) 0 25%, color-mix(in srgb, var(--accent) 14%, #000) 0 50%) 0 0 / 64px 64px;
    transform: rotate(45deg);
}
.plaid::after { content: ""; position: absolute; inset: 0; }
.plaid-tr {
    top: 0; right: 0; width: min(50vw, 640px); height: min(26vw, 300px);
    border-bottom-left-radius: 100% 100%;
    box-shadow: -2px 2px 0 var(--g-hi);
}
.plaid-tr::after { background: linear-gradient(215deg, transparent 35%, rgba(0, 0, 0, .75) 100%); }
.plaid-bl {
    bottom: 0; left: 0; width: min(62vw, 780px); height: min(22vw, 250px);
    border-top-right-radius: 100% 100%;
    box-shadow: 2px -2px 0 var(--g-hi);
}
.plaid-bl::after { background: linear-gradient(35deg, transparent 35%, rgba(0, 0, 0, .75) 100%); }

/* ---------- Content ---------- */
.hero-centered .stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

.emblem { width: 112px; height: 112px; position: relative; margin-bottom: 2rem; }
.emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.emblem text { font: 700 9.5px var(--font); letter-spacing: .22em; fill: var(--g-mid); text-transform: uppercase; }
.emblem .core { position: absolute; inset: 24px; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
    font: 700 2.1rem var(--display); background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.emblem .core img { width: 100%; height: 100%; object-fit: contain; }

.ribbon {
    position: relative; z-index: 3; display: inline-block; padding: .55rem 2.6rem; margin-bottom: -1.1rem;
    font-weight: 800; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: #1b1405;
    background: linear-gradient(180deg, var(--g-hi), var(--g-mid) 55%, var(--g-lo));
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
    transform: rotate(-3deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}
.ribbon.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1b1405; margin-right: .6rem; animation: pulse 1.8s infinite; }

.display { margin: 0; line-height: .95; font-family: var(--display); font-weight: 700; }
.display .d-main {
    display: block; font-size: clamp(5rem, 17vw, 12.5rem); letter-spacing: -.02em; padding: .08em .12em;
    background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--accent) 30%, transparent));
}
.display .d-sub {
    display: block; margin-top: -.2em; font-family: var(--display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    font-size: clamp(1.5rem, 5vw, 3.4rem);
    background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.display .d-sub::before, .display .d-sub::after {
    content: ""; display: inline-block; width: .22em; height: .22em; margin: 0 .55em; vertical-align: middle; transform: translateY(-.1em);
    border-radius: 50%; background: var(--g-hi);
}
.tagline { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--text); margin: 1.4rem auto 2rem; max-width: 640px; opacity: .92; }
.hero-centered .hero-cta { justify-content: center; }
.hero-centered .countdown { justify-content: center; }
.hero-centered .cd-label { margin-top: 2.4rem; }

/* ---------- Light theme: keep the stage dark so the metal reads ---------- */
[data-theme="light"] .hero-centered { background: radial-gradient(620px 420px at 50% 22%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), #050505; }

@media (max-width: 720px) {
    .hero-centered { padding: 110px 0 100px; }
    .plaid-tr { width: 62vw; height: 34vw; } .plaid-bl { width: 78vw; height: 28vw; }
    .emblem { width: 92px; height: 92px; margin-bottom: 1.4rem; } .emblem .core { inset: 20px; font-size: 1.7rem; }
    .ribbon { padding: .5rem 2rem; font-size: .75rem; }
}