/* Currere Media Group — Animations & Illustrations */

/* ── Scroll reveal base (always visible — no flash without JS) ── */
.reveal {
  opacity: 1;
  transform: none;
}

/* ── All motion inside prefers-reduced-motion ── */
@media (prefers-reduced-motion: no-preference) {

  /* ── Keyframes ── */

  @keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    33%       { transform: translateY(-18px) translateX(8px); }
    66%       { transform: translateY(10px) translateX(-10px); }
  }

  @keyframes floatDiamond {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50%      { transform: rotate(45deg) translateY(-14px); }
  }

  @keyframes growUp {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }

  @keyframes popIn {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

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

  @keyframes drift {
    0%   { transform: translateY(0); opacity: 0.4; }
    100% { transform: translateY(-70px); opacity: 0; }
  }

  @keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 160, 112, 0); }
    50%      { box-shadow: 0 0 0 12px rgba(232, 160, 112, 0.3); }
  }

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

  /* ── Scroll reveal states ── */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: none;
  }

  /* Slide-from-left variant (pain points) */
  .reveal--left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  .reveal--left.visible {
    opacity: 1;
    transform: none;
  }

  /* Scale-in variant (step cards, proof tiles) */
  .reveal--scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

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

  /* ── Final CTA: particle drift + button glow + h2 scale-in ── */
  .particle {
    animation: drift linear infinite;
  }

  .cta-final .btn--cta {
    animation: glowPulse 2s ease-in-out infinite;
  }

  .cta-final h2.reveal {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .cta-final h2.reveal:not(.visible) {
    opacity: 0;
    transform: scale(0.95);
  }

  .cta-final h2.reveal.visible {
    opacity: 1;
    transform: scale(1);
  }

  /* ── Social Proof: tile stagger + testimonial delay ── */
  .proof__tile.reveal--scale:nth-child(1) { transition-delay: 0ms; }
  .proof__tile.reveal--scale:nth-child(2) { transition-delay: 100ms; }
  .proof__tile.reveal--scale:nth-child(3) { transition-delay: 200ms; }

  .testimonial.reveal { transition-delay: 350ms; }

  /* ── How It Works: stagger delays ── */
  .step.reveal--scale:nth-child(2) { transition-delay: 0ms; }
  .step.reveal--scale:nth-child(3) { transition-delay: 150ms; }
  .step.reveal--scale:nth-child(4) { transition-delay: 300ms; }

  /* ── Solution: floating diamonds ── */
  .solution__diamond--1 {
    animation: floatDiamond 8s ease-in-out infinite;
  }

  .solution__diamond--2 {
    animation: floatDiamond 11s ease-in-out infinite reverse;
  }

  /* ── Pain Points: stagger delays ── */
  .pain-list__item.reveal--left:nth-child(1) { transition-delay: 0ms; }
  .pain-list__item.reveal--left:nth-child(2) { transition-delay: 120ms; }
  .pain-list__item.reveal--left:nth-child(3) { transition-delay: 240ms; }

  .pain-list__item.visible .pain-list__icon {
    animation: pulse 0.4s ease 0.1s both;
  }

  /* ── Hero: floating orbs ── */
  .hero {
    position: relative;
    overflow: hidden;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    z-index: 0;
    pointer-events: none;
  }

  .hero__orb--1 {
    width: 280px;
    height: 280px;
    background: rgba(124, 92, 191, 0.18);
    top: -60px;
    left: -80px;
    animation: float 9s ease-in-out infinite;
  }

  .hero__orb--2 {
    width: 220px;
    height: 220px;
    background: rgba(232, 160, 112, 0.2);
    bottom: -40px;
    right: -60px;
    animation: float 7s ease-in-out infinite reverse;
  }

  .hero__orb--3 {
    width: 160px;
    height: 160px;
    background: rgba(124, 92, 191, 0.12);
    top: 40%;
    right: 10%;
    animation: float 11s ease-in-out infinite 2s;
  }

  /* ── Hero: staggered load fade-up ── */
  .hero .badge {
    animation: fadeUp 0.6s ease both;
    animation-delay: 0.1s;
  }

  .hero__headline {
    animation: fadeUp 0.6s ease both;
    animation-delay: 0.25s;
  }

  .hero__sub {
    animation: fadeUp 0.6s ease both;
    animation-delay: 0.4s;
  }

  .hero .btn {
    animation: fadeUp 0.6s ease both;
    animation-delay: 0.55s;
  }

  .hero__micro {
    animation: fadeUp 0.6s ease both;
    animation-delay: 0.65s;
  }

}

/* ── Hero layout ── */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ── Hero desktop layout with illustration ── */
@media (min-width: 769px) {
  .hero__content {
    align-items: flex-start;
    text-align: left;
    max-width: 540px;
  }

  .hero {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding: 72px 48px 64px;
  }
}

/* ── Hero illustration ── */
.hero__illustration {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero__illustration {
    display: none;
  }
}

/* ── Final CTA: particles (structural) ── */
.cta-final {
  position: relative;
  overflow: hidden;
}

.particle {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* ── Arrow bounce (user-initiated hover) ── */
@media (hover: hover) {
  .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .btn:hover .arrow {
    transform: translateX(4px);
  }
}

/* ── Social Proof: quote mark + tile hover glow (structural + user-initiated) ── */
.testimonial {
  position: relative;
}

.testimonial__quote-mark {
  position: absolute;
  top: -8px;
  left: 16px;
  font-size: 72px;
  line-height: 1;
  color: var(--color-proof-border);
  opacity: 0.5;
  font-family: Georgia, serif;
  pointer-events: none;
}

@media (hover: hover) {
  .proof__tile {
    transition: box-shadow 0.2s ease;
  }

  .proof__tile:hover {
    box-shadow: 0 0 0 3px var(--color-proof-border), 0 8px 24px rgba(232, 160, 112, 0.2);
  }
}

/* ── How It Works: icon + connector (structural) ── */
.step__icon {
  display: block;
  margin: 0 auto 12px;
}

.steps {
  position: relative;
}

.steps__connector {
  display: none;
}

@media (min-width: 769px) {
  .steps__connector {
    display: block;
    position: absolute;
    top: 52px;
    left: calc(16.66% + 20px);
    right: calc(16.66% + 20px);
    border-top: 2px dashed var(--color-border);
    pointer-events: none;
  }
}

/* ── How It Works: hover lift (user-initiated, outside reduced-motion) ── */
@media (hover: hover) {
  .step {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(124, 92, 191, 0.15);
  }
}

/* ── Solution: diamonds (structural) ── */
.solution {
  position: relative;
  overflow: hidden;
}

.solution__diamond {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  opacity: 0.2;
  pointer-events: none;
}

.solution__diamond--1 {
  top: 30px;
  right: 60px;
  transform: rotate(45deg);
}

.solution__diamond--2 {
  bottom: 40px;
  left: 40px;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  opacity: 0.15;
}

/* ── Pain Points: background circle (structural, not motion) ── */
.pain-points {
  position: relative;
  overflow: hidden;
}

.pain__bg-circle {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #7c5cbf;
  opacity: 0.04;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* ── Hero SVG illustration animations ── */
  .bar {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: growUp 0.7s ease both;
  }
  .bar--1 { animation-delay: 0.7s; }
  .bar--2 { animation-delay: 0.85s; }
  .bar--3 { animation-delay: 1.0s; }

  .circle {
    transform-box: fill-box;
    transform-origin: center center;
    animation: popIn 0.5s ease both;
  }
  .circle--1 { animation-delay: 1.1s; }
  .circle--2 { animation-delay: 1.2s; }
}