/* ============================================
   ASKEVE - ENHANCED HERO ANIMATIONS
   Premium cinematic intros with SVG elements
   ============================================ */

/* --- Hero height defaults/overrides --- */
.page-hero.chatbots-hero {
    min-height: 80vh !important;
    height: auto;
}

.page-hero.automation-hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: auto;
}

.page-hero.llm-hero.llm-hero-story {
    min-height: 200vh !important;
    height: auto;
}

/* --- Base Variables --- */
:root {
    --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --gear-color: rgba(68, 214, 165, 0.3);
    --gear-stroke: rgba(68, 214, 165, 0.6);
    --spark-color: #44d6a5;
}

/* --- Overlay Container for Animations --- */
.hero-animation-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.hero-content-wrapper {
    position: relative;
    z-index: 20;
}

/* ============================================
   AUTOMATION PAGE - DIGITAL ASSEMBLY LINE
   WebGL Canvas Visualization
   ============================================ */

/* WebGL Canvas Container */
#assembly-line-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto;
    /* Allow mouse tracking for parallax */
}

/* Gradient overlay for text readability */
/* .automation-hero::after removed - redundant gradient strip */

/* Hero Content - Always visible with assembly line */
.automation-hero .automation-intro-content,
.automation-hero .hero-content-wrapper.automation-intro-content {
    opacity: 1;
    transform: none;
    visibility: visible;
    animation: automationFadeIn 1s ease-out 0.5s both;
}

/* Fade in animation for hero text */
@keyframes automationFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   CHATBOTS PAGE - MASCOT CONVERSATION
   ============================================ */

/* Conversation Container - Hidden (animations removed) */
.conversation-container {
    display: none;
}

/* Characters */
.conversation-character {
    opacity: 0;
}

.eve-character {
    animation: slideInFromLeft 0.5s var(--anim-ease-bounce) 0.2s forwards;
}

.human-character {
    animation: slideInFromRight 0.5s var(--anim-ease-bounce) 0.4s forwards;
}

/* Mascot and Human SVGs */
.eve-mascot {
    width: 150px;
    height: 175px;
    filter: drop-shadow(0 0 20px rgba(68, 214, 165, 0.4));
}

.human-silhouette {
    width: 120px;
    height: 168px;
    filter: drop-shadow(0 0 10px rgba(150, 150, 170, 0.3));
}

/* Mascot Glow Ring */
.mascot-glow-ring {
    animation: glowRingPulse 1.5s ease-in-out infinite;
}

@keyframes glowRingPulse {

    0%,
    100% {
        opacity: 0.3;
        stroke-width: 8;
    }

    50% {
        opacity: 0.6;
        stroke-width: 12;
    }
}

/* Speech Bubbles Container */
.speech-bubbles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
}

/* Speech Bubble Base */
.speech-bubble {
    position: absolute;
    padding: 12px 20px;
    background: rgba(68, 214, 165, 0.15);
    border: 2px solid rgba(68, 214, 165, 0.5);
    border-radius: 20px;
    opacity: 0;
    transform: scale(0);
    backdrop-filter: blur(10px);
}

.bubble-text {
    color: #fff;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    white-space: normal;
}

/* Bubble positioning and timing */
.bubble-from-eve {
    left: -80px;
    border-radius: 20px 20px 20px 4px;
}

.bubble-from-human {
    right: -80px;
    background: rgba(150, 150, 170, 0.15);
    border-color: rgba(150, 150, 170, 0.5);
    border-radius: 20px 20px 4px 20px;
}

/* Staggered bubble animations */
.speech-bubble:nth-child(1) {
    top: 0;
    animation: bubblePop 0.4s var(--anim-ease-bounce) 0.8s forwards;
}

.speech-bubble:nth-child(2) {
    top: 60px;
    animation: bubblePop 0.4s var(--anim-ease-bounce) 1.4s forwards;
}

.speech-bubble:nth-child(3) {
    top: 120px;
    animation: bubblePop 0.4s var(--anim-ease-bounce) 2.0s forwards;
}

