/* ════════════════════════════════════════════════════
   LA BOTANIQUE — ANIMATIONS CSS
   Keyframes · Transiciones globales
   ════════════════════════════════════════════════════ */

/* ── HERO ELEMENTS ── */
@keyframes hero-reveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
    transform: translateY(0);
  }
}

/* ── HOJAS FLOTANTES ── */
@keyframes leaf-float {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.8); }
  10%  { opacity: 1; }
  50%  { opacity: 0.6; transform: rotate(15deg) scale(1.05); }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: rotate(25deg) scale(0.9); }
}

/* ── SCROLL INDICATOR ── */
@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.3; }
}

@keyframes scroll-fade {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.6; }
}

/* ── NAV DOT PULSE ── */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}

/* ── BURBUJAS TRANSICIÓN ── */
@keyframes burbuja-rise {
  0%   { bottom: -20px; opacity: 0; transform: scale(0.5); }
  20%  { opacity: 0.7; }
  80%  { opacity: 0.4; }
  100% { bottom: 110%; opacity: 0; transform: scale(1.2); }
}

/* ── CAÚSTICAS AQUARIUM ── */
@keyframes caustics-shift {
  0%   { background-position: 0% 0%, 100% 100%; opacity: 1; }
  100% { background-position: 10% 5%, 90% 95%; opacity: 0.8; }
}

@keyframes caustics-tank {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── PLANTAS SUBMARINAS ── */
@keyframes plant-sway {
  0%   { transform: rotate(-3deg) skewX(-1deg); }
  50%  { transform: rotate(3deg) skewX(1deg); }
  100% { transform: rotate(-3deg) skewX(-1deg); }
}

/* ── PECES NADANDO ── */
@keyframes fish-swim {
  0%   { left: -10%; transform: scaleX(1); }
  49%  { left: 110%; transform: scaleX(1); }
  50%  { left: 110%; transform: scaleX(-1); }
  100% { left: -10%; transform: scaleX(-1); }
}

/* ── FADE IN ── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SPIN (loading) ── */
@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ── RIPPLE ── */
@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── SHIMMER (skeleton loading) ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(45,74,47,0.05) 25%,
    rgba(45,74,47,0.12) 50%,
    rgba(45,74,47,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ── ENTRANCE ANIMATIONS (usadas por GSAP como referencia + fallback) ── */
.anim-fade-up {
  animation: fade-up 0.8s var(--ease-premium) forwards;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── STAGGER HELPERS ── */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* ── TEXT SHIMMER (acento decorativo) ── */
@keyframes text-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--moss) 0%,
    var(--sage) 40%,
    var(--moss) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 4s linear infinite;
}

.text-shimmer--aqua {
  background: linear-gradient(
    90deg,
    var(--aqua) 0%,
    var(--aqua-light) 40%,
    var(--aqua) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 3s linear infinite;
}

/* ── HOVER LINE DRAW ── */
.line-draw {
  position: relative;
  display: inline-block;
}

.line-draw::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease-premium);
}

.line-draw:hover::after {
  width: 100%;
}

/* ── WAVE SUBTLE (footer o sección divisoria) ── */
@keyframes wave-drift {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(-2%) scaleY(1.02); }
  100% { transform: translateX(0) scaleY(1); }
}

/* ── PARALLAX CONTAINERS ── */
.parallax-slow   { will-change: transform; }
.parallax-medium { will-change: transform; }
.parallax-fast   { will-change: transform; }

/* ── NAV TRANSITION ── */
.nav-wrapper {
  transition:
    background 0.6s var(--ease-premium),
    backdrop-filter 0.6s,
    -webkit-backdrop-filter 0.6s,
    box-shadow 0.4s;
}

/* ── CARD SHINE EFFECT ── */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.06) 50%,
    transparent 60%
  );
  transform: skewX(-15deg);
  transition: left 0.6s var(--ease-premium);
  pointer-events: none;
}

.card-shine:hover::after {
  left: 130%;
}

/* ── AQ CARD GLOW ── */
.aq-card {
  position: relative;
}

.aq-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(58,171,170,0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.aq-card:hover::before {
  opacity: 1;
}

/* ── SCROLLBAR PERSONALIZADO ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--crema);
}

::-webkit-scrollbar-thumb {
  background: var(--stone);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sage);
}

/* Zona Aquarium - scrollbar azul */
.aq-hero::-webkit-scrollbar-thumb,
.aq-servicios::-webkit-scrollbar-thumb {
  background: var(--aqua);
}

/* ── SELECTION ── */
::selection {
  background: rgba(45, 74, 47, 0.18);
  color: var(--moss-dark);
}

.aq-hero ::selection,
.aq-servicios ::selection {
  background: rgba(58, 171, 170, 0.25);
  color: var(--aq-text);
}