/* Motion — Postos Jarjour (site-wide)
   Focal: hero / page-hero “posto abre” (foto + copy)
   Continuity: blocos entram como linhas do painel de preço
   Feedback: abas, CTA, cards, galeria
*/

: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){
  /* —— Focal: home hero —— */
  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;
  }

  /* —— Focal: page / history / service heroes —— */
  html.has-motion .page-hero.is-intro .wrap > *,
  html.has-motion .history-hero.is-intro .history-hero-content > *,
  html.has-motion .service-hero.is-intro .wrap > *{
    animation:heroCopyIn .72s var(--ease-out) both;
  }
  html.has-motion .page-hero.is-intro .wrap > *:nth-child(1),
  html.has-motion .history-hero.is-intro .history-hero-content > *:nth-child(1),
  html.has-motion .service-hero.is-intro .wrap > *:nth-child(1){animation-delay:60ms}
  html.has-motion .page-hero.is-intro .wrap > *:nth-child(2),
  html.has-motion .history-hero.is-intro .history-hero-content > *:nth-child(2),
  html.has-motion .service-hero.is-intro .wrap > *:nth-child(2){animation-delay:140ms}
  html.has-motion .page-hero.is-intro .wrap > *:nth-child(3),
  html.has-motion .history-hero.is-intro .history-hero-content > *:nth-child(3),
  html.has-motion .service-hero.is-intro .wrap > *:nth-child(3){animation-delay:220ms}

  html.has-motion .history-hero.is-intro .history-hero-image,
  html.has-motion .service-hero.is-intro .service-hero-image{
    animation:heroPhotoSettle 1s var(--ease-out) both;
  }
  html.has-motion .history-hero.is-intro .history-hero-shade,
  html.has-motion .service-hero.is-intro:after{
    animation:heroShadeIn .85s var(--ease-soft) both;
  }
  html.has-motion .page-hero.is-intro{
    animation:pageHeroWash .9s var(--ease-soft) both;
  }

  /* —— Continuity: price panel —— */
  #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);
  }

  /* —— Continuity: scroll reveals (capped) —— */
  html.has-motion .motion-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
    will-change:opacity, transform;
  }
  html.has-motion .motion-reveal.is-in{
    opacity:1;
    transform:none;
    will-change:auto;
  }
  html.has-motion .motion-reveal.is-in:nth-child(1){transition-delay:0ms}
  html.has-motion .motion-reveal.is-in:nth-child(2){transition-delay:50ms}
  html.has-motion .motion-reveal.is-in:nth-child(3){transition-delay:100ms}
  html.has-motion .motion-reveal.is-in:nth-child(4){transition-delay:140ms}
  html.has-motion .motion-reveal.is-in:nth-child(5){transition-delay:170ms}
  html.has-motion .motion-reveal.is-in:nth-child(6){transition-delay:190ms}

  html.has-motion .motion-reveal--soft{
    transform:translateY(12px);
  }

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

  .history-numbers.is-in > div{
    animation:trustPulse .65s var(--ease-out) both;
  }
  .history-numbers.is-in > div:nth-child(1){animation-delay:0ms}
  .history-numbers.is-in > div:nth-child(2){animation-delay:60ms}
  .history-numbers.is-in > div:nth-child(3){animation-delay:120ms}
  .history-numbers.is-in > div:nth-child(4){animation-delay:180ms}

  /* —— Feedback —— */
  .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,
  .answer-card,
  .contact-list a,
  .photo-grid a,
  .instagram-grid a,
  .timeline-controls button{
    transition:transform .22s var(--ease-out), box-shadow .22s ease, border-color .2s ease, background .2s ease, filter .22s ease, opacity .2s ease;
  }
  .service-card:hover,
  .location-list article:hover,
  .answer-card:hover{
    transform:translateY(-3px);
  }
  .photo-grid a:hover,
  .instagram-grid a:hover{
    transform:translateY(-4px);
    filter:brightness(1.04);
  }
  .button:hover{transform:translateY(-2px)}
  .button:active{transform:translateY(0)}
  .timeline-controls button:hover{transform:translateY(-2px)}

  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    transition:border-color .18s ease, box-shadow .22s var(--ease-out);
  }
  .contact-form input:focus,
  .contact-form textarea:focus,
  .contact-form select:focus{
    box-shadow:0 0 0 3px rgba(8,117,169,.18);
  }
}

@keyframes heroPhotoSettle{
  from{opacity:.45;transform:scale(1.08)}
  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 pageHeroWash{
  from{filter:saturate(.9) brightness(.96)}
  to{filter:none}
}
@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,
  .history-hero-image,
  .service-hero-image,
  .scroll-cue i,
  #fuel-list,
  .branch,
  .button,
  .service-card,
  .location-list article,
  .nav-cta,
  .motion-reveal,
  .photo-grid a,
  .instagram-grid a,
  .answer-card,
  .timeline-controls button{
    animation:none !important;
    transition:opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  #fuel-list.is-swapping{opacity:.55;transform:none}
}

@media (max-width:800px){
  html.has-motion .hero.is-intro .hero-photo,
  html.has-motion .history-hero.is-intro .history-hero-image,
  html.has-motion .service-hero.is-intro .service-hero-image{
    animation:none;
    transform:none;
  }
  html.has-motion .hero.is-intro .hero-app,
  html.has-motion .hero-app.is-idle{
    animation:none !important;
  }
  html.has-motion .page-hero.is-intro{
    animation:none;
    filter:none;
  }
}