/* =========================================================
   ANIMATIONS
   ========================================================= */

/* ---------------- Hero Ken Burns Slideshow ---------------- */
.hero-slideshow{
  position:absolute; inset:0;
  overflow:hidden;
  z-index:0;
}
.hero-slideshow .slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  transform: scale(1);
  animation: none;
}
.hero-slideshow .slide.pattern{
  background-image:
    radial-gradient(circle at 20% 30%, rgba(111,207,87,.35) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(24,37,68,.55) 0, transparent 45%),
    linear-gradient(160deg, #0a0d0b 0%, #0f1930 60%, #0a0d0b 100%);
}
.hero-slideshow .slide.is-active{
  opacity:1;
  animation: kenburns 3.6s var(--ease) forwards;
  z-index:2;
}
.hero-slideshow .slide.is-prev{ opacity:0; transition: opacity .9s ease; }

@keyframes kenburns{
  0%{ transform: scale(1) translate(0,0); }
  100%{ transform: scale(1.14) translate(-1.5%, -1.5%); }
}
@keyframes kenburns-alt{
  0%{ transform: scale(1.1) translate(-1%, 0); }
  100%{ transform: scale(1.22) translate(1%, -2%); }
}

.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,13,11,.35) 0%, rgba(10,13,11,.55) 55%, var(--black) 100%),
    linear-gradient(90deg, rgba(10,13,11,.85) 0%, rgba(10,13,11,.25) 55%);
  z-index:1;
}

/* ---------------- Hero mosaic (all images visible at once, each drifting) ---------------- */
.hero-mosaic{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  z-index:0;
}
.hero-mosaic .tile{ position:relative; overflow:hidden; background: var(--black); }
.hero-mosaic .tile-img{
  position:absolute; inset:-12%;
  background-size: cover;
  background-position: center;
  animation: tile-drift 17s ease-in-out infinite alternate;
}
.hero-mosaic .tile:nth-child(1) .tile-img{ animation-duration: 19s; animation-delay: -2s; }
.hero-mosaic .tile:nth-child(2) .tile-img{ animation-duration: 15s; animation-delay: -7s; }
.hero-mosaic .tile:nth-child(3) .tile-img{ animation-duration: 21s; animation-delay: -4s; }
.hero-mosaic .tile:nth-child(4) .tile-img{ animation-duration: 13s; animation-delay: -9s; }

@keyframes tile-drift{
  0%{ transform: scale(1.1) translate(-1.5%, -1%); }
  50%{ transform: scale(1.18) translate(1.5%, 1%); }
  100%{ transform: scale(1.1) translate(-1%, 1.5%); }
}

.hero-visual .hero-scrim{
  z-index:1;
  background:
    linear-gradient(180deg, rgba(10,13,11,.1) 0%, rgba(10,13,11,.3) 60%, var(--black) 100%);
}

/* ---------------- Circuit / molecule node pattern ---------------- */
.circuit-bg{
  position:absolute; inset:0;
  z-index:-1;
  opacity:.5;
  pointer-events:none;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}
.circuit-bg svg{ width:100%; height:100%; }
.circuit-bg circle{ animation: node-pulse 3.2s ease-in-out infinite; }
@keyframes node-pulse{
  0%, 100%{ opacity:.35; }
  50%{ opacity:1; }
}

/* ---------------- Scroll reveal: fade up ---------------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal.in-view{ opacity:1; transform: translateY(0); }

.reveal-stagger > *{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.in-view > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay: .03s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay: .11s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay: .19s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay: .27s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay: .35s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay: .43s; }

/* ---------------- Count-up number ---------------- */
.stat .num[data-count]{ font-variant-numeric: tabular-nums; }

/* ---------------- Marquee (coverage cities ticker) ---------------- */
.marquee{
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-block: .9rem;
}
.marquee-track{
  display:inline-flex;
  gap:2.5rem;
  animation: marquee 22s linear infinite;
}
.marquee-track span{
  font-family: var(--font-mono);
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--steel);
  display:inline-flex; align-items:center; gap:.6rem;
}
.marquee-track span::before{ content:'◆'; color: var(--green); font-size:.6rem; }
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Page load intro */
.boot-mask{
  position:fixed; inset:0;
  background: var(--black);
  z-index: 2000;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:1rem;
  transition: opacity .6s ease, visibility .6s ease;
}
.boot-mask.done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-mark{ display:flex; align-items:center; gap:.8rem; }
.boot-mark .logo-icon{ width:40px; height:40px; }
.boot-type{
  font-family: var(--font-display); font-weight:700; letter-spacing:.04em; font-size:1.4rem; color:#fff;
}
.boot-bar{
  width: 220px; height:2px; background: rgba(255,255,255,.12); overflow:hidden; border-radius:2px;
}
.boot-bar span{
  display:block; height:100%; width:40%; background: var(--green);
  animation: boot-load 1.1s ease-in-out infinite;
}
@keyframes boot-load{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(350%); }
}