/**
 * Styles for the Logged-Out Link Shortener Landing Page (v1.6)
 *
 * v1.6: Implemented an advanced, visually impressive, alternating timeline design.
 */

/* A subtle grid pattern used in the hero background to add texture. */
.bg-grid-pattern {
    background-image: radial-gradient(circle at center, #e2e8f0 1px, transparent 1px);
    background-size: 25px 25px;
}

/* A soft, radial gradient that creates a modern "aurora" glow effect. */
.bg-aurora-glow {
    /* --mouse-x and --mouse-y are CSS variables controlled by JavaScript */
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(79, 70, 229, 0.25),
        transparent 70%
    );
    transition: background 0.3s ease-out;
}

/* --- Advanced, Modern Vertical Timeline Styles --- */

/* The main vertical line that runs down the middle of the timeline on desktop */
.process-line {
    display: none; /* Hidden on mobile by default */
}

.process-step {
    position: relative;
    padding-left: 4rem; /* Space for the icon on mobile */
    margin-bottom: 3rem;
}

.process-step:last-child {
    margin-bottom: 0;
}

/* The wrapper for the icon, positioned absolutely on mobile */
.process-icon-wrapper {
    position: absolute;
    left: 0;
    top: -4px;
    z-index: 10;
}

/* The circular icon for each step */
.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-image: linear-gradient(to right, #4f46e5, #7c3aed); /* from-indigo-600 to-purple-600 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    font-size: 1.5rem; /* text-2xl */
    transition: transform 0.3s ease;
}

.process-step:hover .process-icon {
    transform: scale(1.1);
}

/* The content card for each step */
.process-content {
    background-color: #ffffff;
    padding: 2rem; /* p-8 */
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid #e5e7eb; /* gray-200 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover .process-content {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- Desktop Styles (for screens larger than 1024px) --- */
@media (min-width: 1024px) {
    .process-line {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 28px;
        bottom: 28px;
        width: 4px;
        background-color: #f3f4f6; /* gray-100 */
        border-radius: 2px;
    }

    .process-step {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-left: 0;
        margin-bottom: 0;
    }

    .process-icon-wrapper {
        position: static;
        order: 2; /* Center the icon */
    }

    .process-content {
        width: calc(50% - 4rem); /* Half width minus some margin */
        order: 1;
    }
    
    /* Alternating layout for even-numbered steps */
    .process-step:nth-child(even) .process-content {
        order: 3;
        text-align: right;
    }

    /* Add spacing between steps on desktop */
    .process-step:not(:last-child) {
        margin-bottom: 4rem;
    }
}