/* Character slide animations */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Bubble pop animation */
@keyframes bubblePop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    60% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fade out entire conversation */
@keyframes conversationFadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Chatbots Hero Content - Visible immediately (animations removed) */
/* Chatbots Hero Content - Visible immediately (animations removed) */
.chatbots-hero .chatbots-intro-content,
.chatbots-hero .hero-content-wrapper.chatbots-intro-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Override reveal class for chatbots hero */
/* Override reveal class for chatbots hero */
.chatbots-hero .page-hero-content.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* ============================================
   LLM PAGE - AI LOGO HUB
   ============================================ */

/* Main Container */
.ai-logo-hub {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 15;
}

/* Central OpenAI Logo */
.central-ai-logo {
    position: absolute;
    z-index: 3;
    opacity: 0;
    animation: centralLogoAppear 0.6s var(--anim-ease-bounce) 0.2s forwards,
        centralLogoPulse 1s ease-in-out 1.0s 2,
        logoFadeOnRing 0.5s ease-out 3.2s forwards;
}

.openai-logo {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 30px rgba(16, 163, 127, 0.6));
}

/* Orbiting Logos Container */
.orbit-logos {
    position: absolute;
    width: 400px;
    height: 400px;
}

/* Individual Orbit Logos */
.orbit-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) rotate(calc(-1 * var(--angle)));
}

.orbit-logo svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

/* Staggered logo appearances */
.logo-claude {
    animation: orbitLogoAppear 0.4s var(--anim-ease-bounce) 0.6s forwards,
        logoFadeOnRing 0.5s ease-out 3.2s forwards;
}

.logo-gemini {
    animation: orbitLogoAppear 0.4s var(--anim-ease-bounce) 0.75s forwards,
        logoFadeOnRing 0.5s ease-out 3.2s forwards;
}

.logo-mistral {
    animation: orbitLogoAppear 0.4s var(--anim-ease-bounce) 0.9s forwards,
        logoFadeOnRing 0.5s ease-out 3.2s forwards;
}

.logo-llama {
    animation: orbitLogoAppear 0.4s var(--anim-ease-bounce) 1.05s forwards,
        logoFadeOnRing 0.5s ease-out 3.2s forwards;
}

/* Connection Lines SVG */
.connection-lines {
    position: absolute;
    width: 400px;
    height: 400px;
    z-index: 2;
}

.connection-line {
    stroke: #44d6a5;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    filter: drop-shadow(0 0 8px rgba(68, 214, 165, 0.8));
}

/* Staggered connection shooting */
.line-1 {
    animation: connectionShoot 0.3s ease-out 1.5s forwards,
        connectionFade 0.5s ease-out 3.2s forwards;
}

.line-2 {
    animation: connectionShoot 0.3s ease-out 1.65s forwards,
        connectionFade 0.5s ease-out 3.2s forwards;
}

.line-3 {
    animation: connectionShoot 0.3s ease-out 1.8s forwards,
        connectionFade 0.5s ease-out 3.2s forwards;
}

.line-4 {
    animation: connectionShoot 0.3s ease-out 1.95s forwards,
        connectionFade 0.5s ease-out 3.2s forwards;
}

/* Expanding Color Ring */
.expanding-ring {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #44d6a5;
    border-right-color: #10a37f;
    border-bottom-color: #4285f4;
    border-left-color: #7c3aed;
    opacity: 0;
    animation: ringExpand 0.8s cubic-bezier(0.4, 0, 0.2, 1) 2.8s forwards;
}

/* Keyframes */
@keyframes centralLogoAppear {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes centralLogoPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 30px rgba(16, 163, 127, 0.6));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 50px rgba(16, 163, 127, 0.9));
    }
}

@keyframes orbitLogoAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle))) scale(0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) rotate(calc(-1 * var(--angle))) scale(1);
    }
}

