@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* Add your CSS styles here */

/* Reset some default styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #f4f4f4; /* Light background for content below the layers */
    border-radius: 5px;
}

.sky-layer {
    /* height: 50vh; Takes up half the viewport height */
    /* min-height: 75vh; /* Make the daytime sky taller */
    min-height: 120vh; /* Make the daytime sky even taller */
    /* background-color: #000020; Removed static background */
    /* background: linear-gradient(to bottom, #000010, #000030); Dark gradient instead */
    background: linear-gradient(to bottom, #4682B4, #ADD8E6); /* Steel Blue (matches night end) to Light Blue */
    position: relative; /* Needed for absolute positioning of elements inside */
    overflow: hidden; /* Hide anything that goes outside */
    z-index: 1; /* Ensure sky-layer and its contents are above earth-layer */
    /* border-bottom: 2px solid #a0d8f0; Lighter blue border */ /* Removed border */
}

#star-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure canvas is behind images */
}

/* Basic styling for images in the sky - we'll refine positioning */
.sky-image {
    position: absolute;
    /* z-index: 1; Ensure images are above the canvas */
    /* Images now belong to the day sky, canvas is in night sky */
    z-index: 1; /* Keep them above the day sky background */
    max-width: 100px; /* Adjust size as needed */
    border: 2px solid white; /* Example border */
    border-radius: 50%; /* Make them circular like stars/planets? */
}

/* Example positions - adjust these values */
.sky-image-1 { top: 10%; left: 15%; }
.sky-image-2 { top: 30%; left: 70%; }
.sky-image-3 { top: 50%; left: 40%; }

.rocket-image {
    position: absolute;
    bottom: -200px; /* Raised the rocket */
    left: 75%;    /* Move to the right */
    transform: translateX(-50%); /* Center horizontally at the new left position */
    width: 1250px; /* Adjust width as needed - 5x bigger */
    height: auto; /* Maintain aspect ratio */
    z-index: 2; /* Ensure it's above sky background elements but could be behind clouds if desired */
}

/* Cloud Styles */
.cloud {
    position: absolute;
    /* background: white; /* Removed - Container is invisible */
    /* border-radius: 50px; /* Removed - Container is invisible */
    /* opacity: 0.85; /* Base opacity, will be set on container by JS */
    z-index: 0; /* Below sky images, above background */
    animation: moveClouds linear infinite;
    /* The container needs a size to contain the absolutely positioned puffs, 
       but since puffs are positioned relative to it, setting width/height 
       here isn't strictly necessary unless we want clipping. 
       We'll let the JS control overall appearance via puffs. */
}

/* Remove pseudo-elements */
/*
.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
    width: 70px; 
    height: 70px; 
    top: -30px; 
}

.cloud::before {
    left: 20px; 
}

.cloud::after {
    right: 20px; 
    width: 50px; 
    height: 50px; 
    top: -20px;
}
*/

/* Style for the individual cloud puffs */
.cloud-puff {
    position: absolute;
    background: white;
    border-radius: 50%; /* Make them circular/oval */
    /* Width and height will be set by JS */
}

/* Remove specific cloud positions and durations - will be handled by JS */
/*
.cloud-1 {
    top: 15%;
    left: -200px; 
    animation-duration: 60s; 
    transform: scale(0.8);
}

.cloud-2 {
    top: 25%;
    left: -300px; 
    animation-duration: 75s; 
    transform: scale(1.1);
    opacity: 0.7;
}

.cloud-3 {
    top: 40%;
    left: -150px;
    animation-duration: 50s; 
    transform: scale(0.9);
}

.cloud-4 {
    top: 55%;
    left: -250px;
    animation-duration: 90s; 
    transform: scale(1.0);
    opacity: 0.9;
}
*/

@keyframes moveClouds {
    from {
        /* Start position will be set by JS via inline style */
    }
    to {
        /* Move across the entire viewport width + cloud width */
        transform: translateX(calc(100vw + 300px));
    }
}

