@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-v12-latin_latin-ext-italic.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-v12-latin_latin-ext-600italic.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-v12-latin_latin-ext-700italic.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-v12-latin_latin-ext-700.woff2) format("woff2"); }

:root {
    --blue: #1b3380;   /* RMF FM campaign blue */
    --red: #d81e1e;
    --yellow: #ffd21e;
    --ink: var(--blue);
    --muted: rgba(27, 51, 128, .72);
    --hl: var(--yellow);
    --dim: #fff;
    --glass: rgba(10, 18, 50, .55);
    --edge: rgba(255, 255, 255, .18);
    --font: Gilroy, Montserrat, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--font);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Poster background: yellow field, white wedge, red blade */
.poster { position: fixed; inset: 0; overflow: hidden; background: var(--yellow); }
.poster i { position: absolute; display: block; }
.poster i:nth-child(1) { left: 0; bottom: 0; width: 100%; height: 55%; background: #fff; clip-path: polygon(0 0, 58% 100%, 0 100%); }
.poster i:nth-child(2) { right: 0; bottom: 0; width: 72%; height: 24%; background: var(--red); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.poster i:nth-child(3) { left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(160deg, rgba(255, 255, 255, .28), transparent 40%); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rmf-ink { fill: var(--logo-ink, var(--blue)); fill-rule: evenodd; }
.rmf-plane { fill: #fff; }
.rmf-blade { fill: var(--red); }

.stage { position: relative; height: 100%; display: grid; place-items: center; padding: 1rem; overflow-x: hidden; overflow-y: auto; }

.cam {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transform: scaleX(-1);
    opacity: 0; transition: opacity .6s;
}
.cam.on { opacity: 1; }
.vignette {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
    background: linear-gradient(to top, rgba(8, 14, 44, .93) 0%, rgba(8, 14, 44, .15) 45%, rgba(8, 14, 44, .6) 100%);
}
body.live .vignette { opacity: 1; }

/* Top bar */
.topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; justify-content: space-between; align-items: center;
    padding: max(1rem, env(safe-area-inset-top)) 1.25rem 0;
}
body.live .topbar { --logo-ink: #fff; color: #fff; }
.brand { display: flex; gap: .9rem; align-items: center; font-weight: 600; }
.brand span { text-transform: uppercase; letter-spacing: .14em; }

.logo { display: block; flex: none; height: 44px; aspect-ratio: 1690 / 700; width: auto; }
.logo.xl { height: clamp(64px, 12vw, 96px); }
.chips { display: flex; gap: .6rem; }
.chip {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .8rem; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--edge);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    font-size: .78rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #fff;
}
.rec b { width: .6rem; height: .6rem; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 10px #2ecc71; }
body[data-state="singing"] .rec b { background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.meter > span { width: 70px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yellow), var(--red)); transition: width .06s linear; }

/* Cards */
.card {
    position: relative; z-index: 2; width: min(92vw, 30rem);
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 2.2rem 2rem; text-align: center;
    background: rgba(255, 255, 255, .95); border-radius: 28px;
    box-shadow: 0 30px 80px rgba(8, 14, 44, .35);
    animation: rise .5s cubic-bezier(.2, .8, .2, 1);
}
.card.wide { width: min(92vw, 40rem); }
.card.plain { width: min(92vw, 36rem); background: none; box-shadow: none; padding: 5rem 1rem 2rem; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.card h1 { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; }
.card h1 em { font-style: normal; font-weight: 600; color: var(--red); }
.card h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.card p { color: var(--muted); line-height: 1.5; }
.card small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.card small:empty { display: none; }
.card p.muted { font-variant-numeric: tabular-nums; }
#errorMsg { color: var(--ink); }

.lockup { display: flex; align-items: center; gap: 1rem; text-align: left; }
.card .edition { color: var(--blue); font-weight: 400; font-size: clamp(.95rem, 2.6vw, 1.2rem); line-height: 1.2; }
.card .when { display: flex; flex-direction: column; gap: .15rem; color: var(--blue); }
.card .when strong { font-size: clamp(2rem, 10vw, 3.2rem); font-weight: 300; line-height: 1; letter-spacing: -.01em; }
.card .when span { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; text-wrap: balance; }
body[data-state="intro"] .brand { display: none; }
.card.plain p:not(.edition) { color: #000; }
.card.plain h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.intro-text { font-weight: 300; font-size: clamp(1rem, 2.6vw, 1.5rem); line-height: 1.18; text-wrap: balance; }
.intro-text strong { display: block; font-weight: 500; }

/* Red CTA with microphone; geometry in % of the 573.5 x 290.3 Figma component. */
.cta {
    position: relative; width: min(100%, 26rem); aspect-ratio: 573.5 / 290.3; margin-top: 1.5rem;
    background: none; font-family: "Plus Jakarta Sans", var(--font); font-style: italic; color: #fff; text-align: center;
}
.cta::before {
    content: ""; position: absolute; inset: 9% 0 2.3% 0; border-radius: 10% / 22%;
    background: var(--red); transition: transform .15s, box-shadow .15s;
}
.cta:hover::before { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(216, 30, 30, .4); }
.cta:disabled { filter: grayscale(.8); opacity: .6; cursor: wait; }
.cta-mic { position: absolute; left: 6.5%; top: -3.2%; width: 27%; height: auto; }
.cta-cord { position: absolute; left: 8.7%; top: 63.5%; width: 13.1%; height: auto; }
.cta-title {
    position: absolute; left: 23.7%; right: 5.7%; top: 21%;
    font-weight: 700; font-size: clamp(1.2rem, 6.5vw, 1.75rem); line-height: 1.1;
}
.cta-sub { position: absolute; left: 23.7%; right: 5.7%; top: 74%; font-weight: 600; font-size: clamp(.9rem, 4vw, 1.2rem); }

.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.eyebrow.ok { color: #138a4b; }
.eyebrow.bad { color: var(--red); }

button { font: inherit; cursor: pointer; border: 0; color: inherit; }
button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.primary {
    padding: .95rem 1.8rem; border-radius: 999px; font-weight: 700; font-size: 1rem; color: #fff;
    background: var(--blue);
    box-shadow: 0 10px 26px rgba(27, 51, 128, .4);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.primary:hover { transform: translateY(-2px); background: var(--red); box-shadow: 0 14px 34px rgba(216, 30, 30, .4); }
.primary:active { transform: translateY(0) scale(.98); }
.primary:disabled { filter: grayscale(.8); opacity: .6; cursor: wait; transform: none; }
.ghost {
    padding: .5rem 1rem; border-radius: 999px; background: var(--glass); color: #fff;
    border: 1px solid var(--edge); font-size: .85rem; backdrop-filter: blur(14px);
}
.ghost:hover { background: rgba(255, 255, 255, .18); }
.controls { position: absolute; z-index: 3; right: 1.25rem; bottom: 1.4rem; display: flex; gap: .6rem; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.secondary {
    display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
    padding: .95rem 1.8rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
    background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue);
    transition: background .15s, color .15s;
}
.secondary:hover { background: var(--blue); color: #fff; }

.form { width: 100%; display: grid; gap: .9rem; text-align: left; }
.form label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--blue); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"] {
    font: inherit; font-weight: 400; padding: .75rem .9rem; color: var(--blue); background: #fff;
    border: 2px solid rgba(27, 51, 128, .3); border-radius: 12px;
}
.form input:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--blue); }
.form .check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; line-height: 1.35; }
.form .check input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: var(--blue); flex: none; }
.form .check a { color: var(--red); font-weight: 600; }
.toggle { display: flex; align-items: center; gap: .6rem; color: var(--blue); font-weight: 400; cursor: pointer; }
.toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--blue); flex: none; }
.form .actions { margin-top: .4rem; }
.primary:disabled { cursor: not-allowed; }

