/*
  COMO NASCE UMA PEÇA — the signature band (firing.js runs the pictures; this lays it out).

  An ordinary band: nothing is pinned and the page scrolls normally. The stages advance on their own.
    plain  — no script: heading + an ordered list of six stages, the picture panel absent.
    ready  — [data-firing-ready]: the panel is shown beside the list; the stages can be picked.
    auto   — [data-firing-auto]: the stages advance by themselves; only the current one is open, and a
             thin heat line under it shows how long until the next.
*/

.firing__inner {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
}

.firing__head {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    margin-block-end: var(--space-xl);
}

.firing__head .eyebrow { margin: 0; }
.firing__title { max-inline-size: 14ch; }
.firing__intro { max-inline-size: 44ch; }

/* ---- The six stages ---------------------------------------------------------------------------- */
.firing__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    border-block-start: 1px solid var(--color-border);
}

.firing__step {
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-md);
    border-block-end: 1px solid var(--color-border);
}

.firing__num {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-black);
    line-height: 1.1;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.firing__step-title {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.2;
}

.firing__step-body {
    margin: var(--space-2xs) 0 0;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    max-inline-size: 46ch;
}

.firing__step-bar { display: none; }

.firing__hint {
    display: none;
    margin: var(--space-md) 0 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* ---- The picture panel ------------------------------------------------------------------------- */
.firing__visual { display: none; margin: 0; }
[data-firing-ready] .firing__visual { display: block; }

.firing__panel {
    position: relative;
    inline-size: 100%;
    max-inline-size: 36rem;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--kiln-raw);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.6) inset,
        0 40px 80px -48px rgb(20 14 12 / 0.55);
}

.firing__canvas {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.firing__readout {
    position: absolute;
    inset-inline-start: var(--space-md);
    inset-block-end: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-inline-size: calc(100% - 2 * var(--space-md));
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--glass-ink);
    color: var(--color-on-deep-strong);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    font-stretch: var(--stretch-label);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.firing__readout-num { color: var(--kiln-core); font-variant-numeric: tabular-nums; white-space: nowrap; }
.firing__readout-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.firing__readout-name:empty { display: none; }

/* One tick per stage, filling with heat as the piece moves through the stages. */
.firing__meter {
    position: absolute;
    inset-inline-end: var(--space-md);
    inset-block-start: calc(var(--space-md) + 0.4rem);
    display: flex;
    gap: 4px;
    inline-size: 6.5rem;
    block-size: 4px;
}

.firing__tick {
    flex: 1;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.45);
    box-shadow: 0 0 0 1px rgb(16 14 14 / 0.12);
}

.firing__meter::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: var(--heat-gradient);
    transform-origin: left center;
    transform: scaleX(var(--firing-progress, 1));
}

@media (min-width: 62rem) {
    .firing__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-3xl); }
}

/* =========================================================================
   READY — the stages can be picked
   ========================================================================= */
[data-firing-ready] .firing__step { cursor: pointer; transition: opacity var(--transition-slow); }
[data-firing-ready] .firing__step:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
[data-firing-ready] .firing__hint { display: block; }

[data-firing-ready] .firing__step { opacity: 0.42; }
[data-firing-ready] .firing__step:hover { opacity: 0.75; }
[data-firing-ready] .firing__step.is-active { opacity: 1; }

/* Only the current stage's text is open, so six stages sit in one calm column. */
[data-firing-ready] .firing__step-text {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows var(--duration-slow) var(--ease-out);
}

[data-firing-ready] .firing__step.is-active .firing__step-text { grid-template-rows: auto 1fr; }
[data-firing-ready] .firing__step-text > .firing__step-body { overflow: hidden; min-block-size: 0; }

/* =========================================================================
   AUTO — a heat line under the current stage counts down to the next one
   ========================================================================= */
[data-firing-auto] .firing__step-bar {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 2px;
    background: var(--heat-gradient);
    transform-origin: left center;
    transform: scaleX(0);
}

[data-firing-auto] .firing__step.is-active .firing__step-bar { transform: scaleX(var(--step-progress, 0)); }
[data-firing-auto] .firing__step.is-done .firing__step-bar { display: none; }

/* On a phone: heading, then the picture, then the stages under it. */
@media (max-width: 61.99rem) {
    .firing__inner { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-lg); }
    .firing__copy { display: contents; }
    .firing__head { order: 1; margin: 0; }
    .firing__visual { order: 2; }
    .firing__steps { order: 3; }
    .firing__hint { order: 4; margin: 0; }
    .firing__panel { max-inline-size: 30rem; }
}