/* Motion — Postos Jarjour home
   Focal: hero “posto abre / app chega”
   Continuity: troca de unidade no painel de preços
   Feedback: abas, CTA, scroll cue
*/

:root{
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference){
  html.has-motion .hero.is-intro .hero-photo{
    animation:heroPhotoSettle 1.1s var(--ease-out) both;
  }
  html.has-motion .hero.is-intro .hero-shade{
    animation:heroShadeIn .9s var(--ease-soft) both;
  }
  html.has-motion .hero.is-intro .hero-content > *{
    animation:heroCopyIn .72s var(--ease-out) both;
  }
  html.has-motion .hero.is-intro .hero-content > *:nth-child(1){animation-delay:80ms}
  html.has-motion .hero.is-intro .hero-content > *:nth-child(2){animation-delay:160ms}
  html.has-motion .hero.is-intro .hero-content > *:nth-child(3){animation-delay:240ms}
  html.has-motion .hero.is-intro .hero-content > *:nth-child(4){animation-delay:320ms}

  html.has-motion .hero.is-intro .hero-app{
    animation:heroAppArrive .85s var(--ease-out) 180ms both;
  }
  html.has-motion .hero-app.is-idle,
  html.has-motion .hero.is-intro .hero-app.is-idle{
    animation:appFloat 4.8s ease-in-out infinite;
  }
  html.has-motion .hero.is-intro .hero-bottom{
    animation:heroCopyIn .7s var(--ease-out) 420ms both;
  }

  html.has-motion .hero .scroll-cue i{
    animation:scrollCuePulse 1.6s var(--ease-soft) 1.1s infinite;
  }

  /* Continuity: price list swap between units */
  #fuel-list{
    transition:opacity .22s ease, transform .32s var(--ease-out);
  }
  #fuel-list.is-swapping{
    opacity:0;
    transform:translateY(8px);
  }
  #fuel-list .fuel,
  #fuel-list .classic-fuel{
    transition:opacity .28s var(--ease-out), transform .32s var(--ease-out);
  }
  #fuel-list.is-entering .fuel,
  #fuel-list.is-entering .classic-fuel{
    animation:fuelRowIn .45s var(--ease-out) both;
  }
  #fuel-list.is-entering .fuel:nth-child(1),
  #fuel-list.is-entering .classic-fuel:nth-child(1){animation-delay:0ms}
  #fuel-list.is-entering .fuel:nth-child(2),
  #fuel-list.is-entering .classic-fuel:nth-child(2){animation-delay:45ms}
  #fuel-list.is-entering .fuel:nth-child(3),
  #fuel-list.is-entering .classic-fuel:nth-child(3){animation-delay:90ms}
  #fuel-list.is-entering .fuel:nth-child(4),
  #fuel-list.is-entering .classic-board .classic-fuel:nth-child(4),
  #fuel-list.is-entering .classic-fuel:nth-child(4){animation-delay:135ms}

  .price-panel--classic .classic-board{
    animation:none;
  }
  html.has-motion .price-panel--classic #fuel-list.is-entering .classic-board{
    animation:boardColumnIn .55s var(--ease-out) both;
  }
  html.has-motion .price-panel--classic #fuel-list.is-entering .classic-board:nth-child(1){animation-delay:0ms}
  html.has-motion .price-panel--classic #fuel-list.is-entering .classic-board:nth-child(2){animation-delay:70ms}
  html.has-motion .price-panel--classic #fuel-list.is-entering .classic-board:nth-child(3){animation-delay:140ms}

  .branch{
    transition:color .18s ease, background .18s ease, box-shadow .22s var(--ease-out);
  }
  .branch.active{
    transition:color .18s ease, background .18s ease, box-shadow .28s var(--ease-out);
  }

  .trust-strip.is-in .trust-grid > div{
    animation:trustPulse .7s var(--ease-out) both;
  }
  .trust-strip.is-in .trust-grid > div:nth-child(1){animation-delay:0ms}
  .trust-strip.is-in .trust-grid > div:nth-child(2){animation-delay:70ms}
  .trust-strip.is-in .trust-grid > div:nth-child(3){animation-delay:140ms}
  .trust-strip.is-in .trust-grid > p{
    animation:trustPulse .7s var(--ease-out) 200ms both;
  }

  .nav-cta{
    transition:transform .2s var(--ease-out), background .2s ease, color .2s ease, border-color .2s ease;
  }
  .nav-cta:hover{transform:translateY(-1px)}
  .nav-cta:active{transform:translateY(0)}

  .button,
  .text-link,
  .service-card,
  .location-list article{
    transition:transform .22s var(--ease-out), box-shadow .22s ease, border-color .2s ease, background .2s ease;
  }
  .service-card:hover,
  .location-list article:hover{
    transform:translateY(-3px);
  }
  .button:hover{transform:translateY(-2px)}
  .button:active{transform:translateY(0)}
}

@keyframes heroPhotoSettle{
  from{
    opacity:.45;
    transform:scale(1.1);
  }
  to{
    opacity:.92;
    transform:scale(1.02);
  }
}
@keyframes heroShadeIn{
  from{opacity:.55}
  to{opacity:1}
}
@keyframes heroCopyIn{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes heroAppArrive{
  from{
    opacity:0;
    transform:translate3d(40px, 24px, 0) scale(.96);
  }
  to{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
  }
}
@keyframes scrollCuePulse{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(5px);opacity:1}
}
@keyframes appFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes fuelRowIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes boardColumnIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes trustPulse{
  from{opacity:.35;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  .hero-photo,
  .hero-app,
  .scroll-cue i,
  #fuel-list,
  .branch,
  .button,
  .service-card,
  .location-list article,
  .nav-cta{
    animation:none !important;
    transition:opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease !important;
  }
  #fuel-list.is-swapping{opacity:.55;transform:none}
}