/*
 * MOROXXO Core 1.22.6.12 — exact Energy Flow port.
 * No cards, copy, headings or new page sections are added here.
 * Only the existing formula media area is replaced by the approved animation.
 */

.moroxxo-energy-flow-host {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(320px, 39vw, 650px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: inherit !important;
}

.moroxxo-energy-flow {
    --mef-accent: 255, 193, 88;
    --mef-accent2: 203, 220, 87;
    --mef-pointer-x: 0px;
    --mef-pointer-y: 0px;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
    isolation: isolate;
    perspective: 1600px;
}

.moroxxo-energy-flow--lutein {
    --mef-accent: 203, 220, 87;
    --mef-accent2: 255, 223, 114;
}
.moroxxo-energy-flow--zeaxanthin {
    --mef-accent: 255, 171, 87;
    --mef-accent2: 255, 220, 120;
}
.moroxxo-energy-flow--astaxanthin {
    --mef-accent: 255, 118, 118;
    --mef-accent2: 255, 190, 114;
}

.moroxxo-energy-flow__stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    transform: translate3d(var(--mef-pointer-x), var(--mef-pointer-y), 0);
    transition: transform .15s ease-out;
}

.moroxxo-energy-flow__orbit,
.moroxxo-energy-flow__halo,
.moroxxo-energy-flow__beam,
.moroxxo-energy-flow__layer,
.moroxxo-energy-flow__flow-svg,
.moroxxo-energy-flow__field,
.moroxxo-energy-flow__dot {
    pointer-events: none;
}

.moroxxo-energy-flow__orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 88%;
    height: 48%;
    transform: translate(-50%, -50%) rotateX(74deg);
    border-radius: 50%;
    border: 1px solid rgba(var(--mef-accent), .16);
    box-shadow: inset 0 0 28px rgba(var(--mef-accent), .05);
    animation: moroxxoExactOrbit 18s linear infinite;
    opacity: .66;
    z-index: 0;
}
.moroxxo-energy-flow__orbit::before,
.moroxxo-energy-flow__orbit::after {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1px dashed rgba(var(--mef-accent2), .14);
}
.moroxxo-energy-flow__orbit::after {
    inset: 24%;
    border-color: rgba(var(--mef-accent), .10);
}

.moroxxo-energy-flow__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 91%;
    height: 45%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:
        radial-gradient(circle at 24% 50%, rgba(var(--mef-accent), .22), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(var(--mef-accent2), .54), transparent 13%),
        radial-gradient(circle at 76% 50%, rgba(var(--mef-accent), .20), transparent 26%);
    filter: blur(64px);
    animation: moroxxoExactHalo 6.8s ease-in-out infinite;
    z-index: 0;
}

.moroxxo-energy-flow__beam {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 16px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--mef-accent), .10) 18%,
        rgba(var(--mef-accent2), .85) 50%,
        rgba(var(--mef-accent), .10) 82%,
        transparent 100%
    );
    filter: blur(12px);
    animation: moroxxoExactBeam 4.2s ease-in-out infinite;
    opacity: .76;
    z-index: 1;
}

.moroxxo-energy-flow__formula-shell {
    --mef-formula-image: none;
    position: relative;
    width: min(92%, 1000px);
    aspect-ratio: 928 / 281;
    transform: translateZ(40px);
    z-index: 3;
    will-change: transform;
}

.moroxxo-energy-flow__formula-shell::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 49%;
    height: 16px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--mef-accent), .10) 18%,
        rgba(var(--mef-accent2), .85) 50%,
        rgba(var(--mef-accent), .10) 82%,
        transparent 100%
    );
    filter: blur(12px);
    animation: moroxxoExactBeam 4.2s ease-in-out infinite;
    pointer-events: none;
}

.moroxxo-energy-flow__layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.moroxxo-energy-flow__base {
    background-image: var(--mef-formula-image);
    filter: brightness(.46) contrast(1.15) drop-shadow(0 1px 0 rgba(255,255,255,.15));
    opacity: .96;
    z-index: 5;
}

.moroxxo-energy-flow__glow-a {
    background-image: var(--mef-formula-image);
    filter: sepia(1) saturate(3.2) hue-rotate(-5deg) brightness(1.32) blur(8px);
    opacity: .16;
    mix-blend-mode: multiply;
    z-index: 1;
}
.moroxxo-energy-flow--lutein .moroxxo-energy-flow__glow-a {
    filter: sepia(1) saturate(3.2) hue-rotate(3deg) brightness(1.32) blur(8px);
}
.moroxxo-energy-flow--zeaxanthin .moroxxo-energy-flow__glow-a {
    filter: sepia(1) saturate(3.2) hue-rotate(-5deg) brightness(1.32) blur(8px);
}
.moroxxo-energy-flow--astaxanthin .moroxxo-energy-flow__glow-a {
    filter: sepia(1) saturate(3.0) hue-rotate(-5deg) brightness(1.35) blur(8px);
    opacity: .18;
}

.moroxxo-energy-flow__glow-b {
    background-image: var(--mef-formula-image);
    filter: sepia(1) saturate(4.0) hue-rotate(18deg) brightness(1.16) blur(15px);
    opacity: .12;
    mix-blend-mode: multiply;
    z-index: 1;
}
.moroxxo-energy-flow--lutein .moroxxo-energy-flow__glow-b {
    filter: sepia(1) saturate(4.0) hue-rotate(58deg) brightness(1.18) blur(15px);
}
.moroxxo-energy-flow--astaxanthin .moroxxo-energy-flow__glow-b {
    filter: sepia(1) saturate(4.0) hue-rotate(320deg) brightness(1.18) blur(15px);
}

