/* ============================================================
   TECHIST — Homepage-only enhancements
   (Shared motion system lives in style.css; this file adds the
   hero particle canvas, hero load-in choreography and marquee.)
   ============================================================ */

/* ---------- Hero with particle canvas ---------- */
.hero { isolation: isolate; }
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .9;
}
.hero::before { z-index: 1; }
.hero .wrap, .hero .trust-strip { position: relative; z-index: 2; }

/* Drifting gradient orbs */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: 0;
}
.orb--1 {
  width: 480px; height: 480px; top: -160px; right: -80px;
  background: radial-gradient(circle, rgba(11,108,255,.45), transparent 70%);
  animation: orb-drift-1 14s ease-in-out infinite alternate;
}
.orb--2 {
  width: 380px; height: 380px; bottom: -140px; left: -100px;
  background: radial-gradient(circle, rgba(65,182,255,.3), transparent 70%);
  animation: orb-drift-2 18s ease-in-out infinite alternate;
}
@keyframes orb-drift-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px, 50px) scale(1.15); } }
@keyframes orb-drift-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(70px, -40px) scale(1.1); } }

/* Staggered hero load-in */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero-badge, .hero h1, .hero .lede, .hero-ctas, .trust-strip .trust-item {
  opacity: 0;
  animation: rise-in .8s cubic-bezier(.22,.8,.3,1) forwards;
}
.hero-badge { animation-delay: .1s; }
.hero h1 { animation-delay: .22s; }
.hero .lede { animation-delay: .38s; }
.hero-ctas { animation-delay: .52s; }
.trust-strip .trust-item:nth-child(1) { animation-delay: .7s; }
.trust-strip .trust-item:nth-child(2) { animation-delay: .8s; }
.trust-strip .trust-item:nth-child(3) { animation-delay: .9s; }
.trust-strip .trust-item:nth-child(4) { animation-delay: 1s; }

/* Accent word underline sweep */
.hero h1 .accent { position: relative; display: inline-block; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: 0; bottom: .04em;
  width: 100%; height: .12em; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
  transform: scaleX(0); transform-origin: left;
  animation: sweep .7s cubic-bezier(.22,.8,.3,1) 1s forwards;
}
@keyframes sweep { to { transform: scaleX(1); } }

/* Badge shimmer */
.hero-badge { overflow: hidden; position: relative; }
.hero-badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
  animation: shimmer 3.5s ease-in-out 1.6s infinite;
  left: -80px;
}
@keyframes shimmer { 0% { left: -80px; } 40%, 100% { left: 120%; } }

/* CTA glow pulse (hero only) */
.hero .btn--primary { position: relative; }
.hero .btn--primary::after {
  content: ""; position: absolute; inset: -3px; border-radius: 999px; z-index: -1;
  background: radial-gradient(circle, rgba(11,108,255,.55), transparent 70%);
  filter: blur(10px); opacity: .6;
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* ---------- Marquee (logo placeholder strip) ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; gap: 1rem; width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em;
  color: var(--slate-light);
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: .65rem 1.4rem;
  white-space: nowrap;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-badge, .hero h1, .hero .lede, .hero-ctas, .trust-strip .trust-item { animation: none; opacity: 1; }
  .hero h1 .accent::after { animation: none; transform: scaleX(1); }
  .hero-badge::after, .hero .btn--primary::after { animation: none; }
  .orb { animation: none; }
  .marquee-track { animation: none; }
  #hero-canvas { display: none; }
}