/* ==========================================================================
   NIHAL ASHPAK SHAIKH — PORTFOLIO
   animation.css — Part 1
   Keyframes, gradient shifts, reveals, orbs, glow, tilt
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. GRADIENT TEXT SHIFT
   -------------------------------------------------------------------------- */
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.gradient-text {
  animation: gradShift 8s ease infinite;
}

/* --------------------------------------------------------------------------
   02. BADGE DOT PULSE
   -------------------------------------------------------------------------- */
@keyframes pulseDot {
  0%   { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

.badge-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(46, 230, 168, 0.6);
  animation: pulseDot 2s ease-out infinite;
}

/* --------------------------------------------------------------------------
   03. BACKGROUND ORB FLOAT
   -------------------------------------------------------------------------- */
@keyframes floatOrb1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(60px, 70px, 0) scale(1.12); }
}

@keyframes floatOrb2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-70px, -50px, 0) scale(1.08); }
}

.orb-1 { animation: floatOrb1 26s ease-in-out infinite; }
.orb-2 { animation: floatOrb2 32s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   04. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   05. TILT GLARE (JS-injected element)
   -------------------------------------------------------------------------- */
.tilt-glare {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   06. CARD HOVER SHINE (auto-created via pseudo elements)
   -------------------------------------------------------------------------- */
.skill-card::after,
.project-card::after,
.hobby-card::after,
.info-card::after,
.solver-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 45%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.07) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left .9s var(--ease);
}

.skill-card:hover::after,
.project-card:hover::after,
.hobby-card:hover::after,
.info-card:hover::after,
.solver-card:hover::after {
  left: 125%;
}

/* Keep card content above the shine */
.skill-card > *,
.project-card > *,
.hobby-card > *,
.info-card > *,
.solver-card > * {
  position: relative;
  z-index: 2;
}

.project-glow,
.solver-visual,
.solver-body {
  z-index: 1;
}

/* Make sure project card children preserve stacking */
.project-card .project-glow { z-index: 1; }
.project-card .project-head,
.project-card h4,
.project-card p,
.project-card .project-tech { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   07. SKILL ICON HOVER MOTION
   -------------------------------------------------------------------------- */
.skill-icon {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.skill-card:hover .skill-icon {
  transform: translateY(-4px) rotate(-6deg) scale(1.08);
  box-shadow: 0 10px 26px rgba(124, 92, 255, 0.35);
}

/* --------------------------------------------------------------------------
   08. INFO ICON HOVER MOTION
   -------------------------------------------------------------------------- */
.info-icon {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.info-card:hover .info-icon {
  transform: translateY(-4px) rotate(6deg) scale(1.08);
  box-shadow: 0 10px 26px rgba(124, 92, 255, 0.35);
}

/* --------------------------------------------------------------------------
   09. SOLVER EMOJI BOUNCE (subtle ambient)
   -------------------------------------------------------------------------- */
@keyframes emojiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-3deg); }
}

.solver-emoji {
  animation: emojiFloat 4s ease-in-out infinite;
}

.solver-card:nth-child(2) .solver-emoji {
  animation-delay: 1s;
}

/* Pause ambient float on hover so scale takes over cleanly */
.solver-card:hover .solver-emoji {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   10. HEART BEAT (footer)
   -------------------------------------------------------------------------- */
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.28); }
  50%      { transform: scale(1); }
}

.heart {
  animation: heartBeat 1.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   11. FADE-IN UP (utility)
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fade-up {
  animation: fadeInUp .9s var(--ease) both;
}

/* --------------------------------------------------------------------------
   12. SOFT GLOW PULSE (used on decorative accents)
   -------------------------------------------------------------------------- */
@keyframes softGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(124, 92, 255, 0); }
  50%      { box-shadow: 0 0 24px rgba(124, 92, 255, 0.45); }
}

.glow-pulse {
  animation: softGlow 3.4s ease-in-out infinite;
}

/* END OF PART 1 — CONTINUES IN PART 2 */





















/* ==========================================================================
   animation.css — Part 2
   Image shine, scroll cue, marquee-ready utilities, reduced-motion guards
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. HERO IMAGE HOVER ZOOM + SHINE
   -------------------------------------------------------------------------- */
.hero-image {
  transition: transform .9s var(--ease);
  will-change: transform;
}

.hero-image-card:hover .hero-image {
  transform: scale(1.05);
}

/* Diagonal shine sweep on the image card */
.hero-image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 46%,
    rgba(255, 255, 255, 0.03) 52%,
    transparent 68%
  );
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease);
}

.hero-image-card:hover::after {
  transform: translateX(120%);
}

/* --------------------------------------------------------------------------
   14. ANIMATED GRADIENT BORDER (image card ring)
   -------------------------------------------------------------------------- */
@keyframes spinBorder {
  to { transform: rotate(360deg); }
}

.hero-image-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 1.5px;
  background: conic-gradient(
    from 0deg,
    rgba(124, 92, 255, 0.9),
    rgba(0, 217, 255, 0.9),
    rgba(255, 92, 138, 0.85),
    rgba(124, 92, 255, 0.9)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
  animation: spinBorder 9s linear infinite;
  pointer-events: none;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   15. BUTTON MICRO-BOUNCE ON ACTIVE
   -------------------------------------------------------------------------- */
.btn:active {
  transform: scale(0.97);
}

/* Keep hover lift after active release */
.btn-primary:active {
  transform: translateY(-1px) scale(0.98);
}

/* --------------------------------------------------------------------------
   16. NAV LINK UNDERLINE GLOW (fallback for non-active state)
   -------------------------------------------------------------------------- */
@keyframes navGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(124, 92, 255, 0); }
  50%      { box-shadow: 0 0 14px rgba(124, 92, 255, 0.4); }
}

