/* ----------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------- */

:root {

    --background: #f4f5f8;

    --text: #1b1b1f;
    --secondary: #6b6b72;
    --tertiary: #8f8f98;

    --white: rgba(255, 255, 255, 0.94);

    --glass:
        rgba(255, 255, 255, 0.54);

    --glass-strong:
        rgba(255, 255, 255, 0.68);

    --glass-hover:
        rgba(255, 255, 255, 0.82);

    --glass-border:
        rgba(255, 255, 255, 0.82);

    --link-border:
        rgba(255, 255, 255, 0.72);

    --radius:
        22px;

    --card-radius:
        36px;

    --ease:
        cubic-bezier(.22, 1, .36, 1);

    --card-shadow:
        0 18px 50px rgba(25, 27, 34, .08),
        0 8px 28px rgba(25, 27, 34, .05);

    --link-shadow:
        0 12px 30px rgba(25, 27, 34, .06);

    --link-shadow-hover:
        0 18px 40px rgba(25, 27, 34, .08);
}


/* ----------------------------------------------------------------
   RESET
   ---------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100svh;
 
    margin: 0;
    padding: 28px;
 
    display: grid;
    place-items: center;
 
    overflow-x: hidden;
 
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .95), transparent 22%),
        radial-gradient(circle at bottom right, rgba(190, 200, 255, .26), transparent 28%),
        var(--background);
 
    font-family:
        "Roboto",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


/* ----------------------------------------------------------------
   AMBIENT LIGHT
   ---------------------------------------------------------------- */

.ambient {
    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(110px);

    z-index: -1;
}

.ambient--top {
    top: -260px;
    left: -220px;
 
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .95), transparent 45%);
}
 
.ambient--bottom {
    right: -260px;
    bottom: -220px;
 
    background:
        radial-gradient(circle at center, rgba(185, 195, 255, .30), transparent 48%);
}


/* ----------------------------------------------------------------
   PAGE
   ---------------------------------------------------------------- */

.page {
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 0 10px;
    border-radius: 36px;
    overflow: hidden;
  
    opacity: 0;

    transform:
        translateY(16px)
        scale(.99);

    filter:
        blur(7px);

    will-change:
        opacity, transform, filter;

    animation:
        cream-in
        1.55s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

@keyframes cream-in {

    0% {
        opacity: 0;

        transform:
            translateY(16px)
            scale(.99);

        filter:
            blur(7px);
    }

    48% {
        opacity: 1;

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

        filter:
            blur(0);
    }

    72% {
        transform:
            translateY(0.8px)
            scale(0.999);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}

/* ================================================================
   CONTENT ENTRANCE
   ================================================================ */

.profile,
.section,
.footer {

    opacity: 0;

    transform:
        translateY(12px);

    animation:
        content-in
        .7s
        var(--ease)
        forwards;
}


.profile {
    animation-delay:
        .22s;
}


.section:nth-of-type(1) {
    animation-delay:
        .34s;
}


.section:nth-of-type(2) {
    animation-delay:
        .42s;
}


.footer {
    animation-delay:
        .50s;
}


@keyframes content-in {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ----------------------------------------------------------------
   MAIN CARD
   ---------------------------------------------------------------- */

.card {
 
    position: relative;
 
    overflow: hidden;
 
    padding:
       32px
       22px
       22px;
 
    border:
       1px solid rgba(255, 255, 255, .80);
 
    border-radius:
        var(--card-radius);
 
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .92),
            rgba(247, 248, 251, .88)
        );
 
    /*
     * Cristal ligero, bordes suaves y mayor contraste.
     */
    backdrop-filter:
        blur(26px)
        saturate(180%);
 
    -webkit-backdrop-filter:
        blur(26px)
        saturate(180%);

    box-shadow:
        var(--card-shadow);

    isolation: isolate;
}


/*
 * Capa de luz interior.
 */

.card::before {
 
    content: "";
 
    position: absolute;
    inset: 0;
 
    border-radius: inherit;
 
    background:
         linear-gradient(
             135deg,
            rgba(255, 255, 255, .55),
            transparent 36%,
            rgba(255, 255, 255, .10)
         );
 
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, .14);
 
    pointer-events: none;
}


