/* ===================================================
   YNAL.NET V3
   PART 1
=================================================== */

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

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

html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}

body{

    font-family:'Poppins',sans-serif;

    background:#09090d;

    color:#ffffff;

    overflow-x:hidden;
    width:100%;

    background-image:

    radial-gradient(
        circle at top left,
        rgba(139,92,246,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(139,92,246,.08),
        transparent 40%
    );

}

/* ---------- HEADER ---------- */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:22px 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(9,9,13,.60);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.05);

    z-index:9999;

}

.logo{

    color:#fff;

    text-decoration:none;

    font-size:32px;

    font-weight:800;

    letter-spacing:.5px;

}

nav{

    display:flex;

    align-items:center;

    gap:14px;

}

nav a{

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:#fff;

    text-decoration:none;

    transition:.30s ease;

}

nav a:hover{

    background:rgba(139,92,246,.18);

    transform:translateY(-3px);

}

nav i{

    font-size:20px;

}

/* ---------- HERO ---------- */

.hero{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:

        130px
        20px
        80px;

}

.hero h1{

    margin-top:12px;

    font-size:92px;

    font-weight:800;

    line-height:1;

}

.hero h2{

    margin-top:15px;

    font-size:30px;

    font-weight:500;

    color:#d4d4df;

}

.hero p{

    margin-top:28px;

    max-width:700px;

    line-height:1.9;

    font-size:18px;

    color:#b8b8c5;

} 
.hero-description{

    max-width:700px;

}

.hero .collab-text{

    margin-top:20px;

    max-width:560px;

    font-size:13px;

    line-height:1.7;

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

    font-weight:400;

}
/* ===================================================
   PART 2
   PREMIUM CAROUSEL
=================================================== */

.carousel{

    width:min(1200px,92vw);

    margin:0 auto 25px;

    overflow:hidden;

    position:relative;

    border-radius:28px;

}

.carousel-track{

    display:flex;

    align-items:center;

    gap:18px;

    width:max-content;

    will-change:transform;
    --carousel-gap:18px;
    animation:none;


}


/* ---------- Carousel Animation ---------- */
@keyframes carousel{
    from{
        transform:translate3d(0,0,0);
    }
    to{
        transform:translate3d(calc(-50% - (var(--carousel-gap, 18px) / 2)),0,0);
    }
}


.carousel:hover .carousel-track{
    animation-play-state:paused;
}

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

.card{

    position:relative;

    width:175px;

    height:310px;

    flex:none;

    border-radius:24px;

    overflow:hidden;

    text-decoration:none;

    transition:
        transform .35s ease,
        filter .35s ease;

    filter:brightness(.88);

}

.card img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}

/* dark overlay */

.card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.85),
        transparent 45%
    );

    opacity:0;

    transition:.30s;

}

/* Watch Button */

.card::before{

    content:"▶ Watch on TikTok";

    position:absolute;

    left:50%;

    bottom:16px;

    transform:
        translateX(-50%)
        translateY(12px);

    white-space:nowrap;

    padding:9px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    color:#fff;

    background:
        rgba(20,20,25,.78);

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

    backdrop-filter:blur(14px);

    opacity:0;

    transition:.30s;

    z-index:5;

}

/* Hover */

.card:hover{

    filter:brightness(1);

}

.card:hover img{

    transform:scale(1.08);

}

.card:hover::before{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

}

.card:hover::after{

    opacity:1;

}

/* ---------- Animation ---------- */


/* ===================================================
   PART 3
   BUTTONS & STATS
=================================================== */

/* ---------- BUTTONS ---------- */

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin-top:40px;

    flex-wrap:nowrap;

}

.buttons a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:220px;   /* Same width for both buttons */

    height:56px;

    border-radius:999px;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    white-space:nowrap;

    transition:.3s ease;

}





.buttons a{
    line-height:1;
}

.buttons a i{
    font-size:17px;
    width:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
}

.buttons a span{
    display:inline-block;
    line-height:1;
}

.work i{
    transform:translateY(1px);
}

/* Watch TikTok */

.watch{

    color:#fff;

    background:#8b5cf6;

    box-shadow:
        0 10px 30px rgba(139,92,246,.35);

}

.watch:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 45px rgba(139,92,246,.45);

}

/* Work With Me */

.work{

    color:#fff;

    background:#8b5cf6;

    box-shadow:
        0 10px 30px rgba(139,92,246,.35);

}

.work:hover{

    transform:translateY(-3px);

    background:#8b5cf6;

    box-shadow:
        0 18px 45px rgba(139,92,246,.45);

}

/* ---------- STATS ---------- */

.stats{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:70px;
    flex-wrap:wrap;
}

.stat-card{
    width:110px;
    height:100px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:.3s ease;
}

.stat-card:hover{
    transform:translateY(-4px);
    border-color:#8b5cf6;
    background:rgba(255,255,255,.05);
}