.horizon-line {
    height: 5px; /* A thin line */
    background-color: #A0C8E0; /* Light blue-ish to match day sky bottom */
    /* Add a subtle glow to make it prettier */
    box-shadow: 0px 0px 12px 3px #ADD8E6; /* Soft glow matching light sky */
    display: none; /* Hide the horizon line */
}

.earth-layer {
    min-height: 45vh; /* Ensure it takes a good portion of the screen */
    background-color: #7A3C10; /* Darker brown for base/fallback dirt color */

    /* Layer multiple backgrounds for richer texture */
    background-image:
        /* Top layer (was Second): Grass color gradient (blends to transparent dirty green/brown) */
        linear-gradient(to bottom, 
            #6A8E23 0%,  /* Initial somewhat vibrant green */
            #506B2F 40%, /* Darker olive */
            #5A502A 75%, /* Muddy green-brown */
            #6B5B3A 90%, /* Lighter muddy brown (less green) */
            rgba(107, 91, 58, 0.0) 100% /* Fade to transparent brown */
        ),
        /* Second layer (was Third): Dirt/soil color gradient (top adjusted for blend) */
        linear-gradient(to bottom, 
            #8B6943 0%,    /* Top of dirt: medium-light muddy brown to receive grass fade */
            #A0522D 15%, 
            #8B4513 40%, 
            #734A22 65%, 
            #5D3B1A 85%, 
            #472D14 100%
        );

    background-repeat:
        repeat-x, /* Grass color */
        repeat;   /* Dirt layer */

    background-position:
        left top, /* Grass color */
        left top; /* Dirt layer (starts from top, visible below/through grass) */

    background-size:
        auto 10%,  /* Grass color layer: 10% height of parent */
        auto;      /* Dirt layer: covers the whole element, visible in bottom 90% and through fade */

    position: relative;
    overflow: hidden;
}

/* Basic styling for images in the earth */
.earth-image {
    position: absolute;
    max-width: 120px; /* Adjust size */
    border: 3px solid #4a2a0b; /* Darker border */
}

/* Example positions - adjust these values */
.earth-image-1 { bottom: 10%; left: 20%; }
.earth-image-2 { bottom: 30%; left: 65%; }
.earth-image-3 { bottom: 5%; left: 50%; }

.stone-layer {
    min-height: 150vh; /* Adjust height as needed - increased for longer area */
    background-color: #787878; /* Fallback base stone color (slightly darker for contrast) */
    background-image:
        /* Top layer: Horizontal mortar lines for bricks */
        repeating-linear-gradient(to bottom,
            transparent 0, transparent 48px, /* Brick height: 48px */
            rgba(0,0,0,0.15) 48px, rgba(0,0,0,0.15) 50px /* Mortar thickness: 2px */
        ),
        /* Second layer: Vertical mortar lines for bricks (wider spacing) */
        repeating-linear-gradient(to right,
            transparent 0, transparent 148px, /* Brick width: 148px */
            rgba(0,0,0,0.1) 148px, rgba(0,0,0,0.1) 150px /* Mortar thickness: 2px, slightly fainter */
        ),
        /* Third layer: Color gradient from dirt to stone */
        linear-gradient(to bottom, 
            #472D14 0%,    /* End color of dirt from .earth-layer */
            #5A5248 15%,   /* Muddy grey-brown transition */
            #696969 40%,   /* DimGray */
            #888888 70%,   /* Medium grey */
            #A0A0A0 100%   /* Lighter grey */
        );
    background-repeat: repeat, repeat, no-repeat; /* Both texture layers repeat */
    background-size: auto, auto, 100% 100%; /* Textures repeat, gradient covers fully */
    position: relative;
    overflow: hidden;
}

/* Styling for the content below */
header, main, footer {
    padding: 20px;
    text-align: center;
}

header {
    background-color: #eee;
}

footer {
    background-color: #333;
    color: white;
    margin-top: 20px;
}

h1, h2 {
    color: #333;
}

section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
}