#result { width: auto; max-width: 100%; max-height: 50vh; object-fit: contain; border-radius: 18px; background: #000; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }

/* Upload */
.spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid rgba(27, 51, 128, .15); border-top-color: var(--red);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.track { width: 100%; height: 8px; border-radius: 8px; background: rgba(27, 51, 128, .15); overflow: hidden; }
.track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--red)); transition: width .2s; }

/* Karaoke lyrics */
.lyrics {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 5.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 0 1.25rem; text-align: center;
}
.line { white-space: pre-wrap; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: #fff; }
.line.cur { font-size: clamp(1.9rem, 5.4vw, 4rem); filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .8)); }
.line.next { font-size: clamp(1.1rem, 2.6vw, 1.8rem); opacity: .7; }
.syl {
    background: linear-gradient(90deg, var(--hl) var(--p, 0%), var(--dim) var(--p, 0%));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.count {
    position: absolute; bottom: calc(100% + 1.5rem);
    font-size: clamp(5rem, 18vw, 11rem); font-weight: 900; line-height: 1;
    background: linear-gradient(180deg, #fff, var(--yellow));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 30px rgba(255, 210, 30, .6));
}
.count.pop { animation: pop .6s ease-out; }
@keyframes pop { from { transform: scale(1.6); opacity: 0; } }

.progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .1); }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yellow), var(--red)); box-shadow: 0 0 16px var(--yellow); }

/* On-screen debug log (?debug) */
.debug {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 42vh;
    display: flex; flex-direction: column;
    background: rgba(5, 10, 30, .92); color: #cfe3ff;
    font: 11px/1.4 ui-monospace, Consolas, "Courier New", monospace;
}
.debug.min { height: auto; }
.debug.min .debug-log { display: none; }
.debug-bar { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.debug-bar strong { margin-right: auto; color: var(--yellow); }
.debug-bar button { padding: .25rem .6rem; font-size: 11px; border-radius: 6px; background: rgba(255, 255, 255, .15); color: #fff; }
.debug-log { flex: 1; overflow-y: auto; padding: .4rem .5rem; -webkit-overflow-scrolling: touch; }
.dl { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 2px; }
.dl.warn { color: var(--yellow); }
.dl.error { color: #ff8a8a; }

@media (max-width: 520px) {
    .lockup { gap: .6rem; }
    .logo.xl { height: clamp(48px, 15vw, 64px); }
    .card.plain { padding-inline: 0; }
    .topbar { padding: max(.75rem, env(safe-area-inset-top)) .75rem 0; gap: .5rem; }
    .brand span { display: none; }
    .logo { height: 34px; }
    .chips { gap: .4rem; }
    .chip { padding: .3rem .6rem; font-size: .68rem; gap: .35rem; }
    .meter > span { width: 44px; }
    .card { padding: 1.8rem 1.4rem; }
    .actions { flex-direction: column; width: 100%; }
    .actions button, .actions .secondary { width: 100%; }
    .lyrics { bottom: max(5.5rem, calc(4.5rem + env(safe-area-inset-bottom))); }
    .controls { right: 50%; transform: translateX(50%); bottom: max(1.1rem, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 1.5rem); }
}

@media (max-height: 520px) {
    .card { margin-top: 3.2rem; padding-block: 1.2rem; gap: .7rem; }
    .card.plain { margin-top: 0; padding-top: 1rem; padding-bottom: .5rem; }
    .logo.xl { height: 48px; }
    #result { max-height: 36vh; }
    .lyrics { bottom: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}