/* =========================================================
   RotoEdge — small UX enhancements layered on the original theme
========================================================= */

/* Homepage 01–07 service icon row: gentle staggered float + hover lift/glow */
.elementor-element-b52b83c .elementor-widget-image a,
.elementor-element-b52b83c .elementor-widget-image > img {
    display: inline-block;
    animation: re-icon-float 4.2s ease-in-out infinite;
    will-change: transform;
}

.elementor-element-b52b83c > .e-con:nth-child(2) .elementor-widget-image a { animation-delay: -.6s; }
.elementor-element-b52b83c > .e-con:nth-child(3) .elementor-widget-image a { animation-delay: -1.2s; }
.elementor-element-b52b83c > .e-con:nth-child(4) .elementor-widget-image a { animation-delay: -1.8s; }
.elementor-element-b52b83c > .e-con:nth-child(5) .elementor-widget-image a { animation-delay: -2.4s; }
.elementor-element-b52b83c > .e-con:nth-child(6) .elementor-widget-image a { animation-delay: -3s; }
.elementor-element-b52b83c > .e-con:nth-child(7) .elementor-widget-image a { animation-delay: -3.6s; }

.elementor-element-b52b83c .elementor-widget-image img {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}

.elementor-element-b52b83c .elementor-widget-image a:hover img,
.elementor-element-b52b83c .elementor-widget-image a:focus-visible img {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 10px 22px rgba(255, 31, 31, .38));
}

@keyframes re-icon-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-element-b52b83c .elementor-widget-image a,
    .elementor-element-b52b83c .elementor-widget-image > img { animation: none; }
}

/* Homepage poster slider: every poster gets the same 2:3 card so heights and gaps line up */
.tp-gallery-slider-active .tp-gallery-item {
    overflow: hidden;
    border-radius: 10px;
    background: #1a1a1a;
}

.tp-gallery-slider-active .tp-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
}

/* Poster slider + 01–07 icon row fit on one screen: posters lift slightly over the hero's
   bottom edge and the divider between them is tightened */
.elementor-11766 .elementor-element.elementor-element-bd01e90 {
    position: relative;
    z-index: 3;
    margin-top: clamp(-80px, -5vw, -40px);
}

.elementor-11766 .elementor-element.elementor-element-ba236b0 {
    --margin-top: 6px;
    --margin-bottom: 6px;
}

.elementor-11766 .elementor-element.elementor-element-014e75c .elementor-divider {
    padding-block-start: 8px;
    padding-block-end: 8px;
}