.site-title-container {
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    position: absolute; /* Keep it at the top of its relative parent */
    top: 20px; /* Distance from the top */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    z-index: 1000; /* Ensure it's on top of everything */
    padding: 10px;
    /* user-select: none; */ 
}

.main-site-title {
    display: block; /* Makes it take its own line */
    font-size: 3.5vw; /* Responsive font size */
    font-weight: 700; /* Bolder weight */
    color: rgba(255, 255, 255, 0.85); /* White with slight transparency */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.5),
        0 0 10px rgba(0, 220, 255, 0.4),
        0 0 15px rgba(0, 180, 255, 0.3);
    letter-spacing: 2px;
    line-height: 1.1;
}

.sub-site-title {
    display: block; /* Makes it take its own line */
    font-size: 1.8vw; /* Smaller responsive font size */
    font-weight: 400; /* Normal weight */
    color: rgba(220, 220, 255, 0.75); /* Slightly different, softer white/lavender */
    text-shadow: 
        0 0 3px rgba(255, 255, 255, 0.4),
        0 0 7px rgba(0, 200, 255, 0.3);
    letter-spacing: 1.5px;
    margin-top: -0.2em; /* Pull it slightly closer to the main title */
    line-height: 1;
}

.deeper-sky-layer {
    min-height: 100vh; /* Adjust as needed, could match deep-space or be less */
    /* background-color: #000000; /* Completely black - Replaced by gradient */
    background: linear-gradient(to bottom, 
        #000000 0%,        /* Top is black */
        #000000 95%,       /* Mostly black for longer */
        #100510 99%,       /* Very faint, very dark purple transition */
        #000010 100%       /* End with the color of deep-space-layer */
    );
    position: relative; /* For positioning elements within it */
    overflow: hidden;
    z-index: 5; /* Ensure it's on top of other sky layers */
}

#deeper-sky-stars-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind the moon in this layer */
}

.deep-space-layer {
    min-height: 120vh; /* Make deep space very tall */
    background-color: #000010; /* Match gradient start */
    position: relative;
    overflow: hidden;
    /* Ensure isolation for pseudo-element */
    isolation: isolate;
}

.deep-space-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Adjust path, position, and size as needed */
        /* url('images/milkyway_placeholder.png'), */ /* Removed Milky Way */
        url('images/nebula_placeholder.png');
    background-repeat: no-repeat;
    /* Place nebula off-center */
    background-position: 70% 60%;
    /* Size nebula moderately */
    background-size: 40% auto;
    opacity: 0.25; /* Adjust opacity for faintness */
    z-index: -1; /* Place behind the canvas */
    pointer-events: none; /* Make sure it doesn't interfere with mouse events */
}

#deep-space-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Canvas remains above the ::before element */
}

.space-gradient-layer { /* Renamed from .night-sky-layer */
    min-height: 80vh; /* Adjust height for gradient area */
    /* background: linear-gradient(to bottom, #000010, #1a001a, #3a1a3a); Black -> Dark Purple -> Lighter Purple */
    background: linear-gradient(to bottom, #000010, #2a1a4a, #4682B4); /* Black -> Deep Purple -> Steel Blue (to blend with day) */
    position: relative;
    overflow: hidden;
    /* border-bottom: 1px solid #4a2a4a; Subtle purple border */ /* Removed border */
}

#gradient-stars-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}


.moon-image {
    position: absolute;
    top: 15%; /* Adjust as needed for vertical position */
    right: 10%; /* Adjust as needed for horizontal position from the right */
    width: 50vw !important; /* Significantly larger: 50% of viewport width */
    max-width: 1000px !important; /* Allow it to get very large on wide screens */
    min-width: 200px !important; /* Adjust min-width if needed, e.g., 200px */
    height: auto !important; /* Maintain aspect ratio */
    z-index: 1; /* Ensure it's above the canvas in this layer */
    opacity: 0.85; /* Slightly transparent to blend a bit */
}

/* Base styles for photo text containers */
.photo-text-container { /* New base class for common properties */
    position: absolute;
    z-index: 20; /* Ensure they are above the moon/stars but below site title if overlapping */
    display: inline-block; /* This was on moon-photos-trigger, move to container for better layout control */
}

.moon-photos-text-container {
    /* position: absolute; Moved to .photo-text-container */
    top: 35%; /* Adjusted as per summary, was previously lower */
    left: 10%; /* Adjusted as per summary */
    /* display: inline-block; /* This was on moon-photos-trigger, now on .photo-text-container */
}


/* Styles for the "Moon Photos" text and its dropdown - .moon-photos-trigger adjusted */
.photo-text-container .gallery-trigger { /* Apply to all */
    display: inline-block; 
    font-family: 'Orbitron', sans-serif;
    font-size: 3vw; 
    color: rgba(220, 220, 255, 0.9); 
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.5),
        0 0 8px rgba(180, 200, 255, 0.4); 
    border: 1px solid rgba(200, 210, 230, 0.45); 
    padding: 10px 18px; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
    position: relative; /* Crucial for ::after positioning */
    text-decoration: none; 
}

