/*
  Shared components of the redesign (components.js), in the kiln language of the rest of the site:
  the photo viewer, the animated accordion, the process line, the page rail, the kiln frame for
  photographs and the floor of an inner page's opening. Tokens only; every one degrades to plain
  markup without its script.
*/

/* =========================================================================
   1. PHOTO VIEWER
   ========================================================================= */
.has-lightbox img[role="button"] { cursor: zoom-in; }
.has-lightbox img[role="button"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.lightbox {
    inline-size: min(1100px, 100vw - 2rem);
    max-inline-size: none;
    max-block-size: min(900px, 100dvh - 2rem);
    padding: 0;
    border: 1px solid var(--color-on-deep-border);
    border-radius: var(--radius-xl);
    background: var(--cg-black);
    color: var(--color-on-deep);
    overflow: hidden;
    box-shadow: 0 50px 140px -30px rgb(0 0 0 / 0.9);
}

.lightbox::backdrop { background: rgb(8 6 6 / 0.84); }
.lightbox[open] { animation: cg-lightbox-in 480ms var(--ease-out); }

@keyframes cg-lightbox-in {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
}

.lightbox__inner { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; block-size: 100%; }

.lightbox__media {
    margin: 0;
    display: grid;
    place-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-lg) 0;
    min-block-size: 0;
    background: radial-gradient(80% 70% at 50% 40%, rgb(255 255 255 / 0.06), transparent 70%);
}

.lightbox__media img {
    max-inline-size: 100%;
    max-block-size: min(760px, 100dvh - 9rem);
    object-fit: contain;
    border-radius: var(--radius-md);
}

.lightbox__caption { font-size: var(--text-sm); color: var(--color-on-deep-muted); text-align: center; }

.lightbox__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-md);
}

.lightbox__nav[hidden] { display: none; }

.lightbox__counter {
    margin: 0;
    min-inline-size: 5rem;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    font-stretch: var(--stretch-label);
    letter-spacing: var(--tracking-wide);
    font-variant-numeric: tabular-nums;
    color: var(--kiln-core);
}

.lightbox__arrow,
.lightbox__close {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    border: 1px solid var(--color-on-deep-border);
    background: rgb(255 255 255 / 0.04);
    color: var(--color-on-deep-strong);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-base);
}

.lightbox__arrow svg,
.lightbox__close svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lightbox__arrow:hover,
.lightbox__close:hover { border-color: var(--cg-red-on-dark); background: rgb(255 59 78 / 0.12); }
.lightbox__arrow:focus-visible,
.lightbox__close:focus-visible { outline: 2px solid var(--cg-red-on-dark); outline-offset: 2px; }

.lightbox__close { position: absolute; inset-block-start: var(--space-md); inset-inline-end: var(--space-md); z-index: 1; }

@media (max-width: 47.99rem) {
    .lightbox { inline-size: 100vw; max-block-size: 100dvh; block-size: 100dvh; border-radius: 0; border: 0; }
    .lightbox__media { padding: var(--space-2xl) var(--space-sm) 0; }
}

/* =========================================================================
   2. ACCORDION — the height animation needs the box to clip while it moves
   ========================================================================= */
details[data-accordion] { overflow: hidden; }

/* =========================================================================
   3. PROCESS LINE
   A heat line down the left of a list. It fills (red → ember) as the page scrolls it past the
   middle of the screen, a glowing bead rides its tip, and each step lights up when the heat
   reaches it. Without the script (or under reduced motion) the line is simply full and every
   step is lit.
   ========================================================================= */
[data-process] {
    --fill: 1;
    position: relative;
    padding-inline-start: 3.25rem;
}

[data-process-armed] [data-process] { --fill: 0; }

[data-process]::before,
[data-process]::after {
    content: "";
    position: absolute;
    inset-block: 0.6rem;
    inset-inline-start: 1rem;
    inline-size: 3px;
    border-radius: 3px;
}

[data-process]::before { background: color-mix(in srgb, currentColor 14%, transparent); }

[data-process]::after {
    background: linear-gradient(180deg, var(--cg-red), var(--kiln-ember));
    transform-origin: top;
    transform: scaleY(var(--fill));
}

.process-line__bead {
    position: absolute;
    inset-inline-start: calc(1rem + 1.5px);
    inset-block-start: calc(0.6rem + (100% - 1.2rem) * var(--fill));
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--kiln-core);
    box-shadow: 0 0 0 5px var(--kiln-glow-soft), 0 0 22px 4px var(--kiln-glow);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

[data-process-armed] .process-line__bead { opacity: calc(min(1, var(--fill) * 30)); }

