/* ============================================
   VAIT.AI - Animations & Modern Effects
   ============================================ */

/* --- Custom Cursor --- */
html {
    cursor: none;
}

.cursor-dot,
.cursor-ring {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    border-radius: 50%;
    transition: opacity 0.3s;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: #2AD2C9;
    box-shadow: 0 0 12px rgba(42, 210, 201, 0.6);
}

.cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(42, 210, 201, 0.4);
    transition: width 0.25s, height 0.25s, border-color 0.25s;
}

.cursor-ring.hover {
    width: 56px;
    height: 56px;
    border-color: rgba(0, 51, 160, 0.6);
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    html { cursor: auto; }
    .cursor-dot, .cursor-ring { display: none; }
}

/* --- Scroll Reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.24s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.36s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.48s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.6s; }

.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero Typewriter --- */
.typewriter {
    display: inline; word-break: break-word; overflow-wrap: break-word;
    border-right: 3px solid #2AD2C9;
    animation: blink-caret 0.75s step-end infinite;
    white-space: normal;
    
}

.typewriter.done {
    border-right-color: transparent;
    animation: none;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #2AD2C9; }
}

/* --- Hero fade-in --- */
.hero-content {
    animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.hero-subtitle {
    opacity: 0;
    animation: subtitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

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

.hero-cta {
    opacity: 0;
    animation: ctaIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}

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

/* --- Phone mockup float --- */
.phone-mockup {
    animation: phoneFloat 6s ease-in-out infinite;
}

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

/* --- Stat counter glow --- */
.stat-number {
    background: linear-gradient(135deg, #0033A0, #2AD2C9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Button hover shine --- */
/* --- CTA Shimmer Color Shift --- */
.btn-primary,
.btn-secondary {
    position: relative;
    background-size: 200% auto;
    transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #0033A0 0%, #2AD2C9 50%, #0033A0 100%);
    background-size: 200% auto;
    color: #fff;
}

.btn-primary:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(42, 210, 201, 0.35);
}

.btn-secondary {
    border: 2px solid #0033A0;
    background: linear-gradient(135deg, transparent 0%, rgba(42, 210, 201, 0.1) 50%, transparent 100%);
    background-size: 200% auto;
}

.btn-secondary:hover {
    background-position: right center;
    border-color: #2AD2C9;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(42, 210, 201, 0.2);
}

.btn-large {
    background-size: 200% auto;
}

/* --- Card hover lift --- */
.pain-card,
.step-card,
.benefit-card,
.zone-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease;
}

.pain-card:hover,
.step-card:hover,
.benefit-card:hover,
.zone-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 51, 160, 0.25);
}

/* --- Nav glass morphism on scroll --- */
.nav.scrolled {
    background: rgba(4, 28, 44, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* --- Section divider glow line --- */
.section-header h2 {
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #0033A0, #2AD2C9);
    margin: 1rem auto 0;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.section-header:hover h2::after {
    width: 120px;
}

/* --- Highlight text gradient --- */
.highlight {
    background: linear-gradient(135deg, #0033A0, #2AD2C9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Smooth section transitions --- */
section {
    position: relative;
}

/* --- Step number pulse --- */
.step-number {
    position: relative;
}

.step-number::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(42, 210, 201, 0.3);
    animation: stepPulse 2s ease-in-out infinite;
}

@keyframes stepPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0; }
}

/* --- Footer logo subtle glow --- */
.footer-logo img {
    filter: drop-shadow(0 0 0px transparent);
    transition: filter 0.4s ease;
}

.footer-logo:hover img {
    filter: drop-shadow(0 0 12px rgba(42, 210, 201, 0.4));
}

/* --- Smooth link underline --- */
.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #2AD2C9;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* --- Problem Transition dramatic entrance --- */
.problem-transition.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.85);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.problem-transition.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}