/* ═══════════════════════════════════════════════════════
   1% — Animações Lottie & SVG
   ═══════════════════════════════════════════════════════ */

/* ─── NAV SVG ICONS ───────────────────────────────── */
.nav-svg{width:24px;height:24px;display:block;margin:0 auto}
.nav-svg path,.nav-svg line,.nav-svg rect,.nav-svg circle,.nav-svg polyline{
  stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .25s,fill .25s
}
.nav-btn.active .nav-svg path,
.nav-btn.active .nav-svg line,
.nav-btn.active .nav-svg rect,
.nav-btn.active .nav-svg circle,
.nav-btn.active .nav-svg polyline{stroke:var(--accent)}

/* bounce on active */
.nav-btn.active .nav-svg{animation:navBounce .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes navBounce{
  0%{transform:scale(1)}
  30%{transform:scale(1.22)}
  60%{transform:scale(.92)}
  100%{transform:scale(1)}
}

/* nav icon tap ripple */
.nav-btn{overflow:hidden}
.nav-btn::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(212,255,77,.12) 0%,transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none
}
.nav-btn.active::after{opacity:1}

/* ─── HEADER ANIMATED STREAK (DUOLINGO STYLE) ─────── */
.streak-flame-svg{width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:2px}
.streak-flame-svg path{transition:fill .3s}
.streak-flame-svg .flame-outer{fill:var(--gold)}
.streak-flame-svg .flame-inner{fill:var(--red)}
/* Duolingo-style: continuous elastic bounce + flicker */
.streak-flame-svg{
  animation:duoFire 1.2s cubic-bezier(.34,1.56,.64,1) infinite;
  transform-origin:bottom center;
  filter:drop-shadow(0 0 6px rgba(255,209,102,.4))
}
@keyframes duoFire{
  0%   {transform:scaleY(1) scaleX(1) rotate(0deg)}
  8%   {transform:scaleY(1.18) scaleX(.88) rotate(-2deg)}
  18%  {transform:scaleY(.92) scaleX(1.06) rotate(1.5deg)}
  28%  {transform:scaleY(1.12) scaleX(.93) rotate(-1deg)}
  40%  {transform:scaleY(.96) scaleX(1.03) rotate(.8deg)}
  52%  {transform:scaleY(1.08) scaleX(.95) rotate(-1.2deg)}
  65%  {transform:scaleY(.94) scaleX(1.04) rotate(.5deg)}
  78%  {transform:scaleY(1.05) scaleX(.97) rotate(-.8deg)}
  88%  {transform:scaleY(.97) scaleX(1.02) rotate(.3deg)}
  100% {transform:scaleY(1) scaleX(1) rotate(0deg)}
}
/* secondary flicker on the inner flame */
.streak-flame-svg .flame-inner{
  animation:innerFlicker 0.8s ease-in-out infinite alternate;
  transform-origin:bottom center
}
@keyframes innerFlicker{
  0%  {opacity:.85;transform:scaleY(1) translateY(0)}
  50% {opacity:1;transform:scaleY(1.15) translateY(-1px)}
  100%{opacity:.9;transform:scaleY(.9) translateY(1px)}
}
/* glow pulse behind the flame */
.hdr-streak{position:relative}
.hdr-streak::before{
  content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,209,102,.35),transparent 70%);
  animation:flameGlow 1.2s ease-in-out infinite alternate;pointer-events:none
}
@keyframes flameGlow{
  0%{opacity:.4;transform:translateY(-50%) scale(.8)}
  100%{opacity:.7;transform:translateY(-50%) scale(1.3)}
}

/* profile streak section — same Duolingo fire */
.streak-icon .streak-flame-lg{width:40px;height:40px;display:block;transform-origin:bottom center;filter:drop-shadow(0 0 8px rgba(255,209,102,.5))}
.streak-icon .streak-flame-lg path{fill:var(--gold)}
.streak-icon .streak-flame-lg .flame-inner{fill:var(--red)}
.streak-icon .streak-flame-lg{animation:duoFire 1.2s cubic-bezier(.34,1.56,.64,1) infinite}
.streak-icon .streak-flame-lg .flame-inner{animation:innerFlicker 0.8s ease-in-out infinite alternate;transform-origin:bottom center}

