/* 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. Production: v10 motion (formerly html.ec-nav-layout-v10). */



.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;

}



.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;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak {

    --ec-streak-ring-size: 24px;

    --ec-streak-ring-offset-y: 0px;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::before,

.ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after {

    content: "";

    position: absolute;

    z-index: 0;

    left: 50%;

    top: calc(50% + var(--ec-streak-ring-offset-y, 0px));

    width: var(--ec-streak-ring-size, 18px);

    height: var(--ec-streak-ring-size, 18px);

    margin: calc(var(--ec-streak-ring-size, 18px) / -2) 0 0 calc(var(--ec-streak-ring-size, 18px) / -2);

    border: var(--ec-streak-ring-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;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after {

    animation-delay: var(--ec-streak-ring-stagger);

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak {

    position: relative;

    z-index: 1;

    overflow: visible;

}



@media (max-width: 404.9px) {

    .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak {

        --ec-streak-ring-size: 17px;

        --ec-streak-ring-offset-y: 0px;

    }

}



@media (max-width: 334px) {

    .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak {

        --ec-streak-ring-size: 16px;

        --ec-streak-ring-offset-y: 0px;

    }

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__label--inline {

    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;

}



.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;

}



.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;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--tip,

.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;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--base,

.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;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-outer {

    animation: ec-flame-outer-flicker var(--ec-flame-flicker-outer) linear infinite;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-inner {

    animation: ec-flame-inner-flicker var(--ec-flame-flicker-inner) linear infinite;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember {

    animation: ec-flame-ember-rise var(--ec-flame-ember-rise) ease-out infinite;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--1 {

    animation-delay: 0s;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--2 {

    animation-delay: 0.18s;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--3 {

    animation-delay: 0.34s;

}



.ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember--4 {

    animation-delay: 0.5s;

}



.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;

}



@media (hover: hover) and (pointer: fine) {

    .ec-navbar-pill--streak-charged.ec-navbar-pill--noop {

        pointer-events: auto;

        cursor: pointer;

    }



    .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) {

    .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;

    }



    22% {

        transform: scale(1.65);

        opacity: 0.35;

    }



    30% {

        transform: scale(2.15);

        opacity: 0;

    }



    100% {

        transform: scale(2.85);

        opacity: 0;

    }

}



@keyframes ec-streak-count-pulse {

    0%,

    24%,

    38%,

    58%,

    72%,

    100% {

        transform: scale(1);

    }



    13% {

        transform: scale(1.18);

    }



    16% {

        transform: scale(1);

    }



    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);

    }

}



@media (prefers-reduced-motion: reduce) {

    .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::before,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__icon--streak::after,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__label--inline,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-glow,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-halo,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-outer,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-inner,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-ember,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--tip,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--tip-inner,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--base,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-stop--base-inner {

        animation: none !important;

    }



    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-glow,

    .ec-navbar-pill--streak-charged .ec-navbar-pill__flame-halo {

        opacity: 0.85;

    }

}