/* ==========================================================================
   DANIELE CAZZATO — Homepage CSS
   Sito: veroadv.artiweb.it
   Pagina: Homepage (ID 207) — Oxygen Builder
   ========================================================================== */


/* --------------------------------------------------------------------------
   GOOGLE FONTS
   -------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&family=Jost:wght@300;400;500&display=swap");


/* --------------------------------------------------------------------------
   BASE / BODY
   -------------------------------------------------------------------------- */

body {
    font-family: "Jost", sans-serif;
    font-weight: 300;
    color: #2C2825;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    margin: 0;
}

/* Grain texture overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* --------------------------------------------------------------------------
   FIX CENTRATURA — Oxygen wrapper globale
   -------------------------------------------------------------------------- */

.ct-section-inner-wrap {
    max-width: 100% !important;
}


/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */

@keyframes heroGlow {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
    100% { transform: translate(30px, -20px) scale(1.1); opacity: 1; }
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50%      { opacity: 1;   transform: scaleY(1); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   SEZIONE 1 — HERO
   ========================================================================== */

#section-1-hero {
    min-height: 100vh;
    background-color: #FAF8F5;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section-1-hero > .ct-section-inner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

/* Cerchio dorato in alto a destra */
#section-1-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 162, 101, 0.15) 0%, transparent 70%);
    animation: heroGlow 8s ease-in-out infinite alternate;
    z-index: 0;
}

/* Cerchio chiaro in basso a sinistra */
#section-1-hero::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 227, 220, 0.5) 0%, transparent 70%);
    animation: heroGlow 10s ease-in-out infinite alternate-reverse;
    z-index: 0;
}

/* Contenuto hero */
#div-2-hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Linea decorativa sopra il titolo */
#div-3-hero-line {
    width: 50px;
    height: 1px;
    background-color: #C4A265;
    margin: 0 auto 2rem;
    animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* Titolo principale */
#headline-4-hero-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.05;
    color: #2C2825;
    text-align: center;
    animation: fadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

/* Sottotitolo (es. "SCULTORE · PITTORE · FOTOGRAFO") */
#text-5-hero-subtitle {
    font-family: "Jost", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #C4A265;
    margin-top: 1.5rem;
    text-align: center;
    animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}

/* Location */
#text-6-hero-location {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: #B8B0A5;
    margin-top: 1.2rem;
    text-align: center;
    animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

/* Indicatore scroll */
#div-7-scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
    animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
}

#text-8-scroll-text {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #B8B0A5;
}

#div-9-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #C4A265, transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}


/* ==========================================================================
   SEZIONE 2 — ABOUT
   ========================================================================== */

#section-10-about {
    background-color: #FEFEFE;
}

#section-10-about > .ct-section-inner-wrap {
    padding: 7rem 3rem;
}

/* Layout a due colonne */
#div-11-about-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 5rem;
}

/* Colonna testo (sinistra) */
#div-12-about-text {
    width: 50%;
}

/* Label "CHI SONO" */
#text-13-about-label {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 1.5rem;
}

/* Titolo about */
#headline-14-about-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    line-height: 1.2;
    color: #2C2825;
    margin-bottom: 2.5rem;
}

/* Paragrafi about */
#text-15-about-p1,
#text-16-about-p2 {
    font-family: "Jost", sans-serif;
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.85;
    color: #6B6460;
    margin-bottom: 1.5rem;
}

/* Colonna aside (destra) — citazione + discipline */
#div-17-about-aside {
    width: 50%;
    padding: 3rem;
    background-color: #FAF8F5;
    border-left: 2px solid #C4A265;
}

/* Citazione */
#text-18-blockquote {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: #2C2825;
    margin-bottom: 1.5rem;
}

/* Contenitore tag discipline */
#div-19-disciplines {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Singolo tag disciplina */
#div-19-disciplines > .ct-text-block {
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    border: 1px solid #E8E3DC;
    color: #6B6460;
    transition: all 0.3s ease;
    display: inline-block;
}

#div-19-disciplines > .ct-text-block:hover {
    border-color: #C4A265;
    color: #C4A265;
}

