/* The Mint page (/mint, Magento CMS page "mint"). Tokens copied from the theme master
   tools/web_export/fonts/brigade.css (game project); the fonts themselves are the storefront's
   own self-hosted woff2, already loaded by the theme's styles.css. Guide: docs/website-theme.md. */

.bb-mint {
    --bb-bg: #0e1424;
    --bb-panel: #161f36;
    --bb-panel-2: #1d2844;
    --bb-line: #2a3756;
    --bb-text: #e8ecf5;
    --bb-muted: #9aa6c0;
    --bb-amber: #f59e0b;
    --bb-amber-hi: #fbbf24;
    --bb-gold: #d9a33a;
    --bb-blue: #38bdf8;
    --font-display: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bb-bevel: inset 0 -2px 0 rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .18);
    --bb-plate: inset 0 1px 0 rgb(255 255 255 / .06);
    --bb-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72' viewBox='0 0 41.57 72'%3E%3Cpath d='M20.78 0L41.57 12V36L20.78 48L0 36V12ZM20.78 48V72' fill='none' stroke='%23fff' stroke-opacity='.05'/%3E%3C/svg%3E");

    color: var(--bb-text);
    font-family: var(--font-body);
    line-height: 1.6;
    margin: 0 0 3rem;
}

.bb-mint h1,
.bb-mint h2,
.bb-mint figcaption,
.mint-kicker,
.mint-btn { font-family: var(--font-display); }

/* ---- hero: text beside the turning coin on a dark panel ---- */
.mint-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 1rem 2rem;
    padding: 2rem;
    border: 1px solid var(--bb-line);
    border-radius: 10px;
    background:
        radial-gradient(ellipse 55% 70% at 70% 50%, rgb(217 163 58 / .16), transparent 70%),
        var(--bb-hex),
        linear-gradient(180deg, var(--bb-panel), var(--bb-bg));
    box-shadow: var(--bb-plate);
    overflow: hidden;
}

.mint-kicker {
    margin: 0 0 .4rem;
    color: var(--bb-amber);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bb-mint .mint-hero__title {
    margin: 0 0 .8rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.1;
    font-weight: 700;
    color: var(--bb-text);
}

.mint-lede { margin: 0 0 1rem; color: var(--bb-muted); font-size: 1.05rem; max-width: 44ch; }
.mint-hint { margin: 0 0 1.2rem; color: var(--bb-text); font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; }
.mint-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* Flip says SHOW THE BACK or SHOW THE FRONT: wide enough for the longer, so it never changes size */
[data-mint-flip] { min-width: 12.2em; text-align: center; }

.mint-btn {
    display: inline-block;
    min-height: 44px;
    padding: .65rem 1.3rem;
    border: 0;
    border-radius: 6px;
    background: var(--bb-amber);
    color: var(--bb-bg);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: var(--bb-bevel);
    cursor: pointer;
}
.mint-btn:hover { background: var(--bb-amber-hi); }
.mint-btn:active { transform: translateY(1px); box-shadow: none; }
.mint-btn:disabled { opacity: .55; cursor: default; }
.mint-btn:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }

.mint-stage {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-height: 560px;
    margin-inline: auto;
}
.mint-canvas,
.mint-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: pan-y;          /* sideways drags spin the coin, vertical ones scroll */
    cursor: grab;
}
.mint-canvas:active { cursor: grabbing; }
.mint-video { object-fit: contain; cursor: default; }
.mint-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* frame 0 sits exactly under the canvas's frame 0, so swapping is invisible */
.mint-stage.is-live .mint-fallback { visibility: hidden; }

