/* Essai publié du moteur d'intensité, temporaire (exvae #54-intensite-pages). Les feuilles d'origine ne
   changent pas : leurs boucles se coupent ici, sur les seules pages de l'essai, sauf sous la version
   d'origine, que le sélecteur de comparaison rétablit. Les couches de champ sont posées par
   sgbl_trial-objects.js. */

@layer tokens {
    :root {
        --local-color-decor-trial-night: #080b12;
        --local-color-decor-trial-clear: #fff;
        --local-color-decor-trial-veil: #f2f4f7;
        --local-color-decor-trial-disc: #4b2bd6;
        --local-color-decor-trial-bubble-1: #ff8f6b;
        --local-color-decor-trial-bubble-2: #f06ac4;
        --local-color-decor-trial-bubble-3: #ffb54d;
        --local-color-decor-trial-bubble-4: #a98bff;
        --local-color-decor-trial-bubble-5: #ff6f91;
        --local-color-decor-trial-figure-1: #2fcf8a;
        --local-color-decor-trial-figure-2: #8fdc5a;
        --local-color-decor-trial-figure-3: #3a8cff;
        --local-color-decor-trial-figure-4: #ff4258;
        --local-color-decor-trial-figure-5: #e83aa9;
        --local-color-decor-trial-figure-6: #8a5cff;
        --local-radius-trial-bar: 12px;
    }

    .hub-category {
        --local-color-decor-trial-glow: hsl(from var(--hub-color, var(--local-color-decor-trial-clear)) h 95% 62%);
    }

    .hub-card-icon {
        --local-shadow-trial-halo: 0 0 calc(12px * var(--intensity-value, 0)) rgb(255 255 255 / calc(0.9 * var(--intensity-value, 0)));
    }
}

