/*
 * MIX365 UNIFIED HOMEPAGE EFFECTS
 * Gives every homepage section the same visual style as the hero.
 */

/* ----------------------------------------------------------
   Shared section background
   ---------------------------------------------------------- */

.mix365-unified-motion {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: #ffffff;
    background-color: #050506 !important;
    background-image:
        radial-gradient(
            circle at 18% 30%,
            rgba(231, 0, 65, 0.10),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(255,255,255,0.035),
            transparent 28%
        ) !important;
    border-top:
        1px solid
        rgba(255,255,255,0.065);
}

/*
 * Keep the page continuous rather than making every section
 * look like a separate template.
 */
.mix365-unified-motion + .mix365-unified-motion {
    border-top-color: rgba(255, 13, 78, 0.13);
}

/* ----------------------------------------------------------
   Animated background layers
   ---------------------------------------------------------- */

.mix365-section-effects-canvas {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    opacity: 0.62;
    pointer-events: none !important;
}

.mix365-section-effects-glow {
    position: absolute;
    z-index: 1;
    top: 12%;
    left: -20%;
    width: 62%;
    height: 76%;
    pointer-events: none;
    opacity: 0.22;
    filter: blur(52px);
    background:
        radial-gradient(
            ellipse at center,
            rgba(235,0,67,0.55) 0%,
            rgba(235,0,67,0.16) 38%,
            transparent 72%
        );
    animation:
        mix365SectionGlowMovement
        14s ease-in-out infinite alternate;
}

.mix365-section-scanlines {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: screen;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.055) 0,
            rgba(255,255,255,0.055) 1px,
            transparent 1px,
            transparent 5px
        );
    background-size: 100% 10px;
    animation:
        mix365SectionScanlines
        11s linear infinite;
}

/* Soft dark edge like the top hero. */
.mix365-section-vignette {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,0.28) 72%,
            rgba(0,0,0,0.58) 100%
        );
}

/* ----------------------------------------------------------
   Keep actual section content above the effects
   ---------------------------------------------------------- */

.mix365-live-container,
.mix365-today-container,
.mix365-latest-container,
.mix365-fresh-container,
.mix365-weekly-container,
.mix365-admin-container,
.mix365-born-container,
.mix365-testimonial-container,
.mix365-newsletter-container {
    position: relative !important;
    z-index: 4 !important;
}

/*
 * Existing video backgrounds remain visible but use the same
 * dark red treatment across the page.
 */
.mix365-live-community-background,
.mix365-newsletter-video {
    opacity: 0.18 !important;
    filter:
        grayscale(0.7)
        contrast(1.25)
        brightness(0.42) !important;
}

/* ----------------------------------------------------------
   Glitch headings
   ---------------------------------------------------------- */

.mix365-glitch-heading {
    position: relative !important;
    z-index: 5;
    text-shadow:
        2px 0 0 rgba(255, 0, 67, 0.18),
        -2px 0 0 rgba(255,255,255,0.05),
        0 0 28px rgba(255, 0, 67, 0.08);
}

.mix365-glitch-heading::before,
.mix365-glitch-heading::after {
    content: attr(data-mix365-glitch-text);
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
}

.mix365-glitch-heading::before {
    color: rgba(255, 0, 66, 0.82);
    text-shadow: 3px 0 rgba(255, 0, 66, 0.32);
}

.mix365-glitch-heading::after {
    color: rgba(235, 245, 255, 0.70);
    text-shadow: -3px 0 rgba(255,255,255,0.22);
}

.mix365-glitch-heading.is-glitching::before {
    opacity: 0.72;
    animation:
        mix365HeadingGlitchBefore
        430ms steps(2, end);
}

.mix365-glitch-heading.is-glitching::after {
    opacity: 0.58;
    animation:
        mix365HeadingGlitchAfter
        430ms steps(2, end);
}

/* Slight glitch response when pointing at a heading. */
.mix365-glitch-heading:hover::before {
    opacity: 0.45;
    transform: translate(3px, -1px);
    clip-path:
        polygon(
            0 23%,
            100% 23%,
            100% 42%,
            0 42%
        );
}

.mix365-glitch-heading:hover::after {
    opacity: 0.36;
    transform: translate(-3px, 1px);
    clip-path:
        polygon(
            0 61%,
            100% 61%,
            100% 79%,
            0 79%
        );
}

/* ----------------------------------------------------------
   Scroll movement
   ---------------------------------------------------------- */

