/* =========================================================
   CHAU HO — GAME DESIGNER PORTFOLIO
   Playful game-UI theme
========================================================= */

:root{
    --bg:#0c1430;
    --bg-soft:#121c40;
    --card:#15214b;
    --card-2:#1b2a5e;
    --text:#eef3ff;
    --muted:#a8b6e0;
    --border:rgba(255,255,255,.10);

    /* blue-forward palette */
    --pink:#54e5ff;     /* primary blue (was pink accent) */
    --purple:#7aa2ff;   /* lighter blue */
    --mint:#38e1ff;     /* cyan pop */
    --peach:#ffd166;    /* warm contrast for small labels */
    --blue:#4f7cff;

    --grad: linear-gradient(135deg,#38e1ff 0%,#5b8cff 50%,#7aa2ff 100%);
    --grad-soft: linear-gradient(135deg,rgba(91,140,255,.20),rgba(56,225,255,.18));

    --radius:22px;
    --radius-lg:30px;
    --shadow:0 18px 50px -20px rgba(91,140,255,.55);
    --shadow-pink:0 18px 50px -20px rgba(56,225,255,.55);

    --font-head:'Fredoka', 'Nunito', sans-serif;
    --font-body:'Nunito', sans-serif;
}

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

html{ scroll-behavior:smooth; }

/* ---------- Lenis smooth scroll ---------- */
html.lenis,
html.lenis body{ height:auto; }

.lenis.lenis-smooth{ scroll-behavior:auto !important; }

.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }

.lenis.lenis-stopped{ overflow:hidden; }

.lenis.lenis-smooth iframe{ pointer-events:none; }

body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img,video{ width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.15; font-weight:600; }

em{ font-style:normal; color:var(--pink); font-weight:700; }

.container{ width:min(1180px,92%); margin:auto; }

.section{ padding:110px 0; position:relative; }

.eyebrow{
    display:inline-block;
    font-weight:800;
    font-size:14px;
    letter-spacing:.5px;
    color:var(--purple);
    background:var(--grad-soft);
    border:1px solid var(--border);
    padding:6px 16px;
    border-radius:999px;
    margin-bottom:18px;
}

/* ---------- Background blobs ---------- */
.bg-blobs{
    position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
    /* Promote to its own GPU layer so the fixed background is painted once
       and composited during scroll instead of repainting every frame.
       This is what stops the background from "disappearing" on mobile. */
    transform:translateZ(0);
    will-change:transform;
    contain:strict;
}
.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.5;
}
.blob-1{ width:520px; height:520px; background:var(--pink);   top:-160px; left:-120px; }
.blob-2{ width:480px; height:480px; background:var(--purple); top:35%;    right:-160px; }
.blob-3{ width:460px; height:460px; background:var(--blue);   bottom:-180px; left:25%; }

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-head);
    font-weight:600;
    font-size:16px;
    padding:14px 26px;
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.btn-sm{ padding:9px 18px; font-size:14px; }
.btn-primary{
    background:var(--pink);
    color:#08102b;
    box-shadow:0 10px 24px -12px rgba(91,140,255,.75);
}
.btn-primary:hover{
    transform:translateY(-3px);
    background:#74a0ff;
    box-shadow:0 16px 30px -12px rgba(91,140,255,.85);
}
.btn-ghost{
    background:rgba(255,255,255,.04);
    border-color:var(--border);
    color:var(--text);
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--pink); background:rgba(91,140,255,.14); }

/* ===================== HEADER ===================== */
.header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(20,16,31,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:74px;
}
.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-head);
    font-weight:700;
    font-size:22px;
}
.logo-dot{
    width:14px; height:14px; border-radius:50%;
    background:var(--grad);
    box-shadow:0 0 14px var(--pink);
}
.nav{ display:flex; gap:30px; margin-left:auto; margin-right:28px; }
.nav a{
    color:var(--muted);
    font-weight:700;
    font-size:15px;
    position:relative;
    transition:color .2s;
}
.nav a::after{
    content:""; position:absolute; left:0; bottom:-6px;
    width:0; height:3px; border-radius:3px; background:var(--grad);
    transition:width .25s ease;
}
.nav a:hover, .nav a.active{ color:var(--text); }
.nav a:hover::after, .nav a.active::after{ width:100%; }

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
}
.menu-toggle span{
    width:26px; height:3px; border-radius:3px; background:var(--text);
    transition:.25s;
}