@keyframes connectionShoot {
    0% {
        stroke-dashoffset: 200;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes connectionFade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes logoFadeOnRing {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ringExpand {
    0% {
        opacity: 0;
        width: 20px;
        height: 20px;
        border-width: 4px;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        width: 200vmax;
        height: 200vmax;
        border-width: 80px;
    }
}

/* LLM Hero Content - Visible immediately (animations removed) */
/* LLM Hero Content - Visible immediately (animations removed) */
.llm-hero .llm-intro-content,
.llm-hero .hero-content-wrapper.llm-intro-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Override reveal class for LLM hero */
/* Override reveal class for LLM hero */
.llm-hero .page-hero-content.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* AI Logo Hub - Hidden (animations removed) */
.ai-logo-hub {
    display: none;
}

/* ============================================
   ASKEVE PAGE - SPOTLIGHT AWAKENING
   ============================================ */

/* Darkness Overlay */
.spotlight-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.95) 40%);
    z-index: 15;
    pointer-events: none;
}

.product-hero.animated .spotlight-overlay {
    animation: spotlightOpen 1.5s var(--anim-ease) forwards;
}

@keyframes spotlightOpen {
    0% {
        background: radial-gradient(circle at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.98) 5%);
    }

    100% {
        background: radial-gradient(circle at 50% 40%, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
    }
}

/* Mascot Glow Aura */
.mascot-glow {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(68, 214, 165, 0.3) 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0;
    z-index: 5;
}

.product-hero.animated .mascot-glow {
    animation: glowPulseIn 2s ease-in-out infinite, fadeIn 0.8s ease 0.5s both;
}

@keyframes glowPulseIn {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0.9;
    }
}

/* Enhanced Logo Animations */
.product-hero.animated .product-logo-large {
    animation: mascotRise 1s var(--anim-ease-bounce) 0.3s both;
}

@keyframes mascotRise {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Eyes Awakening - Enhanced */
.product-hero.animated #askeve-eyes path {
    transform-origin: center center;
    transform-box: fill-box;
    animation: eyesAwaken 0.6s var(--anim-ease) 1s both;
}

@keyframes eyesAwaken {
    0% {
        transform: scaleY(0.1);
        opacity: 0;
    }

    60% {
        transform: scaleY(1.2);
        opacity: 1;
    }

    80% {
        transform: scaleY(0.8);
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* AskEve Title Neon Flicker */
.product-hero.animated h1 .text-neon {
    animation: neonFlickerIntense 1s ease-out 1.2s both;
}

@keyframes neonFlickerIntense {
    0% {
        opacity: 0;
        text-shadow: none;
    }

    10% {
        opacity: 0.8;
        text-shadow: 0 0 20px var(--spark-color);
    }

    15% {
        opacity: 0.2;
        text-shadow: none;
    }

    25% {
        opacity: 1;
        text-shadow: 0 0 30px var(--spark-color);
    }

    30% {
        opacity: 0.4;
        text-shadow: 0 0 10px var(--spark-color);
    }

    40% {
        opacity: 1;
        text-shadow: 0 0 40px var(--spark-color), 0 0 60px var(--spark-color);
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(68, 214, 165, 0.5);
    }
}

/* Tagline Typewriter */
.product-hero.animated .tagline {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--spark-color);
    animation:
        typewriterExpand 1s steps(40) 1.5s both,
        cursorBlink 0.7s step-end infinite 1.5s;
}

@keyframes typewriterExpand {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes cursorBlink {

    0%,
    50% {
        border-color: var(--spark-color);
    }

    51%,
    100% {
        border-color: transparent;
    }
}

/* CTA Buttons */
.product-hero.animated .cta-buttons {
    animation: fadeSlideUp 0.6s var(--anim-ease) 2s both;
}

@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   SHARED UTILITIES
   ============================================ */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Product Hero Height */
.product-hero {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media (max-width: 768px) {
    .speech-bubble {
        max-width: min(240px, 78vw);
    }

    .bubble-text {
        white-space: normal;
        line-height: 1.35;
    }

    .product-hero.animated .tagline {
        white-space: normal;
        border-right: none;
        overflow: visible;
        animation: fadeIn 0.5s var(--anim-ease) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-hero.animated .tagline,
    .product-hero.animated .cta-buttons,
    .human-character,
    .eve-character,
    .speech-bubble,
    .central-logo,
    .orbit-logo,
    .connection-line,
    .spotlight-overlay,
    .mascot-glow {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}