:root {
--bg-color: #ebebeb;
    --text-color: #6f5e00;
    --active-link: #EFE9F4;
    --red-layer: #ffffff29;
    --green-layer: #ffffff00;
    --blue-layer: #EFE9F4;
}

body, html {
margin: 0;
padding: 0;
height: 100%;
background-color: var(--bg-color);
font-family: 'Playfair Display', serif;
color: var(--text-color);
overflow: hidden;
}

/* --- MOBILE FIRST BASE STYLES --- */

/* Header */
.header {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.header p {
margin: 4px 0 0 0;
font-size: 0.9rem;
color: #EFE9F4;
}

/* Navigation */
.nav {
position: absolute;
bottom: 30px;
left: 30px;
z-index: 10;
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav > ul > li {
margin-bottom: 12px;
}
.nav a {
text-decoration: none;
color: var(--text-color);
font-size: 1.1rem;
transition: color 0.3s ease;
cursor: pointer;
}
.nav a:hover, .nav li.active > a {
color: var(--active-link);
}

/* Dropdown Styles */
.dropdown-menu {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all 0.4s ease;
padding-left: 15px !important;
margin-top: 0 !important; 
border-left: 1px solid var(--text-color);
}
.dropdown-menu li {
margin-bottom: 8px;
opacity: 0.7; 
transition: opacity 0.3s ease;
}
.dropdown-menu li:hover {
opacity: 1;
}
.dropdown-menu a {
font-size: 0.95rem;
color: #EFE9F4;
}
.dropdown-menu a:hover {
color: var(--text-color);
}
.dropdown.open .dropdown-menu {
max-height: 200px; 
opacity: 1;
transform: translateY(0);
margin-top: 8px !important;
}

/* Center Gallery Stacks */
.gallery-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 380px;
}
.layer {
position: absolute;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
transition: transform 0.4s ease;
}

/* Added animations to layers */
.layer-back {
width: 260px;
height: 180px;
background-color: var(--red-layer);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
animation: float-back 8s ease-in-out infinite;
}
.layer-middle {
width: 180px;
height: 260px;
background-color: var(--green-layer);
top: 20px;
right: 30px;
z-index: 2;
animation: float-middle 6s ease-in-out infinite;
}
.layer-front {
width: 180px;
height: 250px;
background-color: var(--blue-layer);
top: 50px;
left: 30px;
z-index: 3;
background-image: url('/assets/wickerman.jpg');
background-size: cover;
background-position: center;
animation: float-front 7s ease-in-out infinite;

/* ADD THIS FOR THE FRAME */
border: 8px solid #171D1C; /* Change 5px to make the frame thicker or thinner */
box-sizing: border-box; /* Ensures the border doesn't make the element wider than 180x250 */
}

.caption {
position: absolute;
bottom: 40px;
left: 30px;
font-size: 0.8rem;
text-decoration: underline;
text-underline-offset: 4px;
color: #EFE9F4;
z-index: 4;
}

/* Hover animations */
.gallery-wrapper:hover .layer-back {
transform: translate(-52%, -50%) scale(1.02);
}
.gallery-wrapper:hover .layer-middle {
transform: translate(5px, -5px);
}

/* --- ORGANIC FLOATING ANIMATIONS --- */
/* Moving within a subtle 4px to 6px radius */
@keyframes float-back {
0%, 100% { translate: 0px 0px; }
33% { translate: -4px 3px; }
66% { translate: 3px -5px; }
}

@keyframes float-middle {
0%, 100% { translate: 0px 0px; }
33% { translate: 5px -2px; }
66% { translate: -3px 4px; }
}

@keyframes float-front {
0%, 100% { translate: 0px 0px; }
50% { translate: 2px 6px; }
}

/* --- DESKTOP STYLES (768px and up) --- */
@media (min-width: 768px) {
.header {
    top: 60px;
    right: 80px;
    left: auto;
    width: auto;
    text-align: right;
}
.nav {
    bottom: 60px;
    left: 80px;
}
.nav a {
    font-size: 1.3rem;
}
.dropdown-menu a {
    font-size: 1.1rem;
}

.gallery-wrapper {
    width: 600px;
    height: 500px;
}
.layer {
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.layer-back {
    width: 500px;
    height: 350px;
}
.layer-middle {
    width: 320px;
    height: 480px;
    top: -20px;
    right: 60px;
}
.layer-front {
    width: 320px;
    height: 460px;
    top: 30px;
    left: 50px;
}
.caption {
    bottom: -40px;
    left: 50px;
    font-size: 0.85rem;
}

.gallery-wrapper:hover .layer-middle {
    transform: translate(10px, -5px);
}
}