/* ===================== HERO ===================== */
.hero{ padding:90px 0 100px; }
.hero-grid{ margin-bottom:8px; }
.hero-text{ max-width:760px; margin-inline:auto; text-align:center; }
.hero-badge{
    display:inline-block;
    background:var(--grad-soft);
    border:1px solid var(--border);
    color:var(--mint);
    font-weight:800;
    font-size:14px;
    padding:8px 18px;
    border-radius:999px;
    margin-bottom:24px;
}
.hero-text h1{
    font-size:clamp(34px,6vw,64px);
    font-weight:700;
    letter-spacing:-.5px;
}
.hl{ position:relative; white-space:nowrap; }
.hl-pink{ color:var(--pink); }
.hl-purple{color: #deff7a;}
.hl-mint{ color:var(--mint); }
.hero-description{
    color:var(--muted);
    font-size:18px;
    margin:26px auto 32px;
    max-width:620px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.hero-stats{
    display:flex;
    gap:14px;
    margin-top:44px;
    flex-wrap:wrap;
}
.stat{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px 22px;
    min-width:110px;
}
.stat strong{
    display:block;
    font-family:var(--font-head);
    font-size:30px;
    font-weight:700;
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.stat span{ color:var(--muted); font-size:14px; font-weight:600; }

/* What I do — horizontal band under the hero */
.skills-band{
    margin-top:56px;
    background:linear-gradient(160deg,var(--card-2),var(--card));
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:30px 34px;
    box-shadow:var(--shadow);
}
.skills-band-title{
    font-size:20px;
    margin-bottom:22px;
}
.skills-band-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}
.skill-group h5{
    font-family:var(--font-head);
    font-size:12px; letter-spacing:.6px; text-transform:uppercase;
    color:var(--peach); margin-bottom:11px;
}
@media(max-width:760px){
    .skills-band-grid{ grid-template-columns:1fr; gap:22px; }
}

/* ===================== SECTION HEADING ===================== */
.section-heading{ max-width:680px; margin-bottom:54px; }
.section-heading--center{ max-width:none; text-align:center; }
.section-heading h2{
    font-size:clamp(28px,4vw,42px);
    font-weight:700;
    margin-bottom:14px;
}
.section-heading p{ color:var(--muted); font-size:18px; }
.section-heading strong{ color:var(--text); }

/* Sub-heading inside the Projects section (Professional / Personal) */
.subsection-heading{ max-width:680px; margin-bottom:34px; }
.subsection-heading--gap{ margin-top:80px; }
.subsection-heading h3{
    display:inline-block;
    font-size:clamp(22px,3vw,30px);
    font-weight:700;
    margin-bottom:10px;
    padding-bottom:6px;
    border-bottom:3px solid;
    border-image:var(--grad) 1;
}
.subsection-heading p{ color:var(--muted); font-size:17px; }
.subsection-heading strong{ color:var(--text); }

/* ===================== PROFESSIONAL ===================== */
.work-section{ padding-top:30px; }
.project-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:26px;
    margin-bottom:34px;
    transition:transform .25s ease, box-shadow .3s ease, border-color .3s;
}
.project-card:hover{
    transform:translateY(-5px);
    border-color:rgba(91,140,255,.5);
    box-shadow:var(--shadow);
}
.project-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:40px;
    align-items:start;
}
.project-images video{
    border-radius:var(--radius);
    aspect-ratio:16/10;
    object-fit:cover;
    background:#000;
    border:1px solid var(--border);
}
.project-type{
    display:inline-block;
    color:var(--mint);
    font-weight:800;
    font-size:13px;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:10px;
}
.project-info h3{ font-size:30px; }
.project-meta{ color:var(--muted); font-weight:700; margin:6px 0 18px; }
.project-info h4{
    font-size:15px;
    color:var(--peach);
    text-transform:uppercase;
    letter-spacing:.6px;
    margin:22px 0 10px;
}
.bullet-list{ list-style:none; display:grid; gap:11px; }
.bullet-list li{
    color:var(--muted);
    padding-left:30px;
    position:relative;
    font-size:15.5px;
}
.bullet-list li::before{
    content:"";
    position:absolute; left:0; top:7px;
    width:10px; height:10px;
    border-radius:50%;
    background-color:rgba(91,140,255,.28);
    border:1px solid rgba(91,140,255,.6);
}
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-list span{
    font-size:13px; font-weight:700;
    padding:6px 13px; border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
    transition:.2s;
}
.tag-list span:hover{ background:var(--grad-soft); border-color:var(--purple); }