.photo-text-container:hover .gallery-trigger { /* Apply to all */
    background-color: rgba(50, 60, 80, 0.6);
    border-color: rgba(230, 230, 255, 0.85);
    color: rgba(235, 240, 255, 0.95);
}

/* Line animation for the dropdown trigger */
.photo-text-container .gallery-trigger::after { /* Apply to all */
    content: '';
    position: absolute;
    top: 50%;
    left: 100%; 
    transform: translateY(-50%);
    width: 0; 
    height: 1.5px; 
    background-color: rgba(235, 235, 255, 0.7); 
    opacity: 0;
    transition: width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.15s ease-out;
}

.photo-text-container:hover .gallery-trigger::after { /* Apply to all */
    width: 75px; 
    opacity: 1;
}

/* Dropdown content styling - Modernized */
.photo-text-container .gallery-dropdown-content { /* Apply to all */
    position: absolute;
    top: 50%; 
    left: calc(100% + 75px + 20px); /* Position to right of line */
    transform: translateY(-50%) translateX(-20px) scale(0.93); 
    transform-origin: left center; 
    width: 300px; 
    opacity: 0;
    visibility: hidden;
    background-color: rgba(25, 28, 36, 0.75); 
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(220, 220, 230, 0.2); 
    border-radius: 12px; 
    padding: 25px; 
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4); 
    z-index: 10;
    transition: opacity 0.35s ease-out 0.25s, 
                visibility 0.35s ease-out 0.25s, 
                transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.25s;
}

.photo-text-container:hover .gallery-dropdown-content { /* Apply to all */
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.dropdown-image {
    width: 100%;
    height: auto;
    border-radius: 8px; 
    margin-bottom: 18px; 
    border: 1px solid rgba(220, 220, 230, 0.15); 
}

.dropdown-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
    font-size: 0.92rem;
    color: rgba(235, 235, 245, 0.9); 
    line-height: 1.65;
    margin: 0;
}

.cave-area {
    width: 70%; /* Width of the cave opening */
    min-height: 80vh; /* Height of the visible cave area */
    background-color: #181818; /* Very dark grey for cave interior */
    margin: 40vh auto 0 auto; /* 40vh from top of stone, centered horizontally */
    border-radius: 50px 50px 0 0; /* Rounded top corners for cave mouth */
    box-shadow: inset 0px 12px 20px -5px rgba(0,0,0,0.6); /* Inner shadow for depth */
    position: relative; /* For potential future content positioning and torch positioning */
    overflow: hidden; /* Attempt to contain torch glow */
    /* padding: 20px; /* Optional padding for content inside */
}

.torch {
    position: absolute;
    width: 12px; /* Even smaller torch handle */
    height: 70px; /* Shorter torch handle */
    background-color: #4a3b2a; /* Dark wood/metal color */
    border-radius: 2px 2px 0 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    /* transform-origin will be important for rotation + translation */
    transform-origin: center bottom; /* Rotate around the base for a more natural mount */
}

