/* ==========================================================================
   KASTOR · ANIMATIONS  —  Scroll-reveal · spotlight · parallax · orbs
   Complementa styles.css. Cargado después para sobrescribir donde sea necesario.
   Inspirado en: Linear.app, Stripe, Vercel
   ========================================================================== */

/* ── SCROLL PROGRESS BAR ────────────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover), #ffb347);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 200;
  transition: transform 0.08s linear;
}

/* ── REVEAL ON SCROLL ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Variante lateral */
.reveal-left  { opacity: 0; transform: translateX(-28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal-right { opacity: 0; transform: translateX(28px);  transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal-left.in-view,
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

/* Stagger por índice (se aplica via JS con data-delay) */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }
.reveal[data-delay="7"] { transition-delay: 0.56s; }
.reveal[data-delay="8"] { transition-delay: 0.64s; }

/* ── GRADIENT TEXT (em dentro de títulos grandes) ───────────────────────── */
.intro-title em,
.hero-title em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 45%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: grad-pan 4s linear infinite;
  font-style: normal;
}
@keyframes grad-pan {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ── EYEBROW SHIMMER ────────────────────────────────────────────────────── */
/* Fallback: el color base de styles.css (color:var(--accent)) sigue activo */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .eyebrow {
    background: linear-gradient(
      90deg,
      var(--accent) 35%,
      color-mix(in srgb, var(--accent) 60%, #fff) 50%,
      var(--accent) 65%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3.5s linear infinite;
  }
}
@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ── ANIMATED ORBS (intro / hero) ───────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: transform;
}
.orb.show { opacity: 1; }

.orb-a {
  width: min(700px, 80vw);
  height: min(480px, 60vw);
  top: -15%;
  right: -8%;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),.17) 0%, transparent 70%);
  filter: blur(60px);
  animation: orb-a 14s ease-in-out infinite;
}
.orb-b {
  width: min(560px, 70vw);
  height: min(420px, 55vw);
  bottom: -10%;
  left: -10%;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),.1) 0%, transparent 70%);
  filter: blur(80px);
  animation: orb-b 18s ease-in-out infinite;
}
.orb-c {
  width: min(300px, 40vw);
  height: min(300px, 40vw);
  top: 35%;
  left: 38%;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),.06) 0%, transparent 70%);
  filter: blur(50px);
  animation: orb-a 10s ease-in-out 3s infinite reverse;
}

@keyframes orb-a {
  0%,100% { transform: translate(0, 0)   scale(1); }
  33%     { transform: translate(-35px, 25px) scale(1.07); }
  66%     { transform: translate(25px, -18px) scale(0.95); }
}
@keyframes orb-b {
  0%,100% { transform: translate(0, 0)   scale(1); }
  40%     { transform: translate(40px, -28px) scale(1.05); }
  70%     { transform: translate(-20px, 15px) scale(0.97); }
}

/* ── DOT GRID BACKGROUND ───────────────────────────────────────────────── */
.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(var(--accent-rgb),.18) 1px,
    transparent 1px
  );
  background-size: 38px 38px;
  mask-image: radial-gradient(
    ellipse 75% 60% at 50% 50%,
    black 0%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 75% 60% at 50% 50%,
    black 0%,
    transparent 100%
  );
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* ── CURSOR GLOW (halo que sigue al mouse) ──────────────────────────────
   Toma el acento del tema activo: naranja en marca/DESIGN, azul en ciencia. */
#cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.055) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transition: transform 0.12s ease;
}

/* ── CARD SPOTLIGHT (mouse glow) ────────────────────────────────────────── */
.card,
.chooser-card,
.pillar,
.step,
.team-card {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  isolation: isolate;
}
.card::before,
.chooser-card::before,
.pillar::before,
.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--spot-x) var(--spot-y),
    rgba(var(--accent-rgb),.10),
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.card:hover::before,
.chooser-card:hover::before,
.pillar:hover::before,
.team-card:hover::before {
  opacity: 1;
}

/* .step usa ::after para el spotlight (::before está reservado para el número de paso en styles.css) */
.step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--spot-x) var(--spot-y),
    rgba(var(--accent-rgb),.10),
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.step:hover::after { opacity: 1; }

/* Asegurar que el contenido queda sobre el spotlight */
.card-media, .card-body,
.chooser-ico, .chooser-tag, .chooser-card h3, .chooser-card p, .chooser-cta,
.pillar .ico-wrap, .pillar h3, .pillar p,
.step::before, .step h3, .step p,
.team-avatar, .team-card > div,
.team-card h4, .team-card .role, .team-card ul {
  position: relative;
  z-index: 1;
}