/* ===================== PERSONAL ===================== */
.personal-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}
.personal-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .25s ease, box-shadow .3s ease, border-color .3s;
}
.personal-card:hover{
    transform:translateY(-6px) rotate(-.4deg);
    border-color:rgba(56,225,255,.5);
    box-shadow:var(--shadow-pink);
}
.personal-media{ overflow:hidden; }
.personal-media video{
    aspect-ratio:16/9;
    object-fit:cover;
    background:#000;
    transition:transform .4s ease;
}
.personal-card:hover .personal-media video{ transform:scale(1.04); }
.personal-content{ padding:24px; }
.personal-content h3{ font-size:24px; margin-bottom:6px; }
.personal-content .project-type{ color:var(--purple); margin-bottom:14px; }
.personal-blurb{ color:var(--muted); font-size:15.5px; }

/* ===================== CONTACT ===================== */
.contact-card{
    background:linear-gradient(160deg,var(--card-2),var(--card));
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:clamp(34px,5vw,64px);
    text-align:center;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}
.contact-card::before{
    content:""; position:absolute; inset:0;
    background:var(--grad-soft); opacity:.4; z-index:0;
}
.contact-card > *{ position:relative; z-index:1; }
.contact-card h2{ font-size:clamp(30px,4.5vw,46px); margin-bottom:16px; }
.contact-card > p{ color:var(--muted); font-size:18px; max-width:560px; margin:0 auto 36px; }
.contact-links{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    justify-content:center;
}
.contact-link{
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px 22px;
    min-width:230px;
    transition:transform .2s ease, border-color .25s, background .25s;
}
.contact-link:hover{
    transform:translateY(-4px);
    border-color:var(--pink);
    background:rgba(91,140,255,.12);
}
.contact-icon{
    font-size:26px;
    width:48px; height:48px;
    display:grid; place-items:center;
    border-radius:14px;
    background:var(--grad-soft);
    border:1px solid var(--border);
}
.contact-link strong{ display:block; font-family:var(--font-head); font-size:17px; }
.contact-link small{ color:var(--muted); font-size:13px; }

/* ===================== FOOTER ===================== */
.footer{
    border-top:1px solid var(--border);
    padding:34px 0;
    color:var(--muted);
}
.footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    font-weight:700;
    font-size:14.5px;
}

/* ===================== REVEAL ANIMATION ===================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:920px){
    .hero-grid,
    .project-grid{ grid-template-columns:1fr; }

    .personal-grid{ grid-template-columns:1fr; }

    /* Tighten the hero so the headline + CTAs sit high on the page. */
    .hero{ padding:48px 0 70px; }
    .hero-text h1{ font-size:clamp(30px,8vw,44px); }
    .hl{ white-space:normal; }            /* allow wrapping on narrow phones */
    .hero-description{ font-size:16px; margin:18px 0 24px; }
    .hero-actions .btn{ flex:1; justify-content:center; }

    .header-cta{ display:none; }

    .nav{
        position:fixed;
        top:74px; left:0; right:0;
        flex-direction:column;
        gap:0;
        background:var(--bg-soft);
        border-bottom:1px solid var(--border);
        margin:0;
        padding:0;
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
    }
    .nav.open{ max-height:320px; }
    .nav a{ padding:16px 24px; border-top:1px solid var(--border); width:100%; }
    .nav a::after{ display:none; }

    .menu-toggle{ display:flex; }
}

@media(max-width:560px){
    .section{ padding:80px 0; }
    .stat{ flex:1; }
    .contact-link{ min-width:100%; }
}

/* ===================== MOBILE PERFORMANCE ===================== */
/* On phones the GPU can't afford a 90px blur on 3 large blobs PLUS a
   backdrop-filter on the sticky header PLUS smooth-scroll + decoding video.
   Lighten the expensive paints so scrolling stays smooth. */
@media(max-width:920px){
    .blob{ filter:blur(60px); opacity:.42; }
    .blob-1{ width:340px; height:340px; }
    .blob-2{ width:320px; height:320px; }
    .blob-3{ width:300px; height:300px; }

    /* backdrop-filter is one of the most expensive mobile effects;
       fall back to a solid translucent bar that needs no per-frame blur. */
    .header{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        background:rgba(12,20,48,.92);
    }
}