/* ================================================================
   DADAJON ZAFAROV — PORTFOLIO
   animations.css v2 — Cinematic animations, micro-interactions,
   hover effects, entrance sequences, parallax helpers
   ================================================================ */

/* ── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpSoft {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes blinkSlow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
@keyframes gridScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(60px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@keyframes pulseSlow {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%       { transform: scale(1.04); opacity: 1; }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 95% 0); transform: translateX(0); }
  20%  { clip-path: inset(10% 0 50% 0); transform: translateX(-6px); }
  40%  { clip-path: inset(60% 0 20% 0); transform: translateX(6px); }
  60%  { clip-path: inset(30% 0 70% 0); transform: translateX(-3px); }
  80%  { clip-path: inset(80% 0 5% 0); transform: translateX(3px); }
}
@keyframes shimmer {
  0%   { background-position: -300% center; }
  100% { background-position: 300% center; }
}
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-5deg) scale(0.94); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes auraFloat {
  0%, 100% { transform: translateY(0) rotate(-0.2deg); }
  50%      { transform: translateY(-10px) rotate(0.2deg); }
}
@keyframes auraPulse {
  0%, 100% { opacity: 0.62; transform: rotate(0deg) scale(1); }
  50%      { opacity: 0.92; transform: rotate(8deg) scale(1.03); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes textShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes borderTrace {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(1); opacity: 0.4; }
  40%           { transform: scale(1.4); opacity: 1; background: var(--accent); }
}
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes typewriterBlink {
  0%, 100% { border-right-color: var(--t-green); }
  50%       { border-right-color: transparent; }
}
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HERO ENTRANCE (staggered) ──────────────────────────────── */
.anim-hero-eyebrow { opacity: 0; animation: slideInLeft 0.9s 0.1s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-hero-name    { opacity: 0; animation: fadeUp 1s 0.25s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-hero-nick    { opacity: 0; animation: fadeUp 0.8s 0.45s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-hero-roles   { opacity: 0; animation: fadeUp 0.8s 0.58s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-hero-desc    { opacity: 0; animation: fadeUp 0.9s 0.72s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-hero-ctas    { opacity: 0; animation: fadeUp 0.9s 0.88s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-hero-term    { opacity: 0; animation: slideInRight 1s 1.1s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-hero-scroll  { opacity: 0; animation: fadeIn 1.2s 1.8s forwards; }

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0; transform: translateX(36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* stagger classes */
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }
.delay-6 { transition-delay: 0.60s; }

/* ── SCROLL PROGRESS BAR ────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 2px; background: transparent; pointer-events: none;
}
#scroll-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--t-green));
  width: 0; transition: width 0.08s linear;
}

/* ── CURSOR BLINK ───────────────────────────────────────────── */
.t-cursor { animation: blink 1s infinite; }

/* ── CTF GRID (animated bg) ─────────────────────────────────── */
.ctf-grid-bg { animation: gridScroll 32s linear infinite; }

/* ── SKILL BAR ──────────────────────────────────────────────── */
.s-fill { transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── CERT CARD TILT / HOVER ─────────────────────────────────── */
.cert-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s,
              border-color 0.3s;
  will-change: transform;
}
.cert-card:hover {
  transform: translateY(-10px) rotateX(3deg) rotateY(-2deg);
  box-shadow: 0 32px 64px rgba(0,0,0,0.15);
}
.cert-card-img img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cert-card:hover .cert-card-img img { transform: scale(1.06); }

/* ── PROJECT CARD ───────────────────────────────────────────── */
.pcard {
  transition: background 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.pcard:hover { transform: translateY(-4px); }
.pcard::after {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── NAV LINK UNDERLINE ─────────────────────────────────────── */
.nav-center a {
  position: relative;
  padding-bottom: 2px;
}
.nav-center a::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--text);
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-center a:hover::after,
.nav-center a.nav-active::after { width: 100%; background: var(--accent); }

/* ── BUTTON ─────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.08);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.btn:hover::before { transform: translateX(0); }
.btn .arrow { display: inline-block; transition: transform 0.25s; }
.btn:hover .arrow { transform: translateX(6px); }

/* Ripple on button click */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: ripple 0.5s linear;
  pointer-events: none;
}

/* ripple span created by JS (class "ripple") */
.ripple {
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.18);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.55s linear;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ── MODAL FADE ─────────────────────────────────────────────── */
.cert-modal     { animation: fadeIn 0.2s; }
.cert-modal-inner { animation: fadeUp 0.35s cubic-bezier(0.16,1,0.3,1); }
.auth-modal-inner { animation: scaleIn 0.28s cubic-bezier(0.16,1,0.3,1); }

/* ── LANG BTN ───────────────────────────────────────────────── */
.lang-btn { transition: all 0.2s cubic-bezier(0.16,1,0.3,1); }

/* ── FOOTER HACK PULSE ──────────────────────────────────────── */
.f-hack { animation: pulse 3.5s ease-in-out infinite; }

/* ── HERO TERMINAL CARD (float) ─────────────────────────────── */
.hero-terminal {
  animation: floatY 5s ease-in-out infinite;
}

/* ── ABOUT AURA PORTRAIT ────────────────────────────────────── */
.about-aura {
  animation: auraFloat 6.5s ease-in-out infinite;
}
.about-aura .about-aura-glow {
  animation: auraPulse 4.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .about-aura,
  .about-aura .about-aura-glow {
    animation: none !important;
  }
}

/* ── GLITCH on hero name ────────────────────────────────────── */
.glitch-wrap { position: relative; display: inline-block; }
.glitch-wrap::before,
.glitch-wrap::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif);
  font-size: inherit; font-weight: inherit;
  font-style: inherit; line-height: inherit;
  color: var(--accent); opacity: 0;
}
.glitch-wrap:hover::before {
  opacity: 0.7;
  animation: glitch1 0.55s steps(1) 1;
  color: var(--t-blue);
}
.glitch-wrap:hover::after {
  opacity: 0.4;
  animation: glitch1 0.55s steps(1) 0.08s 1;
  color: var(--t-red);
}

/* ── SHIMMER TEXT ───────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(90deg,
    var(--text) 0%, var(--accent) 40%, var(--text) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}

/* ── TYPING CURSOR ──────────────────────────────────────────── */
.typing-cursor {
  display: inline-block;
  border-right: 2px solid var(--t-green);
  animation: typewriterBlink 0.75s step-end infinite;
  padding-right: 2px;
}

/* ── SECTION TRANSITION WOW ─────────────────────────────────── */
.section-surface,
section { position: relative; }

/* ── INSPO CARD FLOAT ───────────────────────────────────────── */
.inspo-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;
}
.inspo-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 48px rgba(0,0,0,0.1);
}

/* ── COMING SOON CERT CARD ANIMATION ────────────────────────── */
.cert-coming-icon { animation: rotate360 14s linear infinite; }
.cert-coming-dots span { animation: dotPulse 1.4s ease-in-out infinite; }
.cert-coming-dots span:nth-child(1) { animation-delay: 0s; }
.cert-coming-dots span:nth-child(2) { animation-delay: 0.22s; }
.cert-coming-dots span:nth-child(3) { animation-delay: 0.44s; }

/* ── CTF CARD ───────────────────────────────────────────────── */
.ccard {
  transition: border-left-color 0.3s, background 0.3s, transform 0.3s;
}
.ccard:hover {
  transform: translateX(4px);
}

/* ── COUNTER ANIMATE ─────────────────────────────────────────── */
.stat-n { animation: countUp 0.6s cubic-bezier(0.16,1,0.3,1) both; }

/* ── PILL HOVER ─────────────────────────────────────────────── */
.pill {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── CONTACT ROW HOVER ──────────────────────────────────────── */
.c-row {
  transition: background 0.2s, transform 0.2s;
  border-radius: 2px;
  padding-left: 0.5rem; margin-left: -0.5rem;
}
.c-row:hover {
  background: var(--bg-alt);
  transform: translateX(4px);
}