.tp-gallery-slider-active .tp-gallery-item {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

/* 01–07 icon row + Human/AI banner fit on one screen: compact icon row */
.elementor .elementor-element.elementor-element-b52b83c {
    padding-top: 14px;
    padding-bottom: 14px;
}

.elementor-element-b52b83c .elementor-widget-image img {
    width: auto;
    max-height: min(clamp(118px, 10vw, 172px), 15vh);
}

/* Human/AI banner runs truly edge to edge (no default container padding) */
.elementor-11766 .elementor-element.elementor-element-505bda8 {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-11766 .elementor-element.elementor-element-0aa1b14 {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Hero heading: logo wordmark for "RotoEdge" + Audiowide for "VFX Studio" */
.rotoedge-hero-final .rotoedge-hero-final__brand {
    line-height: 0;
}

.rotoedge-hero-final .rotoedge-hero-final__brand .rotoedge-hero-final__brand-img {
    display: inline-block;
    width: auto;
    height: clamp(54px, 7.6vw, 138px);
    max-width: 100%;
    object-fit: contain;
}

.rotoedge-hero-final .rotoedge-hero-final__second {
    font-family: "Audiowide", sans-serif !important;
    font-size: clamp(40px, 5.2vw, 100px);
    line-height: 1;
    letter-spacing: .02em;
    color: #ff0000;
}

@media (max-width: 767px) {
    .rotoedge-hero-final .rotoedge-hero-final__brand .rotoedge-hero-final__brand-img {
        height: auto;
        width: min(88vw, 340px);
    }

    .rotoedge-hero-final .rotoedge-hero-final__second {
        font-size: clamp(30px, 9.5vw, 46px);
        margin-top: 22px;
    }
}

/* Subtitle pills line up with their headings inside the redesigned sections */
.re-about .tp-section-subtitle-2,
.re-svc .tp-section-subtitle-2,
.re-work .tp-section-subtitle-2,
.re-proc .tp-section-subtitle-2 {
    margin-left: 0;
}

/* Founder photo: beat Elementor's generic ".elementor img { height:auto }" */
.re-about .re-about__media .re-about__photo {
    height: 94%;
    width: auto;
    max-width: none;
}

.re-about .re-about__name img {
    width: 40px;
    height: auto;
}

/* =========================================================
   01–07 service icons: on phones/tablets one continuous row that scrolls
   like a marquee (re-chrome.js wraps the items in a track and duplicates them).
   Desktop keeps the original seven-across row.
========================================================= */
.re-marquee__track { display: contents; }
.re-marquee__clone { display: none; }

/* Desktop: never show the duplicate set. Elementor's container rule (.e-con { display: flex },
   with a more specific selector) otherwise overrides the plain .re-marquee__clone rule above. */
@media (min-width: 1025px) {
    .elementor .re-marquee .re-marquee__track > .re-marquee__clone { display: none !important; }
}

@media (max-width: 1024px) {
    .elementor .elementor-element.elementor-element-b52b83c.re-marquee {
        display: block;
        overflow: hidden;
        padding: 18px 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }

    .re-marquee .re-marquee__track {
        display: flex;
        width: max-content;
        gap: clamp(14px, 3vw, 28px);
        animation: re-marquee 26s linear infinite;
    }

    .re-marquee:hover .re-marquee__track,
    .re-marquee:focus-within .re-marquee__track { animation-play-state: paused; }

    .re-marquee .re-marquee__clone { display: flex; }

    .elementor .re-marquee .re-marquee__track > .e-con {
        flex: 0 0 auto;
        width: clamp(92px, 16vw, 130px);
        padding: 0;
    }

    .re-marquee .elementor-widget-image,
    .re-marquee .elementor-widget-image a {
        display: block;
        width: 100%;
    }

    .re-marquee .elementor-widget-image img {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

/* the track holds two identical sets, so sliding by half loops seamlessly */
@keyframes re-marquee { to { transform: translateX(calc(-50% - clamp(7px, 1.5vw, 14px))); } }

@media (prefers-reduced-motion: reduce) {
    .re-marquee .re-marquee__track { animation: none; }
}

/* home page: one continuous black canvas so the poster row, icon row and sections blend */
/* (embedded leftover snippets in index.html declare their own body background, hence !important) */
html body.home { background: var(--e-global-color-primary, #000) !important; }
/* leftover theme demo (placeholder team slider) left an empty strip above the footer */
.elementor-11766 .elementor-element.elementor-element-54e284a { display: none; }

/* Poster slider under the hero: phones and tablets get the same 2:3 poster carousel as desktop
   (its Swiper already has 2 / 3 / 4-per-view breakpoints); the wide mixed-shape mobile slider is retired */
@media (max-width: 1024px) {
    .elementor-11766 .elementor-element.elementor-element-bd01e90.elementor-hidden-tablet,
    .elementor-11766 .elementor-element.elementor-element-bd01e90.elementor-hidden-mobile { display: flex; }

    .elementor-11766 .elementor-element.elementor-element-ef6ddb2 { display: none; }
}

/* Homepage section headings use the hero title face (Audiowide, as in "VFX Studio").
   Audiowide is much wider than Marcellus, so sizes are scaled down to keep the same line lengths. */
body.home .re-about__title,
body.home .re-proc__title,
body.home .re-svc__title,
body.home .re-work__title,
body.home .re-venn__title {
    font-family: "Audiowide", sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.15;
}

body.home .re-about__title { font-size: clamp(28px, 3vw, 48px); }
body.home .re-proc__title  { font-size: clamp(28px, 2.9vw, 46px); }
body.home .re-svc__title   { font-size: clamp(28px, 3.2vw, 50px); }
body.home .re-work__title  { font-size: clamp(28px, 3.2vw, 50px); }
body.home .re-venn__title  { font-size: clamp(22px, 2.1vw, 32px); }

@media (max-width: 767px) {
    body.home .re-about__title,
    body.home .re-proc__title,
    body.home .re-svc__title,
    body.home .re-work__title { font-size: clamp(24px, 7.2vw, 32px); }
    body.home .re-venn__title { font-size: clamp(20px, 6vw, 26px); }
}

/* Poster slider before Swiper has started (its script loads last on the page): lay the posters out
   exactly like the running slider (same per-row counts and 20px gap as main.js) so the first paint
   never shows one giant full-width poster. Swiper adds .swiper-initialized when it takes over. */
.tp-gallery-slider-active:not(.swiper-initialized) { overflow: hidden; }

.tp-gallery-slider-active:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 20px;
}

.tp-gallery-slider-active:not(.swiper-initialized) .swiper-slide {
    --per: 2;
    flex: 0 0 calc((100% - 20px * (var(--per) - 1)) / var(--per));
    width: auto;
}

@media (min-width: 576px)  { .tp-gallery-slider-active:not(.swiper-initialized) .swiper-slide { --per: 3; } }
@media (min-width: 768px)  { .tp-gallery-slider-active:not(.swiper-initialized) .swiper-slide { --per: 4; } }
@media (min-width: 992px)  { .tp-gallery-slider-active:not(.swiper-initialized) .swiper-slide { --per: 5; } }
@media (min-width: 1200px) { .tp-gallery-slider-active:not(.swiper-initialized) .swiper-slide { --per: 6; } }
@media (min-width: 1400px) { .tp-gallery-slider-active:not(.swiper-initialized) .swiper-slide { --per: 7; } }