/* =====================================================
   animations.css — Emil Kowalski-inspired animations
   Spring physics · Micro-interactions · Natural easing
   ===================================================== */

/* ── SPRING EASING CURVES (Emil's signature) ── */
:root {
  /* Spring: fast out, gentle settle */
  --spring-1: cubic-bezier(0.28, 0.11, 0.32, 1);
  /* Snappy: overshoot feel */
  --spring-2: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Smooth: ease in-out natural */
  --smooth: cubic-bezier(0.4, 0, 0.2, 1);
  /* Enter: elements coming in */
  --enter: cubic-bezier(0, 0, 0.2, 1);
  /* Exit: elements going out */
  --exit: cubic-bezier(0.4, 0, 1, 1);

  /* Duration tokens */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
  --dur-slower: 600ms;
}

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

/* ════════════════════════════════════════════════════
   PAGE LOAD — Staggered orchestrated entrance
   Emil: "One well-choreographed entrance > scattered effects"
   ════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); filter: blur(2px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

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

/* Badge entrance */
.hero-badge {
  animation: slideRight var(--dur-slower) var(--spring-1) both;
  animation-delay: 0ms;
}

/* H1 lines — staggered per line */
.hero-h1 {
  animation: fadeUp var(--dur-slower) var(--spring-1) both;
  animation-delay: 80ms;
}

/* Hero subtitle */
.hero-sub {
  animation: fadeUp var(--dur-slower) var(--spring-1) both;
  animation-delay: 160ms;
}

/* Email form */
.email-form {
  animation: fadeUp var(--dur-slower) var(--spring-1) both;
  animation-delay: 220ms;
}

/* Form note */
.form-note {
  animation: fadeIn var(--dur-slow) var(--smooth) both;
  animation-delay: 300ms;
}

/* Stats */
.hero-stats {
  animation: fadeUp var(--dur-slower) var(--spring-1) both;
  animation-delay: 340ms;
}

/* Individual stats stagger */
.hero-stats .stat:nth-child(1) { animation: revealUp var(--dur-slow) var(--spring-1) both; animation-delay: 360ms; }
.hero-stats .stat:nth-child(2) { animation: revealUp var(--dur-slow) var(--spring-1) both; animation-delay: 400ms; }
.hero-stats .stat:nth-child(3) { animation: revealUp var(--dur-slow) var(--spring-1) both; animation-delay: 440ms; }
.hero-stats .stat:nth-child(4) { animation: revealUp var(--dur-slow) var(--spring-1) both; animation-delay: 480ms; }

/* Terminal */
.hero-right {
  animation: scaleIn var(--dur-slower) var(--spring-1) both;
  animation-delay: 200ms;
}

/* Page header */
.page-header {
  animation: fadeUp var(--dur-slower) var(--spring-1) both;
}

/* Filter bar */
.filter-bar {
  animation: fadeUp var(--dur-slower) var(--spring-1) both;
  animation-delay: 100ms;
}

/* ════════════════════════════════════════════════════
   SCROLL REVEAL — Intersection Observer powered
   ════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slower) var(--spring-1),
    transform var(--dur-slower) var(--spring-1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children in grids */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slower) var(--spring-1),
    transform var(--dur-slower) var(--spring-1);
}

.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 60ms; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }

/* ════════════════════════════════════════════════════
   NAV — Smooth spring transitions
   ════════════════════════════════════════════════════ */

.nav-links a {
  position: relative;
  transition: color var(--dur-base) var(--smooth);
}

/* Underline slide — Emil's signature link style */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--spring-2);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-cta {
  transition:
    background var(--dur-base) var(--smooth),
    color var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-2),
    box-shadow var(--dur-base) var(--smooth);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
}

.nav-cta:active {
  transform: translateY(0) scale(0.98);
}

/* ════════════════════════════════════════════════════
   BUTTONS — Spring press effect
   ════════════════════════════════════════════════════ */

.email-form button,
.cta-form button,
.nl-form button,
.setup-cta {
  transition:
    background var(--dur-base) var(--smooth),
    color var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-2),
    box-shadow var(--dur-base) var(--smooth);
}

.email-form button:hover,
.cta-form button:hover,
.nl-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.25);
}

.email-form button:active,
.cta-form button:active,
.nl-form button:active {
  transform: scale(0.97);
}