/*
 * Borde interior.
 */

.card::after {
  
    content: "";
  
    position: absolute;
  
    inset: 1px;
  
    border-radius:
        calc(var(--card-radius) - 1px);
  
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .35),
            rgba(255, 255, 255, .08)
        );
  
    box-shadow:
        inset
        0 1px 0
        rgba(255, 255, 255, .72);
 
    opacity: .94;
  
    pointer-events: none;
}


/*
 * Reflejo diagonal.
 */

.card__reflection {

    position: absolute;

    width: 180px;
    height: 430px;

    top: -240px;
    left: 30px;

    transform:
        rotate(28deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    filter:
        blur(22px);

    opacity: .35;

    pointer-events: none;
}


/* ----------------------------------------------------------------
   PROFILE
   ---------------------------------------------------------------- */

.profile {

    position: relative;

    text-align: center;

    padding-bottom:
        35px;
}


.avatar {
 
    width: 96px;
    height: 96px;
 
    margin:
        0 auto 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background:
       rgba(255, 255, 255, .96);
 
    box-shadow:
       0 10px 22px rgba(20, 24, 32, .07),
       inset 0 1px 1px rgba(255, 255, 255, .88);
 
    font-size: 26px;
    font-weight: 700;
 
    letter-spacing: -1px;

    transition:
        transform .5s var(--ease),
        box-shadow .5s var(--ease);
}

.avatar:hover {

    transform:
        scale(1.035);

    box-shadow:

        0 7px 14px rgba(0, 0, 0, .08),

        0 18px 36px rgba(0, 0, 0, .18),

        0 30px 55px rgba(0, 0, 0, .08),

        inset
        0 1px 1px
        rgba(255, 255, 255, .28);
}

.avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}


h1 {

    margin: 0;

    color: var(--text);

    font-size: 28px;
    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.4px;
}


.profile__headline {
 
    margin:
        10px 0 0;
 
    color:
        var(--secondary);
 
    font-size:
        15px;
 
    line-height:
        1.5;
 
    font-weight:
        500;
 
    letter-spacing:
        -.25px;
}


.profile__description {

    max-width:
        290px;

    margin:
        9px auto 0;

    color:
        var(--tertiary);

    font-size:
        12px;

    line-height:
        1.5;

    font-weight:
        400;
}


/* ----------------------------------------------------------------
   STATUS
   ---------------------------------------------------------------- */

.status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        17px;

    color:
        var(--secondary);

    font-size:
        11px;

    font-weight:
        600;
}


.status__dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #34c759;

    box-shadow:
        0 0 0 3px
        rgba(52, 199, 89, .10);
}


/* ----------------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------------- */

.section {

    position: relative;

    margin-top:
        30px;
}


.section__title {
 
    margin:
        0 0 12px 9px;
 
    color:
        var(--secondary);
 
    font-size:
        11px;
 
    line-height:
        1.2;
 
    font-weight:
        800;
 
    letter-spacing:
        .22em;
 
    text-transform:
        uppercase;
}


/* ----------------------------------------------------------------
   LINKS
   ---------------------------------------------------------------- */

.links {

    display:
        grid;

    gap:
        10px;
}


