/* ═══════════════════════════════════════════
   REVEAL — initial state (GSAP animates to opacity:1 / y:0)
═══════════════════════════════════════════ */
.reveal,
.fade-up {
  opacity: 0;
  transform: translateY(20px);
}

/* ── Page fade in ── */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in 0.3s ease forwards; }

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

.typewriter::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--blue);
  font-weight: 300;
  margin-left: 1px;
}

/* ── Profile ring glow ── */
@keyframes ring-glow {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(0,113,227,0)); }
  50%       { filter: drop-shadow(0 0 14px rgba(0,113,227,0.16)); }
}

.profile-ring { animation: ring-glow 5s ease-in-out infinite; }

/* ── Background orb drift ── */
@keyframes orb-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(28px, 18px); }
}

@keyframes orb-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-22px, -14px); }
}

@keyframes orb-drift-c {
  0%, 100% { transform: translate(-50%, -50%); }
  50%       { transform: translate(-50%, calc(-50% + 18px)); }
}

.bg-orb-1 { animation: orb-drift-a 22s ease-in-out infinite; }
.bg-orb-2 { animation: orb-drift-b 28s ease-in-out infinite; }
.bg-orb-3 { animation: orb-drift-c 20s ease-in-out infinite; }

/* ── Badge float ── */
@keyframes float-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes float-b { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes float-c { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.badge-1 { animation: float-a 5s ease-in-out infinite; }
.badge-2 { animation: float-b 4.5s ease-in-out infinite 0.7s; }
.badge-3 { animation: float-c 6s ease-in-out infinite 1.3s; }

/* ── Nav active state ── */
.nav-links a.active {
  color: var(--label);
  background: rgba(0,0,0,0.05);
}

/* ── Skill card shimmer on hover ── */
.skill-card {
  position: relative;
  overflow: hidden;
}

.skill-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.4) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.skill-card:hover::after { transform: translateX(100%); }

/* ── Glass box drift animations ── */
@keyframes box-drift-1 {
  0%, 100% { transform: rotate(-11deg) translate(0,    0);    }
  33%       { transform: rotate(-9deg)  translate(10px, -14px); }
  66%       { transform: rotate(-13deg) translate(-6px, 8px);  }
}

@keyframes box-drift-2 {
  0%, 100% { transform: rotate(9deg)  translate(0,    0);    }
  33%       { transform: rotate(11deg) translate(-12px, 10px); }
  66%       { transform: rotate(7deg)  translate(8px, -8px);  }
}

@keyframes box-drift-3 {
  0%, 100% { transform: rotate(22deg)  translate(0,    0);    }
  50%       { transform: rotate(19deg) translate(8px, 12px);  }
}

@keyframes box-drift-4 {
  0%, 100% { transform: rotate(-7deg) translate(0,    0);    }
  50%       { transform: rotate(-9deg) translate(-10px, -7px); }
}

@keyframes box-drift-5 {
  0%, 100% { transform: rotate(16deg)  translate(0,   0);    }
  40%       { transform: rotate(18deg) translate(12px, -10px); }
  70%       { transform: rotate(14deg) translate(-4px, 6px);  }
}

/* ── Hero name shimmer ── */
@keyframes name-shimmer {
  0%, 100% { background-position: 100% center; }
  50%       { background-position: 0%   center; }
}

/* ── Ambient ring spin ── */
@keyframes ring-spin-slow {
  to { transform: rotate(360deg); }
}

.ambient-ring-1 { animation: ring-spin-slow 38s linear infinite; }
.ambient-ring-2 { animation: ring-spin-slow 28s linear infinite reverse; }
.ambient-ring-3 { animation: ring-spin-slow 20s linear infinite; }

/* ── Ambient dot float ── */
.ambient-dot-1 { animation: float-a 7s ease-in-out infinite; }
.ambient-dot-2 { animation: float-b 5.5s ease-in-out infinite 1.2s; }
.ambient-dot-3 { animation: float-c 9s ease-in-out infinite 2.4s; }

/* ── Active badge pulse dot ── */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(52,199,89,0.5);
  }
  50% {
    opacity: 0.75;
    transform: scale(0.85);
    box-shadow: 0 0 0 4px rgba(52,199,89,0);
  }
}

/* ── Contact link arrow reveal ── */
.contact-link::after {
  content: '→';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--blue);
  opacity: 0;
  font-size: 0.9rem;
  transition: all 0.22s ease;
}

.contact-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .profile-ring,
  .badge-1, .badge-2, .badge-3,
  .bg-orb-1, .bg-orb-2, .bg-orb-3,
  .ambient-ring-1, .ambient-ring-2, .ambient-ring-3,
  .ambient-dot-1, .ambient-dot-2, .ambient-dot-3,
  .glass-box-1, .glass-box-2, .glass-box-3,
  .glass-box-4, .glass-box-5, .glass-box-6,
  .hero-name {
    animation: none;
  }

  .hero-name {
    -webkit-text-fill-color: var(--label);
    background: none;
    color: var(--label);
  }

  .scroll-arrow { animation: none; opacity: 0.5; }
  .exp-badge::before { animation: none; }
}