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

.profile-page{

    max-width:1200px;

    margin:0 auto;

    padding:48px 24px 80px;

}

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

.profile-hero{

    margin-bottom:48px;

}

.hero-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #22364F 0%,
            #162131 100%
        );

    border:1px solid rgba(82,217,187,.18);

    border-radius:32px;

    text-align:center;

    box-shadow:
        0 20px 50px rgba(0,0,0,.28);

}

.hero-banner{

    position:relative;

    overflow:hidden;

    height:230px;

background:

linear-gradient(

135deg,

#67E8D4 0%,

#4CCDC5 22%,

#38B2B6 48%,

#2D6D88 75%,

#20354C 100%

);

}

.banner-line{

    position:absolute;

    left:0;

    bottom:40px;

    width:100%;

    height:160px;

}

.banner-line path{

    fill:none;

    stroke:rgba(255,255,255,.28);

    stroke-width:2;

}

.banner-title{

    position:absolute;

    inset:0;

display:flex;

justify-content:center;

align-items:flex-start;

padding-top:25px;

    font-size:170px;

    font-weight:900;

    letter-spacing:4px;

    color:white;

    opacity:.05;

    user-select:none;

}

.banner-subtitle{

    position:absolute;

    top:22px;

    left:50%;

    transform:translateX(-50%);

    letter-spacing:10px;

    text-transform:uppercase;

    font-size:16px;

    font-weight:600;

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

}

.banner-korean{

    position:absolute;

    top:82px;

    left:50%;

    transform:translateX(-50%);

    font-size:60px;

    font-weight:800;

    text-shadow:

        0 0 20px rgba(255,255,255,.25);

}

.banner-member{

    position:absolute;

    right:36px;

    top:32px;

    width:105px;

    height:145px;

    border-radius:26px;

    border:2px solid rgba(255,255,255,.25);

    backdrop-filter:blur(12px);

    background:rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:10px;

box-shadow:

    0 0 25px rgba(255,255,255,.12);

}

.banner-member:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 35px rgba(82,217,187,.35);

}

.banner-member::before{

    content:"S19";

    font-size:42px;

    font-weight:900;

}

.banner-member::after{

    content:"tripleS Member";

    text-align:center;

    font-size:15px;

    line-height:1.3;

    opacity:.8;

}

.banner-glow{

    position:absolute;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(255,255,255,.30),

            transparent 70%

        );

    filter:blur(2px);

}
.glow-1{

    width:260px;

    height:260px;

    left:-60px;

    top:-120px;

}

.glow-2{

    width:180px;

    height:180px;

    right:120px;

    top:-80px;

}

.glow-3{

    width:240px;

    height:240px;

    right:-70px;

    bottom:-120px;

}

.banner-dots{

    position:absolute;

    width:70px;

    height:70px;

    background-image:

        radial-gradient(

            rgba(255,255,255,.5) 1.5px,

            transparent 1.5px

        );

    background-size:14px 14px;

}

.banner-dots.left{

    left:36px;

    bottom:42px;

}

.banner-dots.right{

    right:150px;

    bottom:56px;

}

.banner-wave{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:0px;

}

.banner-wave path{

    fill:#172536;

}

.banner-highlight{

    position:absolute;

    left:0;

    bottom:92px;

    width:100%;

    height:80px;

}

.banner-highlight path{

    fill:none;

    stroke:rgba(255,255,255,.28);

    stroke-width:2;

}

/* ==========================================
   STARS
========================================== */

.star{

    position:absolute;

    width:4px;

    height:4px;

    background:white;

    border-radius:50%;

box-shadow:

    0 0 6px rgba(255,255,255,.5),

    0 0 12px rgba(255,255,255,.25);

    animation:twinkle 4s infinite;

}

.star::before,

.star::after{

    content:"";

    position:absolute;

    background:white;

}

.star::before{

    width:18px;

    height:1px;

    left:-7px;

    top:1.5px;

}

.star::after{

    width:1px;

    height:18px;

    left:1.5px;

    top:-7px;

}

.star-1{

    left:10%;

    top:35px;

}

.star-2{

    left:42%;

    top:18px;

    animation-delay:.5s;

}

.star-3{

    left:63%;

    top:75px;

    animation-delay:1s;

}

.star-4{

    right:14%;

    top:38px;

    animation-delay:1.5s;

}

.star-5{

    right:28%;

    bottom:72px;

    animation-delay:2s;

}

