/* ============================================
   SMOOTH ANIMATIONS SYSTEM
   Beautiful, performant animations for Portfolio
   ============================================ */

/* ============================================
   CORE ANIMATION KEYFRAMES
   ============================================ */

/* Fade & Slide Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

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

/* Scale Animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rotation & 3D Animations */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }
}

/* Blur Animations */
@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* Glow & Shine Effects */
@keyframes gentleGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(var(--accent-rgb, 242, 163, 60), 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(var(--accent-rgb, 242, 163, 60), 0.4);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Floating & Breathing Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Slide Reveal Animations */
@keyframes slideReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes expandWidth {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ============================================
   ANIMATION UTILITY CLASSES
   ============================================ */

/* Base Animation Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-scale-bounce {
  animation: scaleInBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.animate-rotate-in {
  animation: rotateIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-flip-in {
  animation: flipIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.animate-blur-in {
  animation: blurIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* Continuous Animations - Disabled for production polish */
/* Uncomment only for landing pages or creative showcases */
/*
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-breathe {
  animation: breathe 4s ease-in-out infinite;
}

.animate-glow {
  animation: gentleGlow 3s ease-in-out infinite;
}
*/

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================ */

/* Elements start hidden, animate when in view */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   COMPONENT-SPECIFIC ANIMATIONS
   ============================================ */

/* Header Animation */
.site-header {
  animation: fadeInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Hero Section Animations */
.hero-identity-role,
.hero-identity-name {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-identity-name {
  animation-delay: 0.1s;
}

.hero-title {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

.hero-bio {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.hero-command {
  opacity: 0;
  animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-command:nth-child(1) { animation-delay: 0.4s; }
.hero-command:nth-child(2) { animation-delay: 0.5s; }
.hero-command:nth-child(3) { animation-delay: 0.6s; }

.hero-terminal-panel {
  opacity: 0;
  animation: fadeInRight 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

/* Section Headers */
.section-header h2 {
  opacity: 0;
}

.section-header.is-visible h2 {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.section-header p {
  opacity: 0;
}

.section-header.is-visible p {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

/* Philosophy Items */
.philosophy-item {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.philosophy-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.philosophy-item:nth-child(1).is-visible { transition-delay: 0.1s; }
.philosophy-item:nth-child(2).is-visible { transition-delay: 0.2s; }
.philosophy-item:nth-child(3).is-visible { transition-delay: 0.3s; }
.philosophy-item:nth-child(4).is-visible { transition-delay: 0.4s; }

/* Hover enhancements for philosophy items */
.philosophy-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .philosophy-item:hover {
    transform: translateY(-8px) scale(1.02);
  }
}

/* Work Cards */
.work-card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.work-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.work-card:nth-child(1).is-visible { transition-delay: 0.1s; }
.work-card:nth-child(2).is-visible { transition-delay: 0.2s; }
.work-card:nth-child(3).is-visible { transition-delay: 0.3s; }
.work-card:nth-child(4).is-visible { transition-delay: 0.4s; }
.work-card:nth-child(5).is-visible { transition-delay: 0.5s; }

/* Enhanced hover for work cards */
.work-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .work-card:hover {
    transform: translateY(-12px) scale(1.02);
  }
}

.work-card img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .work-card:hover img {
    transform: scale(1.05);
  }
}

/* Testimonial Cards - visible immediately in carousel */
/* Note: Removed opacity:0 as it causes invisible cards in horizontal scroll */

/* Side Project Cards */
.side-project-card {
  opacity: 0;
  transform: translateY(30px) rotateX(10deg);
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-project-card.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

@media (hover: hover) {
  .side-project-card:hover {
    transform: translateY(-8px) rotateX(2deg);
  }
}

.side-project-card .project-card-thumb img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .side-project-card:hover .project-card-thumb img {
    transform: scale(1.1);
  }
}

@media (max-width: 768px) {
  .side-project-card {
    opacity: 1;
    transform: none;
  }
}

/* Article Cards */
.article-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.article-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.article-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (hover: hover) {
  .article-card:hover::before {
    opacity: 1;
  }
}

@media (hover: hover) {
  .article-card:hover {
    transform: translateY(-6px);
  }
}

/* Experience Timeline */
.timeline li {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline li.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline li:nth-child(odd).is-visible {
  transform: translateX(0);
}

.timeline li:nth-child(even).is-visible {
  transform: translateX(0);
}

/* Chatbot Prompt Cards */
.snipe-prompt-card {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.snipe-prompt-card.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.snipe-prompt-card:nth-child(1).is-visible { transition-delay: 0.1s; }
.snipe-prompt-card:nth-child(2).is-visible { transition-delay: 0.2s; }
.snipe-prompt-card:nth-child(3).is-visible { transition-delay: 0.3s; }

@media (hover: hover) {
  .snipe-prompt-card:hover {
    transform: scale(1.05) translateY(-5px);
  }
}

/* How I Work Principles */
.work-principle {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.work-principle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.work-principle:nth-child(1).is-visible { transition-delay: 0.1s; }
.work-principle:nth-child(2).is-visible { transition-delay: 0.2s; }
.work-principle:nth-child(3).is-visible { transition-delay: 0.3s; }
.work-principle:nth-child(4).is-visible { transition-delay: 0.4s; }

@media (hover: hover) {
  .work-principle:hover {
    transform: translateY(-8px);
  }
}

.work-principle .principle-illustration {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .work-principle:hover .principle-illustration {
    transform: scale(1.1) rotate(5deg);
  }
}

/* Company Chips */
.company-chip-item {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.company-chip-item.is-visible {
  opacity: 1;
  transform: scale(1);
}

.company-chip-item:nth-child(1).is-visible { transition-delay: 0.1s; }
.company-chip-item:nth-child(2).is-visible { transition-delay: 0.2s; }
.company-chip-item:nth-child(3).is-visible { transition-delay: 0.3s; }
.company-chip-item:nth-child(4).is-visible { transition-delay: 0.4s; }
.company-chip-item:nth-child(5).is-visible { transition-delay: 0.5s; }

@media (hover: hover) {
  .company-chip-item:hover {
    transform: scale(1.1);
  }
}

/* CTA Section */
.cta-title {
  opacity: 0;
}

.cta-section.is-visible .cta-title {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cta-subtitle {
  opacity: 0;
}

.cta-section.is-visible .cta-subtitle {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.btn-cta {
  opacity: 0;
  transform: scale(0.9);
}

.cta-section.is-visible .btn-cta {
  animation: scaleInBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

/* Footer Animation */
.site-footer {
  opacity: 0;
}

.site-footer.is-visible {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================
   BUTTON & INTERACTIVE ELEMENTS
   ============================================ */

/* Smooth button transitions */
button, .btn, a.btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  button:hover, .btn:hover, a.btn:hover {
    transform: translateY(-2px);
  }
}

button:active, .btn:active, a.btn:active {
  transform: translateY(0);
}

/* Nav items */
.nav-link {
  position: relative;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .nav-link:hover::after {
    width: 100%;
  }
}

/* Dropdown animations */
.nav-dropdown {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.3s;
  pointer-events: none;
}

@media (hover: hover) {
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   Provides subtle alternatives instead of disabling all motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disable continuous/looping animations entirely */
  .animate-float,
  .animate-breathe,
  .animate-glow,
  .testimonials-premium-track {
    animation: none !important;
  }

  /* Allow instant state changes - keep opacity, remove movement */
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale,
  .philosophy-item,
  .work-card,
  .side-project-card,
  .article-card,
  .timeline li,
  .snipe-prompt-card,
  .work-principle,
  .company-chip-item {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.2s ease !important;
  }

  /* Keep hover feedback subtle but present */
  @media (hover: hover) {
    .work-card:hover,
    .side-project-card:hover,
    .philosophy-item:hover,
    .article-card:hover,
    .snipe-prompt-card:hover,
    button:hover,
    .btn:hover {
      transform: none !important;
      opacity: 0.8;
    }
  }

  /* Disable parallax and 3D effects */
  .work-card img,
  .side-project-card .project-card-thumb img {
    transform: none !important;
    transition: none !important;
  }

  /* Keep essential visibility transitions fast */
  .is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Smooth scroll disabled */
  html {
    scroll-behavior: auto !important;
  }

  /* Hero elements visible immediately */
  .hero-identity-role,
  .hero-identity-name,
  .hero-title,
  .hero-bio,
  .hero-command,
  .hero-terminal-panel,
  .site-header,
  .site-footer,
  .cta-title,
  .cta-subtitle,
  .btn-cta,
  .section-header h2,
  .section-header p {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============================================
   TOUCH DEVICE INTERACTIONS
   ============================================ */

/* Touch-active state for cards on mobile */
.touch-active {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--color-accent, #f2a33c) !important;
}

.work-card.touch-active,
.side-project-card.touch-active,
.article-card.touch-active {
  transform: scale(1.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Ensure touch devices don't get stuck hover states */
@media (hover: none) and (pointer: coarse) {
  .work-card,
  .side-project-card,
  .article-card,
  .testimonial-premium-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Use GPU acceleration for transforms */
.animate-fade-in-up,
.animate-fade-in-down,
.animate-fade-in-left,
.animate-fade-in-right,
.animate-scale-in,
.animate-scale-bounce,
.scroll-reveal,
.work-card,
.side-project-card {
  will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.is-visible {
  will-change: auto;
}