/* Sonic Unicorn scan page stylesheet. */

/* Define scan-page tokens. */
:root {
    --scan-bg: var(--public-bg, #080808);
    --scan-panel: rgba(14, 14, 14, 0.52);
    --scan-panel-strong: rgba(14, 14, 14, 0.66);
    --scan-text: var(--public-text-strong, #ffffff);
    --scan-text-soft: var(--public-text, #aaaaaa);
    --scan-border: var(--public-border, rgba(255, 255, 255, 0.12));
    --scan-accent: var(--public-accent, var(--su-red, #b40000));
    --scan-accent-soft: var(--public-accent-soft, #eaca40);
    --scan-focus: var(--public-red-focus, 0 0 0 3px rgba(180, 0, 0, 0.24));
    --scan-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
    --scan-brand-image: var(--public-brand-image, url("/assets/images/sonic-unicorn.png"));
    --scan-radius-card: var(--public-radius-card, 8px);
    --scan-border-red: var(--public-red-border, rgba(180, 0, 0, 0.32));
    --scan-border-strong: var(--public-red-border-strong, rgba(180, 0, 0, 0.7));
    --scan-glass-highlight: rgba(255, 255, 255, 0.055);
    --scan-glass-lowlight: rgba(255, 255, 255, 0.018);
    --scan-font-title: "New Brilliant", Tahoma, sans-serif;
    --scan-font-ui: "Conthrax", Tahoma, sans-serif;
    --scan-font-body: Calibri, Verdana, sans-serif;
    --scan-card-width: 560px;
}

/* Render the scan surface on the public-site background system. */
body {
    background: var(--scan-bg);
    color: var(--scan-text);
    font-family: var(--scan-font-body);
    min-height: 100dvh;
    overflow-x: hidden;
}

/* Render the shared public brand artwork. */
body::before {
    content: "";
    position: fixed;
    inset: -8%;
    background-image: var(--scan-brand-image);
    background-position: 50% 44%;
    background-repeat: no-repeat;
    background-size: clamp(920px, 62vw, 1520px) auto;
    opacity: 0.46;
    filter: blur(12px) saturate(150%);
    transform: scale(1.04);
    pointer-events: none;
    z-index: 0;
}

/* Match the homepage hero overlay. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    pointer-events: none;
    z-index: 0;
}

/* Center the scan card within safe-area padding. */
.scan-shell {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding:
        max(20px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(28px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
}

/* Render the compact scan card. */
.scan-card {
    width: min(var(--scan-card-width), 100%);
    padding: 22px 18px 18px;
    border: 1px solid var(--scan-border-red);
    border-left: 3px solid rgba(234, 202, 64, 0.36);
    border-radius: var(--scan-radius-card);
    background:
        linear-gradient(180deg, var(--scan-glass-highlight), var(--scan-glass-lowlight)),
        linear-gradient(90deg, rgba(64, 0, 0, 0.16), rgba(14, 14, 14, 0.34));
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    box-shadow:
        var(--scan-shadow),
        inset 0 -1px 0 rgba(234, 202, 64, 0.12);
}

/* Render the scan brand lockup. */
.scan-brand {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.scan-logo {
    display: block;
    height: auto;
    max-width: min(150px, 46vw);
    opacity: 0.9;
    width: 100%;
}

.scan-brand-copy {
    min-width: 0;
}

.scan-brand-copy h1 {
    margin: 0 auto;
    max-width: 100%;
    color: var(--scan-accent);
    font-family: var(--scan-font-title);
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.96;
    overflow-wrap: anywhere;
    text-shadow:
        -1px 0 0 rgba(76, 0, 0, 0.92),
        1px 0 0 rgba(76, 0, 0, 0.92),
        0 0 5px rgba(255, 0, 0, 0.8),
        0 0 14px rgba(192, 0, 0, 0.48);
}

/* Render supporting scan copy. */
.scan-lede {
    margin: 6px 0 0;
    color: var(--scan-text-soft);
    font-size: 1rem;
    line-height: 1.35;
}

/* Render social actions as stacked tap targets. */
.scan-links {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.scan-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label arrow"
        "description arrow";
    gap: 2px 14px;
    align-items: center;
    min-height: 62px;
    padding: 16px;
    margin: 0;
    border: 1px solid var(--scan-border);
    border-radius: var(--scan-radius-card);
    background:
        linear-gradient(180deg, var(--scan-glass-highlight), var(--scan-glass-lowlight)),
        var(--scan-panel);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    backdrop-filter: blur(8px) saturate(125%);
    box-shadow:
        0 0 0 1px rgba(64, 0, 0, 0.62),
        0 0 10px rgba(192, 0, 0, 0.26);
    color: var(--scan-text);
    text-decoration: none;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        box-shadow 140ms ease;
    min-width: 0;
}

.scan-button-primary {
    border-color: rgba(234, 202, 64, 0.36);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
        linear-gradient(90deg, rgba(64, 0, 0, 0.24), var(--scan-panel-strong));
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.22),
        inset 0 -1px 0 rgba(234, 202, 64, 0.12);
}

.scan-button:hover,
.scan-button:focus-visible {
    border-color: var(--scan-border-strong);
    box-shadow:
        0 0 0 1px rgba(64, 0, 0, 0.9),
        0 0 12px rgba(192, 0, 0, 0.44),
        0 0 24px rgba(192, 0, 0, 0.2),
        var(--scan-focus);
    color: var(--scan-text);
    outline: none;
    text-decoration: none;
}

.scan-button-label {
    grid-area: label;
    font-family: var(--scan-font-ui);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
}

.scan-button-description {
    grid-area: description;
    color: var(--scan-text-soft);
    font-size: 0.98rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.scan-button-arrow {
    grid-area: arrow;
    color: var(--scan-accent-soft);
    font-size: 1.4rem;
    line-height: 1;
}

/* Render bookmark and handle metadata. */
.scan-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--scan-border-red);
    color: var(--scan-text-soft);
    font-size: 0.86rem;
    line-height: 1.4;
    flex-wrap: wrap;
}

.scan-mono,
.scan-handle {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.scan-handle {
    color: var(--scan-accent-soft);
}

/* Adapt the scan card for mobile viewports. */
@media (max-width: 600px) {
    body::before {
        background-size: 760px auto;
        filter: blur(12px) saturate(135%);
    }

    .scan-brand-copy h1 {
        font-size: 2.3rem;
    }
}

@media (max-width: 360px) {
    .scan-brand-copy h1 {
        font-size: 2rem;
    }
}