/* =====================================
   Coffee Chronicles
   Style v1.0
===================================== */

/* Reset */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;

    color:#3f2b22;

    background:#e7dccd;

    overflow-x:hidden;

}

/* Background */

.background{

    position:fixed;

    inset:0;

    z-index:-10;

    background:
    radial-gradient(circle at top left,#f6e6c8 0%,transparent 35%),
    radial-gradient(circle at bottom right,#d6b392 0%,transparent 30%),
    linear-gradient(135deg,#efe5d8,#dbc5ab);

}

.gradient{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(255,255,255,.15),
    rgba(0,0,0,.08));

}

.grain{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:
    radial-gradient(#5e4635 1px,transparent 1px);

    background-size:12px 12px;

}

/* ======================
      NAVBAR
====================== */

header{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    z-index:999;

}

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 28px;

    border-radius:22px;

    background:rgba(255,248,241,.58);

    backdrop-filter:blur(18px);

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

    box-shadow:

    0 15px 40px rgba(82,50,27,.12),

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

}

.logo{

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    font-weight:700;

    color:#553829;

}

nav ul{

    display:flex;

    list-style:none;

    gap:14px;

}

/* Buttons */

nav ul li a{

    display:inline-block;

    padding:11px 24px;

    border-radius:999px;

    text-decoration:none;

    color:#4b3426;

    font-weight:500;

    background:

    linear-gradient(

    rgba(255,255,255,.55),

    rgba(255,255,255,.15));

    border:1px solid rgba(130,88,55,.25);

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.6),

    0 4px 10px rgba(60,35,18,.08);

    transition:.35s;

}

nav ul li a:hover{

    transform:translateY(-3px);

    background:

    linear-gradient(

    #f5e5c9,

    #e5c7a0);

    border-color:#9a6a43;

    box-shadow:

    0 12px 20px rgba(72,43,21,.18);

}

/* Intro */

#intro{

    position:fixed;

    inset:0;

    background:#efe2d2;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:5000;

}

.intro-logo{

    font-family:"Cormorant Garamond",serif;

    font-size:72px;

    color:#5a3b2c;

    letter-spacing:2px;

}

.intro-content p{

    text-align:center;

    margin-top:10px;

    color:#8b6a52;

}
/* ===========================
   Hero Section
=========================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    padding:160px 8% 80px;

}

.hero-left{

    flex:1;

}

.hero-left h2{

    font-family:"Cormorant Garamond",serif;

    font-size:72px;

    color:#5b3929;

    margin-bottom:20px;

}

.hero-left blockquote{

    font-size:22px;

    line-height:1.8;

    font-style:italic;

    color:#6f5242;

    margin-bottom:30px;

    max-width:520px;

}

.hero-left p{

    font-size:18px;

    line-height:1.9;

    max-width:520px;

    margin-bottom:35px;

    color:#5d4a3f;

}

/* زر Explore */

#explore{

    padding:14px 34px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:17px;

    color:#fff;

    background:linear-gradient(
    135deg,
    #8d6243,
    #6b4732);

    box-shadow:
    0 10px 25px rgba(70,40,20,.18);

    transition:.35s;

}

#explore:hover{

    transform:translateY(-4px);

}

/* الصورة */

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.hero-frame{

    background:#f9f3eb;

    padding:16px;

    border-radius:28px;

    border:2px solid rgba(120,80,55,.18);

    box-shadow:
    0 20px 45px rgba(60,35,18,.18);

}

.hero-image{

    width:100%;

    max-width:430px;

    display:block;

    border-radius:18px;

}
/* =================================
   AHLAN Style v2
   Hero Magazine Upgrade
================================= */


.hero-left h2 {

    font-size: 96px;

    letter-spacing: 4px;

    line-height: .9;

    position: relative;

}


.hero-left h2::after {

    content: "COFFEE CHRONICLES";

    display:block;

    font-family:"Inter", sans-serif;

    font-size:12px;

    letter-spacing:5px;

    color:#9a7255;

    margin-top:18px;

}



.hero-left blockquote {

    position:relative;

    padding-left:25px;

}



.hero-left blockquote::before {

    content:"“";

    position:absolute;

    left:-5px;

    top:-25px;

    font-family:"Cormorant Garamond",serif;

    font-size:70px;

    color:#c6a06a;

}



.hero-frame {

    position:relative;

    transform:rotate(2deg);

    transition:.5s ease;

}



.hero-frame::before {

    content:"";

    position:absolute;

    inset:-15px;

    border:1px solid rgba(120,80,55,.25);

    border-radius:35px;

    z-index:-1;

}



.hero-frame:hover {

    transform:rotate(0deg) translateY(-8px);

}



.hero-image {

    filter:
    saturate(.9)
    contrast(.95);

}



/* Paper feeling */

.hero-left p {

    letter-spacing:.3px;

}



/* Explore button upgrade */

#explore {

    position:relative;

    overflow:hidden;

}



#explore::before {

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
    );

    transition:.6s;

}


#explore:hover::before {

    left:100%;

}