/*
 * 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;
    }
}

/* ==========================================================
   MIX365 SITE-WIDE MEMBER COLOUR THEME
   Shared by every page that loads this stylesheet + header.
   ========================================================== */

:root{
    --mix-theme-accent:#e10600;
    --mix-theme-bright:#ff241c;
    --mix-theme-deep:#b40400;
    --mix-theme-rgb:255,36,28;
    --mix-theme-hue:0deg;
}

html[data-mix-theme="red"]{
    --mix-theme-accent:#e10600;
    --mix-theme-bright:#ff241c;
    --mix-theme-deep:#b40400;
    --mix-theme-rgb:255,36,28;
    --mix-theme-hue:0deg;
}

html[data-mix-theme="blue"]{
    --mix-theme-accent:#1267d6;
    --mix-theme-bright:#3b9cff;
    --mix-theme-deep:#0a3f91;
    --mix-theme-rgb:59,156,255;
    --mix-theme-hue:218deg;
}

html[data-mix-theme="green"]{
    --mix-theme-accent:#0f9f4a;
    --mix-theme-bright:#22c55e;
    --mix-theme-deep:#087a36;
    --mix-theme-rgb:34,197,94;
    --mix-theme-hue:124deg;
}

html[data-mix-theme="purple"]{
    --mix-theme-accent:#7c3aed;
    --mix-theme-bright:#a855f7;
    --mix-theme-deep:#5b21b6;
    --mix-theme-rgb:168,85,247;
    --mix-theme-hue:278deg;
}

html[data-mix-theme="orange"]{
    --mix-theme-accent:#e05b00;
    --mix-theme-bright:#ff7a18;
    --mix-theme-deep:#a94200;
    --mix-theme-rgb:255,122,24;
    --mix-theme-hue:31deg;
}

html[data-mix-theme="pink"]{
    --mix-theme-accent:#d91b75;
    --mix-theme-bright:#ff4fa3;
    --mix-theme-deep:#a81258;
    --mix-theme-rgb:255,79,163;
    --mix-theme-hue:334deg;
}

html[data-mix-theme]{
    --mix365-red:var(--mix-theme-bright);
    --mix-live-red:var(--mix-theme-deep);
    --mix-live-red-bright:var(--mix-theme-bright);
    --mix-live-red-soft:rgba(var(--mix-theme-rgb),.28);
    color-scheme:dark;
}

/* Animated site background. */
html[data-mix-theme] #mix365GlobalViceBackground #mix365-shard-canvas,
html[data-mix-theme] #mix365GlobalViceBackground canvas,
html[data-mix-theme] .mix365-section-effects-canvas{
    filter:
        hue-rotate(var(--mix-theme-hue))
        saturate(1.12)
        brightness(1.02) !important;
    transition:filter .28s ease !important;
}

/* Shared homepage/page sections. */
html[data-mix-theme] .mix365-unified-motion{
    background-image:
        radial-gradient(
            circle at 18% 30%,
            rgba(var(--mix-theme-rgb),.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(255,255,255,.035),
            transparent 28%
        ) !important;
}

html[data-mix-theme] .mix365-unified-motion + .mix365-unified-motion{
    border-top-color:rgba(var(--mix-theme-rgb),.20) !important;
}

html[data-mix-theme] .mix365-section-effects-glow{
    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--mix-theme-rgb),.55) 0%,
            rgba(var(--mix-theme-rgb),.16) 38%,
            transparent 72%
        ) !important;
}

/* Shared glitch headings. */
html[data-mix-theme] .mix365-glitch-heading{
    text-shadow:
        2px 0 0 rgba(var(--mix-theme-rgb),.20),
        -2px 0 0 rgba(255,255,255,.05),
        0 0 28px rgba(var(--mix-theme-rgb),.10) !important;
}

html[data-mix-theme] .mix365-glitch-heading::before{
    color:rgba(var(--mix-theme-rgb),.86) !important;
    text-shadow:3px 0 rgba(var(--mix-theme-rgb),.34) !important;
}

/* Shared card highlights. */
html[data-mix-theme] .mix365-latest-card:hover,
html[data-mix-theme] .mix365-fresh-card:hover,
html[data-mix-theme] .mix365-weekly-card:hover,
html[data-mix-theme] .mix365-admin-card:hover,
html[data-mix-theme] .mix365-born-stat:hover,
html[data-mix-theme] .mix365-today-card:hover,
html[data-mix-theme] .mix365-live-preview-card:hover,
html[data-mix-theme] .mix365-newsletter-panel:hover{
    border-color:rgba(var(--mix-theme-rgb),.72) !important;
    box-shadow:
        0 32px 82px rgba(0,0,0,.58),
        0 0 36px rgba(var(--mix-theme-rgb),.16) !important;
}

