/* ═══════════════════════════════════════════════════════════════════
   MICRO-ANIMATIONS — igo2fix (added 2026-09-23)
   Loaded after premium.css. Everything here is decorative: no content is
   ever hidden waiting for a scroll (see shared.js revealRemaining), and all
   motion is switched off for visitors who ask for reduced motion.
   To turn it all off, remove the motion.css / motion.js tags from the pages.
   ═══════════════════════════════════════════════════════════════════ */

/* Smooth cross-fade between pages (Chrome/Edge/Safari 18; others ignore it) */
@view-transition{navigation:auto}
.home-premium header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* ── Header: tighter, deeper glass once you scroll ──────────────── */
.home-premium header .container.nav{
  transition:padding .4s var(--ease-soft), box-shadow .4s var(--ease-soft), background .4s var(--ease-soft);
}
.home-premium header.scrolled .container.nav{
  background:rgba(8,11,22,.78);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(124,178,255,.12);
}

/* ── Nav: gliding highlight that follows the pointer ────────────── */
.home-premium .nav-menu.has-glider{position:relative}
.home-premium .nav-glider{
  position:absolute;left:0;top:0;height:0;width:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(135deg,rgba(10,132,255,.22),rgba(124,92,255,.22));
  box-shadow:inset 0 0 0 1px rgba(124,178,255,.28), 0 6px 20px -8px rgba(10,132,255,.6);
  opacity:0;z-index:0;
  transition:transform .45s var(--ease-spring), width .45s var(--ease-spring), height .3s, opacity .25s;
}
.home-premium .nav-menu.has-glider > a,
.home-premium .nav-menu.has-glider > .nav-dropdown{position:relative;z-index:1}
.home-premium .nav-menu.has-glider > a:not(.nav-cta):hover{background:transparent}

/* ── Form fields: soft focus glow ───────────────────────────────── */
.home-premium input,.home-premium select,.home-premium textarea{
  transition:border-color .25s, box-shadow .35s var(--ease-soft), background .25s;
}
.home-premium input:focus,.home-premium select:focus,.home-premium textarea:focus{
  border-color:rgba(92,180,255,.7);
  box-shadow:0 0 0 4px rgba(10,132,255,.18), 0 10px 30px -12px rgba(10,132,255,.6);
  background:rgba(14,20,38,.75);
}

/* ── Buttons: click ripple (all devices) ────────────────────────── */
.home-premium .btn{position:relative;overflow:hidden;isolation:isolate}
.home-premium .btn .ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  background:rgba(255,255,255,.35);transform:scale(0);
  animation:mxRipple .6s var(--ease-soft) forwards;
}
@keyframes mxRipple{to{transform:scale(1);opacity:0}}
.home-premium .btn:active{transform:scale(.97)}

/* ── Card spotlight (injected .mx-spot, follows the pointer) ────── */
.home-premium .mx-host{position:relative}
.home-premium .mx-spot{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),rgba(92,180,255,.14),transparent 60%);
  opacity:0;transition:opacity .35s var(--ease-soft);
}
.home-premium .mx-host:hover > .mx-spot{opacity:1}

/* ── CCTV "live camera" tag on CCTV imagery ─────────────────────── */
.home-premium .cam-live{position:relative;overflow:hidden}
.home-premium .rec-tag{
  position:absolute;top:14px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:8px;
  font:600 .68rem/1 var(--font-mono,monospace);letter-spacing:.18em;color:#fff;
  background:rgba(5,7,13,.62);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.home-premium .rec-tag::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#ff3b30;
  box-shadow:0 0 10px #ff3b30;
}
.home-premium .scanline{
  position:absolute;left:0;right:0;top:0;height:30%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(92,180,255,.10) 70%,rgba(92,180,255,.35) 98%,transparent);
  transform:translateY(-100%);opacity:.8;
}