.star-6{

    left:36%;

    bottom:46px;

    animation-delay:2.8s;

}

@keyframes twinkle{

    0%,100%{

        opacity:.25;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.3);

    }

}

/* ==========================================
   FLOATING CIRCLES
========================================== */

.floating-circle{

    position:absolute;

    border-radius:50%;

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

    animation:floatCircle 12s ease-in-out infinite;

}

.circle-a{

    width:180px;

    height:180px;

    top:-70px;

    right:-40px;

}

.circle-b{

    width:110px;

    height:110px;

    bottom:18px;

    left:80px;

}

.circle-c{

    width:70px;

    height:70px;

    top:18px;

    left:210px;

}

@keyframes floatCircle{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.hero-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle,

            transparent 55%,

            rgba(0,0,0,.18)

        );

    pointer-events:none;

}

.photo-glow{

    position:absolute;

    left:50%;

    top:210px;

    transform:translateX(-50%);

    width:310px;

    height:310px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(82,217,187,.28),

            transparent 70%

        );

    filter:blur(18px);

    z-index:0;

}

.hero-photo{

    width:260px;

    height:260px;

    margin-top:-135px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #162131;

box-shadow:

    0 0 0 5px rgba(82,217,187,.30),

    0 0 45px rgba(82,217,187,.25),

    0 18px 45px rgba(0,0,0,.45);

    position:relative;

    z-index:2;

}



.hero-card h1{

    margin:28px 0 4px;

    font-size:56px;

    font-weight:800;

}

.hero-card h2{

    margin:0;

    color:var(--mint);

    font-size:30px;

    font-weight:500;

}

.hero-subtitle{

    margin:18px 0 28px;

    font-size:18px;

    opacity:.85;

}

.hero-tags{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    max-width:700px;

    margin:0 auto 28px;

}

.hero-tags span{

    padding:10px 18px;

    border-radius:999px;

    background:rgba(82,217,187,.12);

    border:1px solid rgba(82,217,187,.22);

    color:var(--mint);

    font-size:14px;

    font-weight:600;

}

.hero-description{

    max-width:650px;

    margin:0 auto;

    padding:0 28px 40px;

    line-height:1.8;

    opacity:.92;

}

/* ==========================================
   SECTION TITLE
========================================== */

.profile-section{

    margin-bottom:60px;

}

.section-title{

    text-align:center;

    margin-bottom:30px;

}

.section-title h2{

    font-size:36px;

    margin-bottom:10px;

}

.section-title p{

    opacity:.7;

}

.banner-side{

    position:absolute;

    left:18px;

    top:40px;

    writing-mode:vertical-rl;

    text-orientation:mixed;

    letter-spacing:3px;

    font-size:20px;

    opacity:.75;

}

.hero-banner{

    animation:bannerGlow 8s ease-in-out infinite;
}

@keyframes bannerGlow{

    0%,100%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.05);

    }

}

.banner-hedgehog{

    position:absolute;

    left:55px;

    bottom:55px;

    z-index:2;

    opacity:.08;

    transition:.3s;

    mix-blend-mode:screen;

}

.banner-hedgehog img{

    width:100px;

    filter:

        grayscale(1)

        brightness(1.7)

        drop-shadow(
            0 0 15px
            rgba(82,217,187,.35)
        );

}

.hero-banner:hover .banner-hedgehog{

    opacity:.28;

}

/* ==========================================
   INFO GRID
========================================== */

.info-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.info-card{

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    border:1px solid rgba(82,217,187,.15);

    border-radius:22px;

    padding:22px;

    transition:.25s;

}

.info-card:hover{

    transform:translateY(-4px);

    border-color:rgba(82,217,187,.35);

    box-shadow:
        0 12px 28px rgba(0,0,0,.22);

}

.info-label{

    display:block;

    color:var(--mint);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:10px;

}

.info-value{

    font-size:18px;

    font-weight:600;

}

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

.triples-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

}

.triples-card{

    background:
        linear-gradient(
            180deg,
            rgba(82,217,187,.08),
            rgba(255,255,255,.03)
        );

    border:1px solid rgba(82,217,187,.18);

    border-radius:22px;

    padding:24px;

    transition:.25s;

}

.triples-card:hover{

    transform:translateY(-5px);

    border-color:rgba(82,217,187,.35);

    box-shadow:
        0 15px 30px rgba(0,0,0,.25);

}

