/* ---------------------------------------------------------------------------
 * 21st-elements.css
 *
 * Patterns adapted from the 21st.dev component registry (https://21st.dev).
 * Those components are React + shadcn/ui + Tailwind and are installed with the
 * shadcn CLI, none of which this site has: it is static HTML with an already
 * compiled Tailwind stylesheet that generates no new utilities. So the patterns
 * are re-implemented here as ordinary CSS, which renders on its own and needs
 * no inline-style twin (see CLAUDE.md > Commands).
 *
 * What is adapted, and from which 21st.dev category:
 *   .pv-spotlight*  "Spotlight Card" (Cards)  — cursor-tracked glow and border
 *   .pv-bento*      "Grids & Bento" (Grids)   — varied cells, content-sized
 *   .pv-tilt*       "Container Scroll Animation" (Heroes) — device flattens
 *   .pv-progress*   reading progress for the long legal pages
 *
 * Constraints kept in mind:
 *   - No `transform` on anything carrying `.reveal-up` or `.reveal-hero-img`:
 *     GSAP animates those inline and would fight a CSS transform. The spotlight
 *     works on colour and shadow only; the tilt is applied to a wrapper.
 *   - Every effect is opt-in by class, so the five other pages are untouched.
 *   - Everything degrades to a plain bordered card with motion or JS off.
 * ------------------------------------------------------------------------- */

/* Tokens come from css/pv-lab.css. Load order does not matter for reading a
 * custom property, only for declaring one, and pv-lab.css is now the only
 * file that declares these. The fallbacks cover a page that omits it. */

/* --- Spotlight Card ------------------------------------------------------ */

.pv-spotlight {
    position: relative;
    background-color: var(--pv-surface, #ffffff);
    border: 1px solid var(--pv-border, #d9dee8);
    border-radius: var(--pv-radius, 10px);
    padding: 1.25rem;
    overflow: hidden;
    /* No transform here: GSAP owns it on .reveal-up cells. */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* The glow itself. `--pv-x`/`--pv-y` are written by js/21st-elements.js on
 * pointer move; without JS they stay at the default and the layer stays
 * hidden, because opacity only lifts on hover. */
.pv-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        420px circle at var(--pv-x, 50%) var(--pv-y, 0%),
        rgba(233, 196, 106, 0.3),
        rgba(233, 196, 106, 0.1) 40%,
        transparent 65%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.pv-spotlight > * {
    position: relative;
    z-index: 1;
}

.pv-spotlight:hover,
.pv-spotlight:focus-within {
    border-color: var(--pv-accent, #e9c46a);
    box-shadow: var(--pv-shadow-lift, 0 14px 34px rgba(20, 33, 61, 0.1));
}

.pv-spotlight:hover::before,
.pv-spotlight:focus-within::before {
    opacity: 1;
}

/* The icon and title row inside a spotlight card. */
.pv-spotlight__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.pv-spotlight__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--pv-radius-sm, 6px);
    background-color: var(--pv-canvas, #f2f4f8);
    color: var(--pv-text, #14213d);
    font-size: 1.15rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pv-spotlight:hover .pv-spotlight__icon {
    background-color: var(--pv-hero, #14213d);
    color: var(--pv-accent, #e9c46a);
}

.pv-spotlight__title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pv-text, #14213d);
    margin: 0;
}

.pv-spotlight__body {
    color: var(--pv-text-muted, #5b6478);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* A quiet footnote for which mode a feature needs. */
.pv-spotlight__tag {
    display: inline-block;
    margin-top: 0.7rem;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: var(--pv-pill, #e8ebf1);
    color: var(--pv-text-muted, #5b6478);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pv-spotlight__tag--pro {
    background-color: var(--pv-hero, #14213d);
    color: var(--pv-accent, #e9c46a);
}

/* --- Bento grid ---------------------------------------------------------- */

.pv-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    /* Dense so a wide cell leaving a hole gets backfilled by the next
     * single-width cell, rather than the row ending ragged. */
    grid-auto-flow: row dense;
}

/* Cells size to their content: the old fixed 150px height clipped the longer
 * cards, which is what this replaces. */
.pv-bento > * {
    min-width: 0;
}

@media (min-width: 768px) {
    .pv-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pv-bento__wide {
        grid-column: span 2;
    }
}

@media (min-width: 1280px) {
    .pv-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

/* --- Container scroll (the hero device flattening out) ------------------- */

.pv-tilt-viewport {
    perspective: 1200px;
    perspective-origin: 50% 20%;
}

.pv-tilt {
    /* Both properties are written by js/21st-elements.js as the hero scrolls.
     * The defaults are the resting state, so no JS means no tilt at all. */
    transform: rotateX(var(--pv-tilt, 0deg)) scale(var(--pv-tilt-scale, 1));
    transform-origin: 50% 90%;
    transition: box-shadow 0.4s ease;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .pv-tilt {
        transform: none !important;
    }
}

/* --- Reading progress --------------------------------------------------- */

.pv-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* Above the z-20 header, below the z-9998 consent banner. */
    z-index: 30;
    background-color: transparent;
    pointer-events: none;
}

.pv-progress__bar {
    height: 100%;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--pv-hero, #14213d), #33405e 55%, var(--pv-accent, #e9c46a));
    transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
    .pv-progress__bar {
        transition: none;
    }
}

@media print {
    .pv-progress {
        display: none;
    }
}