/*
  The Ceramigeek brand opening — a studio ident, roughly 1.8 s, shown at most once per session.

  It is DISPLAY:NONE unless `intro.js` opts the document in with html[data-brand-intro="run"], so
  no-JS visitors, crawlers and every internal navigation get Home immediately with no overlay in the
  way. Nothing here is required to reach content: Home is already rendered underneath.

  The composition is the brand's own vocabulary and nothing else:
    * near-black ground;
    * the real mascot rising out of a porcelain disc (the restrained reveal);
    * a soft porcelain highlight sweeping across the disc, the way light moves over a glazed piece;
    * the wordmark split — CERAMI in porcelain white against the near-black, GEEK pressed on in a
      Ceramigeek-red maker's stamp, exactly as Nathy stamps a finished piece;
    * one small red rule as the closing accent.

  No WebGL, no 3D, no progress bar, no percentage, no sound, no house, and no interaction required.
*/

.brand-intro {
    display: none;
}

html[data-brand-intro] .brand-intro {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: var(--z-intro);
    place-items: center;
    padding: var(--container-pad);
    background: var(--cg-black);
    transition: opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}

html[data-brand-intro="done"] .brand-intro {
    opacity: 0;
    transform: translateY(-1.5%);
    pointer-events: none;
}

.brand-intro__stage {
    display: grid;
    justify-items: center;
    gap: clamp(1rem, 3vh, 1.75rem);
    text-align: center;
}

/* ---- The porcelain disc + mascot -------------------------------------------
   The disc is what makes the black-on-transparent mascot readable on the ink ground, and it is the
   most literal ceramic form the brand owns. The mascot is clipped by it, so it reads as rising out
   of the clay rather than as a sticker on top of it. */
.brand-intro__disc {
    position: relative;
    display: block;
    inline-size: clamp(7.5rem, 26vw, 11rem);
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: var(--cg-paper);
    overflow: hidden;
    animation: cg-intro-disc 520ms var(--ease-entrance) both;
}

/* The porcelain highlight: a soft sheen that travels once across the glaze. */
.brand-intro__disc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.85) 48%,
        rgba(255, 255, 255, 0) 66%);
    transform: translateX(-120%);
    animation: cg-intro-sheen 900ms var(--ease-out) 380ms both;
}

.brand-intro__mascot {
    position: absolute;
    inset-inline: 13%;
    inset-block-end: 8%;
    inline-size: 74%;
    block-size: auto;
    animation: cg-intro-mascot 620ms var(--ease-entrance) 120ms both;
}

/* ---- The wordmark ----------------------------------------------------------
   CERAMI is porcelain-white type on the near-black ground — the black/white contrast. GEEK sits in a
   red block that presses down onto it. */
.brand-intro__wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.28em;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 8vw, 3.1rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: 0.04em;
}

.brand-intro__cerami {
    color: var(--cg-white);
    animation: cg-intro-cerami 420ms var(--ease-entrance) 260ms both;
}

/* The maker's stamp: it lands from slightly above and larger, then settles a couple of degrees off
   square — the way a hand-held stamp actually leaves a mark. */
.brand-intro__geek {
    display: inline-block;
    padding: 0.1em 0.34em 0.14em;
    border-radius: var(--radius-sm);
    background: var(--cg-red);
    color: var(--cg-white);
    animation: cg-intro-stamp 380ms var(--ease-entrance) 620ms both;
}

/* ---- Closing accent --------------------------------------------------------
   A short red rule that draws itself left to right. The only other mark on screen. */
.brand-intro__rule {
    inline-size: clamp(3rem, 12vw, 5rem);
    block-size: 3px;
    background: var(--cg-red);
    border-radius: 2px;
    transform-origin: left center;
    animation: cg-intro-rule 420ms var(--ease-entrance) 900ms both;
}

.brand-intro__skip {
    position: absolute;
    inset-block-end: clamp(1.25rem, 4vh, 3rem);
    inset-inline-end: var(--container-pad);
    min-block-size: 2.75rem;
    padding-inline: var(--space-lg);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-on-deep-border);
    color: var(--color-on-deep-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.brand-intro__skip:hover {
    color: var(--color-on-deep-strong);
    border-color: var(--color-on-deep);
}

@keyframes cg-intro-disc {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: none; }
}

@keyframes cg-intro-sheen {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}

@keyframes cg-intro-mascot {
    from { opacity: 0; transform: translateY(14%); }
    to { opacity: 1; transform: none; }
}

@keyframes cg-intro-cerami {
    from { opacity: 0; transform: translateY(0.2em); }
    to { opacity: 1; transform: none; }
}

@keyframes cg-intro-stamp {
    from { opacity: 0; transform: translateY(-0.35em) scale(1.5) rotate(6deg); }
    60% { opacity: 1; transform: scale(0.97) rotate(-3deg); }
    to { opacity: 1; transform: rotate(-2deg); }
}

@keyframes cg-intro-rule {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/*
  Reduced motion: the ident becomes the finished composition, immediately. Nothing animates in and
  nothing sweeps; intro.js also reads a much shorter --duration-intro, so it clears almost at once.
*/
@media (prefers-reduced-motion: reduce) {
    .brand-intro__disc,
    .brand-intro__mascot,
    .brand-intro__cerami,
    .brand-intro__geek,
    .brand-intro__rule {
        animation: none;
    }

    .brand-intro__disc::after { animation: none; opacity: 0; }
    .brand-intro__geek { transform: rotate(-2deg); }
    html[data-brand-intro] .brand-intro { transition: none; }
}