/* ── CTA block: rotating light around the border ────────────────── */
@property --mx-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.home-premium .cta-ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;padding:1.5px;
  background:conic-gradient(from var(--mx-angle),transparent 0deg,rgba(92,180,255,.9) 60deg,rgba(124,92,255,.9) 120deg,transparent 180deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ── Footer links nudge ─────────────────────────────────────────── */
.home-premium footer .footer-col a{display:inline-block;transition:color .25s, transform .3s var(--ease-spring)}
.home-premium footer .footer-col a:hover{transform:translateX(4px)}

/* ── WhatsApp nudge tooltip (shown once per visit) ──────────────── */
.whatsapp-float.nudge .whatsapp-tooltip{opacity:1}
.home-premium .whatsapp-float .whatsapp-tooltip{
  background:rgba(16,22,42,.92);color:var(--p-ink);border-color:var(--p-edge-strong);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
}

/* ═══ Everything that actually moves lives below ══════════════════ */
@media (prefers-reduced-motion: no-preference){

  /* Page heroes (sub-pages): staggered entrance on load, not on scroll */
  .home-premium .page-hero .badge,
  .home-premium .page-hero h1,
  .home-premium .page-hero > .container > p,
  .home-premium .page-hero .cta-buttons,
  .home-premium .page-hero .cta-trust{animation:mxRise .8s var(--ease-soft) both}
  .home-premium .page-hero .badge{animation-name:mxDrop;animation-delay:.05s}
  .home-premium .page-hero h1{animation-delay:.12s}
  .home-premium .page-hero > .container > p{animation-delay:.24s}
  .home-premium .page-hero .cta-buttons{animation-delay:.34s}
  .home-premium .page-hero .cta-trust{animation-delay:.44s}
  @keyframes mxRise{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
  @keyframes mxDrop{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}

  /* Gradient headline text slowly shimmers */
  .home-premium .page-hero h1 .grad{
    background-image:linear-gradient(90deg,#5CB4FF,#7C5CFF,#22d3ee,#5CB4FF);
    background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:mxShimmer 7s linear infinite;
  }
  @keyframes mxShimmer{to{background-position:300% 0}}

  /* Primary buttons: light sheen sweeps across every few seconds */
  .home-premium .btn-primary::before{
    content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:0;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
    transform:translateX(-150%) skewX(-20deg);
    animation:mxSheen 4.5s ease-in-out 1.5s infinite;
  }
  @keyframes mxSheen{0%{transform:translateX(-150%) skewX(-20deg)}28%,100%{transform:translateX(320%) skewX(-20deg)}}

  /* Arrow inside buttons gently beckons */
  .home-premium .btn-primary .arrow{display:inline-block;animation:mxBeckon 2.4s ease-in-out infinite}
  .home-premium .btn-primary:hover .arrow{animation:none}
  @keyframes mxBeckon{0%,70%,100%{transform:none}80%{transform:translateX(5px)}90%{transform:translateX(1px)}}

  /* Eyebrow chips: shine once when their section appears */
  .home-premium .eyebrow{position:relative;overflow:hidden}
  .home-premium .reveal.in .eyebrow::after,
  .home-premium .reveal.in.eyebrow::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
    transform:translateX(-120%);
    animation:mxChipShine 1.1s var(--ease-soft) .35s forwards;
  }
  @keyframes mxChipShine{to{transform:translateX(120%)}}

  /* Checklists, tables, area tags and trust ticks cascade in.
     They only animate once the parent has .in — which shared.js always adds
     (1.2s safety net), and without JS they're simply static and visible. */
  .home-premium .reveal.in .service-detail ul li,
  .home-premium .service-detail.reveal.in ul li,
  .home-premium .reveal.in .hk-list li,
  .home-premium .hk-block.reveal.in tbody tr{animation:mxSlideIn .55s var(--ease-soft) both}
  .home-premium .areas-grid.reveal.in .area-tag,
  .home-premium .reveal.in .areas-grid .area-tag{animation:mxPop .5s var(--ease-spring) both}
  .home-premium .reveal.in .cta-trust span::before,
  .home-premium .cta-block.reveal.in .cta-trust span::before{animation:mxTick .5s var(--ease-spring) both}
  @keyframes mxSlideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes mxPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
  @keyframes mxTick{from{transform:scale(0) rotate(-90deg)}to{transform:none}}

  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(1){animation-delay:.10s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(2){animation-delay:.16s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(3){animation-delay:.22s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(4){animation-delay:.28s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(5){animation-delay:.34s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(6){animation-delay:.40s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(7){animation-delay:.46s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(8){animation-delay:.52s}
  .home-premium :is(.service-detail ul li,.hk-list li,tbody tr,.area-tag,.cta-trust span):nth-child(n+9){animation-delay:.58s}
  .home-premium .cta-trust span::before{animation-delay:inherit}

  /* Service card icons: playful bounce on hover */
  .home-premium .service-card:hover .service-icon{animation:mxBounce .7s var(--ease-spring)}
  @keyframes mxBounce{0%{transform:none}35%{transform:translateY(-8px) rotate(-8deg) scale(1.1)}65%{transform:translateY(2px) rotate(3deg)}100%{transform:rotate(-6deg) scale(1.08)}}

  /* FAQ: answer text fades up as it opens */
  .home-premium .faq-item.open .faq-a{animation:mxFadeUp .45s var(--ease-soft) both}
  @keyframes mxFadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* CCTV imagery: blinking REC light + camera scan sweep */
  .home-premium .rec-tag::before{animation:mxRec 1.2s steps(1,end) infinite}
  @keyframes mxRec{50%{opacity:.15}}
  .home-premium .scanline{animation:mxScan 4.5s cubic-bezier(.45,0,.55,1) infinite}
  @keyframes mxScan{0%{transform:translateY(-100%)}60%,100%{transform:translateY(340%)}}

  /* CTA border light orbits the box */
  .home-premium .cta-ring{animation:mxOrbit 6s linear infinite}
  @keyframes mxOrbit{to{--mx-angle:360deg}}

  /* WhatsApp: soft ripple ring every few seconds + wiggle when nudging */
  .whatsapp-float::before{
    content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
    border:2px solid rgba(37,211,102,.7);
    animation:mxRing 3s var(--ease-soft) 2s infinite;
  }
  @keyframes mxRing{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.7);opacity:0}}
  .whatsapp-float.nudge svg{animation:mxWiggle .9s ease-in-out 2}
  @keyframes mxWiggle{0%,100%{transform:none}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
  .whatsapp-float.nudge .whatsapp-tooltip{animation:mxTip .4s var(--ease-spring)}
  @keyframes mxTip{from{opacity:0;transform:translate(8px,-50%)}to{opacity:1;transform:translate(0,-50%)}}

  /* Logo breathes a soft glow */
  .home-premium header .brand img{animation:mxGlow 5s ease-in-out infinite}
  @keyframes mxGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(10,132,255,0))}50%{filter:drop-shadow(0 0 12px rgba(10,132,255,.55))}}
}