/**
 * DBC — Celebrity Circle Hero  [dbc_celebrity_circle_hero]
 *
 * Full-width hero with 10 celebrity tiles arranged around a central card.
 * Tiles animate via a single `--p` (progress 0..1) custom property updated by
 * JS on scroll. Each tile combines:
 *  - a per-direction starting offset (--enter-x / --enter-y),
 *  - translate = enter_offset * (1 - p),
 *  - opacity   = p,
 * so they slide inward from their entry edge and fade in to opacity 1 when the
 * section is centered in the viewport.
 *
 * On mobile the radial layout collapses to a stacked vertical layout, and the
 * scroll-tied animation is replaced with a simple fade-in driven by
 * IntersectionObserver toggling the `is-in` class.
 */

.dbc-celeb-hero {
    --p: 0;
    --hero-scale: 1;
    --enter-distance: 140px;
    --dbc-celeb-hero-vh: 100vh;
    --dbc-celeb-hero-vh: 100dvh;
    --tile-sm: calc(clamp(64px, 6vw, 80px) * var(--hero-scale));
    --tile-md: calc(clamp(82px, 8vw, 110px) * var(--hero-scale));
    --tile-lg: calc(clamp(100px, 10vw, 140px) * var(--hero-scale));
    --label-fg: #ffffff;
    --label-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
    /* Center card title — same section scale kit as [dbc_upcoming_releases_carousel] (:root tokens). */
    --dbc-celeb-hero-title-font-family: var(
        --dbc-title-serif-family,
        "Noto Serif Vithkuqi",
        "Noto Serif",
        Georgia,
        "Times New Roman",
        serif
    );
    --dbc-celeb-hero-title-size: var(--dbc-title-section-size, 22px);
    --dbc-celeb-hero-title-line-height: var(--dbc-title-section-line-height, 28px);
    --dbc-celeb-hero-title-weight: var(--dbc-title-serif-weight, 500);
    --dbc-celeb-hero-title-letter-spacing: -0.31px;

    position: relative;
    width: 100%;
    min-height: var(--dbc-celeb-hero-vh);
    height: var(--dbc-celeb-hero-vh);
    max-height: none;
    overflow: hidden;
    isolation: isolate;
    color: var(--label-fg);
    font-family: inherit;
    background: #ffffff;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .dbc-celeb-hero {
        --dbc-celeb-hero-title-letter-spacing: -0.34px;
    }
}

@media (min-width: 1024px) {
    .dbc-celeb-hero {
        --dbc-celeb-hero-title-letter-spacing: -0.4px;
    }
}

.dbc-celeb-hero__bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.84;
}

.dbc-celeb-hero__bg--fallback {
    background: linear-gradient(135deg, #2a2a2a 0%, #4a3a2a 100%);
}

.dbc-celeb-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    pointer-events: none;
}

.dbc-celeb-hero__stage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 3;
    width: 1920px;
    max-width: none;
    transform: translateX(-50%);
}

/* ===================================================================
 * Ring of celebrity tiles
 * =================================================================== */

.dbc-celeb-hero__ring {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* h2 + high specificity so Elementor / theme heading styles cannot shrink below 28px */
.dbc-celeb-hero h2.dbc-celeb-hero__section-title {
    position: absolute;
    z-index: 4;
    top: clamp(18px, 3.2vw, 46px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: min(90vw, 760px);
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: var(--dbc-title-section-size, 22px) !important;
    line-height: var(--dbc-title-section-line-height, 28px) !important;
    letter-spacing: 0.005em;
    text-shadow: var(--label-shadow);
    pointer-events: none;
}

.dbc-celeb-hero__tile {
    --enter-x: 0px;
    --enter-y: 0px;

    position: absolute;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 300px;
    will-change: transform, opacity;
    transform: translate(
        calc(var(--enter-x) * (1 - var(--p))),
        calc(var(--enter-y) * (1 - var(--p)))
    );
    opacity: var(--p);
    transition: transform 0.08s linear, opacity 0.08s linear;
}

.dbc-celeb-hero__avatar {
    flex-shrink: 0;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.08);
    aspect-ratio: 1 / 1;
}

.dbc-celeb-hero__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}

.dbc-celeb-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
    text-shadow: var(--label-shadow);
    min-width: 130px;
    text-align: left;
    align-items: flex-start;
}

/* Mark Zuckerberg: slightly tighter text lane than global default. */
.dbc-celeb-hero__tile--pos-br .dbc-celeb-hero__meta {
    min-width: 108px;
}

