/* =====================================
   RESET
===================================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html {

    scroll-behavior:smooth;

}


body {

    background:#090909;

    color:#F5F5F5;

    font-family:'Inter', sans-serif;  

}



/* =====================================
   HEADER
===================================== */


header {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:30px 70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:1000;

    transition:
    padding .5s ease,
    background .5s ease,
    backdrop-filter .5s ease;

}



html, body {
    overflow-x:hidden;
}







header.scrolled {

   

    background:rgba(9,9,9,.88);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,255,255,.08);

}



/* LOGO */


.logo {

    text-decoration:none;

    color:white;

}

.logo {

    display:flex;

    align-items:center;

    gap:18px;

}


.logo-symbol {

    width:60px;

    height:60px;

    object-fit:contain;

    display:block;

}

.logo .name {

    font-family:'Cormorant Garamond', serif;

    font-size:32px;

    letter-spacing:2px;

}

/*  header.scrolled .logo .name {

    font-size:26px;

}*/

.logo .subtitle {

    font-size:11px;

    letter-spacing:5px;

    opacity:.7;

}

/*header.scrolled .logo .subtitle {

    font-size:9px;

    letter-spacing:4px;

}*/

.logo .name,
.logo .subtitle,
nav a {

    transition:.4s ease;

}


/* MENU */


nav {

    display:flex;

    gap:45px;

}



nav a {

    color:white;

    text-decoration:none;

    text-transform:uppercase;

    font-size:14px;

    letter-spacing:2px;

    opacity:.8;

    transition:.3s;

}



nav a:hover {

    color:#B99A52;

    opacity:1;

}



/* =====================================
   HERO
===================================== */


.hero {

    height:100vh;

    min-height:700px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

}



.hero::before {

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,.08),
        rgba(0,0,0,.55)
    ),

    url("../images/hero-titanic.jpg");


    background-size:cover;

    background-position:center;


    filter:

    contrast(1.08)

    brightness(1.05);


    z-index:-1;


    animation:

    cinematicZoom 20s infinite alternate ease-in-out;

}




@keyframes cinematicZoom {


    from {

        transform:scale(1);

    }


    to {

        transform:scale(1.08);

    }


}




.hero-content {

    max-width:900px;

    padding:20px;

}





.hero-small {

    font-size:18px;

    letter-spacing:8px;

    text-transform:uppercase;

    opacity:0;

    animation:

    fadeUp 1.5s forwards;

}




.hero-title {


    margin-top:20px;


    font-family:'Cormorant Garamond', serif;


    font-size:90px;


    font-weight:400;


    line-height:.9;


    letter-spacing:4px;


    opacity:0;


    animation:

    fadeUp 1.5s forwards .5s;

}




.hero-text {


    max-width:600px;


    margin:35px auto;


    font-size:18px;


    line-height:1.7;


    font-weight:300;


    opacity:0;


    animation:

    fadeUp 1.5s forwards 1s;


}





.hero-button {


    display:inline-block;


    padding:18px 45px;


    border:1px solid #B99A52;


    color:white;


    text-decoration:none;


    text-transform:uppercase;


    letter-spacing:3px;


    font-size:13px;


    transition:.4s;


    opacity:0;


    animation:

    fadeUp 1.5s forwards 1.5s;


}




.hero-button:hover {


    background:#B99A52;


    color:#090909;


    transform:translateY(-4px);


}







@keyframes fadeUp {


    from {


        opacity:0;

        transform:translateY(40px);


    }



    to {


        opacity:1;

        transform:translateY(0);


    }


}







/* SCROLL INDICATOR */


.scroll {


    position:absolute;


    bottom:40px;


    left:50%;


    transform:translateX(-50%);


    font-size:12px;


    letter-spacing:4px;


    opacity:.8;


}




.scroll span {


    display:block;


    font-size:25px;


    animation:move 2s infinite;


}




@keyframes move {


    50% {

        transform:translateY(12px);

    }


}






/* =====================================
   INTRO
===================================== */


.intro {


    padding:160px 10%;


    text-align:center;


}





.section-label {


    color:#B99A52;


    font-size:11px;


    letter-spacing:6px;


    text-transform:uppercase;


    margin-bottom:35px;


}





.intro h2 {


    font-family:'Cormorant Garamond', serif;


    font-size:65px;


    font-weight:400;


    line-height:1.1;


}





.intro p:not(.section-label) {


    max-width:700px;


    margin:40px auto 0;


    color:#cccccc;


    font-size:18px;


    line-height:1.8;


}