/* ════════════════════════════════════════════════════
   CARDS — Fluid lift + glow on hover
   Emil: "Hover states should feel like lifting a card"
   ════════════════════════════════════════════════════ */

/* Post cards */
.post-card {
  transition:
    background var(--dur-base) var(--smooth),
    transform var(--dur-base) var(--spring-1),
    box-shadow var(--dur-slow) var(--smooth);
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.post-arrow {
  transition:
    color var(--dur-base) var(--smooth),
    transform var(--dur-base) var(--spring-2);
}

.post-card:hover .post-arrow {
  transform: translate(4px, -4px);
}

/* Pillar cards */
.pillar {
  transition:
    background var(--dur-slow) var(--smooth),
    transform var(--dur-base) var(--spring-1);
}

.pillar:hover {
  transform: translateY(-3px);
}

.pillar::before {
  transition: transform var(--dur-slow) var(--spring-1);
}

.pillar-num {
  transition:
    color var(--dur-slow) var(--smooth),
    transform var(--dur-slow) var(--spring-1);
}

.pillar:hover .pillar-num {
  transform: scale(1.1) translateY(-4px);
}

/* Resource cards */
.resource-card {
  transition:
    background var(--dur-base) var(--smooth),
    transform var(--dur-base) var(--spring-1);
}

.resource-card:hover {
  transform: translateY(-2px);
}

.resource-arrow {
  transition:
    color var(--dur-base) var(--smooth),
    transform var(--dur-base) var(--spring-2);
}

.resource-card:hover .resource-arrow {
  transform: translate(4px, -4px);
}

/* Testimonial cards — subtle tilt */
.testi-card {
  transition:
    transform var(--dur-slow) var(--spring-1),
    box-shadow var(--dur-slow) var(--smooth),
    border-color var(--dur-base) var(--smooth);
}

.testi-card:hover {
  transform: translateY(-2px) rotate(0.3deg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  border-color: var(--border2);
}

/* ════════════════════════════════════════════════════
   PRODUCT CARDS (Juguetes) — Spring lift
   ════════════════════════════════════════════════════ */

.product-card {
  transition:
    background var(--dur-base) var(--smooth),
    transform var(--dur-base) var(--spring-1),
    box-shadow var(--dur-slow) var(--smooth);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.product-card::before {
  transition: transform var(--dur-slow) var(--spring-1);
}

.card-cta {
  transition:
    border-color var(--dur-base) var(--smooth),
    color var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-2);
}

.product-card:hover .card-cta {
  transform: translateX(2px);
}

.card-emoji {
  transition: transform var(--dur-slow) var(--spring-2);
  display: block;
}

.product-card:hover .card-emoji {
  transform: scale(1.15) rotate(-4deg);
}

/* ════════════════════════════════════════════════════
   FORM INPUTS — Focus spring
   ════════════════════════════════════════════════════ */

.email-form input,
.cta-form input,
.nl-form input {
  transition:
    border-color var(--dur-base) var(--smooth),
    box-shadow var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-1);
}

.email-form input:focus,
.cta-form input:focus,
.nl-form input:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

/* ════════════════════════════════════════════════════
   CERT TAGS — Pop on hover
   ════════════════════════════════════════════════════ */

.cert-tag {
  transition:
    border-color var(--dur-base) var(--smooth),
    color var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-2),
    background var(--dur-base) var(--smooth);
}

.cert-tag:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(0, 212, 255, 0.06);
}

/* ════════════════════════════════════════════════════
   FILTER BUTTONS — Active spring snap
   ════════════════════════════════════════════════════ */

.filter-btn {
  transition:
    background var(--dur-base) var(--smooth),
    color var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-2);
}

.filter-btn:active {
  transform: scale(0.96);
}

/* ════════════════════════════════════════════════════
   TERMINAL — Cursor blink refined
   ════════════════════════════════════════════════════ */

@keyframes blink {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}

.t-cursor {
  animation: blink 1.1s var(--smooth) infinite;
}

/* Terminal typing feel — lines fade in sequentially */
.terminal-body div {
  animation: fadeIn var(--dur-slow) var(--smooth) both;
}

