/* =========================================================
   ECHOCALL AI
   File: css/auth-choice.css

   PREMIUM AUTH CHOICE DESIGN

   PART 1 — RESET / ROOT / GLOBAL
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    --bg-main:
        #02040d;

    --bg-secondary:
        #050816;

    --surface:
        rgba(10, 17, 38, 0.72);

    --surface-strong:
        rgba(12, 20, 45, 0.88);

    --surface-light:
        rgba(255, 255, 255, 0.055);

    --border:
        rgba(255, 255, 255, 0.10);

    --border-bright:
        rgba(147, 197, 253, 0.22);

    --white:
        #ffffff;

    --text:
        #f8fafc;

    --text-secondary:
        #cbd5e1;

    --text-muted:
        #64748b;

    --blue:
        #2563eb;

    --blue-light:
        #3b82f6;

    --blue-bright:
        #60a5fa;

    --purple:
        #7c3aed;

    --purple-light:
        #a78bfa;

    --cyan:
        #22d3ee;

    --green:
        #22c55e;

    --shadow:
        0 35px 100px rgba(0, 0, 0, 0.55);

    --shadow-blue:
        0 25px 80px rgba(37, 99, 235, 0.24);

    --radius:
        32px;

    --radius-button:
        20px;

    --transition:
        0.3s ease;

}


/* =========================================================
   RESET
   ========================================================= */

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   HTML
   ========================================================= */

html {

    width:
        100%;

    min-height:
        100%;

    scroll-behavior:
        smooth;

}


/* =========================================================
   BODY
   ========================================================= */

body {

    width:
        100%;

    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        var(--bg-main);

    color:
        var(--white);

    font-family:
        "Inter",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   IMAGES
   ========================================================= */

img {

    display:
        block;

    max-width:
        100%;

}


/* =========================================================
   MATERIAL SYMBOLS
   ========================================================= */

.material-symbols-rounded {

    font-family:
        "Material Symbols Rounded";

    font-weight:
        normal;

    font-style:
        normal;

    font-size:
        24px;

    line-height:
        1;

    letter-spacing:
        normal;

    text-transform:
        none;

    display:
        inline-block;

    white-space:
        nowrap;

    word-wrap:
        normal;

    direction:
        ltr;

    font-feature-settings:
        "liga";

    -webkit-font-feature-settings:
        "liga";

    -webkit-font-smoothing:
        antialiased;

}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {

    background:
        rgba(59, 130, 246, 0.35);

    color:
        #ffffff;

}


/* =========================================================
   FOCUS
   ========================================================= */

a:focus-visible {

    outline:
        2px solid
        var(--blue-bright);

    outline-offset:
        4px;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width:
        7px;

}


::-webkit-scrollbar-track {

    background:
        #02040d;

}


::-webkit-scrollbar-thumb {

    background:
        rgba(96, 165, 250, 0.30);

    border-radius:
        999px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        rgba(96, 165, 250, 0.50);

}


/* =========================================================
   PART 2 — PREMIUM BACKGROUND
   ========================================================= */


/* =========================================================
   BACKGROUND
   ========================================================= */

.background {

    position:
        fixed;

    inset:
        0;

    z-index:
        -10;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(30, 64, 175, 0.16),
            transparent 38%
        ),

        radial-gradient(
            circle at 10% 15%,
            rgba(124, 58, 237, 0.14),
            transparent 32%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(37, 99, 235, 0.14),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #01030a 0%,
            #020617 45%,
            #050816 100%
        );

}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.background::before {

    content:
        "";

    position:
        absolute;

    inset:
        -20%;

    background-image:

        linear-gradient(
            rgba(96, 165, 250, 0.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(96, 165, 250, 0.045) 1px,
            transparent 1px
        );

    background-size:
        65px 65px;

    transform:
        perspective(800px)
        rotateX(58deg)
        translateY(20%);

    transform-origin:
        center;

    opacity:
        0.7;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 80%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 80%,
            transparent
        );

}


/* =========================================================
   BACKGROUND LIGHT ORBS
   ========================================================= */

.background::after {

    content:
        "";

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    left:
        50%;

    top:
        48%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.12),
            rgba(124, 58, 237, 0.06) 35%,
            transparent 70%
        );

    filter:
        blur(25px);

    animation:
        backgroundPulse
        7s
        ease-in-out
        infinite;

}


/* =========================================================
   OLD CLASS SUPPORT
   ========================================================= */