/* Tag individuali (stili Oxygen) */
#text-20-tag1, #text-21-tag2, #text-22-tag3,
#text-23-tag4, #text-24-tag5, #text-25-tag6 {
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    color: #6B6460;
}


/* ==========================================================================
   SEZIONE 3 — HIGHLIGHTS (Percorso Artistico)
   ========================================================================== */

#section-30-highlights {
    background-color: #FAF8F5;
}

#section-30-highlights > .ct-section-inner-wrap {
    padding: 7rem 3rem;
}

#div-31-highlights-inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* Label "PERCORSO" */
#text-32-highlights-label {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 1.5rem;
}

/* Titolo highlights */
#headline-33-highlights-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    line-height: 1.2;
    color: #2C2825;
    margin-bottom: 2.5rem;
}

/* Griglia 3 colonne */
#div-34-highlights-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem;
}

/* Card highlights */
#div-35-card1,
#div-39-card2,
#div-43-card3 {
    padding: 2.5rem;
    background-color: #FEFEFE;
    border: 1px solid #E8E3DC;
    position: relative;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

/* Linea dorata animata al top della card */
#div-35-card1::before,
#div-39-card2::before,
#div-43-card3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #C4A265;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#div-35-card1:hover::before,
#div-39-card2:hover::before,
#div-43-card3:hover::before {
    width: 100%;
}

/* Hover card: alza e ombra */
#div-35-card1:hover,
#div-39-card2:hover,
#div-43-card3:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(44, 40, 37, 0.06);
}

/* Anno */
#text-36-year1,
#text-40-year2,
#text-44-year3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: #C4A265;
    margin-bottom: 1rem;
    line-height: 1;
}

/* Titolo card */
#headline-37-card1-title,
#headline-41-card2-title,
#headline-45-card3-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #2C2825;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

/* Descrizione card */
#text-38-card1-desc,
#text-42-card2-desc,
#text-46-card3-desc {
    font-family: "Jost", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.7;
    color: #6B6460;
}


/* ==========================================================================
   SEZIONE 4 — WORKS (Opere Selezionate)
   ========================================================================== */

#section-50-works {
    background-color: #FEFEFE;
}

#section-50-works > .ct-section-inner-wrap {
    padding: 7rem 3rem;
}

#div-51-works-inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* Label "OPERE" */
#text-52-works-label {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 1.5rem;
}

/* Titolo works */
#headline-53-works-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    line-height: 1.2;
    color: #2C2825;
    margin-bottom: 2.5rem;
}

/* Griglia 2 colonne */
#div-54-works-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5rem;
}

/* Card opera */
#div-55-work1,
#div-63-work2,
#div-71-work3,
#div-79-work4 {
    background-color: #FAF8F5;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover card opera */
#div-55-work1:hover,
#div-63-work2:hover,
#div-71-work3:hover,
#div-79-work4:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 80px rgba(44, 40, 37, 0.08);
    cursor: pointer;
}

/* Area visuale (immagine placeholder) */
#div-56-work1-visual,
#div-64-work2-visual,
#div-72-work3-visual,
#div-80-work4-visual {
    width: 100%;
    height: 300px;
    background-color: #F5F1EB;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Overlay gradient dorato sull'immagine */
#div-56-work1-visual::after,
#div-64-work2-visual::after,
#div-72-work3-visual::after,
#div-80-work4-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(196, 162, 101, 0.08) 100%);
    pointer-events: none;
}

/* Testo placeholder immagine */
#text-57-work1-placeholder,
#text-65-work2-placeholder,
#text-73-work3-placeholder,
#text-81-work4-placeholder {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-style: italic;
    color: #B8B0A5;
}

/* Area info opera */
#div-58-work1-info,
#div-66-work2-info,
#div-74-work3-info,
#div-82-work4-info {
    padding: 2.5rem;
}

/* Categoria opera */
#text-59-work1-cat,
#text-67-work2-cat,
#text-75-work3-cat,
#text-83-work4-cat {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 0.8rem;
}

