/* =====================================================================================================
   Section: use-cases — styles for the block between "BEGIN SECTION: use-cases" and "END SECTION: use-cases" in index.html.

   Light grey rounded panel (resource 15, reproduced in CSS) with two decorative gradient stripes (the brand arch,
   resource 02), title 22 and a deck of five flip cards (fronts 25–29, backs 30–34), with a one-off
   ripple hint on the first card. Behaviour: js/sections/use-cases.js.
   ===================================================================================================== */

.section--use-cases {
    /* Card size: 300×408 at the 1440 design; scales down on phones. */
    --uc-card-w: clamp(13.5rem, 64vw, 19.5rem);
    --uc-card-radius: calc(var(--uc-card-w) * 0.075);
    --uc-arrow-size: 2.75rem;
    --uc-arrow-gap: clamp(1.25rem, 4vw, 3.75rem);
    --uc-move: 0.6s;                                   /* deck slot transitions */
    --uc-flip: 0.7s;                                   /* card flip */

    /* Positions of the cards behind the front one (slot ±1 and ±2). translateX is relative to the card width. */
    --uc-x1: 16%;
    --uc-z1: -80px;
    --uc-ry1: 18deg;
    --uc-rz1: 2.5deg;
    --uc-x2: 27%;
    --uc-z2: -160px;
    --uc-ry2: 26deg;
    --uc-rz2: 4.5deg;

    padding-block: calc(var(--section-space) * 0.5);
}

/* ----- Panel + stripes ------------------------------------------------------------------------------- */

