/* style.css - Versione Definitiva (con galleria rettangolare) ✨ */

:root {
    /* Colori Tema Chiaro */
    --light-bg-rgb: 249, 249, 249;
    --light-bg-alt-rgb: 255, 255, 255;
    --light-text: #333333;
    --light-text-secondary: #777777;
    --light-primary: #00bcd4;
    --light-primary-hover: #0097a7;
    --light-border: #e0e0e0;
    --light-shadow: rgba(0, 0, 0, 0.08);
    --light-popup-bg-rgb: 255, 255, 255;
    --light-popup-border: #dddddd;

    /* Colori Tema Scuro */
    --dark-bg-rgb: 26, 26, 26;
    --dark-bg-alt-rgb: 37, 37, 37;
    --dark-text: #eeeeee;
    --dark-text-secondary: #aaaaaa;
    --dark-primary: #00bcd4;
    --dark-primary-hover: #0097a7;
    --dark-border: #555555;
    --dark-shadow: rgba(0, 0, 0, 0.2);
    --dark-popup-bg-rgb: 51, 51, 51;
    --dark-popup-border: #666666;
    --dark-card-bg-rgb: 44, 44, 44;

    /* Variabili Globali di Design */
    --backdrop-blur-amount: 4px;
    --background-blur-amount: 5px;
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.35s;
    --transition-speed-slow: 0.6s;
    --easing-curve: cubic-bezier(0.25, 0.8, 0.25, 1);
    --focus-outline-color: var(--light-primary);
}

@keyframes kenBurnsEffect {
    0% { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, 2%); }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    position: relative;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    line-height: 1.6;
    transition: color var(--transition-speed-normal) var(--easing-curve), background-color var(--transition-speed-normal) var(--easing-curve);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--dark-text);
    background-color: rgb(var(--dark-bg-rgb));
    --body-text: var(--dark-text);
}

body::before {
    content: '';
    position: fixed;
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    z-index: -2;
    background-image: url('img/Background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    filter: blur(var(--background-blur-amount));
    transition: filter var(--transition-speed-normal) var(--easing-curve);
    animation: kenBurnsEffect 40s ease-in-out infinite alternate;
}

body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAFVBMVEV/v//+/v////9/v39/v39/v3+aIKAxAAAACHRSTlMAAO/vr//9/f32Ie+aAAAAdklEQVQ4y2NgGAWjYBSMglEwCoYBAAEYhQMSGIOBgZkJwbgCx3Ykzp8Bw4z5DILpDAxAl1kgqugDA5gC2WIMyLILZA8MA2ZgBBYgl8tB/ALZHDQtwC6QzUXoCbIZQvoIsg0i+wiyC2S/YBSMglEwCkYBAJ2rVzG0Y6wOAAAAAElFTkSuQmCC');
    opacity: var(--grain-opacity, 0.04);
    pointer-events: none;
    transition: opacity var(--transition-speed-normal) ease-in-out;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(2rem, 5vw, 2.8rem); }
h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { transition: color var(--transition-speed-normal) var(--easing-curve); color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-hover-color); }
:focus-visible { outline: 3px solid var(--focus-outline-color); outline-offset: 4px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }

header {
    padding: 15px 0;
    box-shadow: 0 4px 30px -10px var(--header-shadow);
    position: sticky; top: 0; z-index: 100;
    background-color: var(--header-bg);
    transition: background-color var(--transition-speed-normal) var(--easing-curve);
    backdrop-filter: blur(var(--backdrop-blur-amount));
    -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
}
header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
header .logo img { max-height: 50px; transition: transform var(--transition-speed-normal) var(--easing-curve); }
header .logo:hover img { transform: scale(1.05) rotate(-3deg); }
header .nav-menu { flex-grow: 1; text-align: center; }
header nav ul { list-style: none; padding: 0; margin: 0; display: inline-block; }
header nav ul li { margin-left: 30px; display: inline-block; }
header nav ul li:first-child { margin-left: 0; }
header nav ul li a {
    font-weight: bold; color: var(--nav-link-color);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); padding: 8px 4px;
    display: inline-block; position: relative; overflow: hidden;
    transition: color var(--transition-speed-fast) var(--easing-curve);
}
header nav ul li a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
    background-color: var(--nav-link-hover-color);
    transform: scaleX(0); transform-origin: bottom right;
    transition: transform var(--transition-speed-normal) var(--easing-curve);
}
header nav ul li a:hover { color: var(--nav-link-hover-color); }
header nav ul li a:hover::after { transform: scaleX(1); transform-origin: bottom left; }