/* ── CARD HOVER MEJORADO ────────────────────────────────────────────────── */
.card {
  transition:
    border-color 0.25s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
}
.card:hover {
  border-color: rgba(var(--accent-rgb),.35);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb),.12);
}

/* ── PILLAR: línea inferior animada ─────────────────────────────────────── */
.pillar {
  overflow: hidden;
}
.pillar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 1;
}
.pillar:hover::after { transform: scaleX(1); }
.pillar {
  transition: border-color 0.25s ease, transform 0.3s ease;
}
.pillar:hover {
  border-color: rgba(var(--accent-rgb),.35);
  transform: translateY(-4px);
}

/* ── STEP CARDS ─────────────────────────────────────────────────────────── */
.step {
  transition: border-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.step:hover {
  border-color: rgba(var(--accent-rgb),.4);
  transform: translateY(-5px);
}

/* ── SECTION HEAD: underline animado ───────────────────────────────────── */
.section-head {
  position: relative;
}
.section-head::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-top: 1.5rem;
  border-radius: 2px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.section-head.in-view::after { width: 100px; }

/* ── CHOOSER CARDS MEJORADAS ───────────────────────────────────────────── */
.chooser-card {
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.chooser-card:hover {
  border-color: rgba(var(--accent-rgb),.45);
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb),.15);
}

/* ── GALLERY HOVER ───────────────────────────────────────────────────────── */
.gallery-item {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
  transform: scale(1.03);
  border-color: rgba(var(--accent-rgb),.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

/* ── BUTTON SHINE ────────────────────────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
  transform: skewX(-22deg);
  pointer-events: none;
}
.btn-primary:hover::after {
  animation: btn-shine 0.5s ease forwards;
}
@keyframes btn-shine {
  from { left: -150%; }
  to   { left:  160%; }
}

/* ── SIDE NAV DOT PULSE (cuando activo) ─────────────────────────────────── */
.side-link.active .dot {
  position: relative;
}
.side-link.active .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: dot-ping 2s ease-in-out infinite;
  opacity: 0;
}
@keyframes dot-ping {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── NAVBAR: borde inferior con glow al hacer scroll ───────────────────── */
.nav.scrolled {
  border-bottom-color: rgba(var(--accent-rgb),.2);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb),.08);
}

/* ── FAQ MEJORADO ────────────────────────────────────────────────────────── */
.faq-item {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item.open {
  border-color: rgba(var(--accent-rgb),.3);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.08);
}
.faq-q {
  transition: color 0.2s ease;
}
.faq-item.open .faq-q { color: var(--accent); }

/* ── INTRO: fade-in escalonado de los elementos ──────────────────────────── */
.intro-inner > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.intro-inner.fired > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.intro-inner.fired > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.intro-inner.fired > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.intro-inner.fired > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.intro-inner.fired > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.56s; }

/* ── SCROLL-HINT MEJORADO ────────────────────────────────────────────────── */
.scroll-hint {
  opacity: 0;
  animation: hint-appear 1s ease 1.2s forwards, hint-bob 2s ease-in-out 2.2s infinite;
}
@keyframes hint-appear {
  to { opacity: 1; }
}
@keyframes hint-bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(6px); }
}

/* ── FORM INPUTS MEJORADOS ───────────────────────────────────────────────── */
.field input:focus,
.field textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12);
}

/* ── WA FLOAT: glow mejorado ─────────────────────────────────────────────── */
.wa-float {
  box-shadow: 0 6px 20px rgba(37,211,102,.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover {
  box-shadow: 0 10px 36px rgba(37,211,102,.5);
}

/* ── REDUCE MOTION ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .orb-a, .orb-b, .orb-c { animation: none !important; }
  .intro-inner > *  { opacity: 1 !important; transform: none !important; }
  .eyebrow, .intro-title em, .hero-title em { animation: none !important; }
  .btn-primary::after { display: none; }
}

/* ── LOADING SCREEN: mascota corriendo ──────────────────────────────────── */
@keyframes mascot-run-in {
  from { left: -100px; }
  to   { left: calc(50% - 44px); }
}
@keyframes mascot-hop {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.loader-mascot-stage {
  animation:
    mascot-run-in 1.1s cubic-bezier(.22,1,.36,1) .15s forwards,
    mascot-hop    .38s ease-in-out               .15s infinite;
}
#kastor-loader.loader-arrived .loader-mascot-stage { animation-play-state: paused; }

/* ── MASCOTA KAS — bamboleo de reposo (idle) ────────────────────────────── */
@keyframes kas-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}