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

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


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

    --bg: #080808;

    --text: #ffffff;

    --muted: rgba(255,255,255,.56);

    --card: rgba(255,255,255,.045);

    --card-hover: rgba(255,255,255,.075);

    --border: rgba(255,255,255,.10);

    --border-hover: rgba(255,255,255,.20);

    --accent: #ffffff;

    --accent-soft: rgba(255,255,255,.10);

}


/* =========================================================
   THEMES
========================================================= */


/* -------------------------
   NOIR
------------------------- */

.theme-noir {

    --bg: #080808;

    --text: #ffffff;

    --muted: rgba(255,255,255,.56);

    --card: rgba(255,255,255,.045);

    --card-hover: rgba(255,255,255,.075);

    --border: rgba(255,255,255,.10);

    --border-hover: rgba(255,255,255,.20);

    --accent: #ffffff;

    --accent-soft: rgba(255,255,255,.10);

}


/* -------------------------
   LUXURY
------------------------- */

.theme-luxury {

    --bg: #090806;

    --text: #f5efe2;

    --muted: rgba(245,239,226,.58);

    --card: rgba(212,175,55,.045);

    --card-hover: rgba(212,175,55,.085);

    --border: rgba(212,175,55,.18);

    --border-hover: rgba(212,175,55,.38);

    --accent: #d4af37;

    --accent-soft: rgba(212,175,55,.10);

}


/* -------------------------
   CALM
------------------------- */

.theme-calm {

    --bg: #101412;

    --text: #edf2ed;

    --muted: rgba(237,242,237,.58);

    --card: rgba(150,190,165,.055);

    --card-hover: rgba(150,190,165,.09);

    --border: rgba(180,210,190,.14);

    --border-hover: rgba(180,210,190,.28);

    --accent: #9fbea9;

    --accent-soft: rgba(159,190,169,.10);

}


/* -------------------------
   MINIMAL
------------------------- */

.theme-minimal {

    --bg: #f3f1ed;

    --text: #171717;

    --muted: rgba(23,23,23,.55);

    --card: rgba(255,255,255,.72);

    --card-hover: rgba(255,255,255,.95);

    --border: rgba(0,0,0,.08);

    --border-hover: rgba(0,0,0,.18);

    --accent: #171717;

    --accent-soft: rgba(0,0,0,.06);

}


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

html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family:
        'DM Sans',
        sans-serif;

    overflow-x: hidden;

    position: relative;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


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

.background {

    position: fixed;

    inset: 0;

    z-index: -10;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 8%,
            color-mix(
                in srgb,
                var(--accent) 8%,
                transparent
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 75%,
            color-mix(
                in srgb,
                var(--accent) 4%,
                transparent
            ),
            transparent 30%
        ),

        var(--bg);

}


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

.orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .20;

    transform:
        translateZ(0);

}


.orb-one {

    width: 550px;

    height: 550px;

    top: -420px;

    left: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            var(--accent),
            transparent 68%
        );

}


.orb-two {

    width: 400px;

    height: 400px;

    right: -220px;

    bottom: -250px;

    background:
        radial-gradient(
            circle,
            var(--accent),
            transparent 68%
        );

    opacity: .10;

}


/* =========================================================
   CINEMATIC GRAIN
========================================================= */

.noise {

    position: absolute;

    inset: -50%;

    opacity: .035;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

    animation:
        grain .25s steps(2) infinite;

}


@keyframes grain {

    0% {
        transform: translate(0,0);
    }

    25% {
        transform: translate(2%,-2%);
    }

    50% {
        transform: translate(-2%,2%);
    }

    75% {
        transform: translate(2%,2%);
    }

    100% {
        transform: translate(-2%,-2%);
    }

}


/* =========================================================
   MAIN PAGE
========================================================= */

.page {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 620px;

    margin: 0 auto;

    padding:
        65px 20px 45px;

}


/* =========================================================
   PROFILE
========================================================= */

.profile {

    text-align: center;

    margin-bottom: 42px;

    animation:
        fadeUp .8s
        cubic-bezier(.22,1,.36,1)
        both;

}


/* =========================================================
   PROFILE IMAGE
========================================================= */

.profile-image-wrapper {

    position: relative;

    width: 112px;

    height: 112px;

    margin: 0 auto;

}


