/* intro v25 — Sagmeister ticket: corner patch, spiral binding, ticket perforation, square thumb */

/* Corner accent patch → triangle */
.intro-tkt__patch {
    width: 10rem;
    height: 10rem;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.9;
}
.intro-tkt__spiral { height: 1rem; }
.intro-tkt__body { min-width: 0; }
.intro-tkt__close { width: 2rem; height: 2rem; }

/* Torn notebook spiral binding holes (colour from Tailwind text-*, holes via mask) */
.intro-tkt__spiral {
    -webkit-mask: radial-gradient(circle 5px at center, black 98%, transparent 100%) 0 0 / 30px 100%;
    mask: radial-gradient(circle 5px at center, black 98%, transparent 100%) 0 0 / 30px 100%;
    background: currentColor;
    opacity: 0.5;
}

/* Square cropped thumbnail */
.intro-tkt__thumb {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
}

/* Ticket stub perforation (currentColor from the card text) */
.intro-tkt__ticket { transition: box-shadow 240ms ease; }
.intro-tkt__ticket::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 7.5rem;
    border-left: 2px dashed currentColor;
    opacity: 0.25;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .intro-tkt__ticket::after { display: none; }
}

/* process diagonal — bg blob, card clip-path variants, hover lift */
.process-diag__bg-blob {
    position: absolute;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
    filter: blur(6rem);
    opacity: 0.05;
    pointer-events: none;
    top: -10rem;
    left: 30%;
    background: var(--bs-primary);
}
.process-diag__card {
    transition: transform 200ms ease;
}
.process-diag__card:hover {
    transform: scale(1.01);
}
.process-diag__card--0 {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
.process-diag__card--1 {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
}
.process-diag__watermark {
    z-index: 0;
    max-width: 100%;
    overflow: hidden;
    user-select: none;
}

/* v12 - Horizontal carousel: flex track with explicit gap (framework-independent — works under both TW and BS, since BS has no row/col-safe equivalent for a gapped scroll track) */
.steps-gradient-carousel__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.steps-gradient-carousel__track::-webkit-scrollbar {
    display: none;
}

.steps-gradient-carousel__card {
    width: 260px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .steps-gradient-carousel__card {
        width: 300px;
    }
}

/* prev/next controls: fixed circle size, no Bootstrap utility equivalent */
.steps-gradient-carousel__arrow {
    width: 2.75rem;
    height: 2.75rem;
}

/* icon badge: fixed square size, no Bootstrap width/height utility beyond w-25/50/75/100 */
.steps-gradient-carousel__badge {
    width: 3.5rem;
    height: 3.5rem;
}

.content-trio-showcase__image {
    display: block;
    width: 100%;
    height: 10rem;
    object-fit: cover;
}

.content-trio-showcase__image--tall {
    height: 14rem;
}

.content-trio-showcase__image--short {
    height: 8rem;
}

.content-trio-showcase__card-lift {
    transition: transform 180ms ease;
}

.content-trio-showcase__card-lift:hover {
    transform: translateY(-0.25rem);
}

.content-trio-showcase__float {
    animation: content-trio-showcase-float 7s ease-in-out infinite;
}

.content-trio-showcase__rail {
    width: 100%;
    height: 0.25rem;
}

.content-trio-showcase__thumb {
    width: 7rem;
    height: 5rem;
}

.content-trio-showcase__badge {
    width: 2.5rem;
    height: 2.5rem;
}

@media (min-width: 768px) {
    .content-trio-showcase__rail {
        width: 0.25rem;
        height: auto;
    }
}

@keyframes content-trio-showcase-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(0.5rem); }
}

.content-trio-showcase__dot {
    width: 0.5rem;
    height: 0.5rem;
}

.content-trio-showcase__float {
    width: 6rem;
    height: 6rem;
}

@media (min-width: 768px) {
    .content-trio-showcase__offset {
        margin-top: 2.5rem;
    }
}

/* values split v16 - layout/size only, no colors */
.values-split__decor-circle {
    aspect-ratio: 1 / 1;
}

.values-split__numeral {
    line-height: 0.85;
    letter-spacing: -0.04em;
}

