/* ═══════════════════════════════════════════════════
   DARA PORTFOLIO — ANIMATIONS CSS
   Keyframes + GSAP / IntersectionObserver initial states
   ═══════════════════════════════════════════════════ */

/* ── Hero portrait float ── */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

/* ── Glow pulse (hero bg orbs) ── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}
/* Version without translateX for bg-glow--2 */
@keyframes glowPulse2 {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.15); }
}
.hero__bg-glow--2 { animation-name: glowPulse2 !important; }

/* ── Noise grain movement ── */
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  10%     { transform: translate(-2%,-2%); }
  20%     { transform: translate(2%,2%); }
  30%     { transform: translate(-1%,3%); }
  40%     { transform: translate(3%,-1%); }
  50%     { transform: translate(-2%,1%); }
  60%     { transform: translate(2%,-3%); }
  70%     { transform: translate(-3%,2%); }
  80%     { transform: translate(1%,-2%); }
  90%     { transform: translate(-1%,3%); }
}

/* ── Scroll hint bar ── */
@keyframes scrollPulse {
  0%   { opacity: 0; transform: scaleY(0.3) translateY(-8px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1) translateY(8px); }
}

/* ── Brands marquee ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Preloader bar fill ── */
@keyframes preloaderFill {
  0%   { width: 0%; }
  100% { width: 100%; }
}
.preloader__fill {
  animation: preloaderFill 1.6s ease forwards;
  animation-delay: 0.3s;
}

/* ── Card shimmer on hover ── */
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 120%; }
}
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.03),
    transparent
  );
  pointer-events: none;
  transition: none;
}
.card:hover::after { animation: shimmer 0.7s ease; }

/* ── Pill bounce on hover ── */
.pill { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, color 0.2s; }

/* ── Award bar draw ── */
/* (handled in main.css via IntersectionObserver class toggle) */

/* ── GSAP hero initial states ── */
/* These are already set via inline CSS properties in JS,
   but CSS initial states ensure no flash before GSAP loads */
.hero__big-line {
  opacity: 0;
  transform: translateY(50px);
}
.hero__portrait-wrap {
  opacity: 0;
}
.hero__info,
.hero__stats {
  opacity: 0;
  transform: translateY(24px);
}
.hero__scroll-hint {
  opacity: 0;
}

/* ── Tilt card 3D ── */
.card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Magnetic button will-change ── */
.magnetic { will-change: transform; }

/* ── Hover glow ring on skill cards ── */
.skill-card {
  transition: border-color 0.35s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s;
}

/* ── Nav link underline spring ── */
.nav__link::after {
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ── Social button lift ── */
.soc-btn {
  transition: color 0.3s, border-color 0.3s, background 0.3s,
              transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}

/* ── Award item slide in ── */
.award-item {
  transition: background 0.3s, padding-left 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ── About image frame corner animation ── */
.about__corner {
  transition: width 0.5s ease, height 0.5s ease;
}
.about__img-frame:hover .about__corner { width: 40px; height: 40px; }