/* ─── INLINE SVG ICON BASE ───────────────────────── */
.svg-inline-icon{width:18px;height:18px;display:inline-block;vertical-align:middle}

/* ─── LOTTIE CONTAINERS ───────────────────────────── */
.lottie-container{display:flex;align-items:center;justify-content:center;pointer-events:none}
.lottie-inline{width:48px;height:48px;display:inline-block}
.lottie-empty{width:120px;height:120px;margin:0 auto 14px}
.lottie-success{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;z-index:999;pointer-events:none}

/* ─── STREAK CELEBRATION ───────────────────────────── */
.streak-celebration-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:1000;pointer-events:auto;opacity:0;transition:opacity .3s ease}
.streak-celebration-backdrop.active{opacity:1}
.streak-celebration-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;z-index:1001;width:100%;max-width:340px;pointer-events:auto}
.streak-celebration-backdrop.active .streak-celebration-content{animation:celebrateZoom .5s cubic-bezier(.2,.88,.2,1) forwards}
.streak-celebration-body{position:relative;background:linear-gradient(135deg,rgba(255,209,102,.14),rgba(77,255,176,.12));border:1px solid rgba(255,209,102,.4);border-radius:40px;padding:48px 32px;text-align:center;box-shadow:0 20px 60px rgba(255,209,102,.2)}
.streak-celebration-icon{width:80px;height:80px;margin:0 auto 16px;font-size:56px;display:flex;align-items:center;justify-content:center;animation:celebrateFlameFloat .6s cubic-bezier(.34,1.56,.64,1);color:#ffd166}
.streak-celebration-icon svg{width:56px;height:56px}
.streak-celebration-text{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--text);letter-spacing:1px;margin-bottom:12px;opacity:0;animation:textFadeIn .4s ease .3s forwards}
.streak-celebration-count{font-size:32px;font-weight:900;background:linear-gradient(135deg,#ffd166,#d4ff4d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;opacity:0;animation:countUpReveal .5s ease .5s forwards;margin-bottom:20px}
.streak-celebration-close{width:100%;padding:12px 16px;background:linear-gradient(135deg,rgba(212,255,77,.22),rgba(77,255,176,.18));border:1.5px solid rgba(212,255,77,.5);border-radius:12px;color:var(--text);font-family:var(--font);font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;opacity:0;animation:buttonFadeIn .4s ease .6s forwards;letter-spacing:.5px;pointer-events:auto}
.streak-celebration-close:hover{background:linear-gradient(135deg,rgba(212,255,77,.35),rgba(77,255,176,.28));border-color:rgba(212,255,77,.8);transform:translateY(-1px)}
.streak-celebration-close:active{transform:translateY(0) scale(.98)}
.streak-confetti-piece{position:absolute;width:8px;height:8px;border-radius:50%;top:50%;left:50%;will-change:transform,opacity;pointer-events:none}
.streak-confetti-piece{animation:confettiExplode .8s cubic-bezier(.25,.46,.45,.94) var(--delay,0s) forwards}

@keyframes celebrateZoom{
  from{transform:translate(-50%,-50%) scale(.8);opacity:0}
  50%{transform:translate(-50%,-50%) scale(1.08)}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}
}

@keyframes celebrateFlameFloat{
  0%{transform:scale(0) translateY(20px);opacity:0}
  50%{transform:scale(1.15)}
  100%{transform:scale(1) translateY(0);opacity:1}
}

@keyframes textFadeIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes countUpReveal{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}

@keyframes buttonFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes confettiExplode{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--tx),var(--ty)) rotate(360deg);opacity:0}
}

/* ─── SVG ANIMATED EMPTY STATES ───────────────────── */
.svg-empty{width:100px;height:100px;margin:0 auto 14px;display:block}

