/* =========================================================
   PCI — COMPLETE ANIMATION SYSTEM
   All animation types: Fade, Zoom, Slide, Bounce, Rotate,
   Flip, LightSpeed, Back, Attention, Special Effects
   ========================================================= */

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

/* Base animation class */
.animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: var(--ease, cubic-bezier(.22,.61,.36,1));
}

/* Duration classes */
.animate-duration-1 { animation-duration: 0.3s; }
.animate-duration-2 { animation-duration: 0.5s; }
.animate-duration-3 { animation-duration: 0.8s; }
.animate-duration-4 { animation-duration: 1.2s; }
.animate-duration-5 { animation-duration: 2s; }

/* Delay classes */
.animate-delay-1  { animation-delay: 0.1s; }
.animate-delay-2  { animation-delay: 0.2s; }
.animate-delay-3  { animation-delay: 0.3s; }
.animate-delay-4  { animation-delay: 0.4s; }
.animate-delay-5  { animation-delay: 0.5s; }
.animate-delay-6  { animation-delay: 0.6s; }
.animate-delay-7  { animation-delay: 0.7s; }
.animate-delay-8  { animation-delay: 0.8s; }
.animate-delay-9  { animation-delay: 0.9s; }
.animate-delay-10 { animation-delay: 1s; }
.animate-delay-12 { animation-delay: 1.2s; }
.animate-delay-15 { animation-delay: 1.5s; }
.animate-delay-20 { animation-delay: 2s; }

/* Repeat classes */
.animate-once    { animation-iteration-count: 1; }
.animate-2       { animation-iteration-count: 2; }
.animate-3       { animation-iteration-count: 3; }
.animate-infinite { animation-iteration-count: infinite; }

/* Easing classes */
.animate-ease-linear { animation-timing-function: linear; }
.animate-ease-in     { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.animate-ease-out    { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.animate-ease-in-out { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.animate-ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.animate-ease-spring { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Pause on hover */
.animate-paused:hover { animation-play-state: paused !important; }

/* Slow/fast modifiers */
.animate-slow { animation-duration: 1.5s; }
.animate-fast { animation-duration: 0.4s; }

/* =========================================================
   SCROLL REVEAL SYSTEM
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.7s var(--ease, cubic-bezier(.22,.61,.36,1)),
              transform 0.7s var(--ease, cubic-bezier(.22,.61,.36,1));
}

.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Reveal from different directions */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-left.in {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-right.in {
  opacity: 1;
  transform: translateX(0);
}

.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-down {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-down.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-scale.in {
  opacity: 1;
  transform: scale(1);
}

.reveal-rotate {
  opacity: 0;
  transform: rotate(-15deg) scale(0.7);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-rotate.in {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* =========================================================
   STAGGERED ANIMATIONS FOR CHILDREN
   ========================================================= */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.stagger-children.in > * {
  opacity: 1;
  transform: translateY(0);
}

.stagger-children.in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.in > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.in > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.in > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.in > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.in > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.in > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.in > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-children.in > *:nth-child(9) { transition-delay: 0.45s; }
.stagger-children.in > *:nth-child(10) { transition-delay: 0.5s; }
.stagger-children.in > *:nth-child(11) { transition-delay: 0.55s; }
.stagger-children.in > *:nth-child(12) { transition-delay: 0.6s; }

/* =========================================================
   STAGGER ANIMATION (data-stagger)
   ========================================================= */
.stagger-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stagger-item.in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   1. FADE ANIMATIONS
   ========================================================= */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fadeIn { animation-name: fadeIn; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fadeInRight { animation-name: fadeInRight; }

@keyframes fadeInUpBig {
  from { opacity: 0; transform: translateY(100px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUpBig { animation-name: fadeInUpBig; }

@keyframes fadeInDownBig {
  from { opacity: 0; transform: translateY(-100px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInDownBig { animation-name: fadeInDownBig; }

@keyframes fadeInLeftBig {
  from { opacity: 0; transform: translateX(-100px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fadeInLeftBig { animation-name: fadeInLeftBig; }

@keyframes fadeInRightBig {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fadeInRightBig { animation-name: fadeInRightBig; }

/* Fade Out */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.animate-fadeOut { animation-name: fadeOut; }

@keyframes fadeOutUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-40px); }
}
.animate-fadeOutUp { animation-name: fadeOutUp; }

@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(40px); }
}
.animate-fadeOutDown { animation-name: fadeOutDown; }

@keyframes fadeOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-40px); }
}
.animate-fadeOutLeft { animation-name: fadeOutLeft; }

@keyframes fadeOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}
.animate-fadeOutRight { animation-name: fadeOutRight; }

/* =========================================================
   2. ZOOM ANIMATIONS
   ========================================================= */
@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50%  { opacity: 1; }
}
.animate-zoomIn { animation-name: zoomIn; }

@keyframes zoomInUp {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translateY(60px); }
  60%  { opacity: 1; }
}
.animate-zoomInUp { animation-name: zoomInUp; }

@keyframes zoomInDown {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translateY(-60px); }
  60%  { opacity: 1; }
}
.animate-zoomInDown { animation-name: zoomInDown; }

@keyframes zoomInLeft {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translateX(-60px); }
  60%  { opacity: 1; }
}
.animate-zoomInLeft { animation-name: zoomInLeft; }

@keyframes zoomInRight {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) translateX(60px); }
  60%  { opacity: 1; }
}
.animate-zoomInRight { animation-name: zoomInRight; }

/* Zoom Out */
@keyframes zoomOut {
  from { opacity: 1; }
  50%  { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  to   { opacity: 0; }
}
.animate-zoomOut { animation-name: zoomOut; }

/* =========================================================
   3. SLIDE ANIMATIONS
   ========================================================= */
@keyframes slideInUp {
  from { transform: translateY(100%); visibility: visible; }
  to   { transform: translateY(0); }
}
.animate-slideInUp { animation-name: slideInUp; }

@keyframes slideInDown {
  from { transform: translateY(-100%); visibility: visible; }
  to   { transform: translateY(0); }
}
.animate-slideInDown { animation-name: slideInDown; }

@keyframes slideInLeft {
  from { transform: translateX(-100%); visibility: visible; }
  to   { transform: translateX(0); }
}
.animate-slideInLeft { animation-name: slideInLeft; }

@keyframes slideInRight {
  from { transform: translateX(100%); visibility: visible; }
  to   { transform: translateX(0); }
}
.animate-slideInRight { animation-name: slideInRight; }

/* Slide Out */
@keyframes slideOutUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); visibility: hidden; }
}
.animate-slideOutUp { animation-name: slideOutUp; }

@keyframes slideOutDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); visibility: hidden; }
}
.animate-slideOutDown { animation-name: slideOutDown; }

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); visibility: hidden; }
}
.animate-slideOutLeft { animation-name: slideOutLeft; }

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); visibility: hidden; }
}
.animate-slideOutRight { animation-name: slideOutRight; }

