/* ========================================
   Two Loons Consulting - Animations
   RUGGED NORTH - Bold, Purposeful Motion
   ======================================== */

/* ==========================================
   Reduced Motion Support
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================
   Page Load - Strong Entry
   ========================================== */

.hero-content {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lake-scene-side {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

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

/* Scroll-triggered class */
.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================
   Lake Scene - Water & Loons
   ========================================== */

.water-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(74, 168, 197, 0.08) 25%,
        rgba(74, 168, 197, 0.15) 50%,
        rgba(74, 168, 197, 0.08) 75%,
        transparent 100%
    );
    animation: shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.water-ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(74, 168, 197, 0.3);
    animation: ripple 4s ease-out infinite;
    pointer-events: none;
}

.ripple-1 {
    width: 60px;
    height: 20px;
    left: 25%;
    top: 35%;
    animation-delay: 0s;
}

.ripple-2 {
    width: 50px;
    height: 16px;
    left: 60%;
    top: 50%;
    animation-delay: 2s;
}

@keyframes ripple {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    15% {
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Loon floating - gentle drift */
.loon-1 {
    animation: loonDrift1 7s ease-in-out infinite;
}

.loon-2 {
    animation: loonDrift2 8s ease-in-out infinite;
}

@keyframes loonDrift1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(10px, -2px); }
    50% { transform: translate(18px, 0); }
    75% { transform: translate(10px, 2px); }
}

@keyframes loonDrift2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-8px, 2px); }
    50% { transform: translate(-14px, 0); }
    75% { transform: translate(-8px, -2px); }
}

/* Lake flow pulse */
.lake-flow {
    animation: flowPulse 4s ease-in-out infinite;
}

.lake-flow::before {
    animation: flowGlimmer 3s ease-in-out infinite;
}

@keyframes flowPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

@keyframes flowGlimmer {
    0%, 100% { transform: translateY(-10px); opacity: 0.4; }
    50% { transform: translateY(10px); opacity: 0.7; }
}

/* ==========================================
   Service Icons: Code Editor
   ========================================== */

.service-icon--code .code-line {
    opacity: 0;
    animation: typeIn 3.5s ease-in-out infinite;
}

.service-icon--code .line-1 { animation-delay: 0s; }
.service-icon--code .line-2 { animation-delay: 0.5s; }
.service-icon--code .line-3 { animation-delay: 1s; }
.service-icon--code .line-4 { animation-delay: 1.5s; }
.service-icon--code .line-5 { animation-delay: 2s; }

@keyframes typeIn {
    0%, 8% { opacity: 0; transform: translateX(-10px); }
    18%, 78% { opacity: 1; transform: translateX(0); }
    88%, 100% { opacity: 0; transform: translateX(0); }
}

.service-icon--code .cursor {
    animation: blink 0.8s step-end infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.service-icon--code .dot {
    animation: dotPulse 2s ease-in-out infinite;
}

.service-icon--code .dot-1 { animation-delay: 0s; }
.service-icon--code .dot-2 { animation-delay: 0.2s; }
.service-icon--code .dot-3 { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ==========================================
   Service Icons: Chatbot
   ========================================== */

.service-icon--chat .chat-bubble {
    opacity: 0;
    animation: bubbleIn 4s ease-in-out infinite;
}

.service-icon--chat .user-1 { animation-delay: 0s; }
.service-icon--chat .ai-1 { animation-delay: 0.8s; }
.service-icon--chat .user-2 { animation-delay: 1.6s; }
.service-icon--chat .ai-2 { animation-delay: 2.4s; }

@keyframes bubbleIn {
    0%, 5% { opacity: 0; transform: scale(0.8) translateY(5px); }
    15%, 85% { opacity: 1; transform: scale(1) translateY(0); }
    95%, 100% { opacity: 0; transform: scale(1) translateY(0); }
}

.service-icon--chat .typing-dot {
    animation: typingBounce 1.4s ease-in-out infinite;
}

.service-icon--chat .td-1 { animation-delay: 0s; }
.service-icon--chat .td-2 { animation-delay: 0.2s; }
.service-icon--chat .td-3 { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ==========================================
   Service Icons: Cloud
   ========================================== */

.service-icon--cloud .cloud-outline {
    animation: cloudFloat 4s ease-in-out infinite;
}

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

.service-icon--cloud .server-light {
    animation: serverBlink 2s ease-in-out infinite;
}

.service-icon--cloud .light-1 { animation-delay: 0s; }
.service-icon--cloud .light-2 { animation-delay: 0.5s; }
.service-icon--cloud .light-3 { animation-delay: 0.25s; }
.service-icon--cloud .light-4 { animation-delay: 0.75s; }

@keyframes serverBlink {
    0%, 40%, 100% { opacity: 0.2; }
    50%, 90% { opacity: 1; }
}

.service-icon--cloud .data-packet {
    animation: dataFlow 2s ease-in-out infinite;
}

.service-icon--cloud .packet-1 { animation-delay: 0s; }
.service-icon--cloud .packet-2 { animation-delay: 0.3s; }
.service-icon--cloud .packet-3 { animation-delay: 0.6s; }

@keyframes dataFlow {
    0% { opacity: 0; transform: translateY(12px); }
    30%, 70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-12px); }
}

/* ==========================================
   Service Icons: Advisory
   ========================================== */

.service-icon--advisory .node {
    animation: nodeAppear 3s ease-in-out infinite;
}

.service-icon--advisory .node-top { animation-delay: 0s; }
.service-icon--advisory .node-1 { animation-delay: 0.6s; }
.service-icon--advisory .node-2 { animation-delay: 0.8s; }
.service-icon--advisory .node-3 { animation-delay: 1s; }

@keyframes nodeAppear {
    0%, 10% { opacity: 0.2; transform: scale(0.85); }
    30%, 70% { opacity: 1; transform: scale(1); }
    90%, 100% { opacity: 0.2; transform: scale(0.85); }
}

.service-icon--advisory .connector {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawLine 3s ease-in-out infinite;
}

.service-icon--advisory .conn-left { animation-delay: 0.3s; }
.service-icon--advisory .conn-mid { animation-delay: 0.4s; }
.service-icon--advisory .conn-right { animation-delay: 0.5s; }

@keyframes drawLine {
    0%, 10% { stroke-dashoffset: 30; }
    40%, 60% { stroke-dashoffset: 0; }
    90%, 100% { stroke-dashoffset: 30; }
}

.service-icon--advisory .pulse-ring {
    animation: pulseOut 3s ease-out infinite;
    transform-origin: center;
}

.service-icon--advisory .ring-1 { animation-delay: 0s; }
.service-icon--advisory .ring-2 { animation-delay: 1.5s; }

@keyframes pulseOut {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

.service-icon--advisory .check {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation: checkAppear 3s ease-in-out infinite;
}

.service-icon--advisory .check-1 { animation-delay: 1.2s; }
.service-icon--advisory .check-2 { animation-delay: 1.4s; }
.service-icon--advisory .check-3 { animation-delay: 1.6s; }

@keyframes checkAppear {
    0%, 40% { stroke-dashoffset: 10; opacity: 0; }
    50%, 80% { stroke-dashoffset: 0; opacity: 1; }
    90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ==========================================
   Card Hover States - Snappy
   ========================================== */

.service-card,
.engineer-card {
    transition:
        transform var(--transition-snap),
        box-shadow var(--transition-snap);
}

/* ==========================================
   Button Interactions
   ========================================== */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.btn:hover::after {
    transform: translateX(100%);
}