header .header-actions { display: flex; align-items: center; gap: 15px; }
#language-toggle-button, #theme-toggle {
    background: none; border: none; cursor: pointer; font-size: 1.5rem;
    padding: 10px; width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--header-icon-color);
    transition: all var(--transition-speed-fast) var(--easing-curve);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    position: relative; overflow: hidden;
}
#language-toggle-button span { font-size: 0.9rem; margin-left: 4px; font-weight: bold; }
#language-toggle-button:hover, #theme-toggle:hover {
    background-color: var(--header-icon-hover-bg); color: var(--header-icon-hover-color);
    transform: scale(1.1) rotate(15deg);
}

#theme-toggle .fa-sun, #theme-toggle .fa-moon {
    transition: transform var(--transition-speed-slow) var(--easing-curve), opacity var(--transition-speed-slow) var(--easing-curve);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg);
}
body[data-theme="dark"] #theme-toggle .fa-sun { transform: translate(-50%, -50%) rotate(-90deg); opacity: 0; }
body[data-theme="dark"] #theme-toggle .fa-moon { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
body[data-theme="light"] #theme-toggle .fa-sun { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
body[data-theme="light"] #theme-toggle .fa-moon { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.language-selector { position: relative; }
.language-popup {
    display: none; position: absolute; top: calc(100% + 10px); right: 0;
    background-color: var(--popup-bg); border: 1px solid var(--popup-border);
    border-radius: 10px; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
    padding: 10px; min-width: 150px; z-index: 110;
    transform-origin: top right;
    transition: opacity var(--transition-speed-fast) var(--easing-curve), transform var(--transition-speed-fast) var(--easing-curve);
    opacity: 0; transform: scale(0.95) translateY(-10px); pointer-events: none;
    backdrop-filter: blur(var(--backdrop-blur-amount)); -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
}
.language-selector:hover .language-popup, .language-popup.visible { display: block; opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.language-popup ul { list-style: none; padding: 0; margin: 0; }
.language-popup li { margin-bottom: 5px; }
.language-popup li:last-child { margin-bottom: 0; }
.language-popup li a {
    display: flex; align-items: center; padding: 10px 14px; color: var(--popup-text-color); border-radius: 8px;
    transition: background-color var(--transition-speed-fast) var(--easing-curve), color var(--transition-speed-fast) var(--easing-curve);
}
.language-popup li a:hover { background-color: var(--popup-hover-bg); color: var(--popup-text-hover-color); }
.language-popup li img { width: 20px; margin-right: 12px; border: 1px solid var(--img-border-color); border-radius: 3px; }

.hero { text-align: center; padding: 180px 20px 150px 20px; position: relative; color: var(--hero-text); overflow: hidden; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--hero-overlay-bg); transition: background-color var(--transition-speed-normal) ease-in-out; }
.hero .container { position: relative; z-index: 1; max-width: 900px; }
.hero h1 { margin-bottom: 20px; color: var(--hero-h1-color); text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.6); }
.hero h2 { margin-bottom: 20px; font-weight: 400; color: var(--hero-p-color); text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); }
.hero p { font-size: 1.3rem; margin-bottom: 40px; color: var(--hero-p-color); max-width: 700px; margin-left: auto; margin-right: auto; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4); }

@keyframes fadeInUpStaggered { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.hero * { animation: fadeInUpStaggered 0.8s var(--easing-curve) both; opacity: 0; }
.hero h1 { animation-delay: 0.2s; }
.hero h2 { animation-delay: 0.4s; }
.hero p { animation-delay: 0.6s; }
.hero .buttons-container { animation-delay: 0.8s; }

.button {
    display: inline-block; padding: 15px 38px; border-radius: 10px;
    font-weight: 700; font-size: 1.05rem; border: 2px solid transparent;
    transition: all var(--transition-speed-fast) var(--easing-curve); cursor: pointer;
    box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden;
}
.button:hover { transform: translateY(-5px); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.2); }
.button:active { transform: translateY(-2px); box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.15); }
.button.primary { background: var(--button-primary-gradient); color: var(--button-primary-text); border: none; padding: 17px 40px; }
.button.primary:hover { filter: brightness(1.1); }
.button.primary::before {
    content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.4) 50%, transparent 80%);
    transform: skewX(-25deg); transition: left var(--transition-speed-slow) var(--easing-curve);
}
.button.primary:hover::before { left: 150%; }
.button.secondary { background-color: var(--button-secondary-bg); color: var(--button-secondary-text); border-color: var(--button-secondary-border); text-shadow: 0 0 2px rgba(0,0,0,0.2); }
.button.secondary:hover { background-color: var(--button-secondary-hover-bg); color: var(--button-secondary-hover-text); border-color: var(--button-secondary-border); }

