/* ===========================================================================
   AlloTech.AI — text motion layer (v3)
   Word-level headline reveal, gradient sweep, animated eyebrows, floating
   hero art. Everything is opt-in via classes added by enhance.js, so the page
   is fully readable with JS off, and every rule stops under reduced motion.
   =========================================================================== */

/* ------------------------------------------------------------ brand / logo */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 34px; width: auto; display: block; }
.brand .wordmark { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--text); }
.brand .wordmark span { color: var(--cyan); }
footer.site .brand img { height: 30px; }
@media (max-width: 480px) { .brand img { height: 28px; } .brand .wordmark { font-size: 17px; } }

/* ------------------------------------------------- headline word reveal */
.split .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(1.2deg);
  animation: word-in .72s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes word-in {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Headings below the fold animate when scrolled to, not on load. */
.split.on-scroll .w { animation-play-state: paused; }
.split.on-scroll.seen .w { animation-play-state: running; }

/* ---------------------------------------------------------- gradient sweep */
.sweep {
  background: linear-gradient(100deg,
    var(--text) 0%, var(--text) 34%, var(--cyan) 50%, var(--text) 66%, var(--text) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sweep 7s ease-in-out infinite;
}
@keyframes sweep {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}

/* ------------------------------------------------------------- eyebrow line */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; height: 1px; width: 0; background: var(--cyan);
  animation: rule-in .9s cubic-bezier(.22,1,.36,1) .25s forwards;
}
@keyframes rule-in { to { width: 34px; } }

/* --------------------------------------------------------- lede fade-up */
.fade-up { opacity: 0; transform: translateY(14px); animation: fade-up .8s cubic-bezier(.22,1,.36,1) forwards; }
.fade-up.dl1 { animation-delay: .18s; }
.fade-up.dl2 { animation-delay: .30s; }
.fade-up.dl3 { animation-delay: .42s; }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- hero float */
.hero-art .frame { animation: float 9s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
.hero-art::before {
  content: ""; position: absolute; inset: -10% -6%;
  background: radial-gradient(closest-side, rgba(0,200,255,.20), transparent 72%);
  filter: blur(28px); z-index: -1;
  animation: halo 8s ease-in-out infinite alternate;
}
@keyframes halo { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

/* --------------------------------------------------------- chips + buttons */
.chip { transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, color .25s ease; }
.chip:hover { transform: translateY(-2px); border-color: rgba(0,200,255,.45); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); animation: shine 5.5s ease-in-out infinite;
}
@keyframes shine { 0%, 62% { left: -120%; } 82%, 100% { left: 150%; } }

/* ------------------------------------------------------------ live ticker */
.ticker { overflow: hidden; position: relative; }
.ticker .track { display: flex; gap: 34px; width: max-content; animation: marquee 26s linear infinite; }
.ticker .track span { color: var(--muted); font-size: 14px; white-space: nowrap; display: inline-flex; gap: 8px; }
.ticker .track b { color: var(--cyan); font-weight: 700; }
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(to right, var(--navy-900), transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left,  var(--navy-900), transparent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .split .w { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sweep { animation: none; background-position: 50% 0; }
  .eyebrow::before { animation: none; width: 34px; }
  .fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-art .frame, .hero-art::before { animation: none !important; }
  .btn-primary::after { animation: none; display: none; }
  .ticker .track { animation: none; }
}

/* ------------------------------------------------------------ cal embed */
.cal-wrap {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: rgba(15,23,42,.55); backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.cal-wrap iframe { width: 100%; min-height: 760px; border: 0; display: block; }
@media (max-width: 620px) { .cal-wrap iframe { min-height: 900px; } }