.torch::before { /* Wall mount bracket */
    content: '';
    position: absolute;
    top: 3px; /* Position near the top of the handle */
    left: -5px; /* Offset so it appears connected to the wall/torch junction */
    width: 22px; /* Wider than the handle to suggest a broader base */
    height: 18px; /* Height of the mount */
    background-color: #2E2E2E; /* Dark metallic grey for mount */
    border-radius: 2px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.4), 0 1px 1px rgba(50,50,50,0.3); /* Subtle depth for bracket */
    z-index: -1; /* Place it behind the torch handle */
}

.left-torch {
    left: 2px; /* Position from the left edge of cave-area - even closer */
    top: 50%;  /* Vertically center */
    transform: translateY(-50%) rotate(20deg); /* Center then rotate - INVERSED ANGLE */
}
.left-torch::after {
    animation-delay: -0.4s; /* Desynchronize flicker */
}

.right-torch {
    right: 2px; /* Position from the right edge of cave-area - even closer */
    top: 50%;   /* Vertically center */
    transform: translateY(-50%) rotate(-20deg);  /* Center then rotate - INVERSED ANGLE */
}
.right-torch::after {
    animation-delay: -0.9s; /* Desynchronize flicker */
}

.torch::after { /* This will be the flame */
    content: '';
    position: absolute;
    bottom: 95%; /* Flame sits slightly overlapping top of the torch handle */
    left: 50%;
    /* The flame itself isn't rotated, its parent is. We adjust its base position. */
    transform: translateX(-50%); 
    width: 18px; /* Smaller flame width */
    height: 35px; /* Smaller flame height */
    background: radial-gradient(ellipse at bottom, 
        rgba(255, 230, 150, 0.95) 0%,
        rgba(255, 180, 50, 0.85) 40%,
        rgba(255, 100, 0, 0.6) 70%,
        rgba(200, 50, 0, 0.2) 90%,
        transparent 100%
    );
    border-radius: 50% 50% 20% 20% / 80% 80% 30% 30%; /* Adjusted flame shape */
    filter: blur(1px);
    animation: flicker 4.5s ease-in-out infinite alternate; /* Slower flicker */
}

@keyframes flicker {
    0% {
        opacity: 0.8;
        transform: translateX(-50%) scaleY(0.95) scaleX(1.05);
        box-shadow: 0 -5px 25px 10px rgba(255, 210, 100, 0.55), /* Increased spread & opacity */
                    0 -2px 8px 3px rgba(255, 160, 0, 0.45);   /* Increased inner glow */
        height: 34px;
    }
    15% {
        opacity: 0.95;
        transform: translateX(-48%) scaleY(1.05) scaleX(0.9);
        box-shadow: 0 -6px 30px 12px rgba(255, 220, 120, 0.65),
                    0 -2px 10px 4px rgba(255, 170, 30, 0.55);
        height: 36px;
    }
    35% {
        opacity: 0.7;
        transform: translateX(-52%) scaleY(0.85) scaleX(1.1);
        box-shadow: 0 -4px 20px 8px rgba(255, 200, 90, 0.5),
                    0 -1px 6px 2px rgba(255, 150, 0, 0.4);
        height: 32px;
    }
    55% {
        opacity: 1.0;
        transform: translateX(-50%) scaleY(1.15) scaleX(1.0);
        box-shadow: 0 -7px 35px 14px rgba(255, 225, 130, 0.7),
                    0 -3px 12px 5px rgba(255, 180, 40, 0.6);
        height: 37px;
    }
    70% {
        opacity: 0.75;
        transform: translateX(-51%) scaleY(0.9) scaleX(1.02);
        box-shadow: 0 -5px 25px 10px rgba(255, 210, 100, 0.55),
                    0 -2px 8px 3px rgba(255, 160, 0, 0.45);
        height: 33px;
    }
    85% {
        opacity: 0.9;
        transform: translateX(-49%) scaleY(1.08) scaleX(0.95);
        box-shadow: 0 -6px 30px 12px rgba(255, 220, 120, 0.65),
                    0 -2px 10px 4px rgba(255, 170, 30, 0.55);
        height: 35px;
    }
    100% {
        opacity: 0.8;
        transform: translateX(-50%) scaleY(0.95) scaleX(1.05);
        box-shadow: 0 -5px 25px 10px rgba(255, 210, 100, 0.55),
                    0 -2px 8px 3px rgba(255, 160, 0, 0.45);
        height: 34px;
    }
}