.dbc-celeb-hero__name {
    font-weight: 700;
    font-size: clamp(15px, 1.25vw, 19px);
    letter-spacing: 0.01em;
}

.dbc-celeb-hero__job {
    font-weight: 400;
    font-size: clamp(12px, 0.95vw, 14px);
    opacity: 0.92;
}

/* Sizes */
.dbc-celeb-hero__tile--size-sm .dbc-celeb-hero__avatar { width: var(--tile-sm); }
.dbc-celeb-hero__tile--size-md .dbc-celeb-hero__avatar { width: var(--tile-md); }
.dbc-celeb-hero__tile--size-lg .dbc-celeb-hero__avatar { width: var(--tile-lg); }

/* Entry directions — set the starting offset toward the entry edge */
.dbc-celeb-hero__tile--enter-top    { --enter-y: calc(var(--enter-distance) * -1); }
.dbc-celeb-hero__tile--enter-bottom { --enter-y: var(--enter-distance); }
.dbc-celeb-hero__tile--enter-left   { --enter-x: calc(var(--enter-distance) * -1); }
.dbc-celeb-hero__tile--enter-right  { --enter-x: var(--enter-distance); }

/* Corner tiles need diagonal travel (both axes) toward the center. */
.dbc-celeb-hero__tile--pos-tl { --enter-x: calc(var(--enter-distance) * -1); --enter-y: calc(var(--enter-distance) * -1); }
.dbc-celeb-hero__tile--pos-tr { --enter-x: var(--enter-distance); --enter-y: calc(var(--enter-distance) * -1); }
.dbc-celeb-hero__tile--pos-bl { --enter-x: calc(var(--enter-distance) * -1); --enter-y: var(--enter-distance); }
.dbc-celeb-hero__tile--pos-br { --enter-x: var(--enter-distance); --enter-y: var(--enter-distance); }

/* ===================================================================
 * Ring positions (desktop)
 *
 * Approx % positions around the central card. Right-side tiles use
 * `right` instead of `left` so the labels can flow toward the outer
 * edge while the avatar stays toward the center.
 * =================================================================== */

/* Top row */
.dbc-celeb-hero__tile--pos-tl { top: 10%; left: 22%; flex-direction: row-reverse; }
.dbc-celeb-hero__tile--pos-tc { top: 18%; left: 50%; transform-origin: center; flex-direction: row; }
.dbc-celeb-hero__tile--pos-tr { top: 11%; right: 25%; flex-direction: row-reverse; }

/* tc center horizontal alignment + entry */
.dbc-celeb-hero__tile--pos-tc {
    transform: translate(
        calc(-50% + var(--enter-x) * (1 - var(--p))),
        calc(0px + var(--enter-y) * (1 - var(--p)))
    );
}

/* Upper-mid row */
.dbc-celeb-hero__tile--pos-l1 { top: 31%; left: 19%; flex-direction: row; }
.dbc-celeb-hero__tile--pos-r1 { top: 32%; right: 22%; flex-direction: row; }

/* Mid row (flanking the central card) */
.dbc-celeb-hero__tile--pos-l2 { top: 51%; left: 21%; flex-direction: row; }
.dbc-celeb-hero__tile--pos-r2 { top: 49%; right: 18%; flex-direction: row-reverse; }