/* =====================================
   COLLECTION MUSEUM
===================================== */


.museum {


    padding:120px 8%;


}




.museum-item {


    display:flex;


    align-items:center;


    gap:80px;


    margin-bottom:180px;


    padding-bottom:120px;


    position:relative;


    opacity:0;


    transform:translateY(100px);


    transition:

    opacity .9s ease,

    transform .9s ease;


}




.museum-item.show {


    opacity:1;


    transform:translateY(0);


}




.museum-item.reverse {


    flex-direction:row-reverse;


}




/* linea decorativa centrale */

.museum-item:not(:last-child)::after {

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    width:1px;

    height:80px;

    background:#B99A52;

    opacity:.35;

}





/* =====================================
   IMMAGINI COLLECTION
===================================== */


.museum-image {

    flex:1;

    overflow:hidden;

    position:relative;

    display:block;

    text-decoration:none;

}



.museum-image img {

    width:100%;

    display:block;

    filter:
    brightness(.88)
    contrast(1.08)
    saturate(0.95);

    transform:scale(1.06);

    transition:
    transform 1.8s ease,
    filter 1.8s ease;

}


/* movimento cinematografico all'ingresso */

.museum-item.show .museum-image img {

    transform:scale(1);

    filter:
    brightness(1)
    contrast(1.05)
    saturate(1);

}


/* effetto hover elegante */

.museum-image:hover img {

    transform:scale(1.08);

    filter:
    brightness(1.05)
    contrast(1.08)
    saturate(1.05);

}






/* =====================================
   TESTO COLLECTION
===================================== */


.museum-text {

    flex:1;

    opacity:0;

    transform:translateX(40px);


    transition:

    opacity .8s ease,

    transform .8s ease;

}




.museum-item.show .museum-text {

    opacity:1;

    transform:translateX(0);


    transition-delay:.25s;

}





.museum-item.reverse .museum-text {

    transform:translateX(-40px);

}



.museum-item.reverse.show .museum-text {

    transform:translateX(0);

}




.museum-text h2 {


    font-family:'Cormorant Garamond', serif;


    font-size:70px;


    font-weight:400;


    letter-spacing:2px;


    margin-bottom:30px;


}





.museum-text p:not(.section-label) {


    color:#bbbbbb;


    max-width:450px;


    font-size:18px;


    font-weight:300;


    line-height:1.8;


}







/* =====================================
   FOOTER
===================================== */


.footer {


    padding:100px 20px 50px;


    text-align:center;


    background:#050505;
	
	opacity:0;

    transform:translateY(35px);

    transition:

    opacity 1s ease,

    transform 1s cubic-bezier(.22,.61,.36,1);

}

.footer.show {

    opacity:1;

    transform:translateY(0);

}

.footer-logo {


    font-family:'Cormorant Garamond', serif;


    font-size:45px;


    letter-spacing:3px;

}

.footer-symbol,
.footer-logo,
.footer p,
.footer-line {

    opacity:0;

    transform:translateY(15px);

    transition:

    opacity .7s ease,

    transform .7s ease;

}


.footer.show .footer-symbol {

    opacity:1;

    transform:translateY(0);

    transition-delay:.15s;

}


.footer.show .footer-logo {

    opacity:1;

    transform:translateY(0);

    transition-delay:.35s;

}


.footer.show p {

    opacity:1;

    transform:translateY(0);

    transition-delay:.55s;

}


.footer.show .footer-line {

    opacity:1;

    transform:translateY(0);

    transition-delay:.75s;

}

.footer-symbol {

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:25px;

}

.footer p {


    margin-top:15px;


    color:#999;


    letter-spacing:4px;


    font-size:12px;


}



.footer-line {


    width:80px;


    height:1px;


    background:#B99A52;


    margin:40px auto;


}



.copyright {


    letter-spacing:1px;


}


/* =====================================
   ABOUT
===================================== */


.about {

    padding:160px 10%;

    text-align:center;

    background:#090909;

}



.about-content {

    max-width:850px;

    margin:auto;

    opacity:0;

    transform:translateY(35px);

    transition:

    opacity 1s ease,

    transform 1s cubic-bezier(.22,.61,.36,1);

}


.about-content.show {

    opacity:1;

    transform:translateY(0);

}


/* LABEL */

.about-content .section-label {

    opacity:0;

    transform:translateY(15px);

    transition:

    opacity .7s ease,

    transform .7s ease;

}



.about-content.show .section-label {

    opacity:1;

    transform:translateY(0);

    transition-delay:.15s;

}