.mix365-motion-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 900ms cubic-bezier(.2,.75,.2,1),
        transform 900ms cubic-bezier(.2,.75,.2,1);
}

.mix365-motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------------------------
   Cards use one consistent visual treatment
   ---------------------------------------------------------- */

.mix365-latest-card,
.mix365-fresh-card,
.mix365-weekly-card,
.mix365-admin-card,
.mix365-born-stat,
.mix365-testimonial-card,
.mix365-today-card,
.mix365-live-preview-card,
.mix365-newsletter-panel {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.mix365-latest-card,
.mix365-fresh-card,
.mix365-weekly-card,
.mix365-admin-card,
.mix365-born-stat {
    border-color:
        rgba(255,255,255,0.12) !important;
    background:
        linear-gradient(
            145deg,
            rgba(25,26,30,0.92),
            rgba(5,5,7,0.96)
        ) !important;
}

.mix365-latest-card:hover,
.mix365-fresh-card:hover,
.mix365-weekly-card:hover,
.mix365-admin-card:hover,
.mix365-born-stat:hover {
    border-color:
        rgba(255, 18, 81, 0.72) !important;
    box-shadow:
        0 32px 82px rgba(0,0,0,0.58),
        0 0 36px rgba(255,0,67,0.12) !important;
}

/* Buttons match the red hero accent. */
.mix365-live-button,
.mix365-live-outline-button:hover,
.mix365-today-primary,
.mix365-today-secondary:hover,
.mix365-recording-play,
.mix365-recording-favourite.is-active,
.mix365-latest-view-all:hover,
.mix365-fresh-play,
.mix365-fresh-favourite.is-active,
.mix365-weekly-schedule-button,
.mix365-admin-button,
.mix365-newsletter-submit,
.mix365-newsletter-human-continue {
    background: #e90043 !important;
    border-color: #ff1956 !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   Section animation keyframes
   ---------------------------------------------------------- */

@keyframes mix365SectionGlowMovement {
    from {
        transform:
            translate3d(-8%, -3%, 0)
            scale(0.92);
        opacity: 0.16;
    }

    to {
        transform:
            translate3d(112%, 7%, 0)
            scale(1.12);
        opacity: 0.29;
    }
}

@keyframes mix365SectionScanlines {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 140px;
    }
}

@keyframes mix365HeadingGlitchBefore {
    0% {
        transform: translate(0, 0);
        clip-path:
            polygon(
                0 8%,
                100% 8%,
                100% 24%,
                0 24%
            );
    }

    25% {
        transform: translate(5px, -2px);
        clip-path:
            polygon(
                0 44%,
                100% 44%,
                100% 61%,
                0 61%
            );
    }

    50% {
        transform: translate(-4px, 1px);
        clip-path:
            polygon(
                0 68%,
                100% 68%,
                100% 83%,
                0 83%
            );
    }

    75% {
        transform: translate(3px, 2px);
        clip-path:
            polygon(
                0 28%,
                100% 28%,
                100% 39%,
                0 39%
            );
    }

    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

@keyframes mix365HeadingGlitchAfter {
    0% {
        transform: translate(0, 0);
        clip-path:
            polygon(
                0 74%,
                100% 74%,
                100% 91%,
                0 91%
            );
    }

    25% {
        transform: translate(-5px, 2px);
        clip-path:
            polygon(
                0 15%,
                100% 15%,
                100% 30%,
                0 30%
            );
    }

    50% {
        transform: translate(4px, -1px);
        clip-path:
            polygon(
                0 51%,
                100% 51%,
                100% 67%,
                0 67%
            );
    }

    75% {
        transform: translate(-3px, -2px);
        clip-path:
            polygon(
                0 35%,
                100% 35%,
                100% 48%,
                0 48%
            );
    }

    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

/* ----------------------------------------------------------
   Mobile performance
   ---------------------------------------------------------- */

@media (max-width: 767px) {
    .mix365-section-effects-canvas {
        opacity: 0.40;
    }

    .mix365-section-effects-glow {
        width: 86%;
        opacity: 0.17;
        filter: blur(40px);
    }

    .mix365-section-scanlines {
        opacity: 0.045;
    }

    .mix365-motion-reveal {
        transform: translateY(22px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mix365-section-effects-glow,
    .mix365-section-scanlines {
        animation: none !important;
    }

    .mix365-motion-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mix365-glitch-heading::before,
    .mix365-glitch-heading::after {
        display: none !important;
    }
}


/* ==========================================================
   MIX365 HEADING PAINT CONTAINMENT
   Only H2 heading text may use the glitch effect.
   ========================================================== */

/*
 * Prevent any accidental glitch class on sections, cards,
 * buttons or other page elements.
 */
.mix365-glitch-heading:not(h2)::before,
.mix365-glitch-heading:not(h2)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/*
 * Give each heading its own rendering layer. This confines
 * the red and white glitch repaint to the heading instead of
 * causing a visible flash across the surrounding section.
 */
h2.mix365-glitch-heading {
    position: relative !important;
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/*
 * Only the two duplicated heading layers are prepared for
 * animation. Nothing else on the section receives glitch
 * transforms or opacity changes.
 */
h2.mix365-glitch-heading::before,
h2.mix365-glitch-heading::after {
    pointer-events: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change:
        transform,
        clip-path,
        opacity;
}

/*
 * Never apply the glitch animation to the section itself,
 * even if a class is accidentally inherited or duplicated.
 */
section.is-glitching,
.mix365-unified-motion.is-glitching {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}


/* ==========================================================
   MIX365 STRONGER FREQUENT HEADING GLITCH
   Only the main H2 text is affected.
   ========================================================== */

h2.mix365-glitch-heading.is-glitching::before {
    opacity: 0.92 !important;
    animation:
        mix365StrongHeadingBefore
        420ms steps(2, end)
        2 !important;
}

h2.mix365-glitch-heading.is-glitching::after {
    opacity: 0.76 !important;
    animation:
        mix365StrongHeadingAfter
        420ms steps(2, end)
        2 !important;
}

@keyframes mix365StrongHeadingBefore {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        clip-path:
            polygon(
                0 4%,
                100% 4%,
                100% 18%,
                0 18%
            );
    }

    12% {
        opacity: 0.92;
        transform: translate3d(8px, -2px, 0);
        clip-path:
            polygon(
                0 17%,
                100% 17%,
                100% 34%,
                0 34%
            );
    }

    27% {
        transform: translate3d(-7px, 2px, 0);
        clip-path:
            polygon(
                0 48%,
                100% 48%,
                100% 61%,
                0 61%
            );
    }

    43% {
        transform: translate3d(5px, 0, 0);
        clip-path:
            polygon(
                0 70%,
                100% 70%,
                100% 88%,
                0 88%
            );
    }

    58% {
        opacity: 0.65;
        transform: translate3d(-4px, -1px, 0);
        clip-path:
            polygon(
                0 28%,
                100% 28%,
                100% 44%,
                0 44%
            );
    }

    76% {
        opacity: 0.9;
        transform: translate3d(6px, 2px, 0);
        clip-path:
            polygon(
                0 56%,
                100% 56%,
                100% 72%,
                0 72%
            );
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mix365StrongHeadingAfter {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        clip-path:
            polygon(
                0 78%,
                100% 78%,
                100% 94%,
                0 94%
            );
    }

    14% {
        opacity: 0.76;
        transform: translate3d(-8px, 2px, 0);
        clip-path:
            polygon(
                0 8%,
                100% 8%,
                100% 25%,
                0 25%
            );
    }

    31% {
        transform: translate3d(7px, -2px, 0);
        clip-path:
            polygon(
                0 39%,
                100% 39%,
                100% 54%,
                0 54%
            );
    }

    47% {
        transform: translate3d(-5px, 1px, 0);
        clip-path:
            polygon(
                0 64%,
                100% 64%,
                100% 80%,
                0 80%
            );
    }

    63% {
        opacity: 0.52;
        transform: translate3d(4px, -1px, 0);
        clip-path:
            polygon(
                0 22%,
                100% 22%,
                100% 38%,
                0 38%
            );
    }

    81% {
        opacity: 0.74;
        transform: translate3d(-6px, 2px, 0);
        clip-path:
            polygon(
                0 51%,
                100% 51%,
                100% 68%,
                0 68%
            );
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

/*
 * Keep the repaint strictly inside the heading text.
 */
h2.mix365-glitch-heading {
    isolation: isolate;
    contain: paint;
}

@media (prefers-reduced-motion: reduce) {
    h2.mix365-glitch-heading.is-glitching::before,
    h2.mix365-glitch-heading.is-glitching::after {
        animation: none !important;
        display: none !important;
    }
}