/* ═══════════════════════════════════════════════════
   BRAND TENSION — Animation & Sonic Design System
   Fire sections: sharp, fast, impactful
   Warmth sections: slow, generous, breathing
   ═══════════════════════════════════════════════════ */

/* ── R3THINK EVERYTHING Manifesto Break ── */
.manifesto-break {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  background: var(--color-bg);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.manifesto-break__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-10) var(--space-6);
}

.manifesto-break__text {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-coral);
  text-stroke: 2px var(--color-coral);
  opacity: 0;
  transform: scale(0.9);
  transition: none; /* GSAP controls this */
}

.manifesto-break__text.manifesto-active {
  opacity: 1;
  transform: scale(1);
  color: var(--color-coral);
  -webkit-text-stroke: 0px;
  text-stroke: 0px;
}

/* Glow pulse behind the text */
.manifesto-break::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 57, 70, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1;
}

.manifesto-break.manifesto-in-view::before {
  opacity: 1;
  animation: manifestoPulse 3s ease-in-out infinite;
}

@keyframes manifestoPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.2; }
}

/* ── Fire Section Animations ── */
/* Problem section, CTA block — entries are sharp and immediate */
.fire-reveal {
  opacity: 0;
  transform: translateY(0); /* No soft float — just appears */
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.fire-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fire headlines get a clip-reveal (text slides in from left) */
.fire-headline {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.fire-headline.visible {
  clip-path: inset(0 0% 0 0);
}

/* ── Warmth Section Animations ── */
/* How it works, differentiators — entries are slow and generous */
.warmth-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.warmth-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section Breathing ── */
/* Warmth sections get more padding, fire sections are tighter */
.section--fire {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.section--warmth {
  padding-top: var(--space-12, 6rem);
  padding-bottom: var(--space-12, 6rem);
}

/* ── Hero Subtitle Tension Animation ── */
/* First line (fire) appears fast, second line (warmth) fades in slower */
.hero__subtitle .fire-line {
  display: block;
  opacity: 0;
  transform: translateX(-10px);
}
.hero__subtitle .warmth-line {
  display: block;
  opacity: 0;
  transform: translateY(10px);
}

/* ── Sonic Interaction Cues ── */
/* Visual feedback paired with audio */
.sonic-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sonic-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(230, 57, 70, 0.15);
}
.sonic-hover:active {
  transform: translateY(0);
  transition-duration: 0.05s;
}

/* CTA buttons get a subtle glow on hover for sonic-paired feedback */
.btn--primary.sonic-hover:hover {
  box-shadow: 0 0 30px rgba(230, 57, 70, 0.3);
}

/* ── Audio Toggle Button ── */
.audio-toggle {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-divider);
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}
.audio-toggle:hover {
  border-color: var(--color-coral);
  color: var(--color-coral);
}
.audio-toggle.audio-active {
  border-color: var(--color-coral);
  color: var(--color-coral);
}
.audio-toggle svg {
  width: 18px;
  height: 18px;
}

/* Sound wave bars animation for active state */
.audio-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.audio-bars span {
  display: block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  animation: audioBar 0.8s ease-in-out infinite alternate;
}
.audio-bars span:nth-child(1) { height: 4px; animation-delay: 0s; }
.audio-bars span:nth-child(2) { height: 8px; animation-delay: 0.15s; }
.audio-bars span:nth-child(3) { height: 12px; animation-delay: 0.3s; }
.audio-bars span:nth-child(4) { height: 6px; animation-delay: 0.45s; }

.audio-toggle:not(.audio-active) .audio-bars span {
  animation: none;
  height: 2px;
}

@keyframes audioBar {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .fire-reveal, .warmth-reveal, .fire-headline {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .manifesto-break__text {
    opacity: 1;
    transform: none;
    color: var(--color-coral);
    -webkit-text-stroke: 0px;
  }
  .manifesto-break::before {
    animation: none;
  }
  .audio-toggle {
    display: none;
  }
}