/* TITOLO */

.about h2 {

    font-family:'Cormorant Garamond', serif;

    font-size:65px;

    font-weight:400;

    line-height:1.1;

    margin-bottom:40px;

    opacity:0;

    transform:translateY(20px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}


.about-content.show h2 {

    opacity:1;

    transform:translateY(0);

    transition-delay:.35s;

}



.about p:not(.section-label) {

    color:#bbbbbb;

    font-size:18px;

    line-height:1.9;

    max-width:700px;

    margin:25px auto;
	
	opacity:0;

    transform:translateY(15px);

    transition:

    opacity .7s ease,

    transform .7s ease;

}

.about-content.show p:not(.section-label){

    opacity:1;

    transform:translateY(0);

    transition-delay:.55s;

}




/* =====================================
   RESPONSIVE TABLET
===================================== */


@media(max-width:900px){



header {


    padding:25px;


}



nav {


    gap:20px;


}



.hero-title {


    font-size:60px;


}



.intro h2 {


    font-size:45px;


}




.museum-item,

.museum-item.reverse {


    flex-direction:column;


}



.museum-text {


    text-align:center;


}



.museum-text h2 {


    font-size:50px;


}



.museum-text p:not(.section-label) {


    margin:auto;


}



}





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


@media(max-width:600px){



/* HEADER */

header {

    padding:20px;

}


header.scrolled {

    padding:20px;

}

/*header.scrolled .logo .name {

    font-size:22px;

    letter-spacing:1px;

}*/

header.scrolled .logo .subtitle {

    font-size:9px;

    letter-spacing:3px;

}

/* LOGO */

.logo {

    line-height:1;

}


.logo-symbol {

    width:60px;

    height:60px;

}


.logo-text {

    display:none;

}


.logo .name {

    font-size:22px;

    letter-spacing:1px;

    white-space:nowrap;

}



.logo .subtitle {

    font-size:9px;

    letter-spacing:3px;

}



/* MENU */

nav {

    gap:8px;

}



nav a {

    font-size:9px;

    letter-spacing:1px;

}



/* ABOUT */

.about {

    padding:100px 25px;

}



.about h2 {

    font-size:40px;

}



.about p:not(.section-label){

    font-size:15px;

}



/* HERO */

.hero {

    min-height:650px;

}



.hero-title {

    font-size:45px;

}



.hero-small {

    font-size:12px;

}



.hero-text {

    font-size:15px;

}



.hero-button {

    padding:15px 30px;

}



/* INTRO */

.intro {

    padding:100px 25px;

}



.intro h2 {

    font-size:38px;

}



/* COLLECTION */

.museum {

    padding:80px 25px;

}



.museum-item {

    margin-bottom:120px;

    padding-bottom:80px;

}



.museum-text h2 {

    font-size:45px;

}



.museum-text p:not(.section-label) {

    font-size:15px;

}



.museum-item:not(:last-child)::after {

    height:40px;

}


/* LIGHTBOX MOBILE BUTTONS */




.lightbox-prev {

    left:15px;

}


.lightbox-next {

    right:15px;

}

}

/* =====================================
   COLLECTION GALLERY PAGES
===================================== */


/* HERO CATEGORIA */

.collection-hero {

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:160px 10% 100px;

    position:relative;

}



.collection-hero::before {

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,.35),
        rgba(9,9,9,1)
    );

    z-index:-1;

}



.collection-hero-content {

    max-width:850px;

}

/* =====================================
   COLLECTION HERO INTRO ANIMATION
===================================== */


.collection-hero-content {

    animation:none;

}

.collection-hero .section-label {

    opacity:0;

    animation:collectionFadeUp .8s ease forwards;

}



.collection-hero h1 {

    opacity:0;

    animation:collectionFadeUp .9s ease forwards .25s;

}



.collection-hero p:not(.section-label) {

    opacity:0;

    animation:collectionFadeUp 1s ease forwards .5s;

}



