/* Apercus tactiles des cartes du portail. */

@media (hover: none), (pointer: coarse) {
    .chillroom-app-card,
    .chillroom-app-card .chillroom-app-link,
    .chillroom-app-card img {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .chillroom-app-card {
        touch-action: pan-y !important;
    }
}

.chillroom-app-card.chillroom-touch-preview-active {
    transform:
        translateY(-7px)
        scale(1.018) !important;
}

.chillroom-app-card.chillroom-touch-preview-active::before {
    opacity: 1 !important;
}

.chillroom-app-card-cinema
.chillroom-app-link-cinema {
    isolation: isolate !important;
    overflow: hidden !important;
}

.chillroom-app-card-cinema
.chillroom-cinema-logo {
    position: relative !important;
    z-index: 3 !important;
    transform-origin: center center !important;
}

.chillroom-app-card-cinema
.chillroom-app-link-cinema::before,
.chillroom-app-card-cinema
.chillroom-app-link-cinema::after {
    content: "";
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.chillroom-app-card-cinema
.chillroom-app-link-cinema::before {
    inset: 7% 4% !important;
    z-index: 1 !important;
    border-radius: 22px !important;
    background:
        radial-gradient(
            circle at 50% 54%,
            rgba(53, 223, 255, 0.34),
            rgba(178, 49, 255, 0.19) 42%,
            transparent 72%
        ) !important;
    transform: scale(0.84) !important;
}

.chillroom-app-card-cinema
.chillroom-app-link-cinema::after {
    left: 9% !important;
    right: 9% !important;
    top: 13% !important;
    z-index: 4 !important;
    height: 2px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(67, 231, 255, 0.96),
            rgba(255, 83, 222, 0.92),
            transparent
        ) !important;
    box-shadow:
        0 0 12px rgba(62, 226, 255, 0.82),
        0 0 22px rgba(239, 68, 255, 0.52) !important;
}

.chillroom-app-card-cinema.chillroom-touch-preview-active {
    border-color: rgba(64, 223, 255, 0.76) !important;
    box-shadow:
        0 29px 78px rgba(0, 0, 0, 0.48),
        0 0 32px rgba(45, 221, 255, 0.31),
        0 0 54px rgba(210, 54, 255, 0.22),
        inset 0 0 28px rgba(90, 196, 255, 0.05) !important;
}

.chillroom-app-card-cinema.chillroom-touch-preview-active
.chillroom-cinema-logo {
    animation:
        chillroomCinemaLogoPulse 0.72s
        ease-in-out infinite alternate !important;
    filter:
        saturate(1.28)
        brightness(1.10)
        drop-shadow(0 0 17px rgba(51, 226, 255, 0.88))
        drop-shadow(0 0 32px rgba(226, 61, 255, 0.61)) !important;
}

.chillroom-app-card-cinema.chillroom-touch-preview-active
.chillroom-app-link-cinema::before {
    opacity: 1 !important;
    animation:
        chillroomCinemaHalo 1.05s
        ease-in-out infinite alternate !important;
}

.chillroom-app-card-cinema.chillroom-touch-preview-active
.chillroom-app-link-cinema::after {
    opacity: 0.92 !important;
    animation:
        chillroomCinemaScan 1.15s
        linear infinite !important;
}

@keyframes chillroomCinemaLogoPulse {
    from {
        transform:
            translate3d(0, 1px, 0)
            scale(1.015);
    }

    to {
        transform:
            translate3d(0, -4px, 0)
            scale(1.075);
    }
}

@keyframes chillroomCinemaHalo {
    from {
        transform: scale(0.86);
        opacity: 0.54;
    }

    to {
        transform: scale(1.07);
        opacity: 1;
    }
}

@keyframes chillroomCinemaScan {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 128px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chillroom-app-card-cinema.chillroom-touch-preview-active
    .chillroom-cinema-logo {
        animation: none !important;
        transform: scale(1.045) !important;
    }

    .chillroom-app-card-cinema.chillroom-touch-preview-active
    .chillroom-app-link-cinema::before {
        animation: none !important;
    }

    .chillroom-app-card-cinema.chillroom-touch-preview-active
    .chillroom-app-link-cinema::after {
        display: none !important;
    }
}

/* Safari iOS peut conserver :hover/:focus après un appui tactile. */
@media (hover: none), (pointer: coarse) {
    html[data-chillroom-input-modality="touch"]
    body.chillroom-portal-ready
    .chillroom-app-card-cinema:not(.chillroom-touch-preview-active),
    html[data-chillroom-input-modality="pen"]
    body.chillroom-portal-ready
    .chillroom-app-card-cinema:not(.chillroom-touch-preview-active) {
        transform: none !important;
        border-color: rgba(149, 143, 255, 0.37) !important;
        background:
            linear-gradient(
                150deg,
                rgba(27, 19, 68, 0.73),
                rgba(8, 16, 43, 0.76)
            ) !important;
        box-shadow:
            0 22px 62px rgba(0, 0, 0, 0.38),
            0 0 20px rgba(94, 61, 221, 0.13),
            inset 0 0 22px rgba(255, 255, 255, 0.022) !important;
    }

    html[data-chillroom-input-modality="touch"]
    body.chillroom-portal-ready
    .chillroom-app-card-cinema:not(.chillroom-touch-preview-active)::before,
    html[data-chillroom-input-modality="pen"]
    body.chillroom-portal-ready
    .chillroom-app-card-cinema:not(.chillroom-touch-preview-active)::before {
        opacity: 0 !important;
    }

    html[data-chillroom-input-modality="touch"]
    .chillroom-app-card-dj:not(.chillroom-touch-preview-active),
    html[data-chillroom-input-modality="pen"]
    .chillroom-app-card-dj:not(.chillroom-touch-preview-active) {
        transform: none !important;
    }

    html[data-chillroom-input-modality="touch"]
    .chillroom-app-card-dj:not(.chillroom-touch-preview-active)
    .chillroom-dj-logo-link,
    html[data-chillroom-input-modality="pen"]
    .chillroom-app-card-dj:not(.chillroom-touch-preview-active)
    .chillroom-dj-logo-link {
        transform: none !important;
    }

    html[data-chillroom-input-modality="touch"]
    .chillroom-app-card-dj:not(.chillroom-touch-preview-active)
    .chillroom-dj-logo-button,
    html[data-chillroom-input-modality="pen"]
    .chillroom-app-card-dj:not(.chillroom-touch-preview-active)
    .chillroom-dj-logo-button {
        animation: none !important;

        transform:
            translate3d(0, 0, 0)
            scale(1) !important;

        filter:
            saturate(1)
            contrast(1)
            drop-shadow(0 0 11px rgba(150, 78, 255, 0.75))
            drop-shadow(0 0 22px rgba(31, 173, 255, 0.47))
            drop-shadow(0 0 28px rgba(240, 50, 255, 0.28)) !important;
    }
}