.link {
 
    position: relative;
 
    min-height:
        64px;
 
    display:
        grid;
 
    will-change:
        transform, opacity;
 
    grid-template-columns:
        52px
        1fr
        24px;
 
    align-items:
        center;
 
    padding:
        12px
        16px
        12px
        12px;
 
    overflow: hidden;
 
    color:
        var(--text);
 
    text-decoration:
        none;
 
    cursor:
        pointer;
 
    touch-action:
        manipulation;
 
    -webkit-tap-highlight-color:
        transparent;
 
    user-select:
        none;
 
    border:
        none;
 
    border-radius:
        22px;
 
    background:
        rgba(255, 255, 255, .92);
 
    backdrop-filter:
        blur(22px)
        saturate(160%);
 
    -webkit-backdrop-filter:
        blur(22px)
        saturate(160%);
 
    box-shadow:
        var(--link-shadow);
 
    transition:
        transform .32s var(--ease),
        background .32s var(--ease),
        box-shadow .32s var(--ease);
}


/*
 * Reflejo de cada botón.
 */

.link::before {
 
    content: "";
 
    position: absolute;
 
    inset: 0;
 
    z-index: 0;
 
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .75), transparent 50%),
        linear-gradient(120deg, rgba(255,255,255,.24), transparent 60%);
 
    opacity:
        .78;
 
    pointer-events:
        none;
}

.link > * {
    position: relative;
    z-index: 1;
}


.link:hover {
 
    transform:
        translateY(-1px)
        scale(1.01);
 
    background:
        rgba(255, 255, 255, .98);
 
    box-shadow:
        var(--link-shadow-hover);
}


.link:active {
 
    transform:
        translateY(1px)
        scale(.97);
 
    box-shadow:
        0 4px 10px rgba(25, 27, 34, .08);
 
    transition:
        transform .12s ease;
}


/* ----------------------------------------------------------------
   ICON
   ---------------------------------------------------------------- */

.icon {
 
    position: relative;
    z-index: 1;
 
    width:
        46px;
 
    height:
        46px;
 
    display:
        grid;
 
    place-items:
        center;
 
    border-radius:
        16px;
 
    color:
        var(--text);
 
    background:
        rgba(250, 250, 250, .92);
 
    box-shadow:
        inset
        0 1px 1px
        rgba(255,255,255,.9),
 
        0 1px 2px
        rgba(0,0,0,.06);
 
    transition:
        transform .32s var(--ease),
        background .32s var(--ease);
}


.link:hover .icon {
 
    transform:
        scale(1.04);
 
    background:
        rgba(245, 245, 247, .96);
}


.icon svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.icon.github svg {

    fill:
        currentColor;

    stroke:
        none;
}


/* ----------------------------------------------------------------
   LINK TEXT
   ---------------------------------------------------------------- */

.link__name {
 
    position:
        relative;
 
    z-index:
        1;
 
    padding-left:
        13px;
 
    font-size:
        15px;
 
    font-weight:
        600;
 
    letter-spacing:
        -.25px;
}


.link__arrow {
 
    position:
        relative;
 
    z-index:
        1;
 
    color:
        #8e8e93;
 
    font-size:
        17px;

    transition:
        transform .42s var(--ease),
        color .42s var(--ease);
}


.link:hover .link__arrow {

    color:
        var(--text);

    transform:
        translate(
            2px,
            -2px
        );
}


/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */

.footer {
 
    margin-top:
        30px;
 
    color:
        var(--tertiary);

    text-align:
        center;

    font-size:
        10px;

    font-weight:
        500;
}


/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */

@media (max-width: 480px) {

    body {
        padding: 14px;
    }

    .card {

        padding:
            32px 16px 20px;

        border-radius:
            23px;

        backdrop-filter:
            blur(30px)
            saturate(155%);

        -webkit-backdrop-filter:
            blur(30px)
            saturate(155%);
    }

    .profile {
        padding-bottom:
            30px;
    }

    .avatar {

        width:
            72px;

        height:
            72px;

        font-size:
            24px;
    }

    h1 {
        font-size:
            25px;
    }

    .link {
        min-height:
            58px;
    }
}


/* ----------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


    .page,
    .profile,
    .section,
    .footer {

        animation:
            none !important;

        opacity:
            1;

        transform:
            none;

        filter:
            none;
    }
}