/* intro v23 — BAPE grunge wizard: film strip, giant numbers, clip-path wipe hover, height-expand step */

/* Full-width step photo — cinematic banner, object-fit has no BS utility */
.intro-grit__photo {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* Progress track height (no BS h-N utility) */
.intro-grit__track { height: 0.25rem; }

/* Clip-path reveal on hover: primary wipe grows from the corner */
.intro-grit__wipe {
    clip-path: circle(0% at 90% 10%);
    opacity: 0.12;
    transition: clip-path 420ms ease;
}
.intro-grit__card:hover .intro-grit__wipe {
    clip-path: circle(150% at 90% 10%);
}

/* Height-expand accordion-style step entrance */
.intro-grit__step {
    animation: intro-grit-expand 420ms ease;
    transform-origin: top;
}
@keyframes intro-grit-expand {
    from { opacity: 0; transform: scaleY(0.96) translateY(-0.5rem); }
    to   { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* Progress bar transition */
.intro-grit__bar { transition: width 360ms ease; width: 0; }

/* Stepper dots — state via opacity, colour stays a Tailwind class */
.intro-grit__dot {
    width: 0.625rem;
    height: 0.625rem;
    opacity: 0.35;
    transition: opacity 200ms ease, transform 200ms ease;
}
.intro-grit__dot.is-active {
    opacity: 1;
    transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
    .intro-grit__step { animation: none; }
    .intro-grit__wipe { transition: none; }
}

.art-deco-reveal-timeline__panel--hidden {
    display: none !important;
}

.art-deco-reveal-timeline__tab--active {
    position: relative;
}

.art-deco-reveal-timeline__tab--active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    outline: 2px solid;
    outline-offset: -2px;
}

@keyframes art-deco-reveal-timeline__reveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.art-deco-reveal-timeline__panel:not(.art-deco-reveal-timeline__panel--hidden) {
    animation: art-deco-reveal-timeline__reveal 0.35s ease forwards;
}

.art-deco-reveal-timeline__corner-tl {
    top: 1.5rem;
    left: 1.5rem;
    width: 5rem;
    height: 5rem;
}

.art-deco-reveal-timeline__corner-tr {
    top: 1.5rem;
    right: 1.5rem;
    width: 5rem;
    height: 5rem;
}

.art-deco-reveal-timeline__corner-bl {
    bottom: 1.5rem;
    left: 1.5rem;
    width: 5rem;
    height: 5rem;
}

.art-deco-reveal-timeline__corner-br {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 5rem;
    height: 5rem;
}

.art-deco-reveal-timeline__diamond-mid {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 0.75rem;
    height: 0.75rem;
    left: 0;
}

.art-deco-reveal-timeline__diamond-mid--right {
    left: auto;
    right: 0;
}

.art-deco-reveal-timeline__diamond-sm {
    width: 0.5rem;
    height: 0.5rem;
    transform: rotate(45deg);
}

.art-deco-reveal-timeline__inner-border {
    inset: 0.5rem;
}

.art-deco-reveal-timeline__icon-diamond {
    width: 5rem;
    height: 5rem;
    transform: rotate(45deg);
}

.art-deco-reveal-timeline__icon-inner {
    transform: rotate(-45deg);
}

.art-deco-reveal-timeline__diamond-xs {
    width: 0.375rem;
    height: 0.375rem;
    transform: rotate(45deg);
}

.art-deco-reveal-timeline__min-shrink {
  min-width: 0;
}

/* values v25 - tabbed value categories */
.values-tabbed__tab {
    font-weight: 700;
    border-width: 2px;
    padding: 0.75rem 1.5rem;
}

.values-tabbed__tab.is-active {
    font-weight: 800;
    border-width: 3px;
}

.values-tabbed__icon-box {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
}