@keyframes collectionFadeUp {


    from {

        opacity:0;

        transform:translateY(35px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes collectionIntro {


    from {

        opacity:0;

        transform:translateY(50px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}

.collection-hero h1 {

    font-family:'Cormorant Garamond', serif;

    font-size:90px;

    font-weight:400;

    letter-spacing:3px;

    margin-bottom:30px;

}



.collection-hero p:not(.section-label) {

    max-width:650px;

    margin:auto;

    color:#bbbbbb;

    font-size:18px;

    line-height:1.8;

}





/* GALLERY */


.gallery {

    padding:80px 8% 160px;

}



.gallery-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px 40px;

}



.gallery-item {

    overflow:hidden;

    opacity:0;

    transform:
        translateY(35px)
        scale(.97);

    transition:

    opacity .9s ease,

    transform .9s cubic-bezier(.22,.61,.36,1);

}


.gallery-item.show {

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}



.gallery-item img {

    width:100%;

    height:350px;

    object-fit:contain;

    display:block;

    background:#050505;
	
    filter:
    brightness(.9)
    contrast(1.05);

    transition:
        transform 1.8s cubic-bezier(.22,.61,.36,1),
        filter 1.5s ease;

}



.gallery-item:hover img {

    transform:scale(1.04);

    filter:

    brightness(1)

    contrast(1.08);

}



.gallery-caption {

    padding-top:25px;

    opacity:0;

    transform:translateY(15px);

    transition:

    opacity .8s ease,

    transform .8s cubic-bezier(.22,.61,.36,1);

}



.gallery-item.show .gallery-caption {

    opacity:1;

    transform:translateY(0);

    transition-delay:.25s;

}



.gallery-caption h2 {

    font-family:'Cormorant Garamond', serif;

    font-size:35px;

    font-weight:400;
	
	opacity:0;

    transform:translateY(10px);

    transition:

    opacity .6s ease,

    transform .6s ease;

}

.gallery-item.show .gallery-caption h2 {

    opacity:1;

    transform:translateY(0);

    transition-delay:.45s;

}

.gallery-caption p {

    margin-top:10px;

    color:#999;

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;
	
	opacity:0;

    transform:translateY(10px);

    transition:

    opacity .6s ease,

    transform .6s ease;

}

.gallery-item.show .gallery-caption p {

    opacity:1;

    transform:translateY(0);

    transition-delay:.65s;

}



/* =====================================
   GALLERY RESPONSIVE
===================================== */


@media(max-width:900px){


.collection-hero h1 {

    font-size:65px;

}



.gallery-grid {

    grid-template-columns:repeat(2,1fr);

}



}





@media(max-width:600px){


.collection-hero {

    padding:130px 25px 80px;

}



.collection-hero h1 {

    font-size:50px;

}



.collection-hero p:not(.section-label){

    font-size:15px;

}



.gallery {

    padding:60px 25px 100px;

}



.gallery-grid {

    grid-template-columns:1fr;

}



.gallery-caption h2 {

    font-size:30px;

}


}

/* =====================================
   LIGHTBOX
===================================== */


.lightbox {

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:2000;

    opacity:0;

    visibility:hidden;

    transform:scale(.98);

    transition:
        opacity .45s ease,
        transform .65s cubic-bezier(.22,.61,.36,1);

}


.lightbox.active {

    opacity:1;

    visibility:visible;

    transform:scale(1);

}



.lightbox img {

    max-width:90%;

    max-height:90vh;

    object-fit:contain;

    filter:brightness(.85);

    animation:lightboxMedia .65s cubic-bezier(.22,.61,.36,1);

}

#lightbox-video{

    display:none;

    max-width:90%;

    max-height:90vh;

    filter:brightness(.85);

    animation:lightboxMedia .65s cubic-bezier(.22,.61,.36,1);

}


@keyframes lightboxMedia{

    from{

        opacity:0;

        transform:scale(.92);

        filter:brightness(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

        filter:brightness(1);

    }

}

.lightbox-close {

    position:absolute;

    top:30px;

    right:40px;

    font-size:45px;

    color:white;

    cursor:pointer;

    font-weight:300;

}

/* =====================================
   HIDDEN LIGHTBOX IMAGES
===================================== */

.gallery-hidden {

    display:none;

}

/* =====================================
   LIGHTBOX CONTROLS
===================================== */


.lightbox-prev,
.lightbox-next {

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:35px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    border-radius:50%;

    color:white;

    font-size:25px;
	
    font-weight:300;

    cursor:pointer;
	
	padding-bottom:5px;

    transition:

    border-color .4s ease,

    color .4s ease,

    background .4s ease,

    transform .4s ease;

}

.lightbox-prev:hover,
.lightbox-next:hover {

    border-color:#B99A52;

    color:#B99A52;

    background:rgba(185,154,82,.08);

}

.lightbox-prev {

    left:40px;

}



.lightbox-next {

    right:40px;

}




.lightbox-counter {


    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);


    color:white;

    font-size:14px;

    letter-spacing:3px;

}

/* video lightbox */

#lightbox-video{

    display:none;

    max-width:90%;

    max-height:90vh;

}