/* New container for Planetary Images - specific positioning */
.planetary-images-text-container {
    /* position: absolute; Moved to .photo-text-container */
    top: 60%; /* Positioned further below the original Moon Photos container */
    left: 10%; /* Align with moon photos, or adjust as needed */
    /* display: inline-block; /* Moved to .photo-text-container */
}

.deep-space-photos-container {
    top: 25%; /* Moved to where Night Sky was */
    left: 10%;
}

.night-sky-photos-container {
    top: 75%; /* Moved below the approximate Milky Way area */
    left: 10%;
}

/* .moon-photos-text-container:hover .moon-photos-trigger {
    background-color: rgba(50, 60, 80, 0.6); 
    border-color: rgba(230, 230, 255, 0.85);
} */ /* This rule is now combined above */

.skyline-photos-container {
    top: 20%; /* Lowered */
    left: 10%;
}

.rocket-photos-container {
    bottom: 15%; /* Raised */
    left: 10%;
}

/* .moon-photos-text-container:hover .moon-photos-trigger {
// ... existing code ...
} */ /* This rule is now combined above */

/* Specific styles for Skyline and Rocket photo triggers in the day sky */
.skyline-photos-container .gallery-trigger,
.rocket-photos-container .gallery-trigger {
    color: #ffffff; /* Pure white text */
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 0.5), /* Darker shadow for contrast on light sky */
        0 0 2px rgba(0,0,0,0.6);
}

/* Brighter line for these specific triggers */
.skyline-photos-container .gallery-trigger::after,
.rocket-photos-container .gallery-trigger::after {
    background-color: rgba(255, 255, 255, 0.9); /* More opaque white line */
}

/* Ensure hover state for these specific triggers maintains good contrast if needed */
.skyline-photos-container:hover .gallery-trigger,
.rocket-photos-container:hover .gallery-trigger {
    /* The default hover background (rgba(50, 60, 80, 0.6)) should still be dark enough for white text */
    /* If not, uncomment and adjust: */
    /* background-color: rgba(70, 90, 120, 0.65); */
    color: #f0f8ff; /* AliceBlue, slightly off-white for hover differentiation */
}

.photo-text-container:hover .gallery-trigger::after { /* Apply to all */
    width: 75px; 
    opacity: 1;
}

.miscellaneous-photos-container {
    top: 30%; /* Position within the cave area */
    left: 50%;
    transform: translateX(-50%); /* Horizontally center */
    /* z-index: 1; /* Ensure it's above cave background if needed, but below torches potentially */
}

/* Specific overrides for Miscellaneous dropdown in the cave */
.miscellaneous-photos-container .gallery-trigger::after {
    top: 100%; /* Start at the bottom of the trigger */
    left: 50%;
    transform: translateX(-50%); /* Center the line horizontally */
    width: 1.5px; /* Line thickness */
    height: 0;    /* Initial height for vertical animation */
    background-color: rgba(235, 235, 255, 0.7); /* Match other lines */
    transition: height 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.15s ease-out; /* Animate height */
}

.miscellaneous-photos-container:hover .gallery-trigger::after {
    height: 40px; /* Vertical length of the line */
    width: 1.5px; /* Ensure width stays for vertical line */
    opacity: 1;
}

.miscellaneous-photos-container .gallery-dropdown-content {
    top: calc(100% + 40px + 10px); /* Position below trigger + line + 10px gap */
    left: 50%;
    transform: translateX(-50%) translateY(-15px) scale(0.95); /* Initial state for animation */
    transform-origin: top center; /* Animate from top center */
    /* Inherits other styles like background, border, shadow, etc. from the general rule */
}

.miscellaneous-photos-container:hover .gallery-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1); /* Final state */
}