/* ============================================================
 *  ANIMAÇÕES — whimsical motion design
 *  Tudo guardado dentro de @media (prefers-reduced-motion: no-preference)
 *  para respeitar usuários que pediram menos movimento.
 *  ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- KEYFRAMES ---------- */
  @keyframes breathe {
    0%, 100% { transform: scale(1) rotate(-1deg); }
    50%      { transform: scale(1.03) rotate(1deg); }
  }

  @keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  @keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 111, 0, 0.45); }
    70%      { box-shadow: 0 0 0 12px rgba(255, 111, 0, 0); }
  }

  @keyframes zebra-march {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-67.88px); }
  }

  @keyframes shimmer-x {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes spin-slow {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
  }

  @keyframes stagger-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes draw-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @keyframes pop-in {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  @keyframes glow {
    0%, 100% { filter: drop-shadow(0 0 0 currentColor); }
    50%      { filter: drop-shadow(0 0 14px currentColor); }
  }

  @keyframes bg-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  @keyframes blink {
    0%, 92%, 100% { transform: scaleY(1); }
    94%, 98%      { transform: scaleY(0.05); }
  }

  @keyframes confetti-fall {
    0%   { transform: translate3d(var(--cx,0), -20px, 0) rotate(0); opacity: 1; }
    100% { transform: translate3d(var(--cx,0), var(--cy, 90vh), 0) rotate(var(--cr, 720deg)); opacity: 0; }
  }

  /* ---------- SCROLL PROGRESS BAR ---------- */
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-brand), #FFB066);
    z-index: calc(var(--z-sticky) + 1);
    transition: width 80ms linear;
    pointer-events: none;
  }

  /* ---------- HERO ---------- */
  .bubble {
    transform-origin: 60% 60%;
    animation: breathe 7s ease-in-out infinite;
  }
  /* "Pisca" sintético sobre o mascote: faixa estreita preta sobre os olhos */
  .bubble::after {
    content: "";
    position: absolute;
    inset: 35% 30% 55% 30%;
    background: transparent;
    pointer-events: none;
  }
  .bubble {
    position: relative;
    will-change: transform;
  }

  /* Stagger reveal das palavras do título */
  .stagger-text > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    animation: stagger-up 600ms var(--ease-out) forwards;
  }
  .stagger-text > span:nth-child(1) { animation-delay: 0.05s; }
  .stagger-text > span:nth-child(2) { animation-delay: 0.15s; }
  .stagger-text > span:nth-child(3) { animation-delay: 0.25s; }
  .stagger-text > span:nth-child(4) { animation-delay: 0.35s; }
  .stagger-text > span:nth-child(5) { animation-delay: 0.45s; }
  .stagger-text > span:nth-child(6) { animation-delay: 0.55s; }
  .stagger-text > span:nth-child(7) { animation-delay: 0.65s; }
  .stagger-text > span:nth-child(n+8) { animation-delay: 0.75s; }

  /* ---------- TOPBAR ---------- */
  .nav__list a {
    position: relative;
  }
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--color-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .nav__list a:hover::after { transform: scaleX(1); }

  .brand:hover { animation: float-y 700ms var(--ease-out); }

  /* Botão primary com pulse loop sutil — chama atenção */
  .topbar .btn--primary {
    animation: pulse-soft 2.4s ease-out infinite;
  }
  .btn--primary:hover { animation-play-state: paused; }

  /* ---------- FANDOMS — medals ---------- */
  .medal {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
  }
  .medal:hover {
    transform: rotate(360deg) scale(1.15);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06),
                0 0 24px currentColor;
  }
  .medal svg {
    transition: transform 800ms var(--ease-out);
  }

  /* Quando a faixa entra em view, todas as medals dão um spin sequencial */
  .fandoms.in-view .medal {
    animation: spin-slow 800ms var(--ease-out) both;
  }
  .fandoms.in-view .medal:nth-child(1) { animation-delay: 0.05s; }
  .fandoms.in-view .medal:nth-child(2) { animation-delay: 0.15s; }
  .fandoms.in-view .medal:nth-child(3) { animation-delay: 0.25s; }
  .fandoms.in-view .medal:nth-child(4) { animation-delay: 0.35s; }
  .fandoms.in-view .medal:nth-child(5) { animation-delay: 0.45s; }
  .fandoms.in-view .medal:nth-child(6) { animation-delay: 0.55s; }
  .fandoms.in-view .medal:nth-child(7) { animation-delay: 0.65s; }

  /* ---------- ZEBRA marcha ---------- */
  .zebra::before {
    animation: zebra-march 4s linear infinite;
    will-change: transform;
  }

  /* ---------- PILARES ---------- */
  .pillar {
    transform-style: preserve-3d;
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
  }
  .pillar:hover {
    transform: translateY(-8px) rotateX(2deg) rotateY(-3deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  }
  .pillar:hover .pillar__icon {
    animation: float-y 1.4s ease-in-out infinite;
  }
  .pillar__icon { transition: transform var(--duration-normal) var(--ease-out); }

  /* ---------- NÍVEIS ---------- */
  .level {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
  }
  .level:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5),
                0 0 0 1px var(--level-color);
  }
  .level__art img {
    transition: transform 1.2s var(--ease-out),
                filter 600ms var(--ease-out);
  }
  .level:hover .level__art img {
    transform: scale(1.08) rotate(6deg);
    filter: drop-shadow(0 0 18px var(--level-color));
  }
  .level__perks li {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 400ms var(--ease-out),
                transform 400ms var(--ease-out);
  }
  .level.in-view .level__perks li { opacity: 1; transform: none; }
  .level.in-view .level__perks li:nth-child(1) { transition-delay: 0.20s; }
  .level.in-view .level__perks li:nth-child(2) { transition-delay: 0.30s; }
  .level.in-view .level__perks li:nth-child(3) { transition-delay: 0.40s; }

  /* ---------- STEPS ---------- */
  .step__num {
    display: inline-block;
    background: linear-gradient(180deg, var(--color-brand), #FFB066);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .step .divider {
    transform: scaleX(0);
    transform-origin: left;
  }
  .step.in-view .divider {
    animation: draw-line 700ms var(--ease-out) 200ms forwards;
  }
  .step:hover .step__num {
    animation: float-y 700ms var(--ease-out);
  }

  /* ---------- SHOWCASE — phones flutuam ---------- */
  .shot__phone {
    animation: float-y 5s ease-in-out infinite;
    will-change: transform;
  }
  .shot:nth-child(1) .shot__phone { animation-delay: 0.0s; }
  .shot:nth-child(2) .shot__phone { animation-delay: 0.6s; }
  .shot:nth-child(3) .shot__phone { animation-delay: 1.2s; }
  .shot:nth-child(4) .shot__phone { animation-delay: 1.8s; }
  .shot:nth-child(5) .shot__phone { animation-delay: 2.4s; }
  .shot__phone:hover {
    animation-play-state: paused;
  }

  /* ---------- GAMIFICAÇÃO ---------- */
  .stamp.is-stamped {
    animation: pop-in 500ms var(--ease-out) both;
  }
  .gamification.in-view .stamp.is-stamped:nth-of-type(1) { animation-delay: 0.10s; }
  .gamification.in-view .stamp.is-stamped:nth-of-type(2) { animation-delay: 0.25s; }
  .gamification.in-view .stamp.is-stamped:nth-of-type(3) { animation-delay: 0.40s; }

  .streak__bar > span {
    width: 0 !important;
    transition: width 1200ms var(--ease-out) 200ms;
  }
  .gamification.in-view .streak__bar > span {
    width: var(--bar-fill, 50%) !important;
  }

  .mission-card .tag {
    animation: pulse-soft 2.2s ease-out infinite;
  }

  /* ---------- DEPOIMENTOS — estrelas sequencial ---------- */
  .testimonial__stars {
    display: inline-flex;
    gap: 2px;
  }
  /* Stars já são caracteres ★ — animar via opacity wrapper */
  .testimonial.in-view .testimonial__stars {
    background: linear-gradient(
      90deg,
      var(--color-accent-warn) 0 var(--star-fill, 100%),
      rgba(255,255,255,0.15) var(--star-fill, 100%) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: --star-fill 900ms var(--ease-out);
  }

  .testimonial {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
  }
  .testimonial:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
  }

  /* ---------- FAQ ---------- */
  .faq-item {
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
  }
  .faq-item:hover {
    background: var(--color-ink-700);
    border-color: rgba(255, 111, 0, 0.3);
  }

  /* ---------- CTA ---------- */
  .cta {
    background:
      linear-gradient(120deg, #FF8A2B, #FF6F00 40%, #E55F00 80%, #FF6F00);
    background-size: 200% 100%;
    animation: bg-shift 12s ease-in-out infinite;
  }
  .qr-card {
    animation: pop-in 700ms var(--ease-out) both;
  }
  .qr-card.in-view .qr-card__code {
    animation: float-y 5s ease-in-out infinite;
  }

  /* ---------- FOOTER — social icons giram on hover ---------- */
  .footer__social a {
    transition: background var(--duration-normal) var(--ease-out),
                color var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
  }
  .footer__social a:hover {
    transform: rotate(360deg);
  }
  .footer__social svg {
    transition: transform var(--duration-normal) var(--ease-out);
  }

  /* ---------- CONFETTI (spawned via JS) ---------- */
  .confetti-piece {
    position: fixed;
    top: 0;
    width: 10px; height: 14px;
    border-radius: 2px;
    pointer-events: none;
    z-index: var(--z-modal);
    animation: confetti-fall var(--cd, 1600ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  /* ---------- SECTION REVEAL — direcional alternado ---------- */
  .js section.reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
  }
  .js section.reveal {
    transition: opacity 700ms var(--ease-out),
                transform 700ms var(--ease-out);
  }
  .js section.reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Levels stagger entry — cards entram um a um */
  .levels__grid > .level {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    transition: opacity 500ms var(--ease-out),
                transform 500ms var(--ease-out);
  }
  .levels.in-view .levels__grid > .level { opacity: 1; transform: none; }
  .levels.in-view .levels__grid > .level:nth-child(1) { transition-delay: 0.10s; }
  .levels.in-view .levels__grid > .level:nth-child(2) { transition-delay: 0.20s; }
  .levels.in-view .levels__grid > .level:nth-child(3) { transition-delay: 0.30s; }
  .levels.in-view .levels__grid > .level:nth-child(4) { transition-delay: 0.40s; }

  /* Pillars stagger entry */
  .pillars__grid > .pillar {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 600ms var(--ease-out),
                transform 600ms var(--ease-out);
  }
  .pillars.in-view .pillars__grid > .pillar { opacity: 1; transform: none; }
  .pillars.in-view .pillars__grid > .pillar:nth-child(1) { transition-delay: 0.10s; }
  .pillars.in-view .pillars__grid > .pillar:nth-child(2) { transition-delay: 0.25s; }
  .pillars.in-view .pillars__grid > .pillar:nth-child(3) { transition-delay: 0.40s; }

  /* Showcase stagger entry */
  .showcase__row > .shot {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 600ms var(--ease-out),
                transform 600ms var(--ease-out);
  }
  .showcase.in-view .showcase__row > .shot { opacity: 1; transform: none; }
  .showcase.in-view .showcase__row > .shot:nth-child(1) { transition-delay: 0.05s; }
  .showcase.in-view .showcase__row > .shot:nth-child(2) { transition-delay: 0.15s; }
  .showcase.in-view .showcase__row > .shot:nth-child(3) { transition-delay: 0.25s; }
  .showcase.in-view .showcase__row > .shot:nth-child(4) { transition-delay: 0.35s; }
  .showcase.in-view .showcase__row > .shot:nth-child(5) { transition-delay: 0.45s; }

  /* Testimonials stagger entry */
  .testimonials__grid > .testimonial {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms var(--ease-out),
                transform 500ms var(--ease-out);
  }
  .testimonials.in-view .testimonials__grid > .testimonial { opacity: 1; transform: none; }
  .testimonials.in-view .testimonials__grid > .testimonial:nth-child(1) { transition-delay: 0.10s; }
  .testimonials.in-view .testimonials__grid > .testimonial:nth-child(2) { transition-delay: 0.25s; }
  .testimonials.in-view .testimonials__grid > .testimonial:nth-child(3) { transition-delay: 0.40s; }

  /* FAQ items stagger entry */
  .faq__list > .faq-item {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 400ms var(--ease-out),
                transform 400ms var(--ease-out);
  }
  .faq.in-view .faq__list > .faq-item { opacity: 1; transform: none; }
  .faq.in-view .faq__list > .faq-item:nth-child(1) { transition-delay: 0.05s; }
  .faq.in-view .faq__list > .faq-item:nth-child(2) { transition-delay: 0.15s; }
  .faq.in-view .faq__list > .faq-item:nth-child(3) { transition-delay: 0.25s; }
  .faq.in-view .faq__list > .faq-item:nth-child(4) { transition-delay: 0.35s; }
  .faq.in-view .faq__list > .faq-item:nth-child(5) { transition-delay: 0.45s; }

  /* Steps stagger entry */
  .steps__grid > .step {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms var(--ease-out),
                transform 500ms var(--ease-out);
  }
  .steps.in-view .steps__grid > .step { opacity: 1; transform: none; }
  .steps.in-view .steps__grid > .step:nth-child(1) { transition-delay: 0.10s; }
  .steps.in-view .steps__grid > .step:nth-child(2) { transition-delay: 0.20s; }
  .steps.in-view .steps__grid > .step:nth-child(3) { transition-delay: 0.30s; }
  .steps.in-view .steps__grid > .step:nth-child(4) { transition-delay: 0.40s; }

} /* end @media prefers-reduced-motion */