.nav-links a.active {
  animation: navGlow 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   17. FOOTER SOCIAL ICON ROTATE ON HOVER
   -------------------------------------------------------------------------- */
.social-icons a {
  will-change: transform;
}

.social-icons a svg {
  transition: transform .4s var(--ease);
}

.social-icons a:hover svg {
  transform: rotate(-8deg) scale(1.15);
}

/* --------------------------------------------------------------------------
   18. ABOUT PAGE — SOCIAL CARD ENTRANCE STAGGER
   -------------------------------------------------------------------------- */
.social-grid .social-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp .8s var(--ease) forwards;
}

.social-grid .social-card:nth-child(1) { animation-delay: .1s; }
.social-grid .social-card:nth-child(2) { animation-delay: .2s; }
.social-grid .social-card:nth-child(3) { animation-delay: .3s; }
.social-grid .social-card:nth-child(4) { animation-delay: .4s; }

/* --------------------------------------------------------------------------
   19. PROJECT GRID ENTRANCE STAGGER
   -------------------------------------------------------------------------- */
.project-grid .project-card {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp .9s var(--ease) forwards;
}

.project-grid .project-card:nth-child(1) { animation-delay: .05s; }
.project-grid .project-card:nth-child(2) { animation-delay: .12s; }
.project-grid .project-card:nth-child(3) { animation-delay: .19s; }
.project-grid .project-card:nth-child(4) { animation-delay: .26s; }
.project-grid .project-card:nth-child(5) { animation-delay: .33s; }
.project-grid .project-card:nth-child(6) { animation-delay: .40s; }

/* --------------------------------------------------------------------------
   20. SOLVER GRID ENTRANCE STAGGER
   -------------------------------------------------------------------------- */
.solver-grid .solver-card {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp .9s var(--ease) forwards;
}

.solver-grid .solver-card:nth-child(1) { animation-delay: .08s; }
.solver-grid .solver-card:nth-child(2) { animation-delay: .20s; }

/* --------------------------------------------------------------------------
   21. SKILLS + HOBBIES GRID ENTRANCE
   -------------------------------------------------------------------------- */
.skills-grid .skill-card,
.hobbies-grid .hobby-card {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeInUp .85s var(--ease) forwards;
}

.skills-grid .skill-card:nth-child(1),
.hobbies-grid .hobby-card:nth-child(1) { animation-delay: .05s; }
.skills-grid .skill-card:nth-child(2),
.hobbies-grid .hobby-card:nth-child(2) { animation-delay: .12s; }
.skills-grid .skill-card:nth-child(3),
.hobbies-grid .hobby-card:nth-child(3) { animation-delay: .19s; }
.skills-grid .skill-card:nth-child(4),
.hobbies-grid .hobby-card:nth-child(4) { animation-delay: .26s; }
.skills-grid .skill-card:nth-child(5),
.hobbies-grid .hobby-card:nth-child(5) { animation-delay: .33s; }
.skills-grid .skill-card:nth-child(6),
.hobbies-grid .hobby-card:nth-child(6) { animation-delay: .40s; }

/* --------------------------------------------------------------------------
   22. HERO CONTENT ENTRANCE (plays on page load)
   -------------------------------------------------------------------------- */
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-description,
.hero-actions {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp .95s var(--ease) forwards;
}

.hero-badge       { animation-delay: .10s; }
.hero-title       { animation-delay: .22s; }
.hero-subtitle    { animation-delay: .34s; }
.hero-description { animation-delay: .46s; }
.hero-actions     { animation-delay: .58s; }

.hero-image-wrapper {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  animation: fadeInUp 1.1s var(--ease) .3s forwards;
}

/* About page hero uses same classes — inherits everything above */

/* --------------------------------------------------------------------------
   23. PROJECTS HERO (centered text pages)
   -------------------------------------------------------------------------- */
.text-center .hero-badge,
.text-center .hero-title,
.text-center .hero-description {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp .95s var(--ease) forwards;
}

.text-center .hero-badge       { animation-delay: .10s; }
.text-center .hero-title       { animation-delay: .22s; }
.text-center .hero-description { animation-delay: .36s; }

/* --------------------------------------------------------------------------
   24. PERFORMANCE — REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .orb,
  .solver-emoji,
  .heart,
  .gradient-text,
  .nav-links a.active {
    animation: none !important;
  }

  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-description,
  .hero-actions,
  .hero-image-wrapper,
  .skill-card,
  .hobby-card,
  .project-card,
  .solver-card,
  .social-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-image-card::before,
  .hero-image-card::after,
  .skill-card::after,
  .project-card::after,
  .hobby-card::after,
  .info-card::after,
  .solver-card::after {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   25. TOUCH DEVICES — disable heavy hover effects
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .skill-card::after,
  .project-card::after,
  .hobby-card::after,
  .info-card::after,
  .solver-card::after,
  .hero-image-card::after {
    display: none;
  }

  .project-glow {
    display: none;
  }
}

/* END OF animation.css */