.profile-image {

    width: 112px;

    height: 112px;

    margin: 0 auto;

    padding: 2px;

    position: relative;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            rgba(255,255,255,.12)
        );

    box-shadow:

        0 0 0 1px
        rgba(255,255,255,.04),

        0 20px 70px
        rgba(0,0,0,.55),

        0 0 50px
        color-mix(
            in srgb,
            var(--accent) 10%,
            transparent
        );

}


.profile-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    border:
        3px solid
        var(--bg);

}


/* Halo atrás da foto */

.profile-image::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: 50%;

    left: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--accent) 14%,
                transparent
            ),
            transparent 68%
        );

    filter: blur(25px);

    z-index: -1;

    pointer-events: none;

}


/* =========================================================
   PROFILE RING
========================================================= */

.profile-ring {

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 35%,
            transparent
        );

    opacity: .65;

    pointer-events: none;

}


/* =========================================================
   PROFILE PLACEHOLDER
========================================================= */

.profile-placeholder {

    width: 108px;

    height: 108px;

    margin: 0 auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #252525,
            #0d0d0d
        );

    border:
        1px solid
        rgba(255,255,255,.15);

    font-family:
        'Playfair Display',
        serif;

    font-size: 42px;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.5);

}


/* =========================================================
   PROFILE TYPOGRAPHY
========================================================= */

h1 {

    margin-top: 22px;

    font-family:
        'Playfair Display',
        serif;

    font-size: 31px;

    font-weight: 500;

    letter-spacing: -.7px;

    color:
        var(--text);

}


.username {

    margin-top: 7px;

    font-size: 13px;

    color:
        var(--muted);

}


.bio {

    max-width: 430px;

    margin:
        17px auto 0;

    font-size: 14px;

    line-height: 1.65;

    color:
        var(--muted);

}


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

.links {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


/* =========================================================
   BASE LINK CARD
========================================================= */

.link-card {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 72px;

    padding:
        18px 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--card-hover),
            var(--card)
        );

    border:
        1px solid
        var(--border);

    backdrop-filter:
        blur(18px);

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

    color:
        var(--text);

    text-decoration: none;

    overflow: hidden;

    box-shadow:

        0 12px 40px
        rgba(0,0,0,.20),

        inset 0 1px 0
        rgba(255,255,255,.06);

    transition:

        transform .35s
        cubic-bezier(.22,1,.36,1),

        border-color .35s,

        background .35s,

        box-shadow .35s;

}


/* =========================================================
   LINK SHINE
========================================================= */

.link-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;

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

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;

}


.link-card:hover::before {

    left: 140%;

}


/* =========================================================
   LINK HOVER
========================================================= */

.link-card:hover {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            var(--card-hover),
            var(--card)
        );

    border-color:
        var(--border-hover);

    box-shadow:

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

        inset 0 1px 0
        rgba(255,255,255,.08);

}


.link-card:active {

    transform:
        scale(.985);

}


/* =========================================================
   NORMAL LINK
========================================================= */

.link-normal {

    min-height: 76px;

}


/* =========================================================
   FEATURED LINK
========================================================= */

.link-featured {

    min-height: 88px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--accent) 12%,
                transparent
            ),
            var(--card)
        );

    border-color:
        color-mix(
            in srgb,
            var(--accent) 28%,
            var(--border)
        );

    box-shadow:

        0 15px 45px
        rgba(0,0,0,.25),

        inset 0 1px 0
        rgba(255,255,255,.10);

}


.link-featured .link-icon {

    width: 52px;

    height: 52px;

    border-radius: 16px;

    background:
        var(--accent-soft);

}


.link-featured .link-title {

    font-size: 16px;

}


/* =========================================================
   HERO LINK
========================================================= */

.link-hero {

    min-height: 250px;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-end;

    padding: 24px;

    overflow: hidden;

}


.link-hero .link-image {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.link-hero .link-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .7s
        cubic-bezier(.22,1,.36,1);

}


.link-hero:hover
.link-image img {

    transform:
        scale(1.06);

}


.link-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,.1)
        );

    z-index: 1;

}


.link-hero .link-icon {

    position: relative;

    z-index: 2;

    margin-bottom: auto;

}


