/* Login streak charged state (day 5+): flame motion, pulse rings, count sync.
   Depends on: UserMenu.tml SVG, .ec-navbar-pill--streak-charged.
   Imported via UserMenu.java. Motion may move to streak-charged-anim.js later.
   Charged motion is functional (active bonus) — v3/v4 only; v1/v2 stay static. */
.ec-navbar-pill__flame {
    position: relative;
    z-index: 1;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

.ec-navbar-pill__flame-outer path,
.ec-navbar-pill__flame-outer use,
.ec-navbar-pill__flame-inner {
    shape-rendering: geometricPrecision;
}

.ec-navbar-pill__flame-outer,
.ec-navbar-pill__flame-inner,
.ec-navbar-pill__flame-halo,
.ec-navbar-pill__flame-glow,
.ec-navbar-pill__flame-ember {
    transform-box: fill-box;
}

.ec-navbar-pill__flame-glow {
    opacity: 0;
    transform-origin: 50% 100%;
}

.ec-navbar-pill__flame-outer,
.ec-navbar-pill__flame-inner {
    transform-origin: 50% 100%;
}

.ec-navbar-pill__flame-halo {
    transform-origin: 50% 65%;
    opacity: 0;
}

.ec-navbar-pill__flame-ember {
    opacity: 0;
    transform-origin: center;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged {
    --ec-streak-ring-duration: 4s;
    --ec-streak-ring-stagger: 1.35s;
    --ec-flame-flicker-outer: 0.62s;
    --ec-flame-flicker-inner: 0.38s;
    --ec-flame-glow-pulse: 1.1s;
    --ec-flame-halo-pulse: 1.1s;
    --ec-flame-heat-tip: 0.38s;
    --ec-flame-heat-base: 0.48s;
    --ec-flame-ember-rise: 0.62s;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::before,
html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::before,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: calc(50% + 3px);
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 153, 0, 0.85);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 180, 60, 0.55), 0 0 12px rgba(255, 102, 0, 0.35);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.3);
    transform-origin: center;
    animation: ec-streak-ring var(--ec-streak-ring-duration) ease-out infinite;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after {
    animation-delay: var(--ec-streak-ring-stagger);
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak {
    position: relative;
    z-index: 1;
    overflow: visible;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__label--stacked,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__label--stacked {
    position: relative;
    z-index: 1;
    display: inline-block;
    transform-origin: center center;
    animation: ec-streak-count-pulse var(--ec-streak-ring-duration) ease-in-out infinite;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-glow,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-glow {
    animation: ec-flame-outer-flicker var(--ec-flame-flicker-outer) linear infinite,
        ec-flame-glow-pulse var(--ec-flame-glow-pulse) ease-in-out infinite alternate;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-halo,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-halo {
    animation: ec-flame-halo-pulse var(--ec-flame-halo-pulse) ease-in-out infinite alternate;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--tip,
html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--tip-inner,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--tip,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--tip-inner {
    animation: ec-flame-heat-tip var(--ec-flame-heat-tip) ease-in-out infinite alternate;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--base,
html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--base-inner,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--base,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--base-inner {
    animation: ec-flame-heat-base var(--ec-flame-heat-base) ease-in-out infinite alternate;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-outer,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-outer {
    animation: ec-flame-outer-flicker var(--ec-flame-flicker-outer) linear infinite;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-inner,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-inner {
    animation: ec-flame-inner-flicker var(--ec-flame-flicker-inner) linear infinite;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember {
    animation: ec-flame-ember-rise var(--ec-flame-ember-rise) ease-out infinite;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--1,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--1 {
    animation-delay: 0s;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--2,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--2 {
    animation-delay: 0.18s;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--3,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--3 {
    animation-delay: 0.34s;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--4,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--4 {
    animation-delay: 0.5s;
}

html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged.ec-navbar-pill--streak-charged-animating,
html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged.ec-navbar-pill--streak-charged-animating {
    --ec-flame-flicker-outer: 0.34s;
    --ec-flame-flicker-inner: 0.2s;
    --ec-flame-glow-pulse: 0.6s;
    --ec-flame-halo-pulse: 0.55s;
    --ec-flame-heat-tip: 0.22s;
    --ec-flame-heat-base: 0.28s;
    --ec-flame-ember-rise: 0.38s;
}

/* v1/v2 (and default without layout class): charged look, no pulse motion */
html:not(.ec-nav-layout-v3):not(.ec-nav-layout-v4) .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::before,
html:not(.ec-nav-layout-v3):not(.ec-nav-layout-v4) .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after {
    content: none;
}

html:not(.ec-nav-layout-v3):not(.ec-nav-layout-v4) .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-halo {
    opacity: 0.5;
    transform: scale(1);
}

html:not(.ec-nav-layout-v3):not(.ec-nav-layout-v4) .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-glow {
    opacity: 0.85;
}

html.ec-nav-layout-v1 .ec-navbar-pill--streak-charged .ec-navbar-pill__label--inline,
html.ec-nav-layout-v1 .ec-navbar-pill--streak-charged .ec-navbar-pill__label--stacked,
html.ec-nav-layout-v2 .ec-navbar-pill--streak-charged .ec-navbar-pill__label--inline,
html.ec-nav-layout-v2 .ec-navbar-pill--streak-charged .ec-navbar-pill__label--stacked {
    animation: none;
    transform: none;
    text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged.ec-navbar-pill--noop,
    html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged.ec-navbar-pill--noop {
        pointer-events: auto;
        cursor: pointer;
    }

    html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged:hover,
    html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged:hover {
        --ec-flame-flicker-outer: 0.34s;
        --ec-flame-flicker-inner: 0.2s;
        --ec-flame-glow-pulse: 0.6s;
        --ec-flame-halo-pulse: 0.55s;
        --ec-flame-heat-tip: 0.22s;
        --ec-flame-heat-base: 0.28s;
        --ec-flame-ember-rise: 0.38s;
    }
}

@media (hover: none) {
    html.ec-nav-layout-v3 .ec-navbar-pill--streak-charged.ec-navbar-pill--noop,
    html.ec-nav-layout-v4 .ec-navbar-pill--streak-charged.ec-navbar-pill--noop {
        pointer-events: auto;
    }
}

@keyframes ec-streak-ring {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    8% {
        opacity: 0.7;
    }

    42% {
        transform: scale(2.85);
        opacity: 0;
    }

    100% {
        transform: scale(2.85);
        opacity: 0;
    }
}

@keyframes ec-streak-count-pulse {
    0%,
    24%,
    38%,
    58%,
    72%,
    100% {
        transform: scale(1);
    }

    /* Heartbeat 1 — sync met ring 1 */
    13% {
        transform: scale(1.18);
    }

    16% {
        transform: scale(1);
    }

    /* Heartbeat 2 — sync met ring 2 */
    47% {
        transform: scale(1.18);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes ec-flame-glow-pulse {
    0% {
        opacity: 0.72;
    }

    100% {
        opacity: 1;
    }
}

@keyframes ec-flame-halo-pulse {
    0% {
        opacity: 0.42;
        transform: scale(0.94);
    }

    100% {
        opacity: 0.68;
        transform: scale(1.08);
    }
}

@keyframes ec-flame-heat-tip {
    0% {
        stop-color: #FFE100;
    }

    100% {
        stop-color: #FFFFFF;
    }
}

@keyframes ec-flame-heat-base {
    0% {
        stop-color: #FF0066;
    }

    100% {
        stop-color: #FF3388;
    }
}

@keyframes ec-flame-ember-rise {
    0% {
        opacity: 0;
        transform: translateY(1px) scale(0.4);
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-5px) scale(0.05);
    }
}

@keyframes ec-flame-outer-flicker {
    0% {
        transform: rotate(-5deg) scale(0.98, 1);
    }

    14% {
        transform: rotate(-2deg) scale(1.02, 1.1);
    }

    28% {
        transform: rotate(4deg) scale(0.98, 1.12);
    }

    42% {
        transform: rotate(6deg) scale(1.02, 1.05);
    }

    57% {
        transform: rotate(2deg) scale(0.97, 1.12);
    }

    71% {
        transform: rotate(-4deg) scale(1.03, 1.03);
    }

    86% {
        transform: rotate(-6deg) scale(0.98, 1.1);
    }

    100% {
        transform: rotate(-5deg) scale(0.98, 1);
    }
}

@keyframes ec-flame-inner-flicker {
    0% {
        transform: rotate(3deg) scale(0.95, 0.98);
    }

    20% {
        transform: rotate(-4deg) scale(1.07, 1.1);
    }

    40% {
        transform: rotate(5deg) scale(0.93, 1.07);
    }

    60% {
        transform: rotate(-3deg) scale(1.08, 1.12);
    }

    80% {
        transform: rotate(2deg) scale(0.96, 1.08);
    }

    100% {
        transform: rotate(3deg) scale(0.95, 0.98);
    }
}