.stat-card i{
    color:#8b5cf6;
    margin-bottom:6px;
}
.fa-tiktok{font-size:21px;}
.fa-youtube{font-size:18px;}
.fa-facebook-f{font-size:20px;}

.stat-card h2{
    font-size:22px;
    font-weight:800;
    margin:2px 0;
}

.stat-card p{
    margin-top:4px;
    font-size:11px;
    color:#9ca3af;
    text-align:center;
}

/* ===================================================
   PART 4/* ===================================================
   PART 4
   FINAL POLISH
=================================================== */

/* ---------- Fade In ---------- */

.hero > *{

    opacity:0;

    transform:translateY(30px);

    animation:fadeUp .8s ease forwards;

}

.carousel{animation-delay:.1s;}
.hero h1{animation-delay:.2s;}
.hero h2{animation-delay:.35s;}
.hero p{animation-delay:.5s;}
.buttons{animation-delay:.65s;}
.stats{animation-delay:.8s;}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

header{

    padding:18px 20px;

}

.logo{

    font-size:24px;

}

nav{

    gap:10px;

}

nav a{

    width:40px;
    height:40px;

}

.hero{

    padding-top:110px;
    padding-bottom:60px;

}

.hero h1{

    font-size:58px;

    margin-top:22px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:15px;

    line-height:1.8;

    max-width:92%;

}

.carousel{

    width:92%;

}

.carousel-track{

    gap:14px;
    --carousel-gap:14px;

    animation:none;

}

.card{

    width:125px;

    height:222px;

}

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:nowrap;

    gap:10px;

    width:100%;

}

.buttons a{

    width:150px;

    height:46px;

    padding:0;

    font-size:15px;

    border-radius:999px;

    flex-shrink:0;

}

.stats{
    gap:10px;
    margin-top:50px;
}

.stat-card{
    width:92px;
    height:92px;
}

.stat-card i{margin-bottom:5px;}

.stat-card h2{font-size:18px;margin-bottom:2px;}

.stat-card p{font-size:9px;}

}

/* ---------- Smooth ---------- */

.card,
.buttons a,
nav a{

    -webkit-tap-highlight-color:transparent;

}

@media (max-width:768px){

    .card::before{

        content:"▶ Watch";

        font-size:10px;

        padding:6px 10px;

        bottom:10px;

    }

}

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

footer{

    margin-top:100px;

    padding:35px 20px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

}

footer small{

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

    font-size:13px;

    letter-spacing:.3px;

}




/* ---------- TikTok Timestamp Badge ---------- */
.carousel .card .tiktok-posted-badge{
    position:absolute;
    left:50%;
    bottom:16px;
    top:auto;
    transform:translateX(-50%);
    z-index:6;
    padding:9px 16px;
    border-radius:999px;
    color:#fff;
    background:rgba(20,20,25,.78);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-size:13px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
}

.carousel .card:hover .tiktok-posted-badge{
    opacity:0;
    transform:translateX(-50%) translateY(6px);
}

/* The carousel must appear immediately.
   The old hero fade animation was causing the visible delay. */
.hero > .carousel{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
}

@media (max-width:768px){
    .carousel .card .tiktok-posted-badge{
        bottom:10px;
        padding:6px 10px;
        font-size:10px;
    }
}

/* JS controls movement; never let CSS pause it on touch devices. */
@media (hover:none){
    .carousel:hover .carousel-track{
        animation:none !important;
    }
}


/* ===================================================
   YNAL FINAL MOBILE + CAROUSEL LOADING POLISH
   Presentation-only. Existing TikTok API/JS is untouched.
=================================================== */

/* Reserve carousel space immediately so the hero does not jump when TikTok cards arrive. */
.hero .carousel {
    min-height:310px;
    margin-bottom:12px;
    display:flex;
    align-items:center;
}

/* The carousel cards are revealed by the small inline style in index.html. */
.hero .carousel-track {
    opacity:0;
    transition:opacity .55s cubic-bezier(.22,1,.36,1);
}

.hero .carousel.tiktok-carousel-ready .carousel-track {
    opacity:1;
}

@media (max-width:768px){
    header nav {
        gap:8px;
        flex-shrink:0;
    }

    header nav a {
        width:38px;
        height:38px;
        flex-shrink:0;
    }

    .hero .carousel {
        min-height:222px;
        margin-bottom:18px;
    }

    .hero h1 {
        margin-top:0;
    }

    .hero .carousel-track {
        min-height:222px;
        align-items:center;
    }
}


/* Android-only header spacing fix. Keeps iPhone/iPad and desktop unchanged. */
@media (max-width:430px){
    html.android-device header{
        padding:14px 14px;
    }

    html.android-device .logo{
        font-size:22px;
    }

    html.android-device header nav{
        gap:5px;
    }

    html.android-device header nav a{
        width:34px;
        height:34px;
    }

    /* Match iPhone header-to-carousel spacing without changing other elements. */
    html.android-device .hero > .carousel{
        position:relative;
        top:-8px;
    }
}