/* ---- Motion tokens ---- */
:root{
  --ease: cubic-bezier(.16,.84,.44,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---- Page-load / page-leave transition ---- */
html{
  animation: page-in .5s var(--ease) both;
}
@keyframes page-in{
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.is-leaving{
  opacity: 0;
  transition: opacity .22s var(--ease);
}

/* ---- Scroll reveal ---- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---- Live pulse dot (urgency indicator) ---- */
.pulse-dot{
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
}
.pulse-dot::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
  animation: pulse-ring 1.8s var(--ease) infinite;
}

@keyframes pulse-ring{
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---- Hero texture: dot grid + drifting blobs ---- */
.hero{
  position: relative;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 30%, black 40%, transparent 90%);
  pointer-events: none;
}
.hero-blob{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-blob.b1{
  width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(204,222,42,0.22), rgba(204,222,42,0) 72%);
  top: -160px; right: -100px;
  animation: drift-a 14s ease-in-out infinite;
}
.hero-blob.b2{
  width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(76,95,194,0.30), rgba(76,95,194,0) 72%);
  bottom: -180px; left: 4%;
  animation: drift-b 18s ease-in-out infinite;
}
@keyframes drift-a{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-24px, 26px) scale(1.08); }
}
@keyframes drift-b{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px, -18px) scale(1.05); }
}

/* ---- Marquee (trust badges) ---- */
.marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
}
.marquee:hover .marquee-track{
  animation-play-state: paused;
}
@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Micro-interactions ---- */
.btn{
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.btn:active{
  transform: scale(.96);
}
.btn-lime:hover{
  box-shadow: 0 8px 24px -8px rgba(204,222,42,0.55);
  transform: translateY(-1px);
}
.btn-navy:hover{
  box-shadow: 0 8px 24px -8px rgba(21,26,59,0.45);
  transform: translateY(-1px);
}

.card{
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -18px rgba(21,26,59,0.28);
  border-color: rgba(204,222,42,0.55);
}
.card:hover .icon-tile{
  background: var(--lime);
  transition: background-color .28s var(--ease);
}
.card:hover .icon-tile svg{
  stroke: var(--navy-deep);
  fill: var(--navy-deep);
}
.icon-tile svg{
  transition: stroke .28s var(--ease), fill .28s var(--ease);
}

nav a{
  position: relative;
}
nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--lime);
  transition: right .25s var(--ease);
}
nav a:hover::after{
  right: 0;
}
nav a.active::after{
  right: 0;
}

/* ---- Header compacts on scroll ---- */
header.site-header{
  transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}
header.site-header .wrap{
  transition: padding .3s var(--ease);
}
header.site-header.is-compact{
  box-shadow: 0 8px 24px -16px rgba(21,26,59,0.35);
}
header.site-header.is-compact .wrap{
  padding-top: 10px;
  padding-bottom: 10px;
}
header.site-header.is-compact img.logo{
  height: 36px;
  transition: height .3s var(--ease);
}
header.site-header img.logo{
  transition: height .3s var(--ease);
}

/* ---- Hero headline: line-by-line reveal ---- */
.hero h1 .line{
  display: block;
  overflow: hidden;
}
.hero h1 .line span{
  display: block;
  transform: translateY(110%);
  animation: line-up .8s var(--ease) both;
  animation-delay: var(--line-delay, 0s);
}
@keyframes line-up{
  to { transform: translateY(0); }
}

/* ---- Magnetic buttons ---- */
.btn.magnetic{
  transition: transform .25s var(--spring), box-shadow .18s var(--ease), background-color .18s var(--ease);
}

/* ---- Cursor-reactive spotlight on cards ---- */
.card{
  position: relative;
  isolation: isolate;
}
.card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(204,222,42,0.14), transparent 70%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.card:hover::before{
  opacity: 1;
}
.card > *{
  position: relative;
  z-index: 1;
}

/* ---- Service icon personality on hover ---- */
.icon-tile svg{
  transition: stroke .28s var(--ease), fill .28s var(--ease), transform .4s var(--spring);
}
.card:hover .icon-tile svg{
  transform: scale(1.14) rotate(-6deg);
}
.icon-tile{
  transition: background-color .28s var(--ease), transform .3s var(--spring);
}
.card:hover .icon-tile{
  transform: translateY(-2px);
}

/* ---- Counter pop on finish ---- */
[data-counter]{
  display: inline-block;
}
[data-counter].counter-pop{
  animation: counter-pop .4s var(--spring);
}
@keyframes counter-pop{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---- Marquee items lift on hover ---- */
.marquee-track > span{
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.marquee-track > span:hover{
  color: var(--lime-deep) !important;
  transform: translateY(-2px);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{ animation: none; }
  html.is-leaving{ opacity: 1; transition: none; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .pulse-dot::after{ animation: none; opacity: 0; }
  .hero-blob{ animation: none; }
  .marquee-track{ animation: none; }
  .card, .btn{ transition: none; }
  .card:hover{ transform: none; }
  .hero h1 .line span{ animation: none; transform: none; }
  .btn.magnetic{ transform: none !important; transition: none; }
  .card::before{ display: none; }
  .icon-tile, .icon-tile svg{ transition: none; }
  .card:hover .icon-tile svg{ transform: none; }
  .card:hover .icon-tile{ transform: none; }
  [data-counter].counter-pop{ animation: none; }
}