[data-process-step] { position: relative; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }

/* The node on the line beside each step. */
[data-process-step]::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-3.25rem + 1rem + 1.5px);
    inset-block-start: 1.55rem;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, currentColor 28%, transparent);
    background: var(--process-ground, var(--color-bg));
    transform: translateX(-50%);
    transition: border-color 400ms var(--ease-out), background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}

[data-process-step][data-active="true"]::before,
html:not([data-process-armed]) [data-process-step]::before {
    border-color: var(--kiln-ember);
    background: var(--kiln-ember);
    box-shadow: 0 0 14px var(--kiln-glow);
}

[data-process-armed] [data-process-step]:not([data-active="true"]) { opacity: 0.42; transform: translateX(8px); }

/* =========================================================================
   4. PAGE RAIL — one tick per section, on the right edge of long pages
   ========================================================================= */
.page-rail {
    position: fixed;
    inset-inline-end: clamp(10px, 1.4vw, 24px);
    inset-block-start: 50%;
    z-index: calc(var(--z-header) - 1);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.page-rail[data-visible="true"] { opacity: 1; pointer-events: auto; }

.page-rail ol {
    position: relative;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
}

.page-rail ol::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 9px;
    inline-size: 1px;
    background: linear-gradient(transparent, var(--color-border-strong) 12%, var(--color-border-strong) 88%, transparent);
}

.page-rail a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    block-size: 16px;
    color: var(--color-ink-muted);
    text-decoration: none;
}

.page-rail__tick {
    inline-size: 12px;
    block-size: 2px;
    margin-inline-end: 4px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.55;
    transition: inline-size var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

.page-rail__num,
.page-rail__label {
    font-size: 0.68rem;
    font-weight: var(--weight-bold);
    font-stretch: var(--stretch-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-rail__num { font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--transition-base); }

.page-rail__label {
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--cg-black);
    color: var(--color-on-deep-strong);
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-base);
}

.page-rail a:hover .page-rail__label,
.page-rail a:focus-visible .page-rail__label { opacity: 1; transform: none; }

.page-rail a:hover .page-rail__num,
.page-rail a:focus-visible .page-rail__num,
.page-rail a[aria-current="true"] .page-rail__num { opacity: 1; }

.page-rail a[aria-current="true"] { color: var(--cg-red); }

.page-rail a[aria-current="true"] .page-rail__tick {
    inline-size: 22px;
    opacity: 1;
    background: var(--heat-gradient);
    box-shadow: 0 0 10px var(--kiln-glow);
}

.page-rail a:focus-visible { outline: none; }
.page-rail a:focus-visible .page-rail__tick { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (max-width: 80rem), (pointer: coarse) {
    .page-rail { display: none; }
}

/* =========================================================================
   5. THE KILN FRAME — corner marks on a photograph, like the view through the kiln's spy hole
   ========================================================================= */
.kiln-frame { position: relative; isolation: isolate; }

.kiln-frame::before,
.kiln-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    inline-size: 24px;
    block-size: 24px;
    border: 2px solid rgb(255 255 255 / 0.85);
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
}

.kiln-frame::before {
    inset-block-start: 14px;
    inset-inline-start: 14px;
    border-inline-end: 0;
    border-block-end: 0;
    border-start-start-radius: 8px;
}

.kiln-frame::after {
    inset-block-end: 14px;
    inset-inline-end: 14px;
    border-inline-start: 0;
    border-block-start: 0;
    border-end-end-radius: 8px;
}

/* =========================================================================
   6. THE FLOOR OF AN INNER OPENING
   A glow breathing up from below and a kiln-shelf grid receding into it, behind the type of the
   Store, Academy and About openings. Decorative (aria-hidden), no image, and still under reduced motion.
   ========================================================================= */
.page-floor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.page-floor::before {
    content: "";
    position: absolute;
    inset-inline: -30%;
    inset-block-end: -10%;
    block-size: 62%;
    background:
        linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px) 0 0 / 64px 64px;
    transform: perspective(700px) rotateX(64deg);
    transform-origin: 50% 100%;
    mask-image: linear-gradient(to top, #000 8%, transparent 85%);
    -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 85%);
}

.page-floor::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: -40%;
    inline-size: min(1100px, 130vw);
    aspect-ratio: 1.7;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--kiln-glow), var(--kiln-glow-soft) 55%, transparent 75%);
    transform: translateX(-50%);
}

.on-ink:not(.section--ink) .page-floor,
.page-floor--light { opacity: 1; }