.moroxxo-energy-flow__trace,
.moroxxo-energy-flow__sheen {
    position: absolute;
    inset: 0;
    -webkit-mask-image: var(--mef-formula-image);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--mef-formula-image);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}

.moroxxo-energy-flow__trace {
    z-index: 3;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--mef-accent), 0) 10%,
        rgba(var(--mef-accent), .12) 24%,
        rgba(var(--mef-accent2), .58) 36%,
        rgba(var(--mef-accent), .72) 50%,
        rgba(var(--mef-accent2), .58) 64%,
        rgba(var(--mef-accent), .12) 76%,
        rgba(var(--mef-accent), 0) 92%,
        transparent 100%
    );
    filter: blur(5px);
    background-size: 240% 100%;
    animation: moroxxoExactTrace 3.8s linear infinite;
    opacity: .82;
    mix-blend-mode: multiply;
}

.moroxxo-energy-flow__sheen {
    z-index: 4;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0) 18%,
        rgba(255,250,221,.18) 42%,
        rgba(var(--mef-accent2), .65) 50%,
        rgba(var(--mef-accent), .28) 57%,
        rgba(255,255,255,0) 82%,
        transparent 100%
    );
    filter: blur(1px);
    background-size: 220% 100%;
    animation: moroxxoExactSweep 4.6s linear infinite;
    opacity: .95;
}

.moroxxo-energy-flow__flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 7;
}

.moroxxo-energy-flow__guide {
    fill: none;
    stroke: rgba(var(--mef-accent), .18);
    stroke-width: 1.2;
    stroke-dasharray: 3 7;
    opacity: .25;
}
.moroxxo-energy-flow__path {
    fill: none;
    stroke: rgba(var(--mef-accent), .22);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: blur(.15px);
}
.moroxxo-energy-flow__particle {
    fill: rgb(var(--mef-accent2));
    filter: url(#moroxxoExactSoftGlow);
}
.moroxxo-energy-flow__particle--big {
    filter: url(#moroxxoExactStrongGlow);
}
.moroxxo-energy-flow__spark {
    fill: rgb(var(--mef-accent));
    filter: url(#moroxxoExactSparkGlow);
}

.moroxxo-energy-flow__field {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.moroxxo-energy-flow__dot {
    position: absolute;
    left: var(--mef-x);
    top: var(--mef-y);
    width: var(--mef-size);
    height: var(--mef-size);
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255,255,255,.95),
        rgba(var(--mef-accent2), .64) 38%,
        rgba(var(--mef-accent2), .08) 66%,
        transparent 74%
    );
    box-shadow:
        0 0 18px rgba(var(--mef-accent2), .58),
        0 0 34px rgba(var(--mef-accent), .14);
    animation: moroxxoExactDot var(--mef-duration) ease-in-out infinite;
    animation-delay: var(--mef-delay);
    opacity: .86;
}
.moroxxo-energy-flow__dot--accent {
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255,255,255,.95),
        rgba(var(--mef-accent), .62) 38%,
        rgba(var(--mef-accent), .08) 66%,
        transparent 74%
    );
    box-shadow:
        0 0 18px rgba(var(--mef-accent), .48),
        0 0 34px rgba(var(--mef-accent), .12);
}

@keyframes moroxxoExactOrbit {
    to { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(360deg); }
}
@keyframes moroxxoExactHalo {
    0%,100% { opacity: .62; transform: translate(-50%, -50%) scale(.97); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes moroxxoExactBeam {
    0%,100% { opacity: .40; transform: translateY(-50%) scaleX(.96); }
    50% { opacity: .82; transform: translateY(-50%) scaleX(1.03); }
}
@keyframes moroxxoExactSweep {
    0% { background-position: -140% 0; }
    100% { background-position: 160% 0; }
}
@keyframes moroxxoExactTrace {
    0% { background-position: -160% 0; }
    100% { background-position: 170% 0; }
}
@keyframes moroxxoExactDot {
    0%,100% { transform: translate3d(0,0,0) scale(.84); opacity: .34; }
    50% { transform: translate3d(10px,-15px,0) scale(1.16); opacity: 1; }
}

@media (max-width: 920px) {
    .moroxxo-energy-flow-host {
        min-height: clamp(260px, 70vw, 470px) !important;
    }
    .moroxxo-energy-flow__formula-shell {
        width: 95%;
    }
    .moroxxo-energy-flow__orbit {
        width: 96%;
        height: 52%;
    }
    .moroxxo-energy-flow__halo {
        width: 100%;
        height: 50%;
        filter: blur(42px);
    }
}

/* Motion intentionally remains enabled on desktop and mobile. */

/* Product cards keep their own proportions; homepage motion remains unchanged. */
.mx-product-page .mx-product-ingredient-media.moroxxo-energy-flow-host{min-height:clamp(280px,28vw,460px)!important;height:100%}
@media(max-width:600px){.mx-product-page .mx-product-ingredient-media.moroxxo-energy-flow-host{min-height:280px!important}}