*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:'Cormorant Garamond',serif;

background:#f7f2ea;

opacity:0;

transition:opacity 1.2s ease;

}

.hero{

    position:relative;

    overflow:hidden;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.35)
    ),
    url("assets/images/01-story/story.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;



}

.overlay{

    text-align:center;

    color:white;

    padding:60px;

    border-radius:30px;

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

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

    backdrop-filter:blur(12px);

    animation:fade 2s ease;

    max-width:850px;



}

.small{

letter-spacing:8px;

font-size:15px;

margin-bottom:20px;

}

h1{

    font-size:96px;

    font-family:"Playfair Display",serif;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:25px;

    animation:floatTitle 5s ease-in-out infinite;



}

.subtitle{

    font-size:30px;

    line-height:1.9;

    max-width:650px;

    margin:auto;

    opacity:.95;

}

button{

    margin-top:50px;

    padding:18px 52px;

    font-size:18px;

    letter-spacing:2px;

    background:white;

    color:#333;

    border:none;

    border-radius:999px;

    cursor:pointer;

    transition:.35s;

}

button:hover{

    transform:translateY(-4px);

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


}.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:26px;

    opacity:.7;

    animation:bounce 2s infinite;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.chapter{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    background:#f7f2eb;

    color:#4b3d35;

    text-align:center;

    padding:150px 30px;
    transition:
background-color 1.2s ease;

    position:relative;

}

.chapter-number{

    letter-spacing:6px;

    font-size:14px;

    color:#9b7d62;

}

.chapter h2{

    font-size:82px;

    font-family:"Playfair Display",serif;

    font-weight:600;

    margin:25px 0;

    letter-spacing:2px;

}

.chapter-date{

    font-size:22px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#a68c78;

    margin-bottom:60px;



}.story-photo{

    display:block;

    width:420px;

    max-width:90%;

    height:auto;

    margin:80px auto;

    border-radius:24px;

    object-fit:cover;

    box-shadow:0 45px 100px rgba(0,0,0,.16);

    transition:.45s;



}


.story-photo:hover{

    transform:

    translateY(-10px)

    scale(1.02);

    box-shadow:0 55px 120px rgba(0,0,0,.22);



}.story-text{

    width:780px;

    max-width:88%;

    margin:110px auto;

    font-size:30px;

    line-height:2.35;

    color:#64554a;

    font-weight:400;




}#chapter2{

    background:#f4efe8;


}.wide-photo{

    width:650px;

    max-width:92%;

    margin-top:70px;

}.quote{

    width:750px;

    max-width:90%;

    margin:120px auto;

    font-size:42px;

    line-height:1.8;

    font-style:italic;

    color:#8b7463;



}.wide-photo{

    width:700px;

    max-width:95%;

    border-radius:20px;

    margin-top:70px;

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

}#chapter3{

    background:#f9f4ef;

}#chapter4{

    background:#f5efe8;

}.photo-row{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin:60px auto;

}

.gallery-photo{

    width:340px;

    border-radius:22px;

    transition:.4s;

    box-shadow:0 35px 70px rgba(0,0,0,.15);

}

.gallery-photo:hover{

    transform:translateY(-8px);

}.ending{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    padding:120px 40px;

    background:white;

}

.ending h1{

    font-size:60px;

    margin-bottom:50px;

}

.ending p{

    width:800px;

    max-width:90%;

    line-height:2.2;

    font-size:26px;

}

.ending h2{

    margin-top:90px;

    font-size:42px;

}

.ending h3{

    margin-top:15px;

    font-size:32px;

    font-style:italic;

    color:#9b8573;

}/* ===========================
   Scroll Reveal Animation
=========================== */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:all 1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}/* ===========================
   Floating Title
=========================== */

@keyframes floatTitle {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }

}/* ======================================
   MOBILE RESPONSIVE
====================================== */

@media (max-width:768px){

    .overlay{

        padding:35px 25px;

        width:90%;

    }

    h1{

        font-size:56px;

    }

    .subtitle{

        font-size:22px;

        line-height:1.7;

    }

    .small{

        font-size:13px;

        letter-spacing:5px;

    }

    button{

        font-size:16px;

        padding:16px 36px;

    }

}@media (max-width:768px){

    .story-photo{

        width:95%;

        margin:45px auto;

    }

    .wide-photo{

        width:95%;

    }

    .gallery-photo{

        width:100%;

    }

    .photo-row{

        flex-direction:column;

        align-items:center;

        gap:20px;

    }

}
.for-hao{

    font-size:18px;

    letter-spacing:8px;

    text-transform:uppercase;

    opacity:.75;

    margin-bottom:8px;

}

.from-dat{

    font-size:14px;

    letter-spacing:5px;

    opacity:.55;

    margin-bottom:45px;

}/* ====================================
   Cinematic Fade
==================================== */

.fade-item{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.fade-item.show{

    opacity:1;

    transform:translateY(0);

}.fade-item:nth-child(1){

transition-delay:.1s;

}

.fade-item:nth-child(2){

transition-delay:.2s;

}

.fade-item:nth-child(3){

transition-delay:.3s;

}

.fade-item:nth-child(4){

transition-delay:.4s;

}

.fade-item:nth-child(5){

transition-delay:.5s;

}.chapter h2::after{

    content:"";

    display:block;

    width:80px;

    height:2px;

    background:#ccb39f;

    margin:20px auto 0;

}.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(255,255,255,.08),

        transparent 65%

    );

    pointer-events:none;

}#chapter5{

background:#f5f2ed;

}

#chapter6{

background:#f8f5f0;

}

#chapter7{

background:#f6f2ec;

}

#chapter8{

background:#f4f0ea;

}

#chapter9{

background:#faf8f5;

}/* ==========================
   Music Player
========================== */

.music-player{

    position:fixed;

    right:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:16px 22px;

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

    backdrop-filter:blur(18px);

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

    border-radius:20px;

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

    z-index:9999;

    transition:.35s;

}.music-player:hover{

    transform:translateY(-4px);

}#play-btn{

    width:55px;

    height:55px;

    border-radius:50%;

    border:none;

    background:#fff;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}#play-btn:hover{

    transform:scale(1.08);

}#play-btn:hover{

    transform:scale(1.08);

}.song-artist{

    font-size:14px;

    color:#998779;

}/* ==========================
   Loading Screen
========================== */

#loader{

    position:fixed;

    inset:0;

    background:#f7f2ea;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity 1s ease;

}#loader h1{

    font-size:80px;

    font-family:"Playfair Display",serif;

    margin-bottom:30px;

}#loader p{

    font-size:24px;

    text-align:center;

    line-height:2;

    color:#8b7566;

}#loader.hide{

    opacity:0;

    pointer-events:none;

}.footer{

    text-align:center;

    padding:60px 20px;

    color:#a59386;

    font-size:18px;

    letter-spacing:2px;

}