.terminal-body div:nth-child(1)  { animation-delay: 400ms; }
.terminal-body div:nth-child(2)  { animation-delay: 480ms; }
.terminal-body div:nth-child(3)  { animation-delay: 560ms; }
.terminal-body div:nth-child(4)  { animation-delay: 640ms; }
.terminal-body div:nth-child(5)  { animation-delay: 700ms; }
.terminal-body div:nth-child(6)  { animation-delay: 750ms; }
.terminal-body div:nth-child(7)  { animation-delay: 800ms; }
.terminal-body div:nth-child(8)  { animation-delay: 840ms; }
.terminal-body div:nth-child(9)  { animation-delay: 880ms; }
.terminal-body div:nth-child(10) { animation-delay: 920ms; }
.terminal-body div:nth-child(11) { animation-delay: 960ms; }
.terminal-body div:nth-child(12) { animation-delay: 1000ms; }
.terminal-body div:nth-child(13) { animation-delay: 1030ms; }
.terminal-body div:nth-child(14) { animation-delay: 1060ms; }
.terminal-body div:nth-child(15) { animation-delay: 1090ms; }
.terminal-body div:nth-child(16) { animation-delay: 1120ms; }
.terminal-body div:nth-child(17) { animation-delay: 1150ms; }
.terminal-body div:nth-child(18) { animation-delay: 1180ms; }

/* ════════════════════════════════════════════════════
   HERO BADGE — Pulse alive
   ════════════════════════════════════════════════════ */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(57, 211, 83, 0.4); }
  50%       { opacity: 0.8; transform: scale(0.85); }
  70%       { box-shadow: 0 0 0 6px rgba(57, 211, 83, 0); }
}

.hero-badge::before {
  animation: pulse 2.4s var(--smooth) infinite;
}

/* ════════════════════════════════════════════════════
   TIMELINE — Slide in from left
   ════════════════════════════════════════════════════ */

.tl-item {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity var(--dur-slower) var(--spring-1),
    transform var(--dur-slower) var(--spring-1);
}

.tl-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.tl-item:nth-child(1) { transition-delay: 0ms; }
.tl-item:nth-child(2) { transition-delay: 80ms; }
.tl-item:nth-child(3) { transition-delay: 160ms; }
.tl-item:nth-child(4) { transition-delay: 240ms; }
.tl-item:nth-child(5) { transition-delay: 320ms; }

.tl-dot {
  transition: transform var(--dur-base) var(--spring-2);
}

.tl-item:hover .tl-dot {
  transform: scale(1.15);
}

/* ════════════════════════════════════════════════════
   FOOTER NOTE — Subtle fade
   ════════════════════════════════════════════════════ */

footer {
  animation: fadeIn var(--dur-slower) var(--smooth) both;
}

/* ════════════════════════════════════════════════════
   SECTION TRANSITIONS — Emil-style scroll feel
   ════════════════════════════════════════════════════ */

.section-label {
  transition: opacity var(--dur-base) var(--smooth);
}

.section-title {
  transition: color var(--dur-base) var(--smooth);
}

/* ════════════════════════════════════════════════════
   SETUP BANNER CTA
   ════════════════════════════════════════════════════ */

.setup-cta {
  transition:
    background var(--dur-base) var(--smooth),
    color var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-2),
    box-shadow var(--dur-base) var(--smooth);
}

.setup-cta:hover {
  transform: translateX(4px);
  box-shadow: 4px 0 20px rgba(0, 212, 255, 0.15);
}

.setup-cta:active {
  transform: translateX(2px) scale(0.98);
}

/* ════════════════════════════════════════════════════
   BLOG SHARE BUTTONS
   ════════════════════════════════════════════════════ */

.share-btn {
  transition:
    border-color var(--dur-base) var(--smooth),
    color var(--dur-base) var(--smooth),
    transform var(--dur-fast) var(--spring-2),
    background var(--dur-base) var(--smooth);
}

.share-btn:hover {
  transform: translateY(-2px);
}

.share-btn:active {
  transform: scale(0.97);
}

/* ════════════════════════════════════════════════════
   POST NAV LINKS
   ════════════════════════════════════════════════════ */

.post-nav-link {
  transition:
    border-color var(--dur-base) var(--smooth),
    transform var(--dur-base) var(--spring-1),
    background var(--dur-base) var(--smooth);
}

.post-nav-link.prev:hover { transform: translateX(-3px); }
.post-nav-link.next:hover { transform: translateX(3px); }