/* Final hero correction loaded after all theme CSS. */
.atelier-hero {
    background: #1b0710 !important;
}

.atelier-hero__sticky {
    isolation: isolate !important;
    overflow: hidden !important;
    background:
        radial-gradient(ellipse at 50% 22%, rgba(230, 76, 134, 0.20), transparent 34rem),
        radial-gradient(ellipse at 72% 62%, rgba(164, 30, 83, 0.26), transparent 42rem),
        linear-gradient(180deg, #260814 0%, #19050d 48%, #0c0206 100%) !important;
}

.atelier-hero__motion {
    opacity: 0 !important;
}

.atelier-hero__sticky::after {
    content: none !important;
    display: none !important;
}

.atelier-hero__sticky::before {
    z-index: 2 !important;
    opacity: 0.08 !important;
    background:
        linear-gradient(to right, rgba(255, 218, 232, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 218, 232, 0.08) 1px, transparent 1px) !important;
    background-size: 3.8rem 3.8rem !important;
}

.atelier-hero__bars {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0.95 !important;
}

.atelier-hero__bars::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background:
        radial-gradient(ellipse at 48% 58%, rgba(255, 94, 156, 0.34), transparent 34%),
        linear-gradient(90deg, transparent 0%, rgba(255, 203, 224, 0.14) 44%, rgba(255, 79, 146, 0.20) 50%, rgba(255, 203, 224, 0.14) 56%, transparent 100%) !important;
    mix-blend-mode: screen !important;
    transform: translate3d(-16%, 0, 0);
    animation: heroPinkSweep 4.8s cubic-bezier(0.32, 0.72, 0, 1) infinite alternate !important;
    will-change: transform, opacity;
}

.atelier-hero__bars::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: linear-gradient(90deg, rgba(10, 2, 6, 0.46), transparent 17%, transparent 83%, rgba(10, 2, 6, 0.52)) !important;
}

.atelier-hero__bars span {
    position: relative !important;
    display: block !important;
    flex: 1 0 calc(100% / 11) !important;
    max-width: calc(100% / 11) !important;
    height: 100% !important;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255, 170, 204, 0.13) 22%, rgba(255, 82, 151, 0.56) 66%, rgba(190, 35, 92, 0.86) 100%) !important;
    box-shadow:
        inset 1px 0 0 rgba(255, 225, 238, 0.14),
        inset -1px 0 0 rgba(14, 3, 8, 0.34),
        0 -30px 80px rgba(255, 66, 140, 0.12) !important;
    opacity: 0.9 !important;
    transform: scaleY(var(--bar-scale, 0.66));
    transform-origin: bottom !important;
    animation: heroFinalBarPulse 1.75s cubic-bezier(0.32, 0.72, 0, 1) infinite alternate !important;
    animation-delay: calc(var(--bar) * -0.13s) !important;
}

.atelier-hero__bars span:nth-child(1),
.atelier-hero__bars span:nth-child(11) { --bar-scale: 0.98; }
.atelier-hero__bars span:nth-child(2),
.atelier-hero__bars span:nth-child(10) { --bar-scale: 0.88; }
.atelier-hero__bars span:nth-child(3),
.atelier-hero__bars span:nth-child(9) { --bar-scale: 0.74; }
.atelier-hero__bars span:nth-child(4),
.atelier-hero__bars span:nth-child(8) { --bar-scale: 0.62; }
.atelier-hero__bars span:nth-child(5),
.atelier-hero__bars span:nth-child(7) { --bar-scale: 0.52; }
.atelier-hero__bars span:nth-child(6) { --bar-scale: 0.42; }

.atelier-hero__wash {
    z-index: 3 !important;
    opacity: 0.42 !important;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 213, 231, 0.18), transparent 26%),
        radial-gradient(ellipse at 50% 72%, rgba(255, 76, 145, 0.13), transparent 42%),
        linear-gradient(180deg, transparent 0%, rgba(17, 4, 9, 0.20) 100%) !important;
    animation: none !important;
}

.atelier-hero__grain {
    z-index: 4 !important;
}

.atelier-hero__copy {
    z-index: 8 !important;
    padding-top: clamp(42px, 5.2vh, 70px) !important;
}

.atelier-hero__actions {
    margin-top: 1rem !important;
}

.atelier-gallery {
    top: 50.5% !important;
    bottom: auto !important;
    height: clamp(292px, 32vh, 350px) !important;
    z-index: 7 !important;
    transform: translateY(0) scale(0.82) rotateX(var(--pointer-y)) rotateY(var(--pointer-x)) !important;
    pointer-events: auto !important;
}

.atelier-card,
.atelier-card img,
.atelier-card::after {
    pointer-events: none !important;
}

.atelier-card {
    width: clamp(154px, 10.7vw, 206px) !important;
}

.atelier-card--feature {
    width: clamp(188px, 12.7vw, 244px) !important;
}

.atelier-card figcaption {
    display: none !important;
}

.atelier-hero__footer,
.atelier-scroll,
.atelier-hero__footer p,
.atelier-hero__location {
    display: none !important;
}

@keyframes heroFinalBarPulse {
    0% {
        transform: scaleY(calc(var(--bar-scale, 0.66) * 0.78));
        opacity: 0.58;
    }
    50% {
        transform: scaleY(calc(var(--bar-scale, 0.66) * 1.2));
        opacity: 1;
    }
    100% {
        transform: scaleY(calc(var(--bar-scale, 0.66) * 0.58));
        opacity: 0.72;
    }
}

@keyframes heroPinkSweep {
    0% {
        transform: translate3d(-18%, 0, 0) scaleX(0.92);
        opacity: 0.38;
    }
    50% {
        transform: translate3d(0%, 0, 0) scaleX(1.04);
        opacity: 0.72;
    }
    100% {
        transform: translate3d(18%, 0, 0) scaleX(0.96);
        opacity: 0.52;
    }
}

@media (max-width: 1199.98px) {
    .atelier-gallery {
        top: 52% !important;
        transform: translateY(0) scale(0.84) !important;
    }
}

@media (max-width: 767.98px) {
    .atelier-hero__copy {
        padding-top: clamp(42px, 6vh, 64px) !important;
    }

    .atelier-hero__bars span {
        flex-basis: calc(100% / 7) !important;
        max-width: calc(100% / 7) !important;
    }

    .atelier-hero__bars span:nth-child(n + 8) {
        display: none !important;
    }

    .atelier-gallery {
        top: 56% !important;
        height: 250px !important;
        transform: translateY(0) scale(0.92) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atelier-hero__bars span,
    .atelier-hero__bars::before {
        animation: none !important;
    }
}
