/* Hero Spiral with Overlaid Text — copied VERBATIM from recursive.eco apps/landing/style.css
   (the .hero-* rules + their keyframes, plus the spiral-size-breath keyframe they depend on).
   Do not edit — this is the source of the WHY/HOW/WHAT breathing the landing uses. */
.hero-spiral-container {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 400px;
    height: auto;
}

.hero-spiral {
    width: 100%;
    height: auto;
    /* Synchronized rotation with header spiral */
    animation: spiral-size-breath 30s ease-in-out infinite;
}

.hero-spiral-path-background {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    /* No animations - static background */
}

/* Text overlay animations synchronized with spiral */
.hero-text-overlay {
    font-family: Arial, Helvetica, sans-serif;
}

/* WHY - Center - slowest breathing (36s - 2x faster) */
.hero-text-why {
    animation: text-breath-why-slow 36s ease-in-out infinite;
}

/* HOW - Middle - medium breathing (22.5s - 2x faster) */
.hero-text-how {
    animation: text-breath-how-medium 22.5s ease-in-out infinite;
}

/* WHAT - Outer - fastest breathing (13.5s - 2x faster) */
.hero-text-what {
    animation: text-breath-what-fast 13.5s ease-in-out infinite;
}

/* Independent breathing animations with different ranges */
@keyframes text-breath-why-slow {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes text-breath-how-medium {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.95;
    }
}

@keyframes text-breath-what-fast {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-spiral-container {
        max-width: 300px;
    }

    .hero-text-why {
        font-size: 20px !important;
    }

    .hero-text-how {
        font-size: 18px !important;
    }

    .hero-text-what {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .hero-spiral-container {
        max-width: 250px;
    }

    .hero-text-why {
        font-size: 18px !important;
    }

    .hero-text-how {
        font-size: 16px !important;
    }

    .hero-text-what {
        font-size: 14px !important;
    }
}

/* Process 1: Size Breathing - Primary 30s rhythm (the .hero-spiral animation depends on this) */
@keyframes spiral-size-breath {
    0%, 100% {
        transform: scale(1.2) rotate(0deg);
        opacity: 0.7;
    }
    25% {
        transform: scale(0.9) rotate(90deg);
        opacity: 0.85;
    }
    50% {
        transform: scale(0.3) rotate(180deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.9) rotate(270deg);
        opacity: 0.85;
    }
}