/* rest day moon animation */
.svg-moon{animation:moonFloat 3s ease-in-out infinite}
@keyframes moonFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(3deg)}
}
.svg-moon .star{animation:starTwinkle 2s ease-in-out infinite;transform-origin:center}
.svg-moon .star:nth-child(2){animation-delay:.4s}
.svg-moon .star:nth-child(3){animation-delay:.8s}
@keyframes starTwinkle{
  0%,100%{opacity:.3;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.1)}
}

/* error state */
.svg-error{animation:errorShake .5s ease;width:80px;height:80px;margin:0 auto 14px;display:block}
@keyframes errorShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* ─── ANIMATED WATER DROP ──────────────────────────── */
.svg-water-drop{width:22px;height:22px;display:inline-block;vertical-align:middle}
.svg-water-drop path{fill:var(--blue)}
.svg-water-drop{animation:waterBob 2.5s ease-in-out infinite}
@keyframes waterBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* splash effect on add water */
.water-splash{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.water-splash .drop{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--blue);opacity:0
}
.water-splash.animate .drop{animation:splashDrop .6s ease-out forwards}
@keyframes splashDrop{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}
}

/* ─── ANIMATED CHECKMARK SVG ──────────────────────── */
.svg-check-anim{width:28px;height:28px}
.svg-check-anim circle{
  stroke:var(--green);stroke-width:2;fill:none;
  stroke-dasharray:88;stroke-dashoffset:88;
  animation:checkCircle .4s .1s ease forwards
}
.svg-check-anim polyline{
  stroke:var(--green);stroke-width:2.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:28;stroke-dashoffset:28;
  animation:checkDraw .3s .4s ease forwards
}
@keyframes checkCircle{to{stroke-dashoffset:0}}
@keyframes checkDraw{to{stroke-dashoffset:0}}

/* ─── ANIMATED TROPHY SVG ─────────────────────────── */
.svg-trophy-anim{display:inline-block}
.svg-trophy-anim .trophy-body{fill:var(--gold);transition:fill .3s}
.svg-trophy-anim .trophy-star{
  fill:var(--accent);opacity:0;transform-origin:center;
  animation:trophyStar 2s ease-in-out infinite
}
.svg-trophy-anim .trophy-star:nth-child(2){animation-delay:.5s}
.svg-trophy-anim .trophy-star:nth-child(3){animation-delay:1s}
@keyframes trophyStar{
  0%,100%{opacity:0;transform:scale(0) rotate(0deg)}
  50%{opacity:1;transform:scale(1) rotate(180deg)}
}

/* ─── ANIMATED HEART SVG ──────────────────────────── */
.svg-heart-beat{display:inline-block}
.svg-heart-beat path{fill:var(--red)}
.svg-heart-beat{animation:heartBeat 1.4s ease-in-out infinite}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.15)}
  28%{transform:scale(1)}
  42%{transform:scale(1.08)}
  56%{transform:scale(1)}
}

/* ─── LIKE BUTTON ENHANCED ────────────────────────── */
.like-btn .svg-heart-like{width:18px;height:18px;transition:transform .2s}
.like-btn .svg-heart-like path{fill:none;stroke:var(--muted2);stroke-width:2;transition:all .25s}
.like-btn.liked .svg-heart-like path{fill:var(--red);stroke:var(--red)}
.like-btn.liked .svg-heart-like{animation:likePopSvg .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes likePopSvg{
  0%{transform:scale(1)}
  40%{transform:scale(1.35)}
  100%{transform:scale(1)}
}

/* like particles */
.like-particles{position:absolute;inset:0;pointer-events:none}
.like-particle{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--red);opacity:0;left:50%;top:50%
}
.like-btn.liked .like-particle{animation:likeParticle .5s ease-out forwards}
@keyframes likeParticle{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--lx),var(--ly)) scale(0)}
}