.link-hero .link-content {

    position: relative;

    z-index: 2;

    margin-left: 0;

}


.link-hero .link-title {

    font-family:
        'Playfair Display',
        serif;

    font-size: 25px;

}


.link-hero .link-description {

    color:
        rgba(255,255,255,.70);

    font-size: 13px;

}


.link-hero .link-arrow {

    position: absolute;

    right: 20px;

    bottom: 20px;

    z-index: 3;

}


/* =========================================================
   LINK BADGE
========================================================= */

.link-badge {

    display: inline-flex;

    width: fit-content;

    padding:
        4px 8px;

    margin-bottom: 5px;

    border-radius: 999px;

    background:
        var(--accent-soft);

    border:
        1px solid
        var(--border);

    color:
        var(--accent);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* =========================================================
   LINK IMAGE
========================================================= */

.link-image {

    position: absolute;

    inset: 0;

}


.link-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   NORMAL LINK IMAGE
========================================================= */

.link-normal .link-image {

    width: 50px;

    height: 50px;

    position: relative;

    inset: auto;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 14px;

}


.link-normal .link-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


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


/* =========================================================
   LINK TEXT
========================================================= */

.link-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    margin-left: 18px;

    gap: 4px;

    min-width: 0;

}


.link-title {

    font-size: 15px;

    font-weight: 600;

    letter-spacing: -.15px;

    color:
        var(--text);

}


.link-description {

    color:
        var(--muted);

    font-size: 12px;

}


/* =========================================================
   ARROW
========================================================= */

.link-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    color:
        var(--muted);

    transition:
        transform .35s ease,

        color .35s ease;

}


.link-arrow svg {

    width: 17px;

    height: 17px;

    stroke-width: 1.6;

}


.link-card:hover
.link-arrow {

    transform:
        translateX(4px);

    color:
        var(--accent);

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    margin-top: 48px;

    text-align: center;

    color:
        var(--muted);

}


.socials {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;

}


.socials a {

    color:
        var(--muted);

    text-decoration: none;

    font-size: 12px;

    transition:
        color .25s ease;

}


.socials a:hover {

    color:
        var(--accent);

}


.footer-line {

    width: 35px;

    height: 1px;

    margin:
        20px auto;

    background:
        var(--border);

}


footer p {

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   LINK ANIMATION DELAYS
========================================================= */

.link-card:nth-child(1) {

    animation-delay: .05s;

}


.link-card:nth-child(2) {

    animation-delay: .10s;

}


.link-card:nth-child(3) {

    animation-delay: .15s;

}


.link-card:nth-child(4) {

    animation-delay: .20s;

}


.link-card:nth-child(5) {

    animation-delay: .25s;

}


.link-card:nth-child(6) {

    animation-delay: .30s;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .page {

        padding:
            48px 15px 35px;

    }


    .profile {

        margin-bottom: 34px;

    }


    .profile-image-wrapper {

        width: 104px;

        height: 104px;

    }


    .profile-image {

        width: 104px;

        height: 104px;

    }


    h1 {

        font-size: 28px;

    }


    .bio {

        font-size: 13px;

        padding:
            0 10px;

    }


    .link-card {

        min-height: 72px;

        border-radius: 18px;

    }


    .link-icon {

        width: 44px;

        height: 44px;

        border-radius: 13px;

    }

}


/* =========================================================
   LIGHT THEME
========================================================= */

.theme-minimal .link-card {

    box-shadow:

        0 12px 35px
        rgba(0,0,0,.06),

        inset 0 1px 0
        rgba(255,255,255,.8);

}


.theme-minimal .link-icon {

    background:
        rgba(0,0,0,.035);

    border-color:
        rgba(0,0,0,.08);

}


.theme-minimal .link-description {

    color:
        rgba(0,0,0,.48);

}


.theme-minimal .username {

    color:
        rgba(0,0,0,.42);

}


.theme-minimal .bio {

    color:
        rgba(0,0,0,.60);

}


.theme-minimal .socials a {

    color:
        rgba(0,0,0,.55);

}


.theme-minimal footer {

    color:
        rgba(0,0,0,.35);

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    * {

        animation: none !important;

        transition: none !important;

    }

}