/* ============================================================
   Javita Consultancy – smooth motion layer
   Loaded after animate.css so these keyframes take priority.
   ============================================================ */
:root {
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);   /* gentle ease-out */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}
html { scroll-behavior: smooth; }

/* ---- Scroll-reveal animations: shorter travel, longer, softer easing ---- */
.animated {
  animation-duration: 1.1s !important;
  animation-timing-function: var(--ease-smooth) !important;
  animation-fill-mode: both;
}
@keyframes fadeInUp    { from { opacity: 0; transform: translate3d(0, 28px, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(28px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes zoomIn      { from { opacity: 0; transform: scale3d(.94, .94, .94); }   to { opacity: 1; transform: none; } }

/* ---- Header ----
   1. At the top: full-height bar that scrolls away with the page.
   2. Past the banner: a slimmer bar drops down and stays fixed.
   Both sit 10px in from the left and right edges. */
#header {
  position: absolute !important;
  top: 0; left: 10px !important; right: 10px !important;
  z-index: 1030;
  transition: none;
}
#header.glass-effect { background: transparent !important; opacity: 1; margin-top: 0 !important; }
#header .bg-header { margin-top: 10px; transition: padding .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth); }

/* Sticky (dropped-down) state */
#header.is-sticky {
  position: fixed !important;
  transform: translate3d(0, -115%, 0);
  opacity: 0;
  will-change: transform, opacity;
  /* sliding back up: quick, gentle ease-in */
  transition: transform .6s cubic-bezier(0.55, 0, 0.75, 0.2), opacity .45s ease .1s;
}
#header.is-sticky.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  /* dropping down: soft deceleration that settles into place */
  transition: transform 1s cubic-bezier(0.45, 0, 0.15, 1), opacity .7s ease-out;
}
#header.is-sticky .bg-header { padding: 8px 8px 8px 20px !important; box-shadow: 0 12px 32px rgba(1, 1, 1, .22); }
#header.is-sticky .logo-container .navbar-brand img { height: 34px !important; }
#header.is-sticky .nav-link { font-size: 16px; padding-top: .35rem; padding-bottom: .35rem; }
#header.is-sticky .btn-accent { padding-top: 6px; padding-bottom: 6px; }
#header.is-sticky .btn-accent .icon-box { width: 32px; height: 32px; padding: 8px; }
/* links and button fade in just after the bar arrives */
#header.is-sticky .navbar > .container-fluid > * { opacity: 0; transition: opacity .3s ease; }
#header.is-sticky.is-visible .navbar > .container-fluid > * { opacity: 1; transition: opacity .8s ease-out .3s; }

@media (max-width: 1199.98px) {
  .bg-header { border-radius: 24px !important; }
  .bg-header .navbar-collapse { padding: .75rem 0 .5rem; }
  #header .navbar-collapse { max-height: calc(100vh - 120px); overflow-y: auto; }
}
@media (max-width: 575.98px) { #header.is-sticky .logo-container .navbar-brand img { height: 28px !important; } }

/* ---- Capabilities slider: one continuous, eased glide ---- */
.swiperImage .swiper-wrapper { transition-timing-function: var(--ease-inout) !important; }
.swiperImage .swiper-slide .card-swiper {
  transition: transform 1.2s var(--ease-inout), background-color 1.2s var(--ease-inout), color 1.2s var(--ease-inout) !important;
}
.swiperImage .swiper-slide .card-swiper h4 { transition: color 1.2s var(--ease-inout), max-width 1.2s var(--ease-inout); }
/* fade the description/button in rather than popping them */
.swiperImage .swiper-slide .card-swiper p,
.swiperImage .swiper-slide .card-swiper a { display: flex !important; opacity: 0; max-height: 0; overflow: hidden; margin: 0;
  transition: opacity .8s var(--ease-smooth), max-height 1.2s var(--ease-inout); }
.swiperImage .swiper-slide .card-swiper p { display: block !important; }
.swiperImage .swiper-slide-active .card-swiper p,
.swiperImage .swiper-slide-active .card-swiper a { opacity: 1; max-height: 220px; transition-delay: .35s; }
.swiperImage .swiper-slide .card-swiper .w-max-content { margin-top: -1rem; }
.swiperImage .swiper-slide-active .card-swiper .w-max-content { margin-top: 0; transition: margin 1.2s var(--ease-inout); }
.swiperImage .swiper-pagination-bullet { transition: width .6s var(--ease-smooth), background-color .6s var(--ease-smooth); }
.swiperImage .swiper-pagination-bullet-active { background: var(--accent-dark); width: 22px; border-radius: 6px; }
.swiperImage .swiper-pagination { position: relative; margin-top: 1.5rem; }

/* ---- Hover & state transitions everywhere: same soft curve ---- */
.btn, .btn-accent, .btn-accent-2, .btn-accent-3, .btn-accent-4, .btn-footer, .btn-footer-2,
.icon-box, .icon-box-2, .icon-box-3, .social-item, .nav-link, .tab, .tag,
.card-stat, .card-contact, .card-team, .card-testimonial, .card-news, .card-counter,
.wrapper-news, .news-img, .offer, .line, .date-news, .industry-icon, .row-link-detail, .text-link-detail {
  transition-duration: .6s !important;
  transition-timing-function: var(--ease-smooth) !important;
}
.btn-accent::before, .btn-accent-3::before, .btn-accent-4::before { transition: width .9s var(--ease-smooth) !important; }
.card-it-works, .contain-work .card-it-works { transition: all .7s var(--ease-smooth) !important; }
.card-team:hover, .card-testimonial:hover, .card-contact:hover { transform: translateY(-6px); }

/* What-we-offer list: expand/collapse smoothly (height:max-content can't animate, max-height can) */
.offer .p-accordion, .offer .img-accordion {
  height: auto !important; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px) !important;
  margin-bottom: 0; transition: max-height .8s var(--ease-inout), opacity .6s var(--ease-smooth), transform .8s var(--ease-smooth), margin .8s var(--ease-inout) !important;
}
.offer.row.active .p-accordion { max-height: 160px; opacity: 1; transform: none !important; margin: .4rem 0 .9rem; }
.offer.row.active .img-accordion { max-height: 420px; opacity: 1; transform: none !important; }

/* Accordion */
.accordion-collapse.collapsing { transition: height .5s var(--ease-smooth) !important; }
.accordion-button::after { transition: transform .4s var(--ease-smooth) !important; }

/* Marquee: steady, slower scroll */
.marquee { animation-duration: 120s !important; animation-timing-function: linear !important; }
/* space between the "Technologies & Platforms" heading and the icon strip */
.marquee-container { margin-top: 2.5rem; }
@media (max-width: 767.98px) { .marquee-container { margin-top: 1.5rem; } .marquee { animation-duration: 90s !important; } }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* slides are duplicated for a seamless loop, so the dot pagination is hidden */
.swiperImage .swiper-pagination { display: none; }

/* ============================================================
   Smooth-scrolling & performance layer
   ============================================================ */
/* Lenis (inertia scrolling) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Scroll-reveal: animations wait until the element enters the viewport (see js/javita.js) */
.js .scrollanimation:not(.in-view) { animation-play-state: paused !important; }
.scrollanimation.in-view { animation-play-state: running; }
.adl-1 { animation-delay: .12s !important; }
.adl-2 { animation-delay: .24s !important; }
.adl-3 { animation-delay: .36s !important; }
.adl-4 { animation-delay: .48s !important; }

/* Cheaper glass: heavy live blurs are repainted on every scroll frame */
.card-testimonial { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: rgba(253, 253, 253, .92) !important; }
.contain-testi:not(:hover) .card-testimonial.active, .card-testimonial:hover { background-color: var(--text-color) !important; }
.glass-effect::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Decorative glows: keep them on their own layer so they never repaint during scroll */
.circle-gradient { will-change: transform; transform: translateZ(0); pointer-events: none; }
.marquee { will-change: transform; }
.swiperImage .swiper-slide { backface-visibility: hidden; }

/* About-statement letter reveal: one smooth colour fade instead of per-letter delays */
h3.text span { transition: color .5s ease !important; transition-delay: 0s !important; }
.marquee-container.is-paused .marquee { animation-play-state: paused !important; }