/* Animations CSS */

/* Logo Animation */
.logo-circle {
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    animation: drawCircle 2s ease forwards;
}

.logo-eye {
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    animation: drawCircle 2s ease forwards 0.5s;
}

.logo-pupil {
    opacity: 0;
    animation: fadeIn 1s ease forwards 1.5s;
}

@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Floating Elements Animation */
.floating-icon {
    animation: float 6s ease-in-out infinite;
}

.floating-icon:nth-child(2) {
    animation-delay: 1s;
}

.floating-icon:nth-child(3) {
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Problem Slide Animations */
.clock-hand {
    transform-origin: center;
}

.hour-hand {
    animation: rotateHourHand 10s linear infinite;
}

.minute-hand {
    animation: rotateMinuteHand 2s linear infinite;
}

@keyframes rotateHourHand {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateMinuteHand {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.wasted-time-arc {
    animation: drawArc 2s ease forwards 0.5s;
}

@keyframes drawArc {
    to {
        stroke-dashoffset: 0;
    }
}

/* Solution Slide Animations */
.brain-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawBrain 3s ease forwards;
}

.brain-path:nth-child(2) {
    animation-delay: 0.2s;
}

.brain-path:nth-child(3) {
    animation-delay: 0.4s;
}

.brain-path:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes drawBrain {
    to {
        stroke-dashoffset: 0;
    }
}

.neural-connection {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawConnection 2s ease forwards 1s;
}

.neural-node {
    opacity: 0;
    animation: pulseNode 3s ease-in-out infinite;
}

.neural-node:nth-child(6) {
    animation-delay: 0.2s;
}

.neural-node:nth-child(7) {
    animation-delay: 0.4s;
}

.neural-node:nth-child(8) {
    animation-delay: 0.6s;
}

.neural-node:nth-child(9) {
    animation-delay: 0.8s;
}

.neural-node:nth-child(10) {
    animation-delay: 1s;
}

.neural-node:nth-child(11) {
    animation-delay: 1.2s;
}

.neural-node:nth-child(12) {
    animation-delay: 1.4s;
}

.neural-node:nth-child(13) {
    animation-delay: 1.6s;
}

@keyframes drawConnection {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes pulseNode {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 0.8;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Market Slide Animations */
.market-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 0; /* We'll animate this with GSAP instead */
}

.market-area {
    opacity: 1; /* We'll animate this with GSAP instead */
}

.data-point {
    opacity: 1; /* We'll animate this with GSAP instead */
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll Reveal Animations */
.slide {
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.visible {
    opacity: 1;
}

/* Feature Icon Animations */
.feature-icon svg {
    transition: transform 0.3s ease;
}

.feature:hover .feature-icon svg {
    transform: scale(1.2);
}

/* Market Stat Animations */
.market-stat {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.market-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(110, 87, 224, 0.2);
}

/* Problem List Animations */
.problem-list li {
    opacity: 0;
    transform: translateX(20px);
    animation: slideInRight 0.5s ease forwards;
}

.problem-list li:nth-child(1) {
    animation-delay: 0.2s;
}

.problem-list li:nth-child(2) {
    animation-delay: 0.4s;
}

.problem-list li:nth-child(3) {
    animation-delay: 0.6s;
}

.problem-list li:nth-child(4) {
    animation-delay: 0.8s;
}

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

/* Solution Features Animations */
.feature {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.feature:nth-child(1) {
    animation-delay: 0.2s;
}

.feature:nth-child(2) {
    animation-delay: 0.4s;
}

.feature:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Product Demo Slide Animations */
.demo-feature {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.demo-feature:nth-child(1) {
    animation-delay: 0.2s;
}

.demo-feature:nth-child(2) {
    animation-delay: 0.4s;
}

.demo-feature:nth-child(3) {
    animation-delay: 0.6s;
}

.demo-video-container {
    opacity: 0;
    transform: scale(0.95);
    animation: scaleIn 0.8s ease forwards 0.5s;
}

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.screenshot {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.screenshot:nth-child(1) {
    animation-delay: 0.8s;
}

.screenshot:nth-child(2) {
    animation-delay: 1s;
}

.screenshot:nth-child(3) {
    animation-delay: 1.2s;
}

/* Technology Slide Animations */
.arch-layer {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInRight 0.5s ease forwards;
}

.layer-1 {
    animation-delay: 0.2s;
}

.layer-2 {
    animation-delay: 0.4s;
}

.layer-3 {
    animation-delay: 0.6s;
}

.layer-4 {
    animation-delay: 0.8s;
}

.layer-label {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.layer-label:nth-child(5) {
    animation-delay: 0.3s;
}

.layer-label:nth-child(6) {
    animation-delay: 0.5s;
}

.layer-label:nth-child(7) {
    animation-delay: 0.7s;
}

.layer-label:nth-child(8) {
    animation-delay: 0.9s;
}

.connection-line {
    stroke-dasharray: 10;
    stroke-dashoffset: 100;
    animation: drawLine 1s ease forwards;
}

.connection-line:nth-child(9) {
    animation-delay: 0.5s;
}

.connection-line:nth-child(10) {
    animation-delay: 0.7s;
}

.connection-line:nth-child(11) {
    animation-delay: 0.9s;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.tech-item {
    opacity: 0;
    transform: translateX(20px);
    animation: slideInRight 0.5s ease forwards;
}

.tech-item:nth-child(1) {
    animation-delay: 1s;
}

.tech-item:nth-child(2) {
    animation-delay: 1.2s;
}

.tech-item:nth-child(3) {
    animation-delay: 1.4s;
}

.tech-item:nth-child(4) {
    animation-delay: 1.6s;
}

.metric-fill {
    width: 0;
    animation: fillBar 1.5s ease forwards 1.5s;
}

@keyframes fillBar {
    to {
        width: var(--width) !important;
    }
}

/* Competition Slide Animations */
.comparison-row {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.comparison-row:nth-child(1) {
    animation-delay: 0.2s;
}

.comparison-row:nth-child(2) {
    animation-delay: 0.4s;
}

.comparison-row:nth-child(3) {
    animation-delay: 0.6s;
}

.comparison-row:nth-child(4) {
    animation-delay: 0.8s;
}

.comparison-row:nth-child(5) {
    animation-delay: 1s;
}

.check-icon path, .x-icon path, .partial-icon path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawPath 0.5s ease forwards;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* Traction Slide Animations */
.traction-metric {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.traction-metric:nth-child(1) {
    animation-delay: 0.2s;
}

.traction-metric:nth-child(2) {
    animation-delay: 0.4s;
}

.traction-metric:nth-child(3) {
    animation-delay: 0.6s;
}

.traction-metric:nth-child(4) {
    animation-delay: 0.8s;
}

.metric-value {
    opacity: 0;
    animation: countUp 1s ease forwards 1s;
}

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

.pie-segment {
    stroke-dashoffset: 502;
    animation: drawPie 1.5s ease forwards;
}

.segment-1 {
    animation-delay: 0.5s;
}

.segment-2 {
    animation-delay: 1s;
}

.segment-3 {
    animation-delay: 1.5s;
}

@keyframes drawPie {
    to {
        stroke-dashoffset: var(--offset, 0);
    }
}

.timeline-point {
    opacity: 0;
    transform: scale(0);
    animation: scaleIn 0.5s ease forwards;
}

.timeline-item:nth-child(1) .timeline-point {
    animation-delay: 1s;
}

.timeline-item:nth-child(2) .timeline-point {
    animation-delay: 1.3s;
}

.timeline-item:nth-child(3) .timeline-point {
    animation-delay: 1.6s;
}

.timeline-content {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.timeline-item:nth-child(1) .timeline-content {
    animation-delay: 1.2s;
}

.timeline-item:nth-child(2) .timeline-content {
    animation-delay: 1.5s;
}

.timeline-item:nth-child(3) .timeline-content {
    animation-delay: 1.8s;
}

/* Team Slide Animations */
.founder-video-container {
    opacity: 0;
    transform: scale(0.95);
    animation: scaleIn 0.8s ease forwards 0.3s;
}

.founder-info h3, .founder-title {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.founder-info h3 {
    animation-delay: 0.8s;
}

.founder-title {
    animation-delay: 1s;
}

.background-item {
    opacity: 0;
    transform: translateX(20px);
    animation: slideInRight 0.5s ease forwards;
}

.background-item:nth-child(1) {
    animation-delay: 1.2s;
}

.background-item:nth-child(2) {
    animation-delay: 1.4s;
}

.background-item:nth-child(3) {
    animation-delay: 1.6s;
}

.position {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.position:nth-child(1) {
    animation-delay: 1.2s;
}

.position:nth-child(2) {
    animation-delay: 1.4s;
}

/* Vision Slide Animations */
.vision-headline {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease forwards 0.3s;
}

.human-head, .human-body {
    opacity: 0;
    animation: fadeIn 1s ease forwards 0.5s;
}

.computer-screen, .computer-base, .computer-stand, .computer-base-bottom {
    opacity: 0;
    animation: fadeIn 1s ease forwards 0.8s;
}

.connection-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawLine 1.5s ease forwards 1.2s;
}

.ai-node {
    opacity: 0;
    transform: scale(0);
    animation: pulseNode 1s ease forwards;
}

.ai-node:nth-child(1) {
    animation-delay: 1.5s;
}

.ai-node:nth-child(2) {
    animation-delay: 1.7s;
}

.ai-node:nth-child(3) {
    animation-delay: 1.9s;
}

.ai-connection {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: drawLine 0.8s ease forwards;
}

.ai-connection:nth-child(1) {
    animation-delay: 2s;
}

.ai-connection:nth-child(2) {
    animation-delay: 2.2s;
}

.ai-connection:nth-child(3) {
    animation-delay: 2.4s;
}

.future-element, .future-connection {
    opacity: 0;
    animation: fadeIn 1s ease forwards 2.6s;
}

.future-milestone {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.future-milestone:nth-child(1) {
    animation-delay: 0.5s;
}

.future-milestone:nth-child(2) {
    animation-delay: 0.7s;
}

.future-milestone:nth-child(3) {
    animation-delay: 0.9s;
}
