/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Arial',sans-serif; }
body { background:#111; color:#fff; }

/* Common Section Styling */
section { position:relative; padding:80px 20px; max-width:1200px; margin:0 auto; overflow:hidden; }

/* About Section */
#about {
    background: url('../images/bg-about.jpg') center/cover no-repeat fixed;
}
#about::after {
    content:""; position:absolute; top:0; left:0; width:200%; height:100%;
    background: rgba(20,20,20,0.4) url('../images/bg-fog-dark.jpg') repeat;
    opacity:0.3; pointer-events:none; z-index:0;
    animation: fogMove 60s linear infinite, fogShimmer 8s ease-in-out infinite alternate;
}
#about::before {
    content:""; position:absolute; top:0; left:0; width:200%; height:100%;
    background: rgba(150,0,0,0.05) url('../images/bg-fog-red.jpg') repeat;
    opacity:0.1; pointer-events:none; z-index:0;
    animation: fogMove 90s linear infinite reverse, fogShimmer2 10s ease-in-out infinite alternate;
}
#about h2 { position:relative; z-index:1; font-size:3rem; text-align:center; color:#fffbf0; text-shadow:2px2px8px #000; margin-bottom:50px; }
.about-story { position:relative; z-index:1; max-width:800px; margin:0 auto; text-align:center; font-size:1.3rem; line-height:1.8; color:#e0e0e0; }
.about-story .emphasis { font-style:italic; color:#fff; text-shadow:1px1px5px #000; }
.about-story .resurrection { display:block; font-size:1.6rem; font-weight:bold; color:#ff0000; text-shadow:2px2px8px #111; margin-top:20px; }

/* Shop Section */
#shop::after { content:""; position:absolute; top:0; left:0; width:200%; height:100%; background: rgba(20,20,20,0.3) url('../images/bg-fog-dark.jpg') repeat; opacity:0.25; pointer-events:none; z-index:0; animation: fogMove 70s linear infinite, fogShimmer 10s ease-in-out infinite alternate; }
#shop::before { content:""; position:absolute; top:0; left:0; width:200%; height:100%; background: rgba(150,0,0,0.03) url('../images/bg-fog-red.jpg') repeat; opacity:0.08; pointer-events:none; z-index:0; animation: fogMove 100s linear infinite reverse, fogShimmer2 12s ease-in-out infinite alternate; }
#shop h2 { position:relative; z-index:1; text-align:center; font-size:2.5rem; color:#fffbf0; text-shadow:2px2px8px #000; margin-bottom:40px; }
.products { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; position:relative; z-index:1; }
.product { background: rgba(34,34,34,0.8); padding:20px; border-radius:10px; text-align:center; transition:0.3s; }
.product:hover { background: rgba(51,51,51,0.9); }
.product img { width:200px; border-radius:10px; }

/* Cart Icon & Modal */
#cart-icon { position:fixed; top:20px; right:20px; z-index:100; cursor:pointer; font-size:1.5rem; background:#fff; color:#000; padding:10px 15px; border-radius:50px; }
#cart-modal { position:fixed; top:50px; right:20px; width:300px; max-height:400px; overflow-y:auto; background:rgba(20,20,20,0.95); color:#fff; padding:20px; border-radius:10px; display:none; z-index:101; box-shadow:0 0 20px rgba(0,0,0,0.8); backdrop-filter:blur(5px); animation:fadeIn 0.5s ease forwards; }
#cart-modal::before { content:""; position:absolute; top:0; left:0; width:200%; height:100%; background: rgba(150,0,0,0.03) url('../images/bg-fog-red.jpg') repeat; opacity:0.1; pointer-events:none; z-index:0; border-radius:10px; animation:fogMove 90s linear infinite reverse, fogShimmer2 12s ease-in-out infinite alternate; }
#cart-modal h3, #cart-modal ul, #cart-modal p, #cart-modal button { position:relative; z-index:1; }
#cart-modal button { padding:10px; margin-top:10px; background:#ff0000; border:none; color:#fff; border-radius:5px; cursor:pointer; transition:0.3s; }
#cart-modal button:hover { background:#cc0000; }
#cart-items button { padding:5px 8px; font-size:0.9rem; }

/* Lookbook Section */
#lookbook::after { content:""; position:absolute; top:0; left:0; width:200%; height:100%; background: rgba(20,20,20,0.35) url('../images/bg-fog-dark.jpg') repeat; opacity:0.3; pointer-events:none; z-index:0; animation:fogMove 75s linear infinite, fogShimmer 10s ease-in-out infinite alternate; }
#lookbook::before { content:""; position:absolute; top:0; left:0; width:200%; height:100%; background: rgba(150,0,0,0.04) url('../images/bg-fog-red.jpg') repeat; opacity:0.1; pointer-events:none; z-index:0; animation:fogMove 110s linear infinite reverse, fogShimmer2 12s ease-in-out infinite alternate; }
#lookbook h2 { position:relative; z-index:1; text-align:center; font-size:2.5rem; color:#fffbf0; text-shadow:2px2px8px #000; margin-bottom:40px; }
#lookbook .gallery { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; position:relative; z-index:1; }
#lookbook .gallery img { width:250px; border-radius:10px; transition: transform 0.5s ease, filter 0.5s ease; opacity:0; animation:fadeInLookbook 1s forwards; }
#lookbook .gallery img:hover { transform: scale(1.05) rotate(-1deg); filter: brightness(1.1) contrast(1.1); }
#lookbook .gallery img:nth-child(1){animation-delay:0.2s;} #lookbook .gallery img:nth-child(2){animation-delay:0.4s;}
#lookbook .gallery img:nth-child(3){animation-delay:0.6s;} #lookbook .gallery img:nth-child(4){animation-delay:0.8s;}

/* Animations */
@keyframes fogMove {0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes fogShimmer {0%{opacity:0.25;}50%{opacity:0.35;}100%{opacity:0.25;}}
@keyframes fogShimmer2 {0%{opacity:0.05;}50%{opacity:0.15;}100%{opacity:0.05;}}
@keyframes fadeIn {0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}
@keyframes fadeInLookbook {to{opacity:1;}}