/* K-LINK Landing Page - Clean Light Theme */

:root {
    --bg-light: #ffffff;
    --green-primary: #80b86a;
    --gray-primary: #808080;
    --gray-light: #b3b3b3;
    --text-dark: #333333;
    --font-header: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-light);
    font-family: var(--font-body);
    color: var(--text-dark);
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main Container and centering alignment */
.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
}

/* Centered Logo Container */
.logo-container {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.001); /* Captures click events across the entire box */
}

.logo-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* SVG Animating Elements Styling */

/* 1. Fine background guiding lines */
.logo-decor-line {
    stroke: var(--gray-light);
    stroke-width: 0.25px;
    fill: none;
    opacity: 0;
}
.animating .logo-decor-line {
    animation: drawDecorLine 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawDecorLine {
    0% {
        stroke-dasharray: 60;
        stroke-dashoffset: 60;
        opacity: 0;
    }
    30% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: none;
        opacity: 0.6;
    }
}

/* 2. Solid Block Bars (Green & Gray) */
.logo-block-bar {
    opacity: 0;
}

.logo-block-bar.bar-green {
    fill: var(--green-primary);
}

.logo-block-bar.bar-gray {
    fill: var(--gray-primary);
}

.animating .logo-block-bar.bar-v {
    animation: growBarV 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.animating .logo-block-bar.bar-h {
    animation: growBarH 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Different delays for bar blocks based on ordering */
.animating #path6 { animation-delay: 0.4s; transform-origin: 36px 72px; } /* Green bar */
.animating #path6-6 { animation-delay: 0.5s; transform-origin: 94px 72px; } /* Middle gray bar */
.animating #path6-62 { animation-delay: 0.6s; transform-origin: 123px 86px; }
.animating #path6-62-4 { animation-delay: 0.7s; transform-origin: 106px 97px; }
.animating #path6-62-4-6 { animation-delay: 0.55s; transform-origin: 71px 73px; }
.animating #path6-62-3 { animation-delay: 0.65s; transform-origin: 123px 69px; }
.animating #path6-3 { animation-delay: 0.75s; transform-origin: 162px 82px; }

@keyframes growBarV {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes growBarH {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* 3. Curved main paths */
.logo-curve {
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    fill: #ffffff;
}

.logo-curve.curve-green {
    stroke: var(--green-primary);
    stroke-width: 1.387px;
}

.logo-curve.curve-gray {
    stroke: var(--gray-primary);
    stroke-width: 4.015px;
}

.logo-curve.curve-gray-large {
    stroke: var(--gray-primary);
    stroke-width: 4.063px;
}

.animating .logo-curve {
    animation: drawMainCurve 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Delay for curves starting right after vertical bars begin to appear */
.animating #path8 { animation-delay: 0.8s; }
.animating #path8-6-5 { animation-delay: 1.0s; }
.animating #path8-6-5-2 { animation-delay: 1.2s; }

@keyframes drawMainCurve {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* 4. Logo Text */
.logo-text {
    font-family: var(--font-header);
    font-weight: 600;
    font-size: 9.2px;
    fill: var(--text-dark) !important;
    opacity: 0;
    letter-spacing: 0.5px;
    text-anchor: middle;
}

.animating .logo-text {
    animation: revealText 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 2.0s;
}

@keyframes revealText {
    0% {
        opacity: 0;
        letter-spacing: -2px;
        filter: blur(5px);
    }
    50% {
        opacity: 0.5;
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        letter-spacing: -0.42px;
        filter: blur(0);
    }
}

/* Mobile responsive fixes */
@media (max-width: 520px) {
    .logo-container {
        max-width: 280px;
        height: 210px;
    }
}