.page-floor--light::before {
    background:
        linear-gradient(rgb(16 14 14 / 0.06) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgb(16 14 14 / 0.06) 1px, transparent 1px) 0 0 / 64px 64px;
}

@media (prefers-reduced-motion: no-preference) {
    .page-floor::before { animation: cg-floor-drift 7s linear infinite; }
    .page-floor::after { animation: cg-glow-breathe 7s var(--ease-in-out) infinite alternate; }
}

@keyframes cg-floor-drift { to { background-position: 0 64px, 0 0; } }
@keyframes cg-glow-breathe { from { opacity: 0.7; } to { opacity: 1; } }

/* Content of a band that carries a floor sits above it. */
.has-floor { position: relative; isolation: isolate; }
.has-floor > .container,
.has-floor > :not(.page-floor) { position: relative; z-index: 1; }

/* =========================================================================
   7. SECTION HEADS OF INNER PAGES
   The Home can carry a headline at full display size; the Store, Academy and About say longer
   sentences, and at that size they ran to five and six lines. Here the display type steps down
   and the measure widens, so the same words sit in two or three lines.
   ========================================================================= */
/* Low specificity on purpose (:where), so a page stylesheet can still set its own size. */
.inner-heads .display:where(:not(.display--xl, .display--hero)) {
    font-size: var(--text-2xl);
    font-stretch: 108%;
    max-inline-size: 26ch;
    line-height: 1.04;
}

.inner-heads .section__head .lead { max-inline-size: 60ch; }

/* =========================================================================
   8. TABS (components.js)
   The bar is built by the script from the panels' own titles. Panels are STACKED in one grid cell
   and the inactive ones only made invisible, so the block keeps the height of its longest panel and
   the page never jumps as the tabs change.
   ========================================================================= */
.tabs__bar {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding: 4px;
    margin: -4px;
}

.tabs__bar::-webkit-scrollbar { display: none; }

.tabs__tab {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex: none;
    min-block-size: 2.75rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-stretch: var(--stretch-label);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.tabs__tab:hover { color: var(--color-ink-strong); border-color: var(--color-border-strong); }
.tabs__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tabs__tab[aria-selected="true"] {
    background: var(--cg-black);
    border-color: var(--cg-black);
    color: var(--cg-white);
}

.tabs__num {
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-red);
}

.tabs__tab[aria-selected="true"] .tabs__num { color: var(--kiln-core); }

/* The countdown to the next tab when the group advances on its own. */
.tabs__progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--heat-gradient);
    transform-origin: left center;
    transform: scaleX(var(--tab-progress, 0));
    pointer-events: none;
}

/* The carousel movement: the incoming card slides in from the side it comes from, the outgoing one
   slides away to the other side (components.js sets data-tabs-dir and the two classes). */
.is-tabbed [data-tab-panel] { position: relative; }
.is-tabbed [data-tab-panel].is-entering { z-index: 2; animation: cg-card-in-next 560ms var(--ease-out) both; }
.is-tabbed [data-tab-panel].is-leaving { z-index: 1; pointer-events: none; animation: cg-card-out-next 520ms var(--ease-in-out) both; }
[data-tabs-dir="prev"].is-tabbed [data-tab-panel].is-entering { animation-name: cg-card-in-prev; }
[data-tabs-dir="prev"].is-tabbed [data-tab-panel].is-leaving { animation-name: cg-card-out-prev; }

@keyframes cg-card-in-next { from { opacity: 0; transform: translateX(8%) scale(0.98); } }
@keyframes cg-card-out-next { to { opacity: 0; transform: translateX(-8%) scale(0.98); } }
@keyframes cg-card-in-prev { from { opacity: 0; transform: translateX(-8%) scale(0.98); } }
@keyframes cg-card-out-prev { to { opacity: 0; transform: translateX(8%) scale(0.98); } }

/* The movement stays inside its block. */
.is-tabbed { overflow-x: clip; }

/* The stacking: every panel in the same cell, only the current one visible. */
.tabs-stack { display: grid; }
.tabs-stack > [data-tab-panel] { grid-area: 1 / 1; }
.is-tabbed .tabs-stack > [data-tab-panel][hidden] { display: grid; visibility: hidden; opacity: 0; pointer-events: none; }

.is-tabbed > .tabs__bar,
.is-tabbed [data-tabs-bar] { min-inline-size: 0; max-inline-size: 100%; }

/* The studio's own days inside a delivery estimate (cart, checkout, final review). */
.shipping-lead-note {
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm) var(--space-md);
    border-inline-start: 3px solid var(--cg-red);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-ink-strong);
    max-inline-size: none;
}