.background > * {

    pointer-events:
        none;

}


/* =========================================================
   EXTRA BACKGROUND ANIMATION
   ========================================================= */

@keyframes backgroundPulse {

    0%,
    100% {

        opacity:
            0.65;

        transform:
            translate(-50%, -50%)
            scale(0.95);

    }

    50% {

        opacity:
            1;

        transform:
            translate(-50%, -50%)
            scale(1.08);

    }

}


/* =========================================================
   PART 3 — MAIN CONTAINER
   ========================================================= */

.home-page {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        35px 20px;

}


/* =========================================================
   3D CARD PERSPECTIVE
   ========================================================= */

.home-page {

    perspective:
        1400px;

}


/* =========================================================
   GLASS CARD
   ========================================================= */

.glass-card {

    position:
        relative;

    width:
        100%;

    max-width:
        470px;

    padding:
        42px 38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius:
        var(--radius);

    background:

        linear-gradient(
            145deg,
            rgba(17, 27, 58, 0.88),
            rgba(6, 12, 29, 0.78)
        );

    box-shadow:

        0 40px 110px
        rgba(0, 0, 0, 0.55),

        0 20px 70px
        rgba(37, 99, 235, 0.13),

        inset 0 1px 0
        rgba(255, 255, 255, 0.10),

        inset 0 -1px 0
        rgba(0, 0, 0, 0.30);

    backdrop-filter:
        blur(28px);

    -webkit-backdrop-filter:
        blur(28px);

    transform:
        translateZ(0);

    animation:
        cardEntrance
        0.9s
        cubic-bezier(.2,.8,.2,1)
        both;

}


/* =========================================================
   CARD TOP LIGHT
   ========================================================= */

.glass-card::before {

    content:
        "";

    position:
        absolute;

    top:
        -2px;

    left:
        12%;

    width:
        76%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(147, 197, 253, 0.65),
            rgba(167, 139, 250, 0.55),
            transparent
        );

    filter:
        blur(0.5px);

}


/* =========================================================
   CARD INTERNAL GLOW
   ========================================================= */

.glass-card::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    top:
        -180px;

    right:
        -130px;

    border-radius:
        50%;

    background:
        rgba(37, 99, 235, 0.12);

    filter:
        blur(70px);

    pointer-events:
        none;

}


/* =========================================================
   CARD ENTRANCE
   ========================================================= */

@keyframes cardEntrance {

    from {

        opacity:
            0;

        transform:
            translateY(35px)
            rotateX(5deg)
            scale(0.97);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            rotateX(0)
            scale(1);

    }

}

/* =========================================================
   PART 4 — LOGO + BRANDING
   ========================================================= */


/* =========================================================
   LOGO WRAPPER
   ========================================================= */

.logo-large {

    position:
        relative;

    z-index:
        2;

    width:
        128px;

    height:
        128px;

    display:
        block;

    margin:
        0 auto;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 20px 40px
            rgba(37, 99, 235, 0.34)
        );

    animation:

        logoFloat
        5s
        ease-in-out
        infinite,

        logoGlow
        4s
        ease-in-out
        infinite;

}


/* =========================================================
   LOGO FLOAT
   ========================================================= */

@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-10px)
            rotate(1deg);

    }

}


/* =========================================================
   LOGO GLOW
   ========================================================= */

@keyframes logoGlow {

    0%,
    100% {

        filter:
            drop-shadow(
                0 12px 28px
                rgba(37, 99, 235, 0.30)
            );

    }

    50% {

        filter:
            drop-shadow(
                0 0 42px
                rgba(96, 165, 250, 0.55)
            )
            drop-shadow(
                0 0 70px
                rgba(124, 58, 237, 0.20)
            );

    }

}


/* =========================================================
   APP TITLE
   ========================================================= */

.app-title {

    position:
        relative;

    z-index:
        2;

    margin-top:
        22px;

    text-align:
        center;

    font-size:
        clamp(30px, 7vw, 38px);

    line-height:
        1.05;

    font-weight:
        850;

    letter-spacing:
        -0.055em;

    background:

        linear-gradient(
            110deg,
            #ffffff 0%,
            #dbeafe 30%,
            #60a5fa 62%,
            #a78bfa 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;

}


/* =========================================================
   TITLE LIGHT
   ========================================================= */

.app-title::after {

    content:
        "";

    display:
        block;

    width:
        70px;

    height:
        3px;

    margin:
        15px auto 0;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #a78bfa
        );

    box-shadow:
        0 0 20px
        rgba(96, 165, 250, 0.40);

}


