/* ============================================================
   CORPSHORE ITALIA — ANIMATIONS CSS
   Easing: cubic-bezier(0.16,1,0.3,1) — ease-out-expo feel
   ============================================================ */

/* ---- KEYFRAMES ---- */

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

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

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

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

/* Gold shimmer sweep — used on buttons and highlighted elements */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Pulsing ring around ROI timeline nodes */
@keyframes nodeRingPulse {
  0%   { box-shadow: 0 0 0 0   rgba(184,150,62,0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(184,150,62,0); }
  100% { box-shadow: 0 0 0 0   rgba(184,150,62,0); }
}

/* Dot pulse for urgency badges */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(1.35); }
}

/* Urgent banner glow */
@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(184,150,62,0.42); }
  50%       { box-shadow: 0 0 0 10px rgba(184,150,62,0); }
}

/* Carousel crossfade with micro-scale */
@keyframes carouselIn {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- SCROLL-REVEAL ---- */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-52px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(52px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---- STAGGER CHILDREN ---- */
/* Parent gets .stagger-children; JS adds .visible to parent.
   Each child inherits a sequential delay up to 600 ms. */

.stagger-children > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
}

.stagger-children.visible > *:nth-child(1)  { transition-delay:   0ms; }
.stagger-children.visible > *:nth-child(2)  { transition-delay:  80ms; }
.stagger-children.visible > *:nth-child(3)  { transition-delay: 160ms; }
.stagger-children.visible > *:nth-child(4)  { transition-delay: 240ms; }
.stagger-children.visible > *:nth-child(5)  { transition-delay: 320ms; }
.stagger-children.visible > *:nth-child(6)  { transition-delay: 400ms; }
.stagger-children.visible > *:nth-child(7)  { transition-delay: 480ms; }
.stagger-children.visible > *:nth-child(8)  { transition-delay: 560ms; }
.stagger-children.visible > *:nth-child(9)  { transition-delay: 600ms; }
.stagger-children.visible > *:nth-child(10) { transition-delay: 600ms; }
.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---- COUNT-UP ---- */
.count-target {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.count-target.counted { opacity: 1; }

/* ---- TIMELINE ---- */

.timeline-node {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
              transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.timeline-node.visible {
  opacity: 1;
  transform: scale(1);
}

.timeline-line-fill {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
.timeline-line-fill.visible { transform: scaleX(1); }

/* ---- TAB FADE ---- */

.tab-panel {
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.tab-panel.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* ---- CAROUSEL CROSSFADE ---- */

.carousel-slide {
  opacity: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  animation: carouselIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}

/* ---- ROI TIMELINE ---- */

/* Node detail panel */
.roi-node-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1), padding 0.3s ease;
  padding: 0 20px;
}
.roi-node-detail.open {
  max-height: 200px;
  padding: 16px 20px;
}

/* Active ROI node pulses */
.roi-node-wrap.active .roi-node {
  animation: nodeRingPulse 2s ease-out infinite;
}

/* ---- COMPANY TIMELINE ---- */

.company-timeline-item {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.company-timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---- URGENT BANNER GLOW ---- */
.urgent-banner {
  animation: urgentPulse 2.8s ease-in-out infinite;
}

/* ---- PROGRESS BAR ---- */
.progress-bar {
  height: 6px;
  background: var(--warm-mid);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  border-radius: 3px;
  transition: width 0.9s cubic-bezier(0.16,1,0.3,1);
}

/* ---- COMPARISON ROW STAGGER ---- */
.comparison-row:nth-child(1) { transition-delay:   0ms; }
.comparison-row:nth-child(2) { transition-delay:  90ms; }
.comparison-row:nth-child(3) { transition-delay: 180ms; }
.comparison-row:nth-child(4) { transition-delay: 270ms; }
.comparison-row:nth-child(5) { transition-delay: 360ms; }
.comparison-row:nth-child(6) { transition-delay: 450ms; }

/* ---- FOCUS RING (accessibility) ---- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- CT item (component alias) ---- */
.ct-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.ct-item.visible { opacity: 1; transform: translateX(0); }

/* ---- UTILITY ANIMATION CLASSES ---- */

.animate-fadeInUp {
  animation: fadeInUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.animate-slideInLeft {
  animation: slideInLeft 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.animate-slideInRight {
  animation: slideInRight 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

/* Delay helpers */
.delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }
.delay-400 { animation-delay: 400ms; transition-delay: 400ms; }
.delay-500 { animation-delay: 500ms; transition-delay: 500ms; }
.delay-600 { animation-delay: 600ms; transition-delay: 600ms; }

/* ---- PREFERS-REDUCED-MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .stagger-children > *,
  .timeline-node,
  .timeline-line-fill,
  .company-timeline-item,
  .ct-item,
  .comparison-row,
  .animate-fadeInUp,
  .animate-slideInLeft,
  .animate-slideInRight {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .carousel-slide,
  .tab-panel {
    transition: none !important;
    animation: none !important;
  }

  .roi-node-wrap.active .roi-node,
  .urgent-banner {
    animation: none !important;
    box-shadow: none;
  }

  #scroll-progress {
    transition: none !important;
  }
}