/* ---- two sides: a text card per face ---- */
.mint-sides { margin: 3rem 0 0; }
.bb-mint .mint-section-title {
    margin: 0 0 1.2rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bb-text);
}
.mint-faces {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.mint-face {
    padding: 1.2rem 1.4rem 1.4rem;
    border: 1px solid var(--bb-line);
    border-radius: 8px;
    background: var(--bb-panel);
    border-top: 3px solid var(--bb-gold);
    box-shadow: var(--bb-plate);
}
.bb-mint .mint-face h3 {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bb-amber-hi);
}
.mint-face p { margin: 0 0 .7rem; color: var(--bb-muted); }
.mint-face p:last-child { margin-bottom: 0; }
.bb-mint .mint-face__lead { color: var(--bb-text); font-weight: 500; }

/* ---- the motto ---- */
.mint-motto { max-width: 46rem; margin: 3.5rem auto 0; }
.mint-quote {
    margin: 0;
    padding: .2rem 0 .2rem 1.2rem;
    border-left: 4px solid var(--bb-gold);
}
.mint-quote p {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bb-gold);
}
.mint-quote--alt { margin-top: .8rem; border-left-color: var(--bb-amber); }
.mint-quote--alt p { color: var(--bb-amber-hi); }
.mint-motto__text { margin: 1.2rem 0 0; color: var(--bb-muted); font-size: 1.05rem; }

/* ---- follow the mint ---- */
.mint-follow {
    max-width: 46rem;
    margin: 3rem auto 0;
    padding: 1.6rem;
    border: 1px solid var(--bb-line);
    border-radius: 8px;
    background: var(--bb-hex), var(--bb-panel);
    box-shadow: var(--bb-plate);
    text-align: center;
}
.mint-follow p { margin: 0 0 1.2rem; color: var(--bb-muted); }
.mint-follow .mint-actions { justify-content: center; }
.bb-mint a.mint-btn { color: var(--bb-bg); text-decoration: none; }

/* ---- the Commander's readings (js/listen.js) ---- */
.mint-motto__quotes { position: relative; padding-right: 3rem; }
.mint-motto__quotes > .mint-listen { position: absolute; top: .2rem; right: 0; margin: 0; }
.mint-listen {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bb-amber);
    color: var(--bb-bg);
    box-shadow: var(--bb-bevel);
    cursor: pointer;
    margin-left: .55rem;
    vertical-align: .15em;
}
.mint-listen svg { width: 20px; height: 20px; }
.mint-listen:hover { background: var(--bb-amber-hi); }
.mint-listen:active { transform: translateY(1px); box-shadow: none; }
.mint-listen:focus-visible,
.mint-btn--ghost:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }
.mint-listen.is-playing,
.mint-btn--ghost.is-playing { animation: mint-pulse 1.4s ease-out infinite; }
@keyframes mint-pulse {
    0% { box-shadow: var(--bb-bevel), 0 0 0 0 rgb(245 158 11 / .55); }
    100% { box-shadow: var(--bb-bevel), 0 0 0 12px rgb(245 158 11 / 0); }
}
.mint-btn--ghost {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--bb-panel-2);
    color: var(--bb-amber-hi);
    box-shadow: inset 0 0 0 1px var(--bb-line), var(--bb-bevel);   /* a drawn border keeps it the Flip button's height */
}
.mint-btn--ghost:hover { background: var(--bb-line); }
.mint-btn--ghost svg { width: 18px; height: 18px; }
.mint-btn--ghost[hidden] { display: none; }

/* ---- phones ---- */
@media (max-width: 760px) {
    .mint-hero { grid-template-columns: 1fr; padding: 1.2rem; text-align: center; }
    .mint-hero__text { order: 2; }
    .mint-lede { margin-inline: auto; }
    .mint-stage { max-width: 420px; }
    .mint-faces { grid-template-columns: 1fr; gap: 1rem; }
    .mint-face { padding: 1rem; }
    .mint-follow { padding: 1.2rem; }
    .mint-hero .mint-actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mint-listen.is-playing, .mint-btn--ghost.is-playing { animation: none; outline: 2px solid var(--bb-amber-hi); }
    .mint-listen:active { transform: none; }
    .mint-btn:active { transform: none; }
}