/* =========================================================
   TAGLINE
   ========================================================= */

.tagline {

    position:
        relative;

    z-index:
        2;

    max-width:
        360px;

    margin:
        17px auto 0;

    text-align:
        center;

    color:
        rgba(203, 213, 225, 0.72);

    font-size:
        14px;

    line-height:
        1.75;

    font-weight:
        400;

}


/* =========================================================
   PART 5 — BUTTON AREA
   ========================================================= */

.buttons {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    margin-top:
        34px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}


/* =========================================================
   SHARED BUTTON
   ========================================================= */

.google-btn,
.primary-btn,
.secondary-btn {

    position:
        relative;

    width:
        100%;

    min-height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    overflow:
        hidden;

    border-radius:
        var(--radius-button);

    font-size:
        15px;

    font-weight:
        750;

    letter-spacing:
        -0.01em;

    cursor:
        pointer;

    transition:

        transform
        var(--transition),

        box-shadow
        var(--transition),

        border-color
        var(--transition),

        background
        var(--transition),

        filter
        var(--transition);

}


/* =========================================================
   BUTTON SHINE
   ========================================================= */

.google-btn::before,
.primary-btn::before,
.secondary-btn::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        75%;

    height:
        100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,0.13),
            transparent
        );

    transform:
        skewX(-22deg);

    transition:
        left
        0.7s
        ease;

}


.google-btn:hover::before,
.primary-btn:hover::before,
.secondary-btn:hover::before {

    left:
        150%;

}


/* =========================================================
   GOOGLE BUTTON
   ========================================================= */

.google-btn {

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.06);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


/* =========================================================
   GOOGLE ICON
   ========================================================= */

.google-btn img {

    width:
        23px;

    height:
        23px;

    object-fit:
        contain;

}


/* =========================================================
   GOOGLE HOVER
   ========================================================= */

.google-btn:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, 0.09);

    border-color:
        rgba(255, 255, 255, 0.18);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.24);

}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.primary-btn {

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #1d4ed8 0%,
            #2563eb 42%,
            #6366f1 100%
        );

    border:
        1px solid
        rgba(147, 197, 253, 0.30);

    box-shadow:

        0 18px 45px
        rgba(37, 99, 235, 0.30),

        inset 0 1px 0
        rgba(255, 255, 255, 0.22);

}


/* =========================================================
   PRIMARY HOVER
   ========================================================= */

.primary-btn:hover {

    transform:
        translateY(-4px);

    filter:
        brightness(1.08);

    box-shadow:

        0 25px 60px
        rgba(37, 99, 235, 0.42),

        0 0 35px
        rgba(99, 102, 241, 0.15),

        inset 0 1px 0
        rgba(255, 255, 255, 0.28);

}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.secondary-btn {

    color:
        rgba(255, 255, 255, 0.86);

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


/* =========================================================
   SECONDARY HOVER
   ========================================================= */

.secondary-btn:hover {

    transform:
        translateY(-3px);

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.075);

    border-color:
        rgba(147, 197, 253, 0.22);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.22);

}


/* =========================================================
   BUTTON ACTIVE
   ========================================================= */

.google-btn:active,
.primary-btn:active,
.secondary-btn:active {

    transform:
        translateY(-1px)
        scale(0.99);

}


/* =========================================================
   MATERIAL ICONS
   ========================================================= */

.primary-btn .material-symbols-rounded,
.secondary-btn .material-symbols-rounded {

    font-size:
        25px;

}


/* =========================================================
   PART 6 — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .home-page {

        min-height:
            100svh;

        padding:
            18px 14px;

    }


    .glass-card {

        max-width:
            440px;

        padding:
            34px 23px;

        border-radius:
            27px;

    }


    .logo-large {

        width:
            105px;

        height:
            105px;

    }


    .app-title {

        margin-top:
            19px;

        font-size:
            29px;

    }


    .tagline {

        max-width:
            320px;

        font-size:
            13px;

        line-height:
            1.7;

    }


    .buttons {

        margin-top:
            28px;

        gap:
            11px;

    }


    .google-btn,
    .primary-btn,
    .secondary-btn {

        min-height:
            57px;

        border-radius:
            17px;

        font-size:
            14px;

    }

}