.values-split__row {
    will-change: transform;
}

/* FAQ v8 — flip card states (no Tailwind in script) */
.primer-clarify-query-chapter.primer-clarify-prompt-latent {
    transform: translateY(-100%);
    opacity: 0;
}

.primer-clarify-query-chapter.primer-clarify-prompt-shown {
    transform: translateY(0);
    opacity: 1;
}

.primer-clarify-reply-chapter.primer-clarify-resolve-latent {
    transform: translateY(100%);
    opacity: 0;
}

.primer-clarify-reply-chapter.primer-clarify-resolve-shown {
    transform: translateY(0);
    opacity: 1;
}

.primer-clarify-query-chapter,
.primer-clarify-reply-chapter {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Card min-height for flip layout */
.primer-clarify__card-wrap { min-height: 20rem; }

/* Corner blob size */
.primer-clarify__corner-blob { width: 5rem; height: 5rem; }

/* Animation delays */
.primer-clarify__flare--delay-1 { animation-delay: 0.2s; }
.primer-clarify__flare--delay-2 { animation-delay: 0.4s; }
.primer-clarify__flare--delay-3 { animation-delay: 0.8s; }
.primer-clarify__flare--delay-4 { animation-delay: 1s; }
.primer-clarify__flare--delay-5 { animation-delay: 1.2s; }
.primer-clarify__flare--delay-6 { animation-delay: 1.5s; }
.primer-clarify__flare--delay-7 { animation-delay: 2s; }

/* Cluster positions */
.primer-clarify__cluster-a { top: 3rem; left: 2rem; transform: rotate(45deg); }
.primer-clarify__cluster-b { top: 33%; right: 3rem; transform: rotate(-12deg); }
.primer-clarify__cluster-c { bottom: 4rem; left: 25%; transform: rotate(12deg); }

/* Standalone dot positions */
.primer-clarify__dot-a { top: 5rem; right: 5rem; width: 0.5rem; height: 0.5rem; }
.primer-clarify__dot-b { bottom: 6rem; right: 33%; width: 0.75rem; height: 0.75rem; }

/* Inner cluster child positions */
.primer-clarify__inner-a { top: 1rem; left: 1rem; width: 0.75rem; height: 0.75rem; }
.primer-clarify__inner-b { top: 2rem; left: 2rem; width: 0.5rem; height: 0.5rem; }
.primer-clarify__inner-c { top: 1.5rem; left: 1.5rem; width: 0.5rem; height: 0.5rem; }
.primer-clarify__inner-d { top: 3rem; left: 3rem; width: 1rem; height: 1rem; }
.primer-clarify__inner-e { top: 0.75rem; left: 0.75rem; width: 0.75rem; height: 0.75rem; }

/* Decorative lines */
.primer-clarify__line-a { top: 0.25rem; left: 0.25rem; width: 3rem; height: 0.125rem; }
.primer-clarify__line-b { top: 1.25rem; left: 1.25rem; width: 2rem; height: 0.125rem; }
.primer-clarify__line-c { top: 0.75rem; left: 0.75rem; width: 4rem; height: 0.125rem; }
.primer-clarify__line-d { top: 0.25rem; left: 0.25rem; width: 2.5rem; height: 0.125rem; }

@keyframes primer-clarify-flare-ping-cycle {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.primer-clarify__flare--ping {
    animation: primer-clarify-flare-ping-cycle 1s cubic-bezier(0,0,.2,1) infinite;
}

@keyframes primer-clarify-flare-throb-cycle {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
.primer-clarify__flare--throb {
    animation: primer-clarify-flare-throb-cycle 2s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes primer-clarify-flare-rebound-cycle {
    0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.8,0,1,1); }
    50%       { transform: translateY(-25%); animation-timing-function: cubic-bezier(0,0,.2,1); }
}
.primer-clarify__flare--rebound {
    animation: primer-clarify-flare-rebound-cycle 1s infinite;
}

.primer-clarify__flare--lift:hover { transform: scale(1.5); transition: transform .2s ease; }

.primer-clarify__control--lift:hover { transform: scale(1.05); transition: transform .2s ease; }