/* ================================================
   OWLNET GEEK — Animations
   ================================================ */

/* ── KEYFRAMES ──────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes pulse-new {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(236,72,153,0); }
}

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

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

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,.2); }
  50%       { box-shadow: 0 0 40px rgba(124,58,237,.5); }
}

@keyframes scan-line {
  0%   { top: -10%; }
  100% { top: 110%; }
}

@keyframes glitch {
  0%  { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, -1px); }
  100%{ transform: translate(0); }
}

@keyframes matrix-drop {
  0%   { opacity: 0; transform: translateY(-20px); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
}

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

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

/* ── SCROLL ANIMATIONS ──────────────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }

/* ── HERO ANIMATIONS ────────────────────────── */
.hero-eyebrow  { animation: fadeIn 0.6s ease both; }
.hero-title    { animation: fadeInUp 0.8s ease 0.15s both; }
.typewriter-line { animation: fadeIn 0.6s ease 0.5s both; }
.hero-desc     { animation: fadeInUp 0.8s ease 0.3s both; }
.hero-actions  { animation: fadeInUp 0.8s ease 0.45s both; }
.hero-stats    { animation: fadeInUp 0.8s ease 0.6s both; }

/* ── AVATAR FLOAT ───────────────────────────── */
.about-avatar { animation: float 6s ease-in-out infinite; }

/* ── LOGO GLOW ──────────────────────────────── */
.navbar-logo img { animation: glow-pulse 4s ease-in-out infinite; }

/* ── SHIMMER TEXT ───────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--accent-purple) 0%,
    var(--accent-cyan)   25%,
    var(--accent-purple) 50%,
    var(--accent-cyan)   75%,
    var(--accent-purple) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* ── SCAN LINE EFFECT (decorative) ─────────── */
.scan-container {
  position: relative;
  overflow: hidden;
}
.scan-container::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.4), transparent);
  animation: scan-line 4s linear infinite;
  pointer-events: none;
}

/* ── BADGE PULSE ────────────────────────────── */
.badge-new { animation: pulse-new 2s ease-in-out infinite; }

/* ── CARD ENTRANCE (stagger) ────────────────── */
.news-card:nth-child(1) { animation: fadeInUp 0.7s ease 0.05s both; }
.news-card:nth-child(2) { animation: fadeInUp 0.7s ease 0.15s both; }
.news-card:nth-child(3) { animation: fadeInUp 0.7s ease 0.25s both; }
.news-card:nth-child(4) { animation: fadeInUp 0.7s ease 0.35s both; }

.formation-card:nth-child(1) { animation: fadeInUp 0.7s ease 0.05s both; }
.formation-card:nth-child(2) { animation: fadeInUp 0.7s ease 0.15s both; }
.formation-card:nth-child(3) { animation: fadeInUp 0.7s ease 0.25s both; }

/* ── EPISODE ITEM ENTRANCE ──────────────────── */
.episode-item { animation: slideInLeft 0.5s ease both; }
.episode-item:nth-child(1) { animation-delay: 0.05s; }
.episode-item:nth-child(2) { animation-delay: 0.12s; }
.episode-item:nth-child(3) { animation-delay: 0.19s; }
.episode-item:nth-child(4) { animation-delay: 0.26s; }
.episode-item:nth-child(5) { animation-delay: 0.33s; }

/* ── PROGRESS BAR ───────────────────────────── */
.reading-progress {
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  z-index: 1001;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px var(--accent-cyan);
}

/* ── TERMINAL BLINK ─────────────────────────── */
.terminal-prompt {
  font-family: var(--font-mono);
  color: var(--accent-green);
  font-size: 0.85rem;
}
.terminal-prompt::before {
  content: '> ';
  color: var(--accent-cyan);
}

/* ── CSS THEATRE (Saynètes ELI5) ────────────── */
.css-theatre {
  background: #090910;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 24px 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Animation Frigo & Tupperware (Datasets) */
.t-frigo {
  border: 4px solid var(--accent-cyan);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  background: rgba(6, 182, 212, 0.05);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
  position: relative;
}
.t-frigo-title {
  position: absolute;
  top: -14px; left: 24px;
  background: #090910;
  padding: 0 12px;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-weight: bold;
}
.t-shelves {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.t-tupperware {
  border: 2px dashed #4b5563;
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: all 0.3s;
}
.t-tupperware.active {
  border: 2px solid var(--accent-purple);
  background: rgba(124, 58, 237, 0.1);
}

@keyframes sauceExplosion {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  80% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 10px red); }
}
@keyframes shakeBox {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
}
.t-sauce {
  animation: sauceExplosion 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
  font-size: 1.5rem;
}
.t-tupperware.shake {
  animation: shakeBox 4s ease-in-out infinite;
}
.t-lock {
  font-size: 1.5rem;
  animation: float 3s ease-in-out infinite;
}

/* ── ELI5 CSS THEATER KEYFRAMES ── */
/* 01: ZFS Brigade */
@keyframes chefBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.t-chef { animation: chefBounce 1s infinite alternate; font-size: 2rem; display:inline-block; }