/* =========================================================
   4. BOUNCE ANIMATIONS
   ========================================================= */
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0%   { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20%  { transform: scale3d(1.1, 1.1, 1.1); }
  40%  { transform: scale3d(0.9, 0.9, 0.9); }
  60%  { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80%  { transform: scale3d(0.97, 0.97, 0.97); }
  to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
.animate-bounceIn { animation-name: bounceIn; }

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(0, 3000px, 0); }
  60%  { opacity: 1; transform: translate3d(0, -20px, 0); }
  75%  { transform: translate3d(0, 10px, 0); }
  90%  { transform: translate3d(0, -5px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.animate-bounceInUp { animation-name: bounceInUp; }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(0, -3000px, 0); }
  60%  { opacity: 1; transform: translate3d(0, 25px, 0); }
  75%  { transform: translate3d(0, -10px, 0); }
  90%  { transform: translate3d(0, 5px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.animate-bounceInDown { animation-name: bounceInDown; }

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(-3000px, 0, 0); }
  60%  { opacity: 1; transform: translate3d(25px, 0, 0); }
  75%  { transform: translate3d(-10px, 0, 0); }
  90%  { transform: translate3d(5px, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.animate-bounceInLeft { animation-name: bounceInLeft; }

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(3000px, 0, 0); }
  60%  { opacity: 1; transform: translate3d(-25px, 0, 0); }
  75%  { transform: translate3d(10px, 0, 0); }
  90%  { transform: translate3d(-5px, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.animate-bounceInRight { animation-name: bounceInRight; }

/* =========================================================
   5. ROTATE ANIMATIONS
   ========================================================= */
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-200deg); }
  to   { opacity: 1; transform: rotate(0); }
}
.animate-rotateIn { animation-name: rotateIn; transform-origin: center; }

@keyframes rotateInDownLeft {
  from { opacity: 0; transform: rotate(-45deg); }
  to   { opacity: 1; transform: rotate(0); }
}
.animate-rotateInDownLeft { animation-name: rotateInDownLeft; transform-origin: left bottom; }

@keyframes rotateInDownRight {
  from { opacity: 0; transform: rotate(45deg); }
  to   { opacity: 1; transform: rotate(0); }
}
.animate-rotateInDownRight { animation-name: rotateInDownRight; transform-origin: right bottom; }

@keyframes rotateInUpLeft {
  from { opacity: 0; transform: rotate(45deg); }
  to   { opacity: 1; transform: rotate(0); }
}
.animate-rotateInUpLeft { animation-name: rotateInUpLeft; transform-origin: left bottom; }

@keyframes rotateInUpRight {
  from { opacity: 0; transform: rotate(-45deg); }
  to   { opacity: 1; transform: rotate(0); }
}
.animate-rotateInUpRight { animation-name: rotateInUpRight; transform-origin: right bottom; }

/* Rotate Out */
@keyframes rotateOut {
  from { opacity: 1; transform: rotate(0); }
  to   { opacity: 0; transform: rotate(200deg); }
}
.animate-rotateOut { animation-name: rotateOut; transform-origin: center; }

/* =========================================================
   6. FLIP ANIMATIONS
   ========================================================= */
@keyframes flipInX {
  from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  40%  { opacity: 1; transform: perspective(400px) rotateX(-10deg); }
  70%  { transform: perspective(400px) rotateX(10deg); }
  to   { transform: perspective(400px) rotateX(0); }
}
.animate-flipInX { animation-name: flipInX; backface-visibility: visible !important; }

@keyframes flipInY {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  40%  { opacity: 1; transform: perspective(400px) rotateY(-10deg); }
  70%  { transform: perspective(400px) rotateY(10deg); }
  to   { transform: perspective(400px) rotateY(0); }
}
.animate-flipInY { animation-name: flipInY; backface-visibility: visible !important; }

/* Flip Out */
@keyframes flipOutX {
  from { transform: perspective(400px); }
  30%  { opacity: 1; transform: perspective(400px) rotateX(-20deg); }
  to   { opacity: 0; transform: perspective(400px) rotateX(90deg); }
}
.animate-flipOutX { animation-name: flipOutX; backface-visibility: visible !important; }

@keyframes flipOutY {
  from { transform: perspective(400px); }
  30%  { opacity: 1; transform: perspective(400px) rotateY(-20deg); }
  to   { opacity: 0; transform: perspective(400px) rotateY(90deg); }
}
.animate-flipOutY { animation-name: flipOutY; backface-visibility: visible !important; }

/* =========================================================
   7. LIGHTSPEED ANIMATIONS
   ========================================================= */
@keyframes lightSpeedInLeft {
  from { opacity: 0; transform: translateX(-100%) skewX(30deg); }
  60%  { opacity: 1; transform: translateX(20%) skewX(-15deg); }
  80%  { transform: translateX(5%) skewX(7deg); }
  to   { transform: translateX(0) skewX(0); }
}
.animate-lightSpeedInLeft { animation-name: lightSpeedInLeft; }

@keyframes lightSpeedInRight {
  from { opacity: 0; transform: translateX(100%) skewX(-30deg); }
  60%  { opacity: 1; transform: translateX(-20%) skewX(15deg); }
  80%  { transform: translateX(5%) skewX(-7deg); }
  to   { transform: translateX(0) skewX(0); }
}
.animate-lightSpeedInRight { animation-name: lightSpeedInRight; }

@keyframes lightSpeedOutLeft {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(-100%) skewX(30deg); }
}
.animate-lightSpeedOutLeft { animation-name: lightSpeedOutLeft; }

@keyframes lightSpeedOutRight {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(100%) skewX(-30deg); }
}
.animate-lightSpeedOutRight { animation-name: lightSpeedOutRight; }

/* =========================================================
   8. BACK ANIMATIONS (with overshoot)
   ========================================================= */
@keyframes backInUp {
  from { opacity: 0; transform: translateY(1200px) scale(0.7); }
  80%  { opacity: 0.7; transform: translateY(0) scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-backInUp { animation-name: backInUp; }

@keyframes backInDown {
  from { opacity: 0; transform: translateY(-1200px) scale(0.7); }
  80%  { opacity: 0.7; transform: translateY(0) scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-backInDown { animation-name: backInDown; }

@keyframes backInLeft {
  from { opacity: 0; transform: translateX(-2000px) scale(0.7); }
  80%  { opacity: 0.7; transform: translateX(0) scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-backInLeft { animation-name: backInLeft; }

@keyframes backInRight {
  from { opacity: 0; transform: translateX(2000px) scale(0.7); }
  80%  { opacity: 0.7; transform: translateX(0) scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-backInRight { animation-name: backInRight; }

/* =========================================================
   9. ATTENTION SEEKERS
   ========================================================= */
@keyframes pulse {
  from { transform: scale3d(1, 1, 1); }
  50%  { transform: scale3d(1.05, 1.05, 1.05); }
  to   { transform: scale3d(1, 1, 1); }
}
.animate-pulse { animation-name: pulse; animation-timing-function: ease-in-out; }

@keyframes shake {
  from, to { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.animate-shake { animation-name: shake; }

@keyframes headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}
.animate-headShake { animation-name: headShake; animation-timing-function: ease-in-out; }

@keyframes tada {
  from { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
  to { transform: scale3d(1, 1, 1); }
}
.animate-tada { animation-name: tada; }

@keyframes wobble {
  from { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  to { transform: translateX(0%); }
}
.animate-wobble { animation-name: wobble; }

@keyframes jello {
  from, 11.1%, to { transform: translateX(0); }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
.animate-jello { animation-name: jello; transform-origin: center; }

@keyframes heartbeat {
  from { transform: scale(1); }
  14%  { transform: scale(1.3); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.3); }
  70%  { transform: scale(1); }
}
.animate-heartbeat { animation-name: heartbeat; }

@keyframes flash {
  from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0; }
}
.animate-flash { animation-name: flash; }

@keyframes rubberBand {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); }
}
.animate-rubberBand { animation-name: rubberBand; }

@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  to { transform: rotate(0); }
}
.animate-swing { animation-name: swing; transform-origin: top center; }

/* =========================================================
   10. SPECIAL EFFECTS
   ========================================================= */

/* Floating (hovering) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
.animate-float { animation-name: float; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

/* Float with rotation */
@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-15px) rotate(3deg); }
}
.animate-floatRotate { animation-name: floatRotate; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

/* Glow */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(204, 160, 60, 0.3); }
  50%      { box-shadow: 0 0 30px rgba(204, 160, 60, 0.6), 0 0 60px rgba(204, 160, 60, 0.3); }
}
.animate-glow { animation-name: glow; animation-duration: 2s; animation-iteration-count: infinite; }

/* Text glow */
@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 4px rgba(204, 160, 60, 0.3); }
  50%      { text-shadow: 0 0 20px rgba(204, 160, 60, 0.6), 0 0 40px rgba(204, 160, 60, 0.3); }
}
.animate-textGlow { animation-name: textGlow; animation-duration: 2s; animation-iteration-count: infinite; }

/* Gradient shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradientShift {
  animation-name: gradientShift;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  background-size: 200% 200%;
}

/* Spin */
@keyframes spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.animate-spin { animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; }

/* Spin reverse */
@keyframes spinReverse {
  from { transform: rotate(0); }
  to   { transform: rotate(-360deg); }
}
.animate-spinReverse { animation-name: spinReverse; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; }

/* Progress bar */
@keyframes progressBar {
  from { width: 0%; }
}
.animate-progressBar { animation-name: progressBar; animation-duration: 1.5s; animation-fill-mode: forwards; }

/* Shimmer */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-shimmer {
  animation-name: shimmer;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  background-size: 200% 100%;
}

/* Ripple */
@keyframes ripple {
  0%   { box-shadow: 0 0 0 0 rgba(204, 160, 60, 0.4); }
  100% { box-shadow: 0 0 0 20px rgba(204, 160, 60, 0); }
}
.animate-ripple { animation-name: ripple; animation-duration: 1.5s; animation-iteration-count: infinite; }

/* Typing */
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
.animate-typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--gold, #cca03c);
  animation: typing 2s steps(30) forwards, blink 0.75s step-end infinite;
  width: 0;
}

/* Text reveal (clip) */
@keyframes textReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.animate-textReveal {
  animation-name: textReveal;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

/* Scale In */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-scaleIn { animation-name: scaleIn; }

/* Blur In */
@keyframes blurIn {
  from { opacity: 0; filter: blur(20px); transform: scale(1.1); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}
.animate-blurIn { animation-name: blurIn; }

/* Perspective In */
@keyframes perspectiveIn {
  from { opacity: 0; transform: perspective(800px) rotateX(-80deg); }
  to   { opacity: 1; transform: perspective(800px) rotateX(0); }
}
.animate-perspectiveIn { animation-name: perspectiveIn; }

/* Roll In */
@keyframes rollIn {
  from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0); }
}
.animate-rollIn { animation-name: rollIn; }

/* Jack in the Box */
@keyframes jackInTheBox {
  from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
  50%  { transform: rotate(-10deg); }
  70%  { transform: rotate(3deg); }
  to   { opacity: 1; transform: scale(1); }
}
.animate-jackInTheBox { animation-name: jackInTheBox; }

/* Hinge */
@keyframes hinge {
  0%   { transform-origin: top left; animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  40%  { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  80%  { opacity: 1; transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  to   { opacity: 0; transform: translateY(700px); }
}
.animate-hinge { animation-name: hinge; }

/* Bounce (continuous) */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%  { transform: translateY(-30px); }
  60%  { transform: translateY(-15px); }
}
.animate-bounce { animation-name: bounce; animation-duration: 2s; animation-iteration-count: infinite; }

/* =========================================================
   11. HOVER ANIMATIONS
   ========================================================= */

/* Animated gradient border hover - for value cards */
.value-card-gradient {
  position: relative;
  background: var(--white) !important;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line, #dedad0);
}

.value-card-gradient::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: calc(var(--radius-m) + 2px);
  background: conic-gradient(
    var(--gold, #cca03c),
    var(--gold-soft, #e3c374),
    var(--navy, #091a62),
    var(--navy-2, #0d1f78),
    var(--gold, #cca03c)
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: -1;
  animation: rotateBorder 3s linear infinite;
}

.value-card-gradient:hover {
  border-color: transparent;
}

.value-card-gradient:hover::before {
  opacity: 1;
}

.value-card-gradient::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--white);
  border-radius: var(--radius-m);
  z-index: -1;
}

@keyframes rotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hover-lift {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(9, 26, 98, 0.2);
}

.hover-grow {
  transition: transform 0.3s var(--ease);
}
.hover-grow:hover {
  transform: scale(1.05);
}

.hover-shrink {
  transition: transform 0.3s var(--ease);
}
.hover-shrink:hover {
  transform: scale(0.95);
}

.hover-glow {
  transition: box-shadow 0.3s var(--ease);
}
.hover-glow:hover {
  box-shadow: 0 0 25px rgba(204, 160, 60, 0.4);
}

.hover-bright {
  transition: filter 0.3s var(--ease);
}
.hover-bright:hover {
  filter: brightness(1.15);
}

.hover-rotate {
  transition: transform 0.4s var(--ease);
}
.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold, #cca03c);
  transition: width 0.3s var(--ease);
}
.hover-underline:hover::after {
  width: 100%;
}

.hover-border {
  position: relative;
  overflow: hidden;
}
.hover-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold, #cca03c);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  transform: scale(0.9);
}
.hover-border:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================
   12. LOADING / ENTRANCE SEQUENCES
   ========================================================= */
.loading-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--line, #dedad0);
  border-top-color: var(--gold, #cca03c);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* =========================================================
   14. SCROLL-BASED BACKGROUND ANIMATION
   ========================================================= */
/* Scroll progress bar at top of page */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #cca03c), var(--gold-soft, #e3c374));
  z-index: 99998;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* Scroll-based background color shift for sections */
.scroll-bg-shift {
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

/* Parallax gradient overlay that shifts on scroll */
.scroll-gradient-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(204, 160, 60, 0.04) 0%, transparent 70%);
  transition: opacity 0.3s ease;
}

/* =========================================================
   15. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .animated,
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-up,
  .reveal-down,
  .reveal-scale,
  .reveal-rotate,
  .stagger-children > *,
  .stagger-item,
  .hover-lift,
  .hover-grow,
  .hover-shrink,
  .hover-rotate {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .animate-float,
  .animate-floatRotate,
  .animate-glow,
  .animate-textGlow,
  .animate-gradientShift,
  .animate-spin,
  .animate-bounce,
  .animate-pulse,
  .animate-shake,
  .animate-tada,
  .animate-wobble,
  .animate-jello,
  .animate-heartbeat,
  .animate-flash,
  .animate-rubberBand,
  .animate-swing,
  .animate-headShake,
  .animate-ripple,
  .animate-shimmer {
    animation: none !important;
  }
  
  /* Disable custom cursor on reduced motion */
  .custom-cursor,
  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none !important;
  }
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: auto !important;
  }
  
  /* Disable scroll progress on reduced motion */
  .scroll-progress {
    display: none !important;
  }
}