/* =========================================================
   SIGNATURE MOTION LAYER
   Custom cursor · magnetic buttons · spotlight cards ·
   auto-scroll marquee · sliding nav indicator · gradient drift
   ========================================================= */

/* ---------- Custom cursor (pointer devices only) ---------- */
.has-custom-cursor, .has-custom-cursor *{ cursor:none !important; }
#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0; z-index:2500;
  pointer-events:none;
  transform:translate(-50%,-50%);
  will-change:transform;
}
#cursor-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold-bright);
  transition:opacity 0.2s;
}
#cursor-ring{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(11,31,58,0.35);
  transition:width 0.25s var(--ease-premium), height 0.25s var(--ease-premium), border-color 0.25s, opacity 0.2s, background 0.25s;
}
.section-navy ~ * #cursor-ring{ border-color:rgba(255,255,255,0.4); }
#cursor-ring.is-active{
  width:56px; height:56px;
  background:rgba(198,161,91,0.1);
  border-color:var(--gold);
}
#cursor-ring.is-hidden, #cursor-dot.is-hidden{ opacity:0; }
@media (hover:none), (pointer:coarse){
  #cursor-dot, #cursor-ring{ display:none; }
}

/* ---------- Magnetic elements ---------- */
.magnetic{ display:inline-flex; will-change:transform; }

/* ---------- Spotlight hover (cards) ---------- */
.spotlight{ position:relative; }
.spotlight::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(47,111,126,0.14), transparent 62%);
  opacity:0;
  transition:opacity 0.4s var(--ease-premium);
  pointer-events:none;
  z-index:0;
}
.spotlight:hover::before{ opacity:1; }
.spotlight > *{ position:relative; z-index:1; }
.section-navy .spotlight::before{ background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(198,161,91,0.16), transparent 62%); }

/* ---------- Marquee (trust strip) ---------- */
.logo-strip-track{
  display:flex; width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.logo-strip:hover .logo-strip-track{ animation-play-state:paused; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.logo-strip-item{ position:relative; }
.logo-strip-item::after{
  content:'◆'; color:var(--gold); font-size:0.5rem; margin-left:clamp(2.5rem,6vw,5rem); opacity:0.6;
}

/* ---------- Gradient drift (hero) ---------- */
.hero{ background-size:150% 150%, 150% 150%, 100% 100%; animation:heroGradientDrift 18s ease-in-out infinite; }
@keyframes heroGradientDrift{
  0%{ background-position: 78% 8%, 8% 100%, 0 0; }
  50%{ background-position: 68% 18%, 18% 90%, 0 0; }
  100%{ background-position: 78% 8%, 8% 100%, 0 0; }
}

/* ---------- Sliding nav indicator ---------- */
.nav-primary{ position:relative; }
#nav-indicator{
  position:absolute; top:0; height:100%;
  background:rgba(11,31,58,0.06);
  border-radius:999px;
  z-index:0;
  opacity:0;
  transition:left 0.35s var(--ease-premium), width 0.35s var(--ease-premium), opacity 0.2s;
  pointer-events:none;
}
.nav-primary.is-tracking #nav-indicator{ opacity:1; }
.nav-item, .nav-link{ position:relative; z-index:1; }
.nav-link:hover{ background:transparent; }

/* ---------- Underline sweep on inline links ---------- */
.link-sweep{ position:relative; }
.link-sweep::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:currentColor; transition:right 0.4s var(--ease-premium);
}
.link-sweep:hover::after{ right:0; }

/* ---------- Button ripple ---------- */
.btn{ overflow:hidden; }
.btn .ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.5);
  transform:scale(0);
  animation:rippleAnim 0.65s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(1); opacity:0; } }

/* ---------- Image / icon zoom on hover (generic) ---------- */
.zoom-hover{ overflow:hidden; }
.zoom-hover img, .zoom-hover svg{ transition:transform 0.6s var(--ease-premium); }
.zoom-hover:hover img, .zoom-hover:hover svg{ transform:scale(1.04); }

/* ---------- Section fade-through on route change (SPA preview only) ---------- */
.route-fade-enter{ animation:routeFadeIn 0.55s var(--ease-premium); }
@keyframes routeFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .hero{ animation:none; }
  .logo-strip-track{ animation:none; }
}

/* ---------- Floating WhatsApp button ---------- */
#whatsapp-float{
  position:fixed; left:24px; bottom:24px; z-index:600;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -12px rgba(37,211,102,0.55), 0 2px 6px rgba(0,0,0,0.15);
  transition:transform 0.25s var(--ease-premium), bottom 0.35s var(--ease-premium), box-shadow 0.25s;
  animation:whatsappBob 3.4s ease-in-out infinite;
}
#whatsapp-float:hover{
  box-shadow:0 20px 40px -10px rgba(37,211,102,0.65), 0 2px 6px rgba(0,0,0,0.18);
}
#whatsapp-float .whatsapp-icon{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
#whatsapp-float .whatsapp-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,0.55);
  animation:whatsappPulse 2.6s ease-out infinite;
}
#whatsapp-float .whatsapp-ring-delay{ animation-delay:1.3s; }
@keyframes whatsappPulse{
  0%{ transform:scale(1); opacity:0.65; }
  100%{ transform:scale(1.7); opacity:0; }
}
@keyframes whatsappBob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
#whatsapp-float .whatsapp-tooltip{
  position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(-6px);
  background:var(--navy-deep); color:#fff;
  font-family:var(--font-mono); font-size:0.76rem; white-space:nowrap;
  padding:0.55em 0.9em; border-radius:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium), visibility 0.25s;
}
#whatsapp-float .whatsapp-tooltip::before{
  content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-right-color:var(--navy-deep);
}
#whatsapp-float:hover .whatsapp-tooltip, #whatsapp-float:focus-visible .whatsapp-tooltip{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}
@media (max-width:560px){
  #whatsapp-float{ left:16px; bottom:16px; width:52px; height:52px; }
  #whatsapp-float .whatsapp-tooltip{ display:none; }
}

/* Push floating buttons up out of the way while the cookie banner is visible */
body.cookie-visible #whatsapp-float,
body.cookie-visible #back-to-top{
  transform:translateY(-92px);
}
body.cookie-visible #whatsapp-float{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  #whatsapp-float{ animation:none; }
  #whatsapp-float .whatsapp-ring{ animation:none; opacity:0; }
}