/* ─── LOADING ANIMATION (replaces skeleton) ───────── */
.loading-dots{display:flex;gap:8px;justify-content:center;padding:40px 0}
.loading-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  animation:loadBounce .6s ease-in-out infinite alternate
}
.loading-dot:nth-child(2){animation-delay:.15s}
.loading-dot:nth-child(3){animation-delay:.3s}
@keyframes loadBounce{
  0%{transform:translateY(0);opacity:.4}
  100%{transform:translateY(-12px);opacity:1}
}

/* ─── SUCCESS OVERLAY ─────────────────────────────── */
.success-overlay{
  position:fixed;inset:0;z-index:998;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s ease
}
.success-overlay .lottie-success{position:relative;top:auto;left:auto;transform:none}

/* ─── SECTION ICON ANIMATIONS ─────────────────────── */
.section-icon-animated{
  display:inline-block;vertical-align:middle;margin-right:6px;
  width:20px;height:20px
}
.section-icon-animated svg{width:100%;height:100%;display:block}

/* diet icon anim */
.svg-salad{animation:saladWiggle 3s ease-in-out infinite}
@keyframes saladWiggle{
  0%,90%,100%{transform:rotate(0)}
  93%{transform:rotate(-5deg)}
  96%{transform:rotate(5deg)}
}

/* conquest icon anim */
.svg-medal{animation:medalSwing 2.5s ease-in-out infinite}
@keyframes medalSwing{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(6deg)}
  75%{transform:rotate(-6deg)}
}

/* ─── CARD ENTRANCE ANIMATION ─────────────────────── */
.card-enter{animation:cardSlideIn .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cardSlideIn{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* stagger children */
.stagger > *:nth-child(1){animation-delay:0s}
.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.12s}
.stagger > *:nth-child(4){animation-delay:.18s}
.stagger > *:nth-child(5){animation-delay:.24s}
.stagger > *:nth-child(6){animation-delay:.3s}
.stagger > *:nth-child(7){animation-delay:.36s}
.stagger > *:nth-child(8){animation-delay:.42s}
.stagger > *:nth-child(9){animation-delay:.48s}
.stagger > *:nth-child(10){animation-delay:.54s}

/* ─── PROGRESS BAR GLOW ──────────────────────────── */
.water-fill,.xp-fill,.ch-bar{position:relative;overflow:visible}
.water-fill::after,.xp-fill::after,.ch-bar::after{
  content:'';position:absolute;right:-2px;top:-2px;bottom:-2px;width:14px;
  border-radius:50%;
  background:inherit;filter:blur(6px);opacity:.6;
  animation:barGlow 1.5s ease-in-out infinite alternate
}
@keyframes barGlow{
  0%{opacity:.3;transform:scale(.8)}
  100%{opacity:.7;transform:scale(1.2)}
}

/* ─── MACRO CARD HOVER ────────────────────────────── */
.macro-item{transition:transform .2s,border-color .2s;border:1px solid transparent}
.macro-item:active{transform:scale(.95)}

/* ─── STAT CARD COUNTER ANIMATION ─────────────────── */
.stat-n[data-animate]{animation:statPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes statPop{
  0%{transform:scale(.7);opacity:0}
  100%{transform:scale(1);opacity:1}
}

/* ─── BADGE EARN ANIMATION ────────────────────────── */
.badge-chip.just-earned{animation:badgeEarn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgeEarn{
  0%{transform:scale(0) rotate(-20deg)}
  50%{transform:scale(1.15) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}
.badge-chip.earned .bi{animation:badgeShine 3s ease-in-out infinite}
@keyframes badgeShine{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.3)}
}

/* ─── BUTTON PRESS EFFECT ─────────────────────────── */
.water-add-btn:active,.water-sub-btn:active{transform:scale(.93);transition:transform .1s}
.btn-ok:active{transform:scale(.96);transition:transform .1s}
.add-ex-btn:active{transform:scale(.97);transition:transform .1s}

/* ─── PAGE TRANSITION ENHANCED ────────────────────── */
.page.active{animation:pageEnter .35s cubic-bezier(.32,.72,0,1)}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}