/* Titolo opera */
#headline-60-work1-title,
#headline-68-work2-title,
#headline-76-work3-title,
#headline-84-work4-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    color: #2C2825;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

/* Descrizione opera */
#text-61-work1-desc,
#text-69-work2-desc,
#text-77-work3-desc,
#text-85-work4-desc {
    font-family: "Jost", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.75;
    color: #6B6460;
}

/* Freccia "Scopri" */
#text-62-work1-arrow,
#text-70-work2-arrow,
#text-78-work3-arrow,
#text-86-work4-arrow {
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #C4A265;
    margin-top: 1.2rem;
    transition: letter-spacing 0.3s ease;
}

#text-62-work1-arrow:hover,
#text-70-work2-arrow:hover,
#text-78-work3-arrow:hover,
#text-86-work4-arrow:hover {
    letter-spacing: 0.3em;
}


/* ==========================================================================
   SEZIONE 5 — CONTACT
   ========================================================================== */

#section-90-contact {
    background-color: #FEFEFE;
}

#section-90-contact > .ct-section-inner-wrap {
    padding: 7rem 3rem;
}

#div-91-contact-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Label "CONTATTI" */
#text-92-contact-label {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 1.5rem;
}

/* Titolo contatti */
#headline-93-contact-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    line-height: 1.2;
    color: #2C2825;
    margin-bottom: 1.5rem;
}

/* Divider dorato */
#div-94-contact-divider {
    width: 50px;
    height: 1px;
    background-color: #C4A265;
    margin: 0 auto 3rem;
}

/* Indirizzo */
#text-95-contact-address {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 300;
    font-style: italic;
    color: #6B6460;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Riga email + telefono */
#div-96-contact-details {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 3rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

#div-97-detail-email,
#div-100-detail-phone {
    text-align: center;
}

/* Label email/telefono */
#text-98-email-label,
#text-101-phone-label {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #C4A265;
    margin-bottom: 0.4rem;
}

/* Valore email/telefono */
#text-99-email-value,
#text-102-phone-value {
    font-family: "Jost", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: #6B6460;
}

/* Social links */
#div-103-socials {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 2rem;
    margin-top: 3rem;
}

#div-103-socials > .ct-text-block {
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #B8B0A5;
    position: relative;
    transition: color 0.3s ease;
    cursor: pointer;
}

#div-103-socials > .ct-text-block:hover {
    color: #C4A265;
}

/* Social individuali (stili Oxygen) */
#text-104-social1,
#text-105-social2,
#text-106-social3,
#text-107-social4 {
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #B8B0A5;
}


/* ==========================================================================
   SEZIONE 6 — FOOTER
   ========================================================================== */

#section-110-footer {
    background-color: #F5F1EB;
    text-align: center;
}

#section-110-footer > .ct-section-inner-wrap {
    padding: 2rem 3rem;
    text-align: center;
}

#text-111-footer-text {
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: #B8B0A5;
    text-align: center;
}


/* ==========================================================================
   RESPONSIVE — Tablet (max 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

    /* About: da 2 colonne a 1 */
    #div-11-about-inner {
        flex-direction: column;
        gap: 3rem;
    }

    #div-12-about-text,
    #div-17-about-aside {
        width: 100%;
    }

    /* Highlights: da 3 colonne a 1 */
    #div-34-highlights-grid {
        grid-template-columns: 1fr !important;
    }

    /* Works: da 2 colonne a 1 */
    #div-54-works-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   RESPONSIVE — Mobile (max 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* Padding ridotto per le sezioni */
    #section-10-about > .ct-section-inner-wrap,
    #section-30-highlights > .ct-section-inner-wrap,
    #section-50-works > .ct-section-inner-wrap,
    #section-90-contact > .ct-section-inner-wrap {
        padding: 4rem 1.5rem;
    }

    /* Contatti: dettagli in colonna */
    #div-96-contact-details {
        flex-direction: column !important;
        gap: 1.5rem;
    }

    /* Social: wrap */
    #div-103-socials {
        flex-wrap: wrap;
        gap: 1.2rem;
    }
}