.use-cases__panel {
    position: relative;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
    container-type: inline-size;  /* the stripes are sized in cqw */
    border-radius: var(--radius-lg);
    /* Translucent grey so the page's paper texture still shows through, slightly darker towards the bottom. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.075) 0%, rgba(0, 0, 0, 0.1) 100%);
    padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3.5rem, 7vw, 6.5rem);
}

/* The stripes are the brand arch (the logo symbol, resource 02), sized and placed in cqw (1cqw = 1% of the panel
   width) so they keep the 1440 px design proportions at any width. Fitted to the design at 1440: the arch is 906 px
   wide (stroke 80 px across); the left stripe crosses the panel's top edge at x 289–369 and its left edge at
   y 434–508; the right one its bottom edge at x 1057–1137 and its right edge at y 316–394. */
.use-cases__stripe {
    position: absolute;
    z-index: -1;
    width: 62.92cqw;
    height: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
}
/* Flipped vertically (curve at the bottom, orange leg on the right): the orange leg comes in from the top edge and
   the bottom of the curve runs out through the left edge. */
.use-cases__stripe--left {
    top: -13.13cqw;
    left: -30.97cqw;
    transform: scaleY(-1);
}
/* Upright (magenta leg on the left): the magenta leg comes up from the bottom edge and the top of the curve runs out
   through the right edge. */
.use-cases__stripe--right {
    bottom: -20.28cqw;
    left: 63.75cqw;
}

.use-cases__inner {
    position: relative;
}

.use-cases__title {
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

/* ----- Carousel layout: [prev] [deck] [next] --------------------------------------------------------- */

.uc-carousel {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: "prev deck next";
    justify-content: center;
    align-items: center;
    column-gap: var(--uc-arrow-gap);
}

.uc-carousel__arrow--prev { grid-area: prev; }
.uc-carousel__arrow--next { grid-area: next; }

.uc-carousel__arrow {
    position: relative;
    z-index: 10;
    display: grid;
    place-items: center;
    width: var(--uc-arrow-size);
    height: var(--uc-arrow-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--text-muted);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), color 0.2s ease;
}
.uc-carousel__arrow:hover {
    color: var(--brand-violet);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.uc-carousel__arrow--prev:hover { transform: translateX(-2px); }
.uc-carousel__arrow--next:hover { transform: translateX(2px); }
.uc-carousel__arrow:active { transform: scale(0.94); }

/* Phones: the deck takes the full row and the arrows sit below it, side by side. */
@media (max-width: 599px) {
    .uc-carousel {
        grid-template-columns: auto auto;
        grid-template-areas:
            "deck deck"
            "prev next";
        column-gap: 1.25rem;
        row-gap: 2rem;
    }
    .uc-carousel__arrow--prev { justify-self: end; }
    .uc-carousel__arrow--next { justify-self: start; }
    .section--use-cases {
        --uc-x1: 11%;
        --uc-x2: 18%;
        --uc-ry1: 14deg;
        --uc-ry2: 20deg;
    }
}

/* ----- Deck ------------------------------------------------------------------------------------------ */

.uc-deck {
    grid-area: deck;
    position: relative;
    justify-self: center;
    width: var(--uc-card-w);
    aspect-ratio: 300 / 408;
    perspective: 1400px;
    touch-action: pan-y;          /* horizontal swipes go to the JS, vertical ones still scroll the page */
}

.uc-card {
    --x: 0%;
    --z: 0px;
    --ry: 0deg;
    --rz: 0deg;
    position: absolute;
    inset: 0;
    z-index: 5;
    container-type: inline-size;  /* text layers are sized in cqw so they scale with the card */
    transform: translateX(var(--x)) translateZ(var(--z)) rotateY(var(--ry)) rotate(var(--rz));
    transition:
        transform var(--uc-move) var(--ease-out),
        filter var(--uc-move) var(--ease-out);
}

.uc-card[data-slot="1"]  { --x: var(--uc-x1);                --z: var(--uc-z1); --ry: var(--uc-ry1);                --rz: var(--uc-rz1);                z-index: 4; filter: brightness(0.93); }
.uc-card[data-slot="-1"] { --x: calc(var(--uc-x1) * -1);     --z: var(--uc-z1); --ry: calc(var(--uc-ry1) * -1);     --rz: calc(var(--uc-rz1) * -1);     z-index: 4; filter: brightness(0.93); }
.uc-card[data-slot="2"]  { --x: var(--uc-x2);                --z: var(--uc-z2); --ry: var(--uc-ry2);                --rz: var(--uc-rz2);                z-index: 2; filter: brightness(0.85); }
.uc-card[data-slot="-2"] { --x: calc(var(--uc-x2) * -1);     --z: var(--uc-z2); --ry: calc(var(--uc-ry2) * -1);     --rz: calc(var(--uc-rz2) * -1);     z-index: 2; filter: brightness(0.85); }

/* On change, the outgoing front card first slides out to the side above the deck, then (class removed by the
   JS) tucks in behind it at its new slot. */
.uc-card.is-leaving-left,
.uc-card.is-leaving-right {
    z-index: 6;
    --z: -30px;
    filter: none;
    transition-duration: calc(var(--uc-move) * 0.5);
    transition-timing-function: var(--ease-in-out);
}
.uc-card.is-leaving-left  { --x: -78%; --ry: -12deg; --rz: -7deg; }
.uc-card.is-leaving-right { --x: 78%;  --ry: 12deg;  --rz: 7deg; }

/* Subtle tilt towards the pointer (front card only; custom properties set by the JS). */
.uc-card__tilt {
    position: absolute;
    inset: 0;
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.4s var(--ease-out);
}

/* Flip: both faces live in .uc-card__inner, which rotates 180° around Y. */
.uc-card__inner {
    position: absolute;
    inset: 0;
    transform: perspective(1200px) rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform var(--uc-flip) var(--ease-out);
}
.uc-card.is-flipped .uc-card__inner {
    transform: perspective(1200px) rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
    .uc-card[data-slot="0"]:not(.is-leaving-left):not(.is-leaving-right):hover .uc-card__inner {
        transform: perspective(1200px) rotateY(180deg);
    }
}

.uc-card__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--uc-card-radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.uc-card__face--back {
    transform: rotateY(180deg);
    background: var(--grey-100);
}
.uc-card__face .baked__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Whole-card flip button, transparent, on top of both faces. */
.uc-card__toggle {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--uc-card-radius);
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

/* ----- One-off ripple hint (added to the front face of the first card by the JS, then removed) -------- */

/* A small drop lands near the bottom-right corner of the card and two soft glows spread out from it, like
   water, once. Deliberately subtle: no hard rings, just light. --uc-hint-x/y: where the drop lands. */
.uc-card__hint {
    --uc-hint-x: 82%;
    --uc-hint-y: 86%;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.uc-card__hint-drop,
.uc-card__hint-ring {
    position: absolute;
    top: var(--uc-hint-y);
    left: var(--uc-hint-x);
    border-radius: 50%;
    opacity: 0;
}
.uc-card__hint-drop {
    width: 3.5cqw;
    height: 3.5cqw;
    margin: -1.75cqw 0 0 -1.75cqw;
    background: color-mix(in srgb, var(--white) 70%, transparent);
    box-shadow: 0 0 2.5cqw color-mix(in srgb, var(--brand-violet) 60%, transparent);
    animation: uc-hint-drop 1.6s var(--ease-out) both;
}
/* A soft ring of light (a radial gradient, no border), fading as it grows. */
.uc-card__hint-ring {
    width: 22cqw;
    height: 22cqw;
    margin: -11cqw 0 0 -11cqw;
    background: radial-gradient(circle,
        transparent 38%,
        color-mix(in srgb, var(--brand-violet) 45%, transparent) 56%,
        color-mix(in srgb, var(--white) 25%, transparent) 62%,
        transparent 72%);
    animation: uc-hint-ring 3s cubic-bezier(0.25, 0.6, 0.35, 1) 0.4s both;
}
.uc-card__hint-ring + .uc-card__hint-ring {
    animation-delay: 1.2s;
}

@keyframes uc-hint-drop {
    0%   { opacity: 0;   transform: scale(1.8); }
    30%  { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0;   transform: scale(0.6); }
}
@keyframes uc-hint-ring {
    0%   { opacity: 0;    transform: scale(0.2); }
    20%  { opacity: 0.55; }
    100% { opacity: 0;    transform: scale(2.4); }
}

/* ----- Text layers (styled for the future text-free images) ------------------------------------------ */

.uc-card__front-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8cqw;
    text-align: center;
}
.uc-card__title {
    font-family: var(--font-display);
    font-size: 7.4cqw;            /* ≈ 22px on a 300px card */
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
}

.uc-card__back-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 21cqw 7cqw 8cqw;
}
.uc-card__back-title {
    font-family: var(--font-display);
    font-size: 8cqw;              /* ≈ 24px on a 300px card */
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}
.uc-card__back-title .gradient-text {
    /* The gradient restarts on each line, as in the design. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.uc-card__list {
    align-self: stretch;
    margin-top: 9cqw;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 5.5cqw;            /* ≈ 16.5px on a 300px card */
    line-height: 1.35;
    color: var(--text);
}
.uc-card__list li {
    position: relative;
    padding-left: 1em;
}
.uc-card__list li::before {
    content: "•";
    position: absolute;
    left: 0.15em;
}

/* ----- Reduced motion: no rotation or sliding; changes are instant with a short fade --------------- */

@keyframes uc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .uc-card__hint { display: none; }
    .uc-card,
    .uc-card__tilt,
    .uc-card__inner { transition: none; }
    .uc-card__tilt { transform: none; }

    /* Flip becomes a cross-fade between the faces. */
    .uc-card__inner,
    .uc-card.is-flipped .uc-card__inner { transform: none; }
    .uc-card__face { transition: opacity 0.25s ease; }
    .uc-card__face--back { transform: none; opacity: 0; }
    .uc-card.is-flipped .uc-card__face--front { opacity: 0; }
    .uc-card.is-flipped .uc-card__face--back { opacity: 1; }

    .uc-card.is-entering { animation: uc-fade-in 0.25s ease both; }
    .uc-carousel__arrow { transition: none; }
    .uc-carousel__arrow:hover,
    .uc-carousel__arrow:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
    .uc-card[data-slot="0"]:not(.is-leaving-left):not(.is-leaving-right):hover .uc-card__inner { transform: none; }
    .uc-card[data-slot="0"]:hover .uc-card__face--front { opacity: 0; }
    .uc-card[data-slot="0"]:hover .uc-card__face--back { opacity: 1; }
}