/* Bottom row */
.dbc-celeb-hero__tile--pos-bl { top: 69%; left: 28%; flex-direction: row-reverse; }
.dbc-celeb-hero__tile--pos-bc { top: 69%; left: 50%; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.dbc-celeb-hero__tile--pos-br { top: 67%; right: 29%; flex-direction: row-reverse; }

/* bc center horizontal alignment + entry */
.dbc-celeb-hero__tile--pos-bc {
    transform: translate(
        calc(-50% + var(--enter-x) * (1 - var(--p))),
        calc(0px + var(--enter-y) * (1 - var(--p)))
    );
}

.dbc-celeb-hero__tile--pos-bc .dbc-celeb-hero__meta { text-align: center; align-items: center; }
.dbc-celeb-hero__tile--pos-bc .dbc-celeb-hero__avatar { width: calc(205px * var(--hero-scale)); }
.dbc-celeb-hero__tile--pos-r1 .dbc-celeb-hero__avatar { width: calc(160px * var(--hero-scale)); }
.dbc-celeb-hero__tile--pos-tc .dbc-celeb-hero__avatar { width: calc(155px * var(--hero-scale)); }
.dbc-celeb-hero__tile--pos-r2 .dbc-celeb-hero__avatar { width: calc(126px * var(--hero-scale)); }

/* Align text based on where the text block is displayed relative to the avatar. */
.dbc-celeb-hero__tile--pos-tl .dbc-celeb-hero__meta,
.dbc-celeb-hero__tile--pos-tr .dbc-celeb-hero__meta,
.dbc-celeb-hero__tile--pos-bl .dbc-celeb-hero__meta,
.dbc-celeb-hero__tile--pos-br .dbc-celeb-hero__meta,
.dbc-celeb-hero__tile--pos-r2 .dbc-celeb-hero__meta {
    text-align: right;
    align-items: flex-end;
}

.dbc-celeb-hero__tile--pos-l1 .dbc-celeb-hero__meta,
.dbc-celeb-hero__tile--pos-l2 .dbc-celeb-hero__meta,
.dbc-celeb-hero__tile--pos-r1 .dbc-celeb-hero__meta,
.dbc-celeb-hero__tile--pos-tc .dbc-celeb-hero__meta {
    text-align: left;
    align-items: flex-start;
}

/* Keep desktop composition untouched at 1200px and above; scale only below that. */
@media (max-width: 1199px) {
    .dbc-celeb-hero {
        --hero-scale: 0.76;
    }

    .dbc-celeb-hero__stage {
        width: 100%;
    }

    .dbc-celeb-hero__tile {
        gap: 10px;
        max-width: 250px;
    }

    .dbc-celeb-hero__name {
        font-size: clamp(14px, 1.15vw, 17px);
    }

    .dbc-celeb-hero__job {
        font-size: clamp(12px, 0.9vw, 14px);
    }

    .dbc-celeb-hero__meta {
        min-width: 98px;
    }

    /* Keep ring spread wider at this size (avoid over-collapsing toward center). */
    .dbc-celeb-hero__tile--pos-tl { left: 12%; }
    .dbc-celeb-hero__tile--pos-tr { right: 14%; }
    .dbc-celeb-hero__tile--pos-l1 { left: 6%; }
    .dbc-celeb-hero__tile--pos-r1 { right: 11%; }
    .dbc-celeb-hero__tile--pos-l2 { left: 10%; }
    .dbc-celeb-hero__tile--pos-r2 { right: 8%; }
    .dbc-celeb-hero__tile--pos-bl { left: 16%; }
    .dbc-celeb-hero__tile--pos-br { right: 16%; }
}

/* Tablet and below: keep avatars at the 1075px visual size. */
@media (max-width: 1075px) {
    .dbc-celeb-hero {
        --hero-scale: 0.76;
        --tile-sm: 49px;
        --tile-md: 65px;
        --tile-lg: 82px;
    }

    .dbc-celeb-hero__meta {
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .dbc-celeb-hero {
        --hero-scale: 0.84;
    }

    .dbc-celeb-hero__tile {
        gap: 8px;
        max-width: 220px;
    }

    .dbc-celeb-hero__name {
        font-size: clamp(14px, 1.2vw, 17px);
    }

    .dbc-celeb-hero__job {
        font-size: clamp(11px, 0.92vw, 13px);
    }

    .dbc-celeb-hero__meta {
        min-width: 84px;
    }

    /* Slightly wider spread than desktop-centered values at tablet widths. */
    .dbc-celeb-hero__tile--pos-tl { left: 8%; }
    .dbc-celeb-hero__tile--pos-tr { right: 10%; }
    .dbc-celeb-hero__tile--pos-l1 { left: 4%; }
    .dbc-celeb-hero__tile--pos-r1 { right: 8%; }
    .dbc-celeb-hero__tile--pos-l2 { left: 7%; }
    .dbc-celeb-hero__tile--pos-r2 { right: 6%; }
    .dbc-celeb-hero__tile--pos-bl { left: 13%; }
    .dbc-celeb-hero__tile--pos-br { right: 13%; }
}

/* ~768–1199px: labels visible — portrait/text gap (overrides tighter tablet rules above). */
@media (min-width: 768px) and (max-width: 1199px) {
    .dbc-celeb-hero__tile {
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .dbc-celeb-hero {
        --hero-scale: 0.76;
    }

    /* Keep portraits radial without pushing them too far into the gutters. */
    .dbc-celeb-hero__tile--pos-tl { left: 10%; }
    .dbc-celeb-hero__tile--pos-tr { right: 11%; }
    .dbc-celeb-hero__tile--pos-l1 { left: 6%; }
    .dbc-celeb-hero__tile--pos-r1 { right: 8%; }
    .dbc-celeb-hero__tile--pos-l2 { left: 8%; }
    .dbc-celeb-hero__tile--pos-r2 { right: 8%; }
    .dbc-celeb-hero__tile--pos-bl { left: 14%; }
    .dbc-celeb-hero__tile--pos-br { right: 14%; }
}

/* ===================================================================
 * Center card (title + search + browse button)
 * =================================================================== */

.dbc-celeb-hero__center {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100% - 48px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 28px 28px 32px;
    text-align: center;
}

.dbc-celeb-hero .dbc-celeb-hero__center h2.dbc-celeb-hero__title {
    margin: 0;
    max-width: min(36ch, 92vw);
    color: #ffffff;
    font-family: var(--dbc-celeb-hero-title-font-family) !important;
    font-size: var(--dbc-celeb-hero-title-size) !important;
    line-height: var(--dbc-celeb-hero-title-line-height) !important;
    font-weight: var(--dbc-celeb-hero-title-weight) !important;
    letter-spacing: var(--dbc-celeb-hero-title-letter-spacing) !important;
    font-style: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: var(--label-shadow);
}

.dbc-celeb-hero__search {
    width: 100%;
    max-width: 420px;
}

.dbc-celeb-hero__search .dbc-celeb-search,
.dbc-celeb-hero__search .dbc-searchbar-wrapper {
    width: 100%;
}

/*
 * Celebrity hero: default .dbc-searchbar-dark uses a ~10% white field + dark
 * placeholder — both disappear on the photo background. Use a solid frosted
 * bar and light placeholder / white typed text (scoped so mega-menu search is unchanged).
 */
.dbc-celeb-hero__search .dbc-searchbar-dark .dbc-searchbar-input-wrapper {
    background: rgba(12, 10, 9, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        0 4px 22px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
    height: 32px;
    align-items: stretch;
}

.dbc-celeb-hero__search .dbc-searchbar-dark .dbc-searchbar-input-wrapper:focus-within {
    background: rgba(12, 10, 9, 0.92);
    border-color: rgba(255, 255, 255, 0.52) !important;
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Fixed 32px pill (wrapper); input fills inner track after 1px borders → line-height 30px. */
.dbc-celeb-hero__search .dbc-searchbar-dark .dbc-searchbar-input {
    color: #ffffff;
    font-weight: 400;
    font-size: 13px !important;
    line-height: 30px !important;
    height: 100%;
    min-height: 0;
    padding: 0 14px !important;
    box-sizing: border-box;
}

.dbc-celeb-hero__search .dbc-searchbar-dark .dbc-searchbar-input::placeholder {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: 13px !important;
    line-height: 30px !important;
    opacity: 1;
}

.dbc-celeb-hero__search .dbc-searchbar-dark .dbc-searchbar-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: 13px !important;
    line-height: 30px !important;
}

.dbc-celeb-hero__search .dbc-searchbar-dark .dbc-searchbar-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: 13px !important;
    line-height: 30px !important;
    opacity: 1;
}

.dbc-celeb-hero__search .dbc-searchbar-dark .dbc-searchbar-input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: 13px !important;
    line-height: 30px !important;
}

/* Center-align with the input pill; .dbc-button sets compact height (no stretch). */
.dbc-celeb-hero__search .dbc-celeb-search__row {
    align-items: center;
}

/* Spacing + optional depth only — sizing matches .dbc-button (style.css). */
.dbc-celeb-hero .dbc-button.dbc-celeb-hero__browse {
    margin-top: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* ===================================================================
 * Mobile / touch portrait-only radial layout (no scroll-tied animation)
 *
 * Keeps the same approximate composition as desktop while hiding celebrity text.
 * =================================================================== */

@media (max-width: 1024px) {
    .dbc-celeb-hero {
        --hero-scale: 0.84; /* tablet portraits should stay prominent */
        min-height: var(--dbc-celeb-hero-vh);
        height: var(--dbc-celeb-hero-vh);
        padding: 0;
        overflow: hidden;
    }

    .dbc-celeb-hero__overlay {
        background: transparent;
    }

    .dbc-celeb-hero__stage {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
    }

    .dbc-celeb-hero__center {
        position: absolute;
        transform: translate(-50%, -50%);
        width: min(520px, calc(100% - 32px));
        max-width: none;
        padding: 18px 16px 20px;
        gap: 14px;
    }

    .dbc-celeb-hero h2.dbc-celeb-hero__section-title {
        position: absolute;
        transform: translateX(-50%);
        width: min(90vw, 760px);
        margin: 0;
        text-align: center;
        pointer-events: none;
    }

    .dbc-celeb-hero__ring {
        position: absolute;
        inset: 0;
        display: block;
        margin-top: 0;
    }

    .dbc-celeb-hero__tile--pos-tl,
    .dbc-celeb-hero__tile--pos-tr,
    .dbc-celeb-hero__tile--pos-l1,
    .dbc-celeb-hero__tile--pos-br {
        display: flex;
    }

    .dbc-celeb-hero__tile {
        position: absolute;
        max-width: none;
        align-items: center;
        justify-content: center;
        opacity: var(--p);
        transition: transform 0.08s linear, opacity 0.08s linear;
    }

    .dbc-celeb-hero__tile .dbc-celeb-hero__meta {
        display: flex;
        min-width: 0;
    }

    .dbc-celeb-hero__tile--size-sm .dbc-celeb-hero__avatar,
    .dbc-celeb-hero__tile--size-md .dbc-celeb-hero__avatar,
    .dbc-celeb-hero__tile--size-lg .dbc-celeb-hero__avatar {
        width: var(--tile-md);
    }

    .dbc-celeb-hero__tile--size-sm .dbc-celeb-hero__avatar { width: var(--tile-sm); }
    .dbc-celeb-hero__tile--size-lg .dbc-celeb-hero__avatar { width: var(--tile-lg); }
    .dbc-celeb-hero__tile--pos-bc .dbc-celeb-hero__avatar { width: calc(205px * var(--hero-scale)); }
    .dbc-celeb-hero__tile--pos-r1 .dbc-celeb-hero__avatar { width: calc(160px * var(--hero-scale)); }
    .dbc-celeb-hero__tile--pos-tc .dbc-celeb-hero__avatar { width: calc(155px * var(--hero-scale)); }
    .dbc-celeb-hero__tile--pos-r2 .dbc-celeb-hero__avatar { width: calc(126px * var(--hero-scale)); }
}

@media (max-width: 767px) {
    .dbc-celeb-hero {
        --hero-scale: 0.84;
        min-height: var(--dbc-celeb-hero-vh);
        height: var(--dbc-celeb-hero-vh);
    }

    .dbc-celeb-hero__tile .dbc-celeb-hero__meta {
        display: none;
    }

    .dbc-celeb-hero__tile {
        gap: 0;
    }

    .dbc-celeb-hero__tile--pos-tl { top: 11%; left: 12%; }
    .dbc-celeb-hero__tile--pos-tc { top: 18%; left: 50%; }
    .dbc-celeb-hero__tile--pos-tr { top: 12%; right: 8%; }
    .dbc-celeb-hero__tile--pos-l1 { top: 33%; left: 11%; }
    .dbc-celeb-hero__tile--pos-r1 { top: 31%; right: 5%; }
    .dbc-celeb-hero__tile--pos-l2 { top: 53%; left: 3%; }
    .dbc-celeb-hero__tile--pos-r2 { top: 54%; right: 8%; }
    .dbc-celeb-hero__tile--pos-bl { top: 70%; left: 14%; }
    .dbc-celeb-hero__tile--pos-bc { top: 73%; left: 50%; }
    .dbc-celeb-hero__tile--pos-br { top: 72%; right: 16%; }
}

/* ===================================================================
 * Elementor wrappers — hero should fill viewport with no extra padding gaps
 * =================================================================== */

.elementor-section:has(.dbc-celeb-hero),
.elementor-column:has(.dbc-celeb-hero),
.elementor-widget-shortcode:has(.dbc-celeb-hero),
.elementor-widget-shortcode:has(.dbc-celeb-hero) > .elementor-widget-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.elementor-section:has(.dbc-celeb-hero) > .elementor-container,
.elementor-column:has(.dbc-celeb-hero) > .elementor-widget-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===================================================================
 * Reduced motion: jump straight to final state
 * =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dbc-celeb-hero {
        --p: 1;
    }
    .dbc-celeb-hero__tile,
    .dbc-celeb-hero__tile--pos-tc,
    .dbc-celeb-hero__tile--pos-bc {
        transition: none !important;
    }
    @media (max-width: 1024px) {
        .dbc-celeb-hero__tile {
            opacity: 1;
        }
        .dbc-celeb-hero__avatar {
            animation: none !important;
        }
    }
}