@layer page {
    .listing-card-title {
        --listing-card-title-glow: 0 0 calc(var(--trial-focus, 0) * 9px) color-mix(in srgb, var(--trial-accent, transparent) calc(var(--trial-focus, 0) * 100%), transparent);
    }

    [data-trial-hover] {
        --trial-hover: 1;
    }

    :root[data-trial="a"] .listing-card-head {
        --trial-focus: calc(0.35 + 0.65 * var(--intensity-value, 0));
    }

    :root[data-motion="off"] [data-trial-hover] {
        --trial-hover: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        [data-trial-hover] {
            --trial-hover: 0;
        }
    }

    [data-trial-host="relative"] {
        position: relative;
    }

    .trial-field {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .trial-veil--clear {
        z-index: 1;
    }

    .trial-bar {
        position: fixed;
        right: 14px;
        bottom: 14px;
        z-index: 1100;
        display: flex;
        align-items: center;
        gap: 2px;
        box-sizing: border-box;
        max-width: calc(100vw - 28px);
        padding: 4px 6px 4px 12px;
    }

    .trial-bar-name {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 8px;
        overflow: hidden;
    }

    :root[data-trial]:not([data-trial="origine"]) .bubbles-item {
        display: none;
    }

    .trial-bubbles {
        position: fixed;
        inset: 0;
        z-index: -1;
    }

    .trial-bubble {
        inset: 0 auto auto 0;
        width: var(--trial-size, 0);
        height: var(--trial-size, 0);
    }

    .trial-disc {
        position: fixed;
    }

    [data-trial-host] {
        isolation: isolate;
    }

    .trial-field {
        -webkit-mask-image: var(--intensity-positive, linear-gradient(transparent, transparent));
        mask-image: var(--intensity-positive, linear-gradient(transparent, transparent));
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* Sous le verre de l'en-tête, qui sature ce qu'il recouvre, les bulles s'effacent. */
    .trial-bubbles {
        -webkit-mask-image: linear-gradient(transparent, var(--local-color-decor-trial-night) 180px);
        mask-image: linear-gradient(transparent, var(--local-color-decor-trial-night) 180px);
    }

    /* La lumière d'un bouton suit ses arrondis. */
    [data-trial-host] > .trial-field {
        border-radius: inherit;
    }

    .trial-glow {
        background-color: var(--trial-accent, transparent);
        opacity: 0;
    }

    [data-trial-hover] .trial-glow {
        opacity: 0.42;
    }

    /* Le bandeau des rubriques : la teinte du bouton, plus vive et saturée, comme le cartouche des listes. */
    .trial-glow--hub {
        background-color: var(--local-color-decor-trial-glow);
    }

    /* L'approche d'un bouton à icône : une lumière blanche, et l'ombre portée blanche du survol sur son icône,
       à la mesure de la distance du pointeur ; le survol entier les remplace. */
    .trial-light {
        background-color: var(--local-color-decor-trial-clear);
        opacity: 0;
    }

    [data-trial-hover] .trial-light {
        opacity: 0.7;
    }

    [data-trial-hover] .hub-card:not(:hover) .hub-card-icon {
        box-shadow: var(--local-shadow-trial-halo);
    }

    .trial-night {
        background-color: var(--local-color-decor-trial-night);
    }

    /* Le disque du portail, absent tant qu'aucun champ n'est choisi. */
    .trial-disc {
        background-color: var(--local-color-decor-trial-disc);
        opacity: 0;
    }

    .trial-disc[data-trial-visible] {
        opacity: 0.8;
    }

    .trial-bubble {
        mix-blend-mode: multiply;
    }

    .trial-bubble--1 {
        background-color: var(--local-color-decor-trial-bubble-1);
    }

    .trial-bubble--2 {
        background-color: var(--local-color-decor-trial-bubble-2);
    }

    .trial-bubble--3 {
        background-color: var(--local-color-decor-trial-bubble-3);
    }

    .trial-bubble--4 {
        background-color: var(--local-color-decor-trial-bubble-4);
    }

    .trial-bubble--5 {
        background-color: var(--local-color-decor-trial-bubble-5);
    }

    /* Figurines : au repos, une bulle par accentuation ; au survol ou dans la vue d'une figurine, ses couleurs. */
    [data-trial-palette="0"] .trial-bubble--1 {
        background-color: var(--local-color-decor-trial-figure-1);
    }

    [data-trial-palette="0"] .trial-bubble--2 {
        background-color: var(--local-color-decor-trial-figure-4);
    }

    [data-trial-palette="0"] .trial-bubble--3 {
        background-color: var(--local-color-decor-trial-figure-3);
    }

    [data-trial-palette="0"] .trial-bubble--4 {
        background-color: var(--local-color-decor-trial-figure-6);
    }

    [data-trial-palette="1"] .trial-bubble--1,
    [data-trial-palette="1"] .trial-bubble--4 {
        background-color: var(--local-color-decor-trial-figure-1);
    }

    [data-trial-palette="1"] .trial-bubble--2 {
        background-color: var(--local-color-decor-trial-figure-2);
    }

    [data-trial-palette="1"] .trial-bubble--3 {
        background-color: var(--local-color-decor-trial-figure-3);
    }

    [data-trial-palette="2"] .trial-bubble--1,
    [data-trial-palette="2"] .trial-bubble--3 {
        background-color: var(--local-color-decor-trial-figure-4);
    }

    [data-trial-palette="2"] .trial-bubble--2,
    [data-trial-palette="2"] .trial-bubble--4 {
        background-color: var(--local-color-decor-trial-figure-5);
    }

    [data-trial-palette="3"] .trial-bubble--1,
    [data-trial-palette="3"] .trial-bubble--4 {
        background-color: var(--local-color-decor-trial-figure-5);
    }

    [data-trial-palette="3"] .trial-bubble--2,
    [data-trial-palette="3"] .trial-bubble--3 {
        background-color: var(--local-color-decor-trial-figure-6);
    }

    .trial-veil--clear {
        background-color: var(--local-color-decor-trial-veil);
        opacity: 0.42;
    }

    .pockets-card-image {
        opacity: calc(1 - 0.5 * var(--trial-hover, 0) * (1 - var(--intensity-value, 0)));
    }

    [data-trial] .viewer-thumbnail {
        opacity: calc(0.4 + 0.6 * var(--intensity-value, 1));
    }

    .trial-bar {
        border-radius: var(--local-radius-trial-bar);
        background-color: var(--local-color-decor-session-strip);
    }

    :root[data-trial]:not([data-trial="origine"]) .listing-card-title {
        text-shadow: var(--listing-card-title-glow);
    }

    .trial-bar-name {
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trial-field,
    .trial-bubbles {
        pointer-events: none;
    }

    .trial-glow,
    .trial-light {
        transition: opacity 0.35s ease;
    }

    /* La couleur change avec l'élan du trajet : vite d'abord, puis en ralentissant. */
    .trial-bubble {
        transition: background-color 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: translate, scale, opacity;
    }

    .trial-disc {
        transition: opacity 0.35s ease;
    }

    .pockets-card-image,
    .viewer-thumbnail {
        transition: opacity 0.25s ease;
    }

    :root[data-trial]:not([data-trial="origine"]) .listing-card-title {
        animation: none;
    }
}