/* =========================================================
   ATTRACT.CSS — site-wide animation + customer-attraction layer
   Loaded on every page, after style.css / overlay.css.
   Uses the existing design tokens from style.css (:root).
   ========================================================= */

/* ---------------- Scroll progress bar ---------------- */
#scrollProgress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--amber-500),var(--sky-400),var(--blue-600));
  background-size:200% 100%;
  z-index:10001;
  transition:width .12s ease-out;
  animation:progressShimmer 3s linear infinite;
}
@keyframes progressShimmer{
  0%{background-position:0% 0;}
  100%{background-position:200% 0;}
}

/* ---------------- Sticky offer / urgency bar ---------------- */
#offerBar{
  position:relative;
  z-index:9998;
  background:linear-gradient(90deg,var(--ink-900),var(--ink-700) 45%,var(--blue-600));
  color:#fff;
  font-family:var(--font-body);
  overflow:hidden;
  max-height:200px;
  transition:max-height .35s ease, padding .35s ease, opacity .35s ease;
}
#offerBar.is-closed{ max-height:0; opacity:0; pointer-events:none; }
#offerBar .offer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:9px 44px 9px 16px;
  text-align:center;
  font-size:.92rem;
}
#offerBar .offer-flame{
  animation:flamePulse 1.4s ease-in-out infinite;
  display:inline-block;
}
@keyframes flamePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.25) rotate(-6deg); }
}
#offerBar strong{ color:var(--amber-500); }
#offerBar .offer-timer{
  display:inline-flex;
  gap:6px;
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:.02em;
}
#offerBar .offer-timer span{
  background:rgba(255,255,255,.14);
  border-radius:6px;
  padding:2px 7px;
  min-width:2.4em;
  display:inline-block;
}
#offerBar .offer-cta{
  background:var(--amber-500);
  color:var(--ink-900);
  font-weight:700;
  padding:6px 16px;
  border-radius:999px;
  text-decoration:none;
  font-size:.85rem;
  white-space:nowrap;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
  box-shadow:0 0 0 0 rgba(242,165,60,.55);
  animation:offerCtaGlow 2.2s ease-in-out infinite;
}
@keyframes offerCtaGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(242,165,60,.45); }
  50%{ box-shadow:0 0 0 8px rgba(242,165,60,0); }
}
#offerBar .offer-cta:hover{ background:var(--amber-600); transform:translateY(-2px) scale(1.04); }
#offerBar .offer-close{
  position:absolute;
  right:10px; top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:rgba(255,255,255,.75);
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  padding:6px;
  transition:color .2s ease, transform .2s ease;
}
#offerBar .offer-close:hover{ color:#fff; transform:translateY(-50%) rotate(90deg); }

/* ---------------- Whatsapp / social sidebar liveliness ---------------- */
.social-sidebar a{
  opacity:0;
  transform:translateX(24px) scale(.8);
  animation:socialIn .5s ease forwards;
}
.social-sidebar a:nth-child(1){ animation-delay:.15s; }
.social-sidebar a:nth-child(2){ animation-delay:.25s; }
.social-sidebar a:nth-child(3){ animation-delay:.35s; }
.social-sidebar a:nth-child(4){ animation-delay:.45s; }
.social-sidebar a:nth-child(5){ animation-delay:.55s; }
.social-sidebar a:nth-child(6){ animation-delay:.65s; }
@keyframes socialIn{
  to{ opacity:1; transform:translateX(0) scale(1); }
}
.social-sidebar a.whatsapp{ position:relative; }
.social-sidebar a.whatsapp::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  animation:waPulse 1.8s ease-out infinite;
  z-index:-1;
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(2.1); opacity:0; }
}
.social-sidebar a:hover{
  transform:translateX(0) scale(1.14) !important;
}

/* ---------------- Scroll-to-top button ---------------- */
#scrollTopBtn{
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--ink-900);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  cursor:pointer;
  z-index:9997;
  box-shadow:var(--shadow-tight);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.85);
  transition:opacity .3s ease, transform .3s ease, background .25s ease, visibility .3s;
}
#scrollTopBtn.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
#scrollTopBtn:hover{ background:var(--blue-600); transform:translateY(-4px) scale(1.06); }

/* ---------------- Global button shine sweep ---------------- */
.btn-primary,
.mode-btn,
.btn.btn-primary,
.offer-cta{
  position:relative;
  overflow:hidden;
}
.btn-primary::after,
.mode-btn::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
  pointer-events:none;
}
.btn-primary:hover::after,
.mode-btn:hover::after{ left:120%; }

/* ---------------- Gentle hover-lift for generic cards not already covered ---------------- */
.company-card,
.testimonial-card,
.gallery-item{
  transition:transform .35s ease, box-shadow .35s ease;
}
.company-card:hover,
.gallery-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-tight);
}

/* ---------------- Infinite logo marquee (used on placement.html) ---------------- */
.logo-marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-marquee__track{
  display:flex;
  gap:48px;
  width:max-content;
  animation:logoScroll 22s linear infinite;
}
.logo-marquee:hover .logo-marquee__track{ animation-play-state:paused; }
@keyframes logoScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.logo-marquee__track img{
  height:42px;
  width:auto;
  object-fit:contain;
  opacity:.75;
  filter:grayscale(1);
  transition:opacity .3s ease, filter .3s ease, transform .3s ease;
}
.logo-marquee__track img:hover{
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-3px) scale(1.05);
}

/* ---------------- Hero floating decorative shapes ---------------- */
.hero{ position:relative; overflow:hidden; }
.hero-float{
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  filter:blur(2px);
  opacity:.5;
  animation:heroFloat 7s ease-in-out infinite;
}
.hero-float.f1{ width:70px; height:70px; top:14%; left:6%; background:radial-gradient(circle,var(--sky-400),transparent 70%); animation-duration:8s; }
.hero-float.f2{ width:40px; height:40px; top:64%; left:12%; background:radial-gradient(circle,var(--amber-500),transparent 70%); animation-duration:6s; animation-delay:.6s; }
.hero-float.f3{ width:100px; height:100px; top:20%; right:8%; background:radial-gradient(circle,var(--blue-600),transparent 70%); animation-duration:9s; animation-delay:.3s; }
.hero-float.f4{ width:55px; height:55px; top:70%; right:14%; background:radial-gradient(circle,var(--sky-400),transparent 70%); animation-duration:7s; animation-delay:.9s; }
@keyframes heroFloat{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-22px) translateX(10px); }
}
.hero-content, .hero .container{ position:relative; z-index:1; }

/* ---------------- Page fade-in on load ---------------- */
body{ animation:pageIn .5s ease; }
@keyframes pageIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------------- Reduced motion respect ---------------- */
@media (prefers-reduced-motion: reduce){
  #scrollProgress,
  .offer-flame,
  .offer-cta,
  .social-sidebar a,
  .social-sidebar a.whatsapp::before,
  .btn-primary::after,
  .mode-btn::after,
  .logo-marquee__track,
  .hero-float,
  body{
    animation:none !important;
  }
  .social-sidebar a{ opacity:1; transform:none; }
}

@media (max-width:640px){
  #offerBar .offer-inner{ font-size:.8rem; padding:8px 36px 8px 12px; gap:8px; }
  #offerBar .offer-timer span{ padding:1px 5px; }
  .hero-float{ display:none; }
}