/* Hero — mosaïque vidéo bento (page d'accueil) */

.hero-mosaic {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1.12fr);
    grid-template-areas:
        "sq1 sq2 desktop desktop"
        "sq3 sq4 desktop desktop"
        "wide wide wide wide";
    gap: clamp(10px, 1.35vw, 16px);
    isolation: isolate;
}

.hero-mosaic__glow {
    position: absolute;
    inset: -12% -8%;
    z-index: -1;
    background:
        radial-gradient(ellipse 55% 45% at 72% 38%, rgba(251, 0, 255, 0.14) 0%, transparent 68%),
        radial-gradient(ellipse 50% 40% at 28% 72%, rgba(93, 190, 255, 0.16) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 50% 50%, rgba(93, 255, 239, 0.08) 0%, transparent 75%);
    pointer-events: none;
    filter: blur(2px);
}

.hero-mosaic__item {
    position: relative;
    min-width: 0;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--tile-i, 0) * 0.08s + 0.12s);
}

.hero-mosaic--visible .hero-mosaic__item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hero-mosaic__item--sq1 { grid-area: sq1; }
.hero-mosaic__item--sq2 { grid-area: sq2; }
.hero-mosaic__item--sq3 { grid-area: sq3; }
.hero-mosaic__item--sq4 { grid-area: sq4; }
.hero-mosaic__item--desktop { grid-area: desktop; }
.hero-mosaic__item--wide { grid-area: wide; }

.hero-mosaic__frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: clamp(14px, 1.8vw, 22px);
    overflow: hidden;
    background: var(--color-black);
    box-shadow:
        0 14px 36px rgba(var(--color-black-rgb), 0.14),
        0 4px 14px rgba(76, 46, 139, 0.08);
    transition:
        transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
        box-shadow 0.45s ease;
}

.hero-mosaic__item--desktop .hero-mosaic__frame {
    border-radius: clamp(16px, 2vw, 26px);
}

.hero-mosaic__item--wide .hero-mosaic__frame {
    border-radius: clamp(14px, 1.6vw, 20px);
}

.hero-mosaic__item:hover .hero-mosaic__frame {
    transform: translateY(-4px) scale(1.015);
    box-shadow:
        0 22px 48px rgba(var(--color-black-rgb), 0.18),
        0 8px 24px rgba(251, 0, 255, 0.12),
        0 4px 16px rgba(93, 190, 255, 0.14);
}

.hero-mosaic__item--square .hero-mosaic__frame {
    aspect-ratio: 1 / 1;
}

.hero-mosaic__item--desktop .hero-mosaic__frame {
    height: 100%;
    min-height: 100%;
}

.hero-mosaic__item--wide .hero-mosaic__frame {
    aspect-ratio: 1920 / 620;
}

.hero-mosaic__poster,
.hero-mosaic__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-mosaic__poster {
    z-index: 1;
    transform: scale(1.02);
    transition: opacity 0.45s ease;
}

.hero-mosaic__poster--hidden {
    opacity: 0;
}

.hero-mosaic__video {
    z-index: 0;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.45s ease;
}

.hero-mosaic__video--ready {
    z-index: 2;
    opacity: 1;
}

.hero-mosaic__item--desktop .hero-mosaic__poster,
.hero-mosaic__item--desktop .hero-mosaic__video {
    object-position: center top;
}

.hero-mosaic__twitch-link {
    position: absolute;
    top: clamp(10px, 1.2vw, 14px);
    right: clamp(10px, 1.2vw, 14px);
    z-index: 3;
    color: #fff;
    line-height: 0;
    text-decoration: none;
}

.hero-mosaic__twitch-logo {
    display: block;
    width: clamp(22px, 2.5vw, 28px);
    height: auto;
}

@media (max-width: 1100px) {
    .hero-mosaic {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "desktop desktop"
            "sq1 sq2"
            "sq3 sq4"
            "wide wide";
    }

    .hero-mosaic__item--desktop .hero-mosaic__frame {
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

@media (max-width: 640px) {
    .hero-mosaic {
        gap: clamp(8px, 2.5vw, 12px);
    }

    .hero-mosaic__frame {
        border-radius: 14px;
    }

    .hero-mosaic__item:hover .hero-mosaic__frame {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-mosaic__item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-mosaic__poster,
    .hero-mosaic__video {
        transition: none;
    }

    .hero-mosaic__item:hover .hero-mosaic__frame {
        transform: none;
    }
}