/* Shared primary controls that previously used the red/pink accent. */
html[data-mix-theme] .mix365-live-button,
html[data-mix-theme] .mix365-live-outline-button:hover,
html[data-mix-theme] .mix365-today-primary,
html[data-mix-theme] .mix365-today-secondary:hover,
html[data-mix-theme] .mix365-recording-play,
html[data-mix-theme] .mix365-recording-favourite.is-active,
html[data-mix-theme] .mix365-latest-view-all:hover,
html[data-mix-theme] .mix365-fresh-play,
html[data-mix-theme] .mix365-fresh-favourite.is-active,
html[data-mix-theme] .mix365-weekly-schedule-button,
html[data-mix-theme] .mix365-admin-button,
html[data-mix-theme] .mix365-newsletter-submit,
html[data-mix-theme] .mix365-newsletter-human-continue{
    background:var(--mix-theme-accent) !important;
    border-color:var(--mix-theme-bright) !important;
    box-shadow:0 12px 30px rgba(var(--mix-theme-rgb),.22) !important;
    color:#fff !important;
}

/* Shared menu/header accents. Specificity beats the header's inline CSS. */
html[data-mix-theme] body #siteHeader #mainNavbar .navbar-toggler[aria-expanded="true"]{
    border-color:var(--mix-theme-bright) !important;
    background:rgba(var(--mix-theme-rgb),.18) !important;
    box-shadow:
        0 0 0 3px rgba(var(--mix-theme-rgb),.12),
        0 0 22px rgba(var(--mix-theme-rgb),.34) !important;
}

html[data-mix-theme] body #siteHeader #mainNavbar #navbarSupportedContent{
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(var(--mix-theme-rgb),.18),
            transparent 28%
        ),
        linear-gradient(180deg,#030304 0%,#070709 100%) !important;
}

html[data-mix-theme] body #siteHeader #mainNavbar .mix365-v38-link:hover,
html[data-mix-theme] body #siteHeader #mainNavbar .mix365-v38-summary:hover{
    text-shadow:
        3px 0 0 var(--mix-theme-bright),
        0 0 18px rgba(var(--mix-theme-rgb),.30) !important;
}

html[data-mix-theme] body #siteHeader #mainNavbar .mix365-v38-title,
html[data-mix-theme] body #siteHeader #mainNavbar .djarea-menu > .mix365-v38-summary{
    color:var(--mix-theme-bright) !important;
    text-shadow:0 0 15px rgba(var(--mix-theme-rgb),.28) !important;
}

html[data-mix-theme] body #siteHeader #mainNavbar .mix365-install-app-btn{
    border-color:rgba(var(--mix-theme-rgb),.72) !important;
}

/* Common decorative focus/selection states. */
html[data-mix-theme] body .mix365-cdn-switch__btn.is-active,
html[data-mix-theme] body .mix365-live-extras-tab.is-active,
html[data-mix-theme] body .mix365-live-admin-tab.is-active,
html[data-mix-theme] body .likes-leaderboard-tab.is-active,
html[data-mix-theme] body .nav-pills .nav-link.active,
html[data-mix-theme] body .nav-tabs .nav-link.active{
    border-color:rgba(var(--mix-theme-rgb),.52) !important;
    background:rgba(var(--mix-theme-rgb),.18) !important;
    box-shadow:0 10px 26px rgba(var(--mix-theme-rgb),.18) !important;
}

html[data-mix-theme] body input:focus,
html[data-mix-theme] body textarea:focus,
html[data-mix-theme] body select:focus,
html[data-mix-theme] body .form-control:focus,
html[data-mix-theme] body .form--control:focus{
    border-color:rgba(var(--mix-theme-rgb),.66) !important;
    box-shadow:0 0 0 .2rem rgba(var(--mix-theme-rgb),.14) !important;
}

/* Genuine status/danger colours deliberately remain red. */
html[data-mix-theme] body .live-badge,
html[data-mix-theme] body .home-live-badge{
    border-color:rgba(255,36,28,.52) !important;
    background:rgba(225,6,0,.16) !important;
    box-shadow:0 12px 30px rgba(225,6,0,.18) !important;
}

html[data-mix-theme] body .live-badge i,
html[data-mix-theme] body .live-badge-inline i,
html[data-mix-theme] body .text-danger,
html[data-mix-theme] body .btn-danger,
html[data-mix-theme] body .is-danger{
    --mix365-red:#ff241c !important;
}

@media (prefers-reduced-motion:reduce){
    html[data-mix-theme] #mix365GlobalViceBackground #mix365-shard-canvas,
    html[data-mix-theme] #mix365GlobalViceBackground canvas,
    html[data-mix-theme] .mix365-section-effects-canvas{
        transition:none !important;
    }
}
/* MIX365 SITE-WIDE MEMBER COLOUR THEME END */