/* intro v29 — Rolls-Royce thread: circle-expand reveal, half-ring, chat alignment, dual-layer parallax */

.intro-thread { min-height: 88vh; }

/* Clip-path circle expand from centre on load */
.intro-thread__reveal {
    animation: intro-thread-expand 900ms ease forwards;
}
@keyframes intro-thread-expand {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(150% at 50% 50%); }
}

/* Half-ring at the boundary (fixed size — no BS w-N/h-N utility) */
.intro-thread__half {
    width: 16rem;
    height: 8rem;
    opacity: 0.7;
    filter: blur(2px);
}
.intro-thread__sun { width: 6rem; height: 6rem; }
.intro-thread [data-msg] { max-width: 28rem; }

/* Dual-layer parallax offset (set by JS via custom props) */
.intro-thread__island [data-layer] {
    transition: transform 200ms ease-out;
    transform: translate(var(--px, 0), var(--py, 0));
}

/* Chat thread alternate alignment + retro corner tails */
.intro-thread [data-msg] { border-bottom-left-radius: 0.25rem; }
.intro-thread [data-msg]:nth-child(even) {
    margin-left: auto;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .intro-thread__reveal { animation: none; }
    .intro-thread__island [data-layer] { transition: none; }
}

.content-quote-panel__slash {
    transform: rotate(45deg);
}

/* gallery v17 — diagonal cascade ribbon.
   Geometry shared by both CSS frameworks (Bootstrap has no clip-path / aspect utilities). */
.gallery-cascade__section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.mxw-2xl {
    max-width: 42rem !important;
}

.gallery-cascade__head {
    margin-bottom: 4rem;
}

.gallery-cascade__title {
    font-size: 1.875rem;
    margin-bottom: 0.75rem;
}

.gallery-cascade__lead {
    font-size: 1.125rem;
}

.gallery-cascade__row {
    flex-direction: column;
    gap: 1.5rem;
}

.gallery-cascade__col {
    min-width: 0;
}

.gallery-cascade__img {
    transition: transform 500ms ease;
}

/* hover zoom — `:where()` keeps specificity at 0-1-0 so Tailwind's hover:scale-110 wins there */
:where(.gallery-cascade__img):hover {
    transform: scale(1.1);
}

@media (min-width: 640px) {
    .gallery-cascade__row {
        flex-direction: row;
        gap: 0;
    }
}

@media (min-width: 768px) {
    .gallery-cascade__title {
        font-size: 2.25rem;
    }
}

/* gallery v17 — diagonal cascade ribbon (clip-path + staggered offsets have no BS analog) */
.gallery-cascade__media {
    aspect-ratio: 3 / 4;
    transition: clip-path 300ms ease;
}

@media (min-width: 640px) {
    [data-cascade-pos] {
        transition: transform 300ms ease;
    }

    [data-cascade-pos="0"] {
        transform: translateY(0);
    }

    [data-cascade-pos="0"] .gallery-cascade__media {
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }

    [data-cascade-pos="1"] {
        transform: translateY(1.75rem);
    }

    [data-cascade-pos="1"] .gallery-cascade__media {
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);
    }

    [data-cascade-pos="2"] {
        transform: translateY(-1.25rem);
    }

    [data-cascade-pos="2"] .gallery-cascade__media {
        clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%);
    }

    [data-cascade-pos="3"] {
        transform: translateY(2.25rem);
    }

    [data-cascade-pos="3"] .gallery-cascade__media {
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);
    }

    [data-cascade-pos]:hover {
        transform: translateY(0);
    }

    [data-cascade-pos]:hover .gallery-cascade__media {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* glossary invert — hover lift supplied via Tailwind on @sem('block'). */