/* ==========================================================================
   CE CONSULTANTS — ANIMATION LAYER
   ========================================================================== */

@keyframes scrollLine{
  0%{ top:-100%; }
  50%{ top:0%; }
  100%{ top:100%; }
}

@keyframes dashDraw{
  to{ stroke-dashoffset: 0; }
}

@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

@keyframes pulseDot{
  0%, 100%{ opacity:1; transform: scale(1); }
  50%{ opacity:0.4; transform: scale(1.4); }
}

@keyframes gridPan{
  from{ background-position: 0 0; }
  to{ background-position: 64px 64px; }
}

@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Generic scroll-reveal — toggled by IntersectionObserver in animations.js */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

.reveal-line{ overflow:hidden; }
.reveal-line > *{
  display:block; transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
.reveal-line.is-visible > *{ transform: translateY(0); }

.reveal-scale{
  opacity:0; transform: scale(0.94);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }

.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

.animate-draw path,
.animate-draw line,
.animate-draw polyline,
.animate-draw polygon{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.animate-draw.is-drawn path,
.animate-draw.is-drawn line,
.animate-draw.is-drawn polyline,
.animate-draw.is-drawn polygon{
  animation: dashDraw 2.4s var(--ease) forwards;
}

.float{ animation: floatY 6s ease-in-out infinite; }
.pulse-dot{ animation: pulseDot 2.4s ease-in-out infinite; }

/* Magnetic button wrapper — transform applied via JS */
.magnetic{ transition: transform 0.25s var(--ease-soft); will-change: transform; }

/* ---------------- Capabilities ticker (marquee) ---------------- */
.ticker{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: var(--navy); padding: 1.1rem 0;
}
.ticker-track{
  display:flex; width:max-content; gap:3rem;
  animation: tickerScroll 26s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state: paused; }
.ticker-track span{
  font-family: var(--f-mono); font-size:0.76rem; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--steel); white-space:nowrap;
  display:flex; align-items:center; gap:0.9rem;
}
.ticker-track span::after{ content:'◆'; color: var(--cyan); font-size:0.45rem; }
@keyframes tickerScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------------- Scroll-spy section dots (desktop) ---------------- */
.scrollspy{
  position:fixed; right: 1.8rem; top:50%; transform: translateY(-50%);
  z-index:500; display:flex; flex-direction:column; gap:1rem;
}
.scrollspy a{
  width:7px; height:7px; border-radius:50%; border:1px solid var(--line-strong);
  display:block; position:relative; background:transparent;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.scrollspy a::after{
  content:attr(data-label); position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family: var(--f-mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--steel); white-space:nowrap; opacity:0; transition:opacity 0.25s;
  pointer-events:none; background: var(--navy-deep); padding: 0.2rem 0.5rem; border:1px solid var(--line);
}
.scrollspy a:hover, .scrollspy a.is-active{ border-color: var(--cyan); transform: scale(1.3); }
.scrollspy a.is-active{ background: var(--cyan); }
.scrollspy a:hover::after, .scrollspy a.is-active::after{ opacity:1; }

/* ---------------- 3D tilt (project cards, capability blocks) ---------------- */
.tilt{ transition: transform 0.3s var(--ease-soft); will-change: transform; transform-style: preserve-3d; }

/* ---------------- HUD coordinate readout (hero) ---------------- */
.hud-coord{
  position:absolute; left: var(--gutter); bottom: 2.6rem; z-index:2;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing:0.08em;
  color: var(--steel); border:1px solid var(--line); background: rgba(11,22,38,0.55);
  padding: 0.55rem 0.9rem; backdrop-filter: blur(6px); display:none;
}
.hud-coord .hc-dot{
  display:inline-block; width:5px; height:5px; border-radius:50%; background: var(--cyan);
  margin-right:0.5rem; animation: pulseDot 2s ease-in-out infinite;
}
.hud-coord span.val{ color: var(--cyan); }

/* Loading screen internal motion */
.loader-mark .full{ animation: none; }