/* 02: Bateau Install */
@keyframes sailBoat { 0% { transform: translateX(-50px); opacity:0;} 20%{opacity:1;} 80%{opacity:1;} 100% { transform: translateX(100px); opacity:0;} }
.t-boat { animation: sailBoat 4s linear infinite; font-size: 2.5rem; position:absolute; }

/* 04: Le Tuyau Host Path */
@keyframes flowData { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }
.t-pipe { height: 20px; width: 100%; max-width:150px; border: 2px solid var(--accent-cyan); background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(6,182,212,0.5) 10px, rgba(6,182,212,0.5) 20px); animation: flowData 1s linear infinite; border-radius:10px; margin: 0 10px;}
.t-box { padding:20px; border-radius:12px; background:var(--bg-card); border: 2px solid var(--border); text-align:center; flex:1;}

/* 05: SMB Autoroute */
@keyframes driveTruck { 0% { transform: translateX(0) scaleX(1); } 48% { transform: translateX(140px) scaleX(1); } 50% { transform: translateX(140px) scaleX(-1); } 98% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
.t-truck { animation: driveTruck 3s ease-in-out infinite; font-size: 2.5rem; margin-top: -15px; display:inline-block; }

/* 06: Videur VIP ACLs */
@keyframes bounceFail { 0%,100%{ transform: translateX(0); } 20%{transform: translateX(10px);} 40%{transform: translateX(-10px);} 60%{transform: translateX(10px);} 80%{transform: translateX(-10px);} }
.t-hacker { font-size: 2rem; animation: bounceFail 2s infinite; display:inline-block; }
.t-videur { font-size: 3rem; margin: 0 20px; border-left: 4px solid red; padding-left:10px; display:inline-block; line-height:1; }

/* 07: Jellyfin Cinema */
@keyframes pulseGlow { 0%, 100% { text-shadow: 0 0 10px rgba(168,85,247,0.5); transform: scale(1); } 50% { text-shadow: 0 0 30px var(--accent-purple); transform: scale(1.2); filter:hue-rotate(45deg); } }
.t-popcorn { font-size: 3rem; animation: pulseGlow 1.5s infinite; display:inline-block; }

/* 08: AdGuard Bouclier */
@keyframes flyIntercept { 0% { transform: translate(-100px, 0) rotate(90deg); opacity:1;} 50% { transform: translate(-10px, 0) rotate(90deg); opacity:1;} 51% { opacity: 0; } 100% { opacity: 0; } }
.t-missile { font-size: 2rem; position:absolute; left:0; top:calc(50% - 1.5rem); animation: flyIntercept 2s ease-in infinite; }
@keyframes flashShield { 0%, 45% { filter: drop-shadow(0 0 0px var(--accent-cyan)); transform:scale(1);} 50% { filter: drop-shadow(0 0 30px var(--accent-cyan)); transform:scale(1.3);} 100% { filter: drop-shadow(0 0 0px var(--accent-cyan)); transform:scale(1);} }
.t-shield { font-size: 3.5rem; animation: flashShield 2s infinite; position:relative; z-index:2; margin: 0 40px; }

/* 09: qBittorrent Trésor */
@keyframes dropLoot { 0% { transform: translateY(-40px); opacity:0;} 50% { transform: translateY(0); opacity:1;} 80%{ opacity:1; filter: drop-shadow(0 0 10px gold);} 100% { transform: translateY(0); opacity:0;} }
.t-loot { font-size:2.5rem; animation: dropLoot 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; display:inline-block; }

/* 10: Nginx Proxy Manager & DuckDNS */
@keyframes floatDuck { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-10px) rotate(-5deg); } }
.t-duck { animation: floatDuck 2s infinite ease-in-out; font-size:3rem; filter: drop-shadow(0 0 10px rgba(250,204,21,0.5)); display:inline-block; }
@keyframes neonPath { 0% { border-color: transparent; } 50% { border-color: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan); } 100% { border-color: transparent; } }
.t-door { animation: neonPath 2s infinite; border: 3px solid transparent; padding:10px 20px; border-radius:10px; font-weight:bold; }

/* 11: Immich Photos */
@keyframes uploadPhoto { 0% { transform: translate(0, 40px) scale(0.5); opacity: 0; } 30% { transform: translate(10px, -20px) scale(1) rotate(-15deg); opacity: 1; } 50% { filter: drop-shadow(0 0 15px var(--accent-cyan)); } 80% { transform: translate(120px, -20px) scale(0.8) rotate(15deg); opacity: 1; } 100% { transform: translate(150px, 0) scale(0); opacity: 0; } }
.t-photo { font-size: 2.5rem; animation: uploadPhoto 3s ease-in-out infinite; position: absolute; top:-20px; z-index: 1;}
.t-photo.d1 { animation-delay: 0s; }
.t-photo.d2 { animation-delay: 1s; }
.t-photo.d3 { animation-delay: 2s; }
@keyframes glowVault { 0%, 100% { filter: drop-shadow(0 0 5px var(--accent-purple)); transform: scale(1); } 50% { filter: drop-shadow(0 0 25px var(--accent-purple)); transform: scale(1.05); } }
.t-vault { font-size: 4rem; animation: glowVault 3s ease-in-out infinite; position: relative; z-index: 2; margin-left: 120px; }
.t-phone { font-size: 3.5rem; position: relative; z-index: 2; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }