/* ==========================================
   LAHI - PRE-COLONIAL PAGE
   PART 1
========================================== */

:root{

    --bg:#0b0d12;
    --surface:#141922;
    --surface2:#1b2230;

    --gold:#d4af37;
    --gold-light:#f3d46b;

    --text:#edf2f7;
    --muted:#aeb7c5;

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

    --shadow:
    0 12px 35px rgba(0,0,0,.45);

    --radius:18px;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:
    radial-gradient(circle at top,#232f4b 0%,#10141d 40%,#090b10 100%);

    color:var(--text);

    line-height:1.8;

    overflow-x:hidden;

}
/* ===========================
   NAVIGATION
=========================== */

.navbar{

    position:sticky;
    top:0;

    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 8%;

    background:rgba(15,17,25,.82);

    backdrop-filter:blur(18px);

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

    z-index:1000;

}

.nav-logo a{

    color:var(--gold);

    text-decoration:none;

    font-size:1.8rem;

    font-family:'Playfair Display',serif;

    font-weight:700;

}

.nav-links{

    display:flex;

    list-style:none;

    gap:28px;

}

.nav-links a{

    color:var(--text);

    text-decoration:none;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.nav-links a:hover{

    color:var(--gold);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.3s;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    width:100%;

}

.nav-links a.active{

    color:var(--gold);

}

@media(max-width:768px){

    .navbar{

        flex-direction:column;

        gap:15px;

        padding:15px;

    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

}

/* ============================= */

.wrapper{

    width:min(1200px,92%);
    margin:auto;

    padding:50px 0 80px;

}

/* ============================= */
/* HEADER */
/* ============================= */

header{

    text-align:center;

    margin-bottom:55px;

    position:relative;

}

header::after{

    content:"";

    width:120px;
    height:3px;

    background:linear-gradient(
    to right,
    transparent,
    var(--gold),
    transparent);

    display:block;

    margin:28px auto 0;

}

header h1{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.6rem,6vw,4rem);

    color:var(--gold);

    letter-spacing:1px;

    margin-bottom:15px;

    text-shadow:
    0 0 25px rgba(212,175,55,.35);

}

header p{

    max-width:720px;

    margin:auto;

    color:var(--muted);

    font-size:1.08rem;

}

/* ============================= */
/* TABS */
/* ============================= */

.tab-nav{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.tab-btn{

    padding:15px 28px;

    border-radius:999px;

    border:1px solid rgba(212,175,55,.35);

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

    color:var(--text);

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    backdrop-filter:blur(12px);

}

.tab-btn:hover{

    transform:translateY(-4px);

    border-color:var(--gold);

    color:var(--gold-light);

    box-shadow:

    0 10px 30px rgba(212,175,55,.18);

}

.tab-btn.active{

    background:linear-gradient(
    135deg,
    #c89b2a,
    #f0cb67);

    color:#111;

    border:none;

    font-weight:700;

    box-shadow:

    0 15px 35px rgba(212,175,55,.35);

}

/* ============================= */

.tab-panel{

    display:none;

    animation:fade .6s ease;

}

.tab-panel.active{

    display:block;

}

/* ============================= */

@keyframes fade{

    from{

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

    }

    to{

        opacity:1;
        transform:none;

    }

}
/* ==========================================
   PART 2
   HERO + HISTORY SECTION
========================================== */

/* HERO IMAGE */

.hero-banner{

    width:100%;

    height:430px;

    object-fit:cover;

    border-radius:24px;

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

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

    margin-bottom:45px;

    transition:.5s;

}

.hero-banner:hover{

    transform:scale(1.02);

    box-shadow:
    0 35px 80px rgba(212,175,55,.12);

}

/* SECTION TITLES */

h2{

    font-family:'Playfair Display',serif;

    font-size:2.3rem;

    color:var(--gold);

    margin-bottom:20px;

    text-shadow:
    0 0 18px rgba(212,175,55,.15);

}

.editorial-text{

    font-size:1.1rem;

    color:var(--muted);

    max-width:900px;

    margin-bottom:45px;

}

/* FEATURE GRID */

.grid-2{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-bottom:35px;

}

/* FEATURE BOX */

.feature-box{

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

    backdrop-filter:blur(18px);

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

    border-radius:22px;

    padding:32px;

    transition:.35s;

    box-shadow:
    0 15px 40px rgba(0,0,0,.28);

}

.feature-box:hover{

    transform:translateY(-10px);

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

    box-shadow:
    0 25px 55px rgba(212,175,55,.12);

}

.feature-box h4{

    color:var(--gold);

    font-size:1.2rem;

    margin-bottom:15px;

    font-family:'Playfair Display',serif;

}

.feature-box p{

    color:var(--muted);

    font-size:1rem;

}

/* ACADEMIC NOTE */

.note-box{

    margin-top:35px;

    border-left:5px solid var(--gold);

    background:
    rgba(212,175,55,.05);

}

.note-box h4{

    color:var(--gold-light);

}

.note-box em{

    color:white;

    font-style:italic;

}

/* PARAGRAPHS */

p{

    line-height:1.9;

}
/* ==========================================
   PART 3
   EPIC CARDS
========================================== */

.epic-card{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:0;

    overflow:hidden;

    margin:45px 0;

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

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

    border-radius:24px;

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

    transition:.4s;

}

.epic-card:hover{

    transform:translateY(-10px);

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

    box-shadow:
    0 30px 70px rgba(212,175,55,.12);

}

/* IMAGE */

.epic-media{

    position:relative;

    overflow:hidden;

    min-height:320px;

}

.epic-media img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.epic-card:hover .epic-media img{

    transform:scale(1.08);

}

/* GOLD OVERLAY */

.epic-media::after{

    content:"";

    position:absolute;

    inset:0;

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

}

/* CONTENT */

.epic-details{

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.epic-tag{

    display:inline-block;

    width:max-content;

    padding:7px 14px;

    border-radius:999px;

    background:
    rgba(212,175,55,.12);

    color:var(--gold-light);

    font-size:.8rem;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

    border:1px solid rgba(212,175,55,.25);

}

.epic-title{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    color:white;

    margin-bottom:18px;

}

.epic-desc{

    color:var(--muted);

    font-size:1.03rem;

    line-height:1.9;

    margin-bottom:30px;

}

/* BUTTONS */

.media-links{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.link-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 24px;

    border-radius:999px;

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

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

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.link-btn:hover{

    background:
    linear-gradient(
    135deg,
    #d4af37,
    #f2d574);

    color:#111;

    border-color:transparent;

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(212,175,55,.25);

}
/* ==========================================
   PART 4
   ANIMATIONS + RESPONSIVE
========================================== */

/* Fade Animation */

@keyframes fadeIn{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.tab-panel{

    animation:fadeIn .6s ease;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0a0a0a;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    to bottom,
    #d4af37,
    #9b7b2d);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#f2d574;

}

/* Text Selection */

::selection{

    background:rgba(212,175,55,.35);
    color:white;

}

/* Smooth Scroll */

html{

    scroll-behavior:smooth;

}

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

@media(max-width:950px){

.epic-card{

    grid-template-columns:1fr;

}

.epic-media{

    min-height:260px;

}

.epic-details{

    padding:30px;

}

.hero-banner{

    height:300px;

}

h2{

    font-size:2rem;

}

}

/* PHONE */

@media(max-width:768px){

.wrapper{

    width:92%;

}

header h1{

    font-size:2.3rem;

}

header p{

    font-size:1rem;

}

.tab-nav{

    flex-direction:column;

    align-items:center;

}

.tab-btn{

    width:100%;
    max-width:380px;

}

.grid-2{

    grid-template-columns:1fr;

}

.hero-banner{

    height:240px;

}

.epic-title{

    font-size:1.6rem;

}

.media-links{

    flex-direction:column;

}

.link-btn{

    width:100%;

    justify-content:center;

}

}

/* SMALL PHONES */

@media(max-width:480px){

body{

    padding:25px 15px;

}

header{

    padding:40px 20px;

}

header h1{

    font-size:2rem;

}

.hero-banner{

    height:200px;

}

.feature-box{

    padding:22px;

}

.epic-details{

    padding:22px;

}

h2{

    font-size:1.7rem;

}

.epic-title{

    font-size:1.35rem;

}

.epic-desc{

    font-size:.95rem;

}

}
#progress-bar{

    position:fixed;

    top:0;
    left:0;

    width:0%;
    height:4px;

    background:linear-gradient(
    90deg,
    #d4af37,
    #f2d574);

    z-index:9999;

}
#spotlight{

    position:fixed;

    width:320px;
    height:320px;

    border-radius:50%;

    pointer-events:none;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.15),
    transparent 70%);

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

    z-index:0;

}
body::after{

    content:"";
position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:-1;

}

.bg-orbs

.bg-orbs span{

position:absolute;

width:260px;
height:260px;

border-radius:50%;

filter:blur(90px);

background:
rgba(212,175,55,.08);

animation:
float 18s linear infinite;

}

.bg-orbs span:nth-child(1){

left:5%;
top:10%;

}

.bg-orbs span:nth-child(2){

right:10%;
top:45%;

animation-duration:22s;

}

.bg-orbs span:nth-child(3){

left:35%;
bottom:0;

animation-duration:28s;

}

@keyframes float{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-70px);

}

100%{

transform:
translateY(0);

}

}
.hidden{

opacity:0;

transform:
translateY(60px);

transition:.8s;

}

.show{

opacity:1;

transform:none;

}
.epic-card:hover{

box-shadow:

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

0 0 45px rgba(212,175,55,.18);

}

.feature-box:hover{

box-shadow:

0 0 35px rgba(212,175,55,.18);

}
::selection{

background:#d4af37;

color:#111;

}
header{

backdrop-filter:blur(12px);

background:
rgba(20,25,34,.55);

border-radius:20px;

padding:45px;

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

}
/*=========================
MOBILE NAVBAR
=========================*/

@media (max-width:768px){

    .navbar{

        position:relative;

        padding:16px 20px;

        border-radius:18px;

    }

    .logo{

        font-size:1.3rem;

    }

    .nav-links{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:rgba(8,20,33,.97);

        backdrop-filter:blur(20px);

        border-radius:18px;

        display:none;

        flex-direction:column;

        padding:18px 0;

        gap:0;

        margin-top:10px;

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

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        display:block;

        padding:15px 25px;

        text-align:center;

    }

    .nav-links a::after{

        display:none;

    }

    .menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

        cursor:pointer;

        color:var(--gold);

        font-size:1.6rem;

    }

    .hero{

        padding:150px 20px 100px;

    }

    .hero h1{

        font-size:3.2rem;

    }

    .subtitle{

        letter-spacing:3px;

        font-size:.8rem;

    }

    .description{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:18px;

        margin-bottom:90px;

    }

    .primary-btn,
    .secondary-btn{

        width:260px;

        text-align:center;

    }

    section h2{

        font-size:2.3rem;

    }

    .cards,
    .featured-grid{

        grid-template-columns:1fr;

    }

    .timeline{

        flex-direction:column;

    }

    .timeline::before{

        display:none;

    }

    .time-item{

        width:100%;

    }

    .quote blockquote{

        font-size:2rem;

    }

}

/*=========================
SMALL PHONES
=========================*/

@media (max-width:480px){

    .navbar{

        width:94%;

        margin:12px auto;

    }

    .logo{

        font-size:1.15rem;

    }

    .hero{

        min-height:100vh;

        padding:145px 18px 90px;

    }

    .hero h1{

        font-size:2.4rem;

        line-height:1.2;

    }

    .description{

        font-size:.95rem;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        max-width:280px;

        padding:16px;

    }

    .scroll-indicator{

        bottom:15px;

        font-size:.8rem;

    }

    section{

        padding:80px 0;

    }

    section h2{

        font-size:1.9rem;

        margin-bottom:45px;

    }

    .card,
    .featured-card{

        padding:30px;

    }

    .featured-card h3{

        font-size:1.6rem;

    }

    .quote{

        padding:70px 20px;

    }

    .quote blockquote{

        font-size:1.5rem;

    }

    .quote blockquote::before,
    .quote blockquote::after{

        display:none;

    }

    footer{

        padding:60px 20px;

    }

}

/*=========================
VERY SMALL DEVICES
=========================*/

@media (max-width:360px){

    .hero h1{

        font-size:2rem;

    }

    .description{

        font-size:.9rem;

    }

    .logo{

        font-size:1rem;

    }

}
/* ==========================================
   END
========================================== */