/* ============================================
   DIGOI Garage Management — Additional Styles
   (Critical-path & feature polishes)
   ============================================ */

/* ========================
   SMOOTH PAGE LOAD
   ======================== */
body {
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.loaded {
    opacity: 1;
}

/* ========================
   HERO SHIMMER LINES
   ======================== */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 1));
    pointer-events: none;
    z-index: 1;
}

/* ========================
   FEATURE CARD NUMBER
   ======================== */
.feature-card::after {
    content: attr(data-num);
    position: absolute;
    bottom: 16px;
    right: 22px;
    font-family: 'Syne', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* ========================
   FORM INPUT AUTOFILL
   ======================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
}

/* ========================
   BUTTON LOADING STATE
   ======================== */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn.loading .btn-text::after {
    content: '...';
    animation: dots 1.2s steps(3, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60% {
        content: '...';
    }

    80%,
    100% {
        content: '';
    }
}

/* ========================
   CUSTOM SELECTION
   ======================== */
::selection {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ========================
   FOCUS VISIBLE
   ======================== */
:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ========================
   GLASS STYLE FOR FORM
   ======================== */
@supports (backdrop-filter: blur(1px)) {
    .demo-form {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* ========================
   FOOTER GRADIENT TOP
   ======================== */
.footer::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 50%, transparent);
    margin-bottom: 0;
}

/* ========================
   SECTION HIGHLIGHT RIGHT SIDE
   ======================== */
.why-right {
    position: relative;
}

.why-right::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -40px;
    width: 300px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
    pointer-events: none;
}