.section {
    padding: 80px 0; background-image: var(--section-gradient);
    transition: background-image var(--transition-speed-normal) var(--easing-curve);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 1px;
    backdrop-filter: blur(var(--backdrop-blur-amount)); -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
}
.section.bg-alternate { background-image: var(--section-gradient-alt); }
.section h2 { text-align: center; margin-bottom: 60px; color: var(--section-h2-color); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
#about-us p { text-align: center; margin-bottom: 20px; max-width: 800px; margin-left: auto; margin-right: auto; color: var(--card-p-color); line-height: 1.8; text-shadow: 0 0 2px rgba(0,0,0,0.2); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.col img { border-radius: 12px; box-shadow: 0 10px 30px var(--img-shadow); }

@keyframes iconBounce { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(-8deg); } }
.service-card {
    border-radius: 16px; text-align: center;
    transition: transform var(--transition-speed-normal) var(--easing-curve);
    color: var(--card-text-color); position: relative; z-index: 1; padding: 2px;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    border-radius: inherit; background: var(--card-border-gradient);
    opacity: 0; transition: opacity var(--transition-speed-normal) var(--easing-curve);
}
.service-card-content {
    background-color: var(--card-bg); padding: 35px 30px; border-radius: 14px;
    height: 100%; box-sizing: border-box; transition: background-color var(--transition-speed-normal) var(--easing-curve);
}
.service-card:hover { transform: translateY(-12px); }
.service-card:hover::before { opacity: 1; }
.service-card img { max-width: 90px; margin: 0 auto 25px auto; transition: transform var(--transition-speed-slow) var(--easing-curve); }
.service-card:hover img { animation: iconBounce 0.8s var(--easing-curve); }
.service-card h3 { margin-bottom: 15px; font-size: 1.5rem; color: var(--card-h3-color); }
.service-card p { font-size: 1rem; color: var(--card-p-color); line-height: 1.7; }

/* Galleria con miniature rettangolari */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin: 35px 0; }
.gallery.gallery-limited { overflow: hidden; max-height: 600px; transition: max-height var(--transition-speed-slow) ease-out; }
.gallery.gallery-expanded { max-height: 10000px; overflow: visible; transition: max-height 0.8s ease-in; }
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--img-shadow);
}
.gallery-item img {
    border-radius: inherit;
    cursor: pointer;
    border: 1px solid var(--img-border-color);
    transition: transform var(--transition-speed-slow) var(--easing-curve), filter var(--transition-speed-normal) ease;
}
.gallery-item::after {
    content: '\f00e'; /* Icona lente di Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); color: white;
    display: flex; justify-content: center; align-items: center;
    font-size: 2.5rem; opacity: 0;
    transition: opacity var(--transition-speed-normal) var(--easing-curve);
    pointer-events: none; /* Assicura che il click vada sull'immagine */
}
.gallery-item:hover img { transform: scale(1.1); filter: brightness(0.7); }
.gallery-item:hover::after { opacity: 1; }

.center-text { text-align: center; margin-top: 20px; margin-bottom: 20px; color: var(--center-text-color); }
.buttons-container { text-align: center; margin-top: 30px; }

#contact .contact-info { list-style: none; padding: 0; margin-top: 20px; text-align: center; }
#contact .contact-info li { margin-bottom: 20px; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; color: var(--contact-info-color); width: 100%; }
#contact .contact-info i { margin-right: 15px; width: 20px; text-align: center; color: var(--icon-color); transition: transform var(--transition-speed-normal) var(--easing-curve); }
#contact .contact-info a:hover i { transform: scale(1.2); }
#contact .contact-info a { color: var(--contact-link-color); word-break: break-word; position: relative; }

