/* ============================================================
   Motion & Interaction Layer — "NEURAL LAB"
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes caret {
  0%, 49%   { border-color: var(--gold); }
  50%, 100% { border-color: transparent; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

@keyframes sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes scan {
  0%   { transform: translateY(-40%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

@keyframes nameReveal {
  from { clip-path: inset(0 0 105% 0); opacity: 0; transform: translateY(.22em); }
  to   { clip-path: inset(-25% -12% -25% -12%); opacity: 1; transform: translateY(0); }
}

@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

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

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 50%, transparent); }
  70%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -300% 0; }
  100% { background-position: 300% 0; }
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(3%, -4%, 0) scale(1.06); }
  66%      { transform: translate3d(-3%, 3%, 0) scale(.96); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes fabIn {
  from { opacity: 0; transform: translateY(24px) scale(.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Scroll reveal ---------- */
.reveal,
.timeline-item {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .75s var(--ease),
    transform .75s var(--ease);
  transition-delay: calc(var(--stagger, 0) * 85ms);
  will-change: opacity, transform;
}

.reveal.visible,
.timeline-item.visible { opacity: 1; transform: translateY(0); }

.reveal[data-dir="left"]  { transform: translateX(-36px); }
.reveal[data-dir="right"] { transform: translateX(36px); }
.reveal[data-dir="scale"] { transform: scale(.94); }
.reveal[data-dir="left"].visible,
.reveal[data-dir="right"].visible { transform: translateX(0); }
.reveal[data-dir="scale"].visible { transform: scale(1); }

.reveal-delay-1 { --stagger: 1; }
.reveal-delay-2 { --stagger: 2; }
.reveal-delay-3 { --stagger: 3; }
.reveal-delay-4 { --stagger: 4; }
.reveal-delay-5 { --stagger: 5; }

/* ---------- Page transition ---------- */
.page-enter { animation: pageIn .7s var(--ease) both; }

body.is-leaving main,
body.is-leaving .footer {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* ---------- Ambient motion ---------- */
.hero-aurora span { animation: drift 24s var(--ease-soft) infinite; }
.hero-aurora span:nth-child(2) { animation-duration: 29s; animation-delay: -7s; }
.hero-aurora span:nth-child(3) { animation-duration: 34s; animation-delay: -14s; }

.hero-image-wrapper { animation: floatY 7s var(--ease-soft) infinite; }

.timeline-item.visible::before { animation: pulseRing 2.6s var(--ease-soft) 1; }

.stat-card.animate .stat-number {
  background-image: linear-gradient(100deg, var(--cyan) 18%, var(--violet) 45%, var(--gold) 72%);
  background-size: 300% 100%;
  animation: shimmer 2.4s var(--ease-soft) 1;
}

.publication-card.just-shown { animation: pageIn .45s var(--ease) both; }
.nav-menu.active { animation: pageIn .3s var(--ease) both; }

/* ---------- Floating action dock (WhatsApp / Call) ---------- */
.fab-dock {
  position: fixed;
  left: 1.6rem;
  bottom: 1.6rem;
  z-index: 950;
  display: flex;
  flex-direction: column-reverse;
  gap: .75rem;
  animation: fabIn .6s var(--ease) .8s both;
}

.fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), width .35s var(--ease);
}

.fab svg { width: 26px; height: 26px; fill: currentColor; }

.fab-whatsapp {
  background: linear-gradient(145deg, #25D366, #128C7E);
  border-color: rgba(37, 211, 102, .55);
  animation: pulseGreen 2.8s var(--ease-soft) infinite;
}

.fab-call {
  background: var(--grad-cool);
  color: #04060E;
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
}

.fab:hover { transform: translateY(-4px) scale(1.08); }
.fab-whatsapp:hover { box-shadow: 0 14px 40px -12px rgba(37, 211, 102, .8); }
.fab-call:hover { box-shadow: var(--glow-cyan); }

/* Tooltip label */
.fab-label {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: .32rem .7rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border: 1px solid var(--border-hi);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.fab:hover .fab-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .timeline-item { opacity: 1 !important; transform: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .neural-canvas { display: none !important; }
}

@keyframes carouselBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}