/* ==========================================================================
   Animations — Personal Portfolio
   Keyframes and transition utilities.
   Only `transform` and `opacity` are animated — no layout-triggering
   properties (top, margin, height, width, etc.) — ensuring GPU compositing.
   Requirements: 12.1, 12.2, 12.3, 14.2
   ========================================================================== */

/* --------------------------------------------------------------------------
   @keyframes — Intro screen
   -------------------------------------------------------------------------- */

/**
 * fade-scale-in: used for intro logo entrance.
 * Animates from invisible + scaled-down → fully visible + full scale.
 */
@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**
 * fade-out: used for intro overlay dismissal.
 * Animates from fully visible → invisible.
 */
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   @keyframes — Entrance animations
   -------------------------------------------------------------------------- */

/**
 * fade-in-slide-up: used for hero name, section headings.
 * Slides up 30px while fading in.
 */
@keyframes fade-in-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * slide-in-left: used for CTA buttons (primary).
 * Slides in from the left while fading in.
 */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/**
 * slide-in-right: used for CTA buttons (secondary) or complementary elements.
 * Slides in from the right while fading in.
 */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/**
 * slide-in-up: used for cards, tags — subtle upward entrance.
 * Smaller offset (20px) than fade-in-slide-up for secondary elements.
 */
@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Utility animation classes — applied via JavaScript
   `will-change` is applied by JS before animation starts and removed after.
   -------------------------------------------------------------------------- */

/**
 * .animate-fade-scale-in
 * Applied by JS to the intro logo element.
 */
.animate-fade-scale-in {
  animation: fade-scale-in 0.6s ease-out both;
}

/**
 * .animate-fade-out
 * Applied by JS to the intro overlay to dismiss it.
 */
.animate-fade-out {
  animation: fade-out 0.5s ease-in both;
}

/* --------------------------------------------------------------------------
   Scroll-triggered entrance — [data-animate]
   Elements start hidden; JS adds `.is-visible` via IntersectionObserver.
   -------------------------------------------------------------------------- */

/**
 * Default: fade-in + slide-up 20px.
 * Applied to all [data-animate] elements not otherwise specified.
 */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/**
 * Variant: fade-up — same behaviour as default, explicit alias.
 */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/**
 * Variant: slide-left — enters from the left.
 */
[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/**
 * Variant: slide-right — enters from the right.
 */
[data-animate="slide-right"] {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="slide-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Hero entrance elements — .hero-entrance
   Applied via JS with optional data-delay for sequencing.
   JS reads `data-delay` and sets `transition-delay` inline before adding
   `.is-visible`, then removes `will-change` in the transitionend handler.
   -------------------------------------------------------------------------- */

.hero-entrance {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-entrance.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Stagger support
   The JS staggerChildren() assigns data-delay values; the ScrollAnimator
   reads them and passes them to setTimeout before adding .is-visible.
   No CSS needed beyond the existing [data-animate] rules above — stagger
   timing is handled entirely in JS.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Reduced motion — accessibility
   Respects the user's OS-level "prefers reduced motion" setting.
   All animated elements are shown immediately with no transitions or
   keyframe animations.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible {
    transition: none;
    opacity: 1;
    transform: none;
  }

  [data-animate="fade-up"],
  [data-animate="fade-up"].is-visible,
  [data-animate="slide-left"],
  [data-animate="slide-left"].is-visible,
  [data-animate="slide-right"],
  [data-animate="slide-right"].is-visible {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .hero-entrance,
  .hero-entrance.is-visible {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .animate-fade-scale-in {
    animation: none;
    opacity: 1;
  }

  .animate-fade-out {
    animation: none;
    opacity: 1;
  }

  .intro-name {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Card Flip Animation - Entire card flips from left to right on scroll
   ========================================================================== */

@keyframes flipInFromLeft {
  0% {
    transform: perspective(2000px) rotateY(-90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(2000px) rotateY(0deg);
    opacity: 1;
  }
}

/* Card flip animation - applies to entire card */
.chabum-flip-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.chabum-flip-card[data-animate="flip-in"] {
  opacity: 0;
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: left center;
}

.chabum-flip-card[data-animate="flip-in"].is-visible {
  animation: flipInFromLeft 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}


/* Mămmy Stats Card Entrance */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* ==========================================================================
   Work Experience & Education Animations
   ========================================================================== */

/* Timeline SVG line draw animation */
@keyframes drawLine {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Timeline item fade-in + slide-up */
@keyframes timelineFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Education box fade-in + scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Skill pill fade-in + scale */
@keyframes pillFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Certificate item fade-in + slide-right */
@keyframes certSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   FASTER & SMOOTHER ANIMATIONS - Global Override
   ========================================================================== */

/* Compositing hints only on elements that actually animate */
[data-animate]:not(.is-visible),
.hero-entrance:not(.is-visible) {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Speed up all scroll animations - MUCH FASTER */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important, 
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Speed up all fade-up animations */
[data-animate="fade-up"],
[data-animate="fade-in"],
[data-animate="slide-in-left"],
[data-animate="slide-in-right"] {
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important, 
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Speed up hero entrance */
.hero-entrance {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important,
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-entrance.is-visible {
  opacity: 1;
  transform: none;
}

/* Speed up education content */
.education-content {
  transition: opacity 0.25s ease !important, 
              transform 0.25s ease !important;
}

/* Speed up skill boxes */
.skill-box {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important, 
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Speed up skill pills */
.skill-pill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Speed up about card */
.about-card {
  transition: opacity 0.25s ease !important, 
              transform 0.25s ease !important;
}

/* Speed up project cards */
.project-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important,
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important,
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Speed up sticky cards */
.sticky-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important,
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* MINIMAL delays for stagger effect */
[data-animate][data-delay="50"] {
  transition-delay: 0.03s !important;
}

[data-animate][data-delay="100"] {
  transition-delay: 0.05s !important;
}

[data-animate][data-delay="150"] {
  transition-delay: 0.075s !important;
}

[data-animate][data-delay="200"] {
  transition-delay: 0.1s !important;
}

[data-animate][data-delay="300"] {
  transition-delay: 0.12s !important;
}

[data-animate][data-delay="400"] {
  transition-delay: 0.15s !important;
}

/* Optimize card flip animation */

/* ==========================================================================
   Hero Section Animations - After Preloader
   ========================================================================== */

.hero-image-animated,
.hero-name-animated,
.hero-tagline-animated,
.hero-buttons-animated {
  opacity: 0;
  transform: translateY(30px);
}

.hero-image-animated.fade-in {
  animation: heroFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0s;
}

.hero-name-animated.fade-in {
  animation: heroFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
}

.hero-tagline-animated.fade-in {
  animation: heroFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}

.hero-buttons-animated.fade-in {
  animation: heroFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   Scroll-Triggered Animations
   ========================================================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Stagger delay for child elements */
[data-animate="fade-up"].is-visible > * {
  animation: fadeInUp 0.6s ease forwards;
}

[data-animate="fade-up"].is-visible > *:nth-child(1) {
  animation-delay: 0.1s;
}

[data-animate="fade-up"].is-visible > *:nth-child(2) {
  animation-delay: 0.2s;
}

[data-animate="fade-up"].is-visible > *:nth-child(3) {
  animation-delay: 0.3s;
}

[data-animate="fade-up"].is-visible > *:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Performance Optimization
   ========================================================================== */

/* Hardware acceleration for smooth animations */
.marquee-img-track,
.feedback-marquee,
.card-stack-grid,
.video-accordion {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-name,
  .side-word {
    animation-fill-mode: forwards;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}