footer {
    padding: 50px 0; text-align: center; background-color: var(--footer-bg);
    border-top: 1px solid var(--footer-border-color); color: var(--footer-text-color);
    transition: all var(--transition-speed-normal) var(--easing-curve);
    box-shadow: 0 -5px 30px -10px rgba(0,0,0,0.08);
    backdrop-filter: blur(var(--backdrop-blur-amount)); -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
}
footer .container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 25px; }
footer nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; }
footer nav ul li { margin: 0 15px; }
footer nav ul li a { color: var(--footer-link-color); transition: color var(--transition-speed-fast) ease-in-out; }

body[data-theme="dark"] {
    --header-bg: rgba(var(--dark-bg-alt-rgb), 0.8); --popup-bg: rgba(var(--dark-popup-bg-rgb), 0.9);
    --section-gradient: linear-gradient(180deg, rgba(var(--dark-bg-rgb), 0.75) 0%, rgba(var(--dark-bg-alt-rgb), 0.75) 100%);
    --section-gradient-alt: linear-gradient(180deg, rgba(var(--dark-bg-alt-rgb), 0.8) 0%, rgba(var(--dark-bg-rgb), 0.8) 100%);
    --card-bg: rgb(var(--dark-card-bg-rgb)); --footer-bg: rgba(var(--dark-bg-alt-rgb), 0.8);
    --header-shadow: var(--dark-shadow); --header-icon-color: var(--dark-text-secondary);
    --header-icon-hover-color: #ffffff; --header-icon-hover-bg: rgba(255, 255, 255, 0.1);
    --nav-link-color: var(--dark-text-secondary); --nav-link-hover-color: var(--dark-primary);
    --popup-border: var(--dark-popup-border); --popup-text-color: var(--dark-text); --popup-text-hover-color: var(--dark-text);
    --popup-hover-bg: rgba(255, 255, 255, 0.1); --hero-text: #ffffff; --hero-h1-color: #ffffff;
    --hero-p-color: var(--dark-text-secondary); --hero-overlay-bg: rgba(0, 0, 0, 0.6);
    --button-primary-gradient: linear-gradient(45deg, var(--dark-primary-hover) 0%, var(--dark-primary) 100%);
    --button-primary-text: #000; --section-h2-color: var(--dark-text); --card-shadow: var(--dark-shadow);
    --card-h3-color: var(--dark-text); --card-p-color: var(--dark-text-secondary); --card-text-color: var(--dark-text);
    --img-shadow: var(--dark-shadow); --img-border-color: rgba(var(--dark-border), 0.5); --link-color: var(--dark-primary);
    --link-hover-color: var(--dark-primary-hover); --footer-border-color: var(--dark-border);
    --footer-text-color: var(--dark-text-secondary); --footer-link-color: #aaa; --footer-link-hover-color: #fff;
    --focus-outline-color: var(--dark-primary); --grain-opacity: 0.04;
    --card-border-gradient: linear-gradient(135deg, #00bcd4, #ff00ff, #00bcd4);
    --button-secondary-bg: rgba(0,0,0,0.2); --button-secondary-text: var(--dark-text-secondary); --button-secondary-border: var(--dark-border);
    --button-secondary-hover-bg: rgba(85,85,85,0.5); --button-secondary-hover-text: var(--dark-text);
}
body[data-theme="light"] {
    color: var(--light-text); background-color: rgb(var(--light-bg-rgb)); --body-text: var(--light-text);
    --header-bg: rgba(var(--light-bg-alt-rgb), 0.8); --popup-bg: rgba(var(--light-popup-bg-rgb), 0.9);
    --section-gradient: linear-gradient(180deg, rgba(var(--light-bg-rgb), 0.75) 0%, rgba(245, 245, 245, 0.75) 100%);
    --section-gradient-alt: linear-gradient(180deg, rgba(var(--light-bg-alt-rgb), 0.8) 0%, rgba(var(--light-bg-rgb), 0.8) 100%);
    --card-bg: rgb(var(--light-card-bg-rgb)); --footer-bg: rgba(var(--light-bg-alt-rgb), 0.8);
    --header-shadow: var(--light-shadow); --header-icon-color: var(--light-text-secondary);
    --header-icon-hover-color: #000000; --header-icon-hover-bg: rgba(0, 0, 0, 0.08);
    --nav-link-color: var(--light-text-secondary); --nav-link-hover-color: var(--light-primary);
    --popup-border: var(--light-popup-border); --popup-text-color: var(--light-text); --popup-text-hover-color: var(--light-text);
    --popup-hover-bg: rgba(0, 0, 0, 0.05); --hero-text: var(--light-text); --hero-h1-color: var(--light-text);
    --hero-p-color: var(--light-text-secondary); --hero-overlay-bg: rgba(255, 255, 255, 0.4);
    --button-primary-gradient: linear-gradient(45deg, var(--light-primary) 0%, var(--light-primary-hover) 100%);
    --button-primary-text: #ffffff; --section-h2-color: var(--light-text); --card-shadow: var(--light-shadow);
    --card-h3-color: var(--light-text); --card-p-color: #666; --card-text-color: var(--light-text);
    --img-shadow: var(--light-shadow); --img-border-color: rgba(var(--light-border), 0.5); --link-color: var(--light-primary);
    --link-hover-color: var(--light-primary-hover); --footer-border-color: var(--light-border);
    --footer-text-color: var(--light-text); --footer-link-color: var(--light-text-secondary); --footer-link-hover-color: var(--light-text);
    --focus-outline-color: var(--light-primary); --grain-opacity: 0.07;
    --card-border-gradient: linear-gradient(135deg, #00c8ff, #007bff, #00c8ff);
    --button-secondary-bg: rgba(255,255,255,0.1); --button-secondary-text: var(--light-text-secondary); --button-secondary-border: var(--light-border);
    --button-secondary-hover-bg: rgba(0,0,0,0.05); --button-secondary-hover-text: #333;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    header .container { flex-direction: column; align-items: center; }
    header .logo { margin-bottom: 15px; }
    header .nav-menu { text-align: center; margin-bottom: 15px; width: 100%; }
    header nav ul { display: block; }
    header nav ul li { margin: 5px 15px; display: inline-block; }
    header .header-actions { margin-top: 10px; }
    .hero { padding: 150px 0 120px 0; }
    .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    #about-us .grid-2 .col { text-align: center; }
    #about-us .grid-2 .col p { margin-left: auto; margin-right: auto; }
    .section { padding: 60px 0; }
    .section h2 { margin-bottom: 40px; }
}

@media (max-width: 768px) {
    html { scroll-padding-top: 60px; }
    header nav ul li { margin: 5px 10px; font-size: 0.95rem; }
    .hero { padding: 100px 0 80px 0; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 30px; }
    .section { padding: 50px 0; }
    .section h2 { margin-bottom: 30px; }
    .service-card-content { padding: 25px; }
    .gallery { grid-template-columns: 1fr; }
    .gallery.gallery-limited { max-height: none; overflow: visible; }
    .buttons-container { display: none; }
    #contact .grid-2 .col:last-child { margin-top: 20px; }
    footer .container { gap: 15px; }
    footer p { font-size: 0.9rem; }
    footer nav ul li { margin: 3px 8px; }
}

/* Lightbox Styles */
.lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9); display: none; justify-content: center;
    align-items: center; z-index: 1000;
    backdrop-filter: blur(var(--backdrop-blur-amount)); -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
    opacity: 0; transition: opacity var(--transition-speed-normal) var(--easing-curve);
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.lightbox-content { position: relative; display: flex; justify-content: center; align-items: center; padding: 10px; box-sizing: border-box; }
#lightbox-image {
    max-width: 90vw; max-height: 85vh; display: block; border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transform: scale(0.95); opacity: 0;
    transition: transform var(--transition-speed-normal) var(--easing-curve), opacity var(--transition-speed-normal) var(--easing-curve);
}
.lightbox.open #lightbox-image { transform: scale(1); opacity: 1; }
.close-button {
    position: absolute; top: 15px; right: 15px; background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center;
    align-items: center; border: 2px solid rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.9); font-size: 1.6rem; cursor: pointer;
    transition: all var(--transition-speed-fast) var(--easing-curve); z-index: 1001;
}
.close-button:hover { color: #ffffff; background-color: rgba(211, 47, 47, 0.8); border-color: #ffffff; transform: scale(1.1) rotate(90deg); }
.nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3); border-radius: 50%;
    width: 45px; height: 45px; display: flex; justify-content: center;
    align-items: center; border: none; color: rgba(255, 255, 255, 0.8);
    font-size: 1.8rem; cursor: pointer; transition: all var(--transition-speed-fast) var(--easing-curve);
    z-index: 1001;
}
.nav-arrow:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.6); transform: translateY(-50%) scale(1.1); }
.nav-arrow:active { transform: translateY(-50%) scale(1.05); }
.nav-arrow.prev { left: 15px; }
.nav-arrow.next { right: 15px; }

main, section { overflow-x: hidden; }