/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ── GLITCH on LOGO ── */
@keyframes glitch1 {
  0%,95%  { clip-path: none; transform: none; }
  96%     { clip-path: polygon(0 20%,100% 20%,100% 40%,0 40%); transform: translate(-3px,0); }
  97%     { clip-path: polygon(0 60%,100% 60%,100% 75%,0 75%); transform: translate(3px,0); }
  98%     { clip-path: polygon(0 5%,100% 5%,100% 15%,0 15%);   transform: translate(-2px,0); }
  100%    { clip-path: none; transform: none; }
}
@keyframes glitch2 {
  0%,95%      { opacity: 0; }
  96%,99%     { opacity: .7; transform: translate(4px,0); filter: hue-rotate(90deg); }
  100%        { opacity: 0; }
}
.nav-logo { position: relative; }
.nav-logo::before { content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--blue); animation: glitch2 5s infinite; pointer-events: none; }
.hero-title { position: relative; }
.hero-title::before { content: 'ZACO'; position: absolute; left: 0; right: 0; color: var(--blue); animation: glitch2 6s 1s infinite; pointer-events: none; opacity: 0; }

/* ── SHIMMER on section labels ── */
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.section-label {
  background: linear-gradient(90deg, var(--blue) 20%, #a8d8ff 40%, var(--amber) 60%, var(--blue) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── SCROLL PROGRESS LINE at top ── */
#scroll-line { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--blue-dim), var(--blue), var(--amber)); z-index: 200; transition: width .04s linear; }

/* ── SPOTLIGHT on hero ── */
#hero-spotlight { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(circle 300px at 50% 50%, rgba(90,184,245,.06) 0%, transparent 70%); transition: background .05s; }

/* ── PULSE RING on hero badge dot ── */
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }
.hero-badge-dot { position: relative; }
.hero-badge-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--blue); animation: pulse-ring 1.8s ease-out infinite; }

/* ── CARD TILT ── */
.service-card, .team-card, .pricing-card, .stat-card, .addon-card { transform-style: preserve-3d; will-change: transform; }

/* ── ANIMATED GRADIENT BORDERS ── */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin-border { to { --angle: 360deg; } }
.team-card:hover, .pricing-card.featured { border: 1px solid transparent !important; background-clip: padding-box; }
.team-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: 17px;
  background: conic-gradient(from var(--angle), transparent 70%, var(--blue) 85%, var(--amber) 92%, transparent 100%);
  z-index: -1; animation: spin-border 3s linear infinite; opacity: 0; transition: opacity .4s;
}
.team-card:hover::after { opacity: 1; }

/* ── STAGGER service card list items ── */
.service-items li { opacity: 0; transform: translateX(-12px); transition: opacity .4s, transform .4s; }
.service-card.visible .service-items li:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
.service-card.visible .service-items li:nth-child(2) { opacity: 1; transform: none; transition-delay: .12s; }
.service-card.visible .service-items li:nth-child(3) { opacity: 1; transform: none; transition-delay: .19s; }
.service-card.visible .service-items li:nth-child(4) { opacity: 1; transform: none; transition-delay: .26s; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}