.triples-label{

    display:block;

    margin-bottom:10px;

    color:var(--mint);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.triples-card strong{

    font-size:18px;

}

/* ==========================================
   FAVORITES
========================================== */

.favorite-group{

    margin-bottom:36px;

}

.favorite-group:last-child{

    margin-bottom:0;

}

.favorite-group h3{

    margin-bottom:18px;

    color:var(--mint);

    font-size:22px;

}

.favorite-chips{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.favorite-chips span{

    background:rgba(82,217,187,.10);

    border:1px solid rgba(82,217,187,.20);

    border-radius:999px;

    padding:12px 18px;

    font-size:15px;

    transition:.25s;

    cursor:default;

}

.favorite-chips span:hover{

    transform:translateY(-3px);

    background:rgba(82,217,187,.18);

    border-color:rgba(82,217,187,.35);

}

.favorite-note{

    margin-top:16px;

    opacity:.75;

    line-height:1.7;

}

/* ==========================================
   FUN FACTS
========================================== */

.facts-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.fact-card{

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    border:1px solid rgba(82,217,187,.15);

    border-radius:24px;

    padding:28px;

    transition:.25s;

}

.fact-card:hover{

    transform:translateY(-6px);

    border-color:rgba(82,217,187,.35);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25);

}

.fact-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    font-size:26px;

    background:rgba(82,217,187,.12);

    color:var(--mint);

}

.fact-card h3{

    margin-bottom:12px;

}

.fact-card p{

    line-height:1.8;

    opacity:.88;

}

.spotify-card{

    margin-top:24px;

    padding:24px;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(30,215,96,.10),
            rgba(255,255,255,.03)
        );

    border:1px solid rgba(30,215,96,.25);

}

.spotify-card h4{

    margin-bottom:12px;

    color:#1DB954;

}

.spotify-card p{

    opacity:.8;

    line-height:1.7;

    margin-bottom:18px;

}

.spotify-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:999px;

    background:#1DB954;

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.spotify-card a:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);

}

/* ==========================================
   IDENTITY
========================================== */

.identity-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

}

.identity-card{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(82,217,187,.15);

    border-radius:24px;

    padding:28px;

    text-align:center;

    transition:.25s;

}

.identity-card:hover{

    transform:translateY(-5px);

    border-color:rgba(82,217,187,.35);

}

.identity-icon{

    font-size:34px;

    margin-bottom:18px;

}

.identity-card h3{

    margin-bottom:12px;

}

.identity-card p{

    opacity:.8;

}

.signature-card img{

    width:220px;

    max-width:100%;

    margin-top:18px;

    filter:invert(1);

}

.color-swatch{

    width:48px;

    height:48px;

    margin:18px auto;

    border-radius:50%;

    background:#52D9BB;

    border:3px solid rgba(255,255,255,.2);

}

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

@media (max-width:768px){

    .profile-page{

        padding:24px 16px 48px;

    }

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

.hero-banner{

    height:160px;

}

.banner-title{

    font-size:82px;

    letter-spacing:2px;

    opacity:.04;

}

.banner-korean{

    top:55px;

    font-size:34px;

}

.banner-subtitle{

    top:16px;

    font-size:12px;

    letter-spacing:6px;

}

.banner-member{

    width:68px;

    height:92px;

    top:16px;

    right:16px;

    border-radius:18px;

}

.banner-member::before{

    font-size:28px;

}

.banner-member::after{

    font-size:10px;

}

.banner-side{

    left:12px;

    top:30px;

    font-size:14px;

}

.hero-photo{

    width:180px;

    height:180px;

    margin-top:-90px;

    border-width:5px;

}

.hero-card h1{

    margin-top:20px;

    font-size:40px;

}

.hero-card h2{

    font-size:22px;

}

.hero-subtitle{

    margin:12px 0 20px;

    font-size:15px;

}

.hero-description{

    padding:0 22px 28px;

    font-size:15px;

    line-height:1.7;

}

.hero-tags{

    gap:10px;

    padding:0 18px;

}

.hero-tags span{

    padding:8px 14px;

    font-size:13px;

}

.banner-dots,

.floating-circle,

.banner-hedgehog{

    display:none;

}

.photo-glow{

    top:145px;

    width:220px;

    height:220px;

}



.info-grid{

    grid-template-columns:1fr;

}

.triples-grid{

    grid-template-columns:1fr;

}

.facts-grid{

    grid-template-columns:1fr;

}

.identity-grid{

    grid-template-columns:1fr;

}

}