/* ==========================================================================
   The streak flame (ui/streak-flame.js): the burning flame, the top-bar chip,
   and the celebration when a streak starts or grows.
   ========================================================================== */

/* ── The flame ─────────────────────────────────────────────────────────────── */

.tp-flame {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    isolation: isolate;
    width: 18px;
    height: 22px;
    --spark-rise: -12px;
}
.tp-flame--card { width: 22px; height: 28px; --spark-rise: -15px; }
.tp-flame--hero { width: 92px; height: 116px; --spark-rise: -46px; }

.tp-flame__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 3px rgba(255, 128, 40, 0.55));
}
.tp-flame--hero .tp-flame__svg { filter: drop-shadow(0 0 14px rgba(255, 128, 40, 0.65)); }

.tp-flame__outer,
.tp-flame__inner {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

/* Two layers at different tempos never line up, so the flame never loops visibly. */
.tp-flame__outer { animation: tp-flame-dance 1.15s ease-in-out infinite alternate; }
.tp-flame__inner { animation: tp-flame-core 0.72s ease-in-out infinite alternate; }

@keyframes tp-flame-dance {
    0%   { transform: scale(1, 1) skewX(0deg); }
    22%  { transform: scale(0.96, 1.06) skewX(2.5deg); }
    48%  { transform: scale(1.03, 0.96) skewX(-2deg); }
    74%  { transform: scale(0.97, 1.05) skewX(1.5deg); }
    100% { transform: scale(1.01, 0.99) skewX(-2.5deg); }
}

@keyframes tp-flame-core {
    0%   { transform: scale(1, 1) translateY(0); opacity: 1; }
    50%  { transform: scale(0.9, 1.1) translateY(-0.6px); opacity: 0.92; }
    100% { transform: scale(1.05, 0.94) translateY(0.4px); opacity: 1; }
}

.tp-flame__glow {
    position: absolute;
    z-index: -1;
    inset: -45%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 66%, rgba(255, 150, 50, 0.5), rgba(255, 110, 30, 0.12) 42%, transparent 64%);
    animation: tp-flame-glow 1.7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tp-flame-glow {
    0%, 100% { opacity: 0.75; transform: scale(0.95); }
    50%      { opacity: 1; transform: scale(1.08); }
}

.tp-flame__spark {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: #ffd27a;
    box-shadow: 0 0 4px #ff9a3c;
    opacity: 0;
    animation: tp-flame-spark 1.9s ease-out infinite;
    pointer-events: none;
}
.tp-flame__spark:nth-of-type(2) { --x: -5px; animation-delay: 0s; }
.tp-flame__spark:nth-of-type(3) { --x: 4px; animation-delay: 0.65s; }
.tp-flame__spark:nth-of-type(4) { --x: 1px; animation-delay: 1.3s; }
.tp-flame--hero .tp-flame__spark { width: 6px; height: 6px; }
.tp-flame--hero .tp-flame__spark:nth-of-type(2) { --x: -22px; }
.tp-flame--hero .tp-flame__spark:nth-of-type(3) { --x: 18px; }
.tp-flame--hero .tp-flame__spark:nth-of-type(4) { --x: 4px; }

@keyframes tp-flame-spark {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x, 0px), var(--spark-rise)) scale(0.4); }
}

/* ── The top-bar chip ──────────────────────────────────────────────────────── */

.tp-streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    margin-right: 6px;
    padding: 0 12px 0 9px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #ff7a2b 13%, var(--tp-color-surface-raised, #222));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #ff8a3c 34%, transparent),
        0 6px 16px -10px rgba(255, 110, 30, 0.6);
    color: var(--tp-color-text);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform 100ms ease-out;
}
.tp-streak-chip[hidden] { display: none; }
.tp-streak-chip:active { transform: scale(0.95); }
.tp-streak-chip:focus-visible { outline: 2px solid var(--tp-color-focus, #ff9a3c); outline-offset: 2px; }

/* Not yet extended today: the flame burns low and the count steps back. */
.tp-streak-chip[data-lit="low"] { background: color-mix(in srgb, var(--tp-color-text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 12%, transparent); }
.tp-streak-chip[data-lit="low"] .tp-flame { transform: scale(0.86); filter: saturate(0.55) brightness(0.85); }
.tp-streak-chip[data-lit="low"] .tp-streak-chip__count { color: var(--tp-color-text-muted); }

.tp-streak-chip.is-landed { animation: tp-chip-land 520ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tp-chip-land {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); box-shadow: inset 0 0 0 1px #ff9a3c, 0 0 0 8px rgba(255, 140, 50, 0.25); }
    100% { transform: scale(1); }
}

/* On the home card, a streak not started yet is a cold, still flame. */
.tp-dash-habit[data-streak="zero"] .tp-flame { filter: grayscale(1) opacity(0.55); }
.tp-dash-habit[data-streak="zero"] .tp-flame :is(.tp-flame__outer, .tp-flame__inner, .tp-flame__glow, .tp-flame__spark) { animation: none; }
.tp-dash-habit[data-streak="zero"] .tp-flame__spark { display: none; }

/* ── The celebration ───────────────────────────────────────────────────────── */

.tp-streak-burst {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(8, 6, 4, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 240ms ease;
}
.tp-streak-burst.is-in { opacity: 1; }
.tp-streak-burst.is-out { opacity: 0; transition-duration: 300ms; }

.tp-streak-burst__card {
    width: min(340px, 100%);
    padding: 22px 22px 20px;
    border-radius: 28px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(255, 130, 40, 0.22), transparent 62%),
        color-mix(in srgb, var(--tp-color-surface-raised, #1f1a16) 92%, transparent);
    box-shadow:
        inset 0 0 0 1px rgba(255, 170, 90, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 30px 60px -20px rgba(0, 0, 0, 0.7);
    text-align: center;
    transform: translateY(14px) scale(0.96);
    transition: transform 380ms cubic-bezier(.2, 1.3, .4, 1);
}
.tp-streak-burst.is-in .tp-streak-burst__card { transform: none; }

.tp-streak-burst__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.tp-streak-burst__stage > .tp-flame { animation: tp-burst-ignite 900ms cubic-bezier(.2, 1.45, .4, 1) both; }
@keyframes tp-burst-ignite {
    0%   { transform: translateY(24px) scale(0.05); opacity: 0; }
    35%  { opacity: 1; }
    70%  { transform: translateY(-4px) scale(1.12); }
    100% { transform: none; }
}

.tp-streak-burst__ring {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 160, 60, 0.38), rgba(255, 110, 30, 0.1) 52%, transparent 70%);
    animation: tp-burst-ring 1100ms ease-out both;
}
@keyframes tp-burst-ring {
    0%   { transform: scale(0.2); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: scale(1.15); opacity: 0.8; }
}

.tp-streak-burst__ember {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #ffc15e;
    box-shadow: 0 0 8px #ff8a3c;
    opacity: 0;
    transform: rotate(var(--angle)) translateY(0);
    animation: tp-burst-ember 900ms ease-out both;
    animation-delay: calc(260ms + var(--delay, 0ms));
}
@keyframes tp-burst-ember {
    0%   { opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(1); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--angle)) translateY(-78px) scale(0.35); }
}

.tp-streak-burst__number {
    margin-top: -6px;
    background: linear-gradient(180deg, #ffe39a, #ff8a3c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    animation: tp-burst-number 600ms cubic-bezier(.2, 1.5, .4, 1) 380ms both;
}
@keyframes tp-burst-number {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

.tp-streak-burst__title {
    margin: 8px 0 6px;
    color: var(--tp-color-text, #fff);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.tp-streak-burst__text {
    margin: 0 0 18px;
    color: var(--tp-color-text-muted, #bbb);
    font-size: 14px;
    line-height: 1.45;
}

.tp-streak-burst__ok {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffb347, #ff7a2b);
    color: #2a1406;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(255, 110, 30, 0.9);
}
.tp-streak-burst__ok:focus-visible { outline: 2px solid #ffd27a; outline-offset: 3px; }

.tp-flame--flyer {
    position: fixed;
    z-index: 1001;
    pointer-events: none;
}

/* ── Calm when asked ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .tp-flame :is(.tp-flame__outer, .tp-flame__inner, .tp-flame__glow),
    .tp-streak-burst__stage > .tp-flame,
    .tp-streak-burst__ring,
    .tp-streak-burst__number,
    .tp-streak-chip.is-landed { animation: none; }
    .tp-flame__spark,
    .tp-streak-burst__ember { display: none; }
    .tp-streak-burst,
    .tp-streak-burst__card { transition: none; }
}

/* The top bar styles its buttons' text; the count keeps the warm colour. */
.tp-topbar__account .tp-streak-chip .tp-streak-chip__count { color: #ffb24a; }
html[data-theme="steppe-light"] .tp-topbar__account .tp-streak-chip .tp-streak-chip__count { color: #c2501a; }
.tp-topbar__account .tp-streak-chip[data-lit="low"] .tp-streak-chip__count { color: var(--tp-color-text-muted); }