/* =============================================
   L'ARTIGIANO — Custom Animations & Styles
   ============================================= */

/* -----------------------------------------------
   BASE ANIMATIONS — Scroll Reveal
   ----------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* -----------------------------------------------
   ✂️ SCISSORS CUT — Animated Divider
   La forbice scorre lungo la linea tratteggiata
   ----------------------------------------------- */
.scissors-cut {
    position: relative;
    width: 100%;
    padding: 1.5rem 0;
    overflow: hidden;
    background: var(--wp--preset--color--crema-caldo, #FAF0E6);
}

.scissors-line {
    width: 100%;
    height: 40px;
    display: block;
}

.scissors-cut .cut-line {
    stroke-dasharray: 8, 6;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 0s;
}

.scissors-cut .scissors-icon {
    transform: translate(-30px, 5px);
    transition: transform 0s;
}

/* Quando entra in viewport */
.scissors-cut.is-visible .cut-line {
    animation: cutLine 2.5s ease-in-out forwards;
}

.scissors-cut.is-visible .scissors-icon {
    animation: moveScissors 2.5s ease-in-out forwards;
}

@keyframes cutLine {
    0% {
        stroke-dashoffset: 1200;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes moveScissors {
    0% {
        transform: translate(-30px, 5px) rotate(0deg);
    }

    10% {
        transform: translate(50px, 5px) rotate(-5deg);
    }

    20% {
        transform: translate(150px, 5px) rotate(5deg);
    }

    30% {
        transform: translate(250px, 5px) rotate(-5deg);
    }

    40% {
        transform: translate(400px, 5px) rotate(5deg);
    }

    50% {
        transform: translate(550px, 5px) rotate(-5deg);
    }

    60% {
        transform: translate(700px, 5px) rotate(5deg);
    }

    70% {
        transform: translate(850px, 5px) rotate(-5deg);
    }

    80% {
        transform: translate(1000px, 5px) rotate(5deg);
    }

    90% {
        transform: translate(1100px, 5px) rotate(-5deg);
    }

    100% {
        transform: translate(1230px, 5px) rotate(0deg);
    }
}


/* -----------------------------------------------
   🪟 CURTAIN REVEAL — Tendaggio Realistico
   Due teli di tessuto si aprono per svelare il contenuto.
   Pieghe verticali, texture a trama, ombre e tocco dorato.
   ----------------------------------------------- */
.curtain-reveal {
    position: relative;
    overflow: hidden;
}

.curtain-reveal::before,
.curtain-reveal::after {
    content: '';
    position: absolute;
    top: -5%;
    width: 52%;
    height: 110%;
    z-index: 10;
    pointer-events: none;
    transition: transform 2.2s cubic-bezier(0.77, 0, 0.175, 1);

    /* === LAYER 1: Colore base tessuto === */
    background-color: #6B3410;

    /* === LAYER 2: Pieghe verticali (drappeggio) ===
       Alternanza chiaro/scuro per simulare le pieghe della stoffa */
    background-image:
        /* Trama tessuto fine — effetto lino/damasco */
        repeating-linear-gradient(0deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.03) 1px,
            rgba(0, 0, 0, 0.03) 2px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.02) 1px,
            rgba(255, 255, 255, 0.02) 2px),
        /* Pieghe larghe — drappeggio principale */
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.0) 0px,
            rgba(0, 0, 0, 0.15) 20px,
            rgba(0, 0, 0, 0.0) 40px,
            rgba(255, 255, 255, 0.08) 60px,
            rgba(0, 0, 0, 0.0) 80px,
            rgba(0, 0, 0, 0.18) 100px,
            rgba(0, 0, 0, 0.0) 120px,
            rgba(255, 255, 255, 0.06) 140px,
            rgba(0, 0, 0, 0.0) 160px),
        /* Pieghe strette — dettaglio intermedio */
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.0) 0px,
            rgba(255, 255, 255, 0.05) 8px,
            rgba(0, 0, 0, 0.08) 16px,
            rgba(255, 255, 255, 0.03) 24px,
            rgba(0, 0, 0, 0.05) 32px,
            rgba(255, 255, 255, 0.0) 40px),
        /* Riflesso leggero al centro della piega */
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(212, 175, 55, 0.03) 60px,
            transparent 120px);

    /* Ombra interna per profondità */
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.4),
        inset 0 0 200px rgba(0, 0, 0, 0.15);

    /* Leggero ondeggiamento iniziale */
    animation: curtainSway 3s ease-in-out infinite;
}

/* --- TELO SINISTRO --- */
.curtain-reveal::before {
    left: 0;
    transform: translateX(0) skewY(0deg);
    /* Ombra sul bordo destro (profondità della piega) */
    border-right: 2px solid rgba(212, 175, 55, 0.35);
    box-shadow:
        inset -40px 0 80px rgba(0, 0, 0, 0.45),
        inset 0 0 200px rgba(0, 0, 0, 0.15),
        8px 0 25px rgba(0, 0, 0, 0.4);
}

/* --- TELO DESTRO --- */
.curtain-reveal::after {
    right: 0;
    transform: translateX(0) skewY(0deg);
    border-left: 2px solid rgba(212, 175, 55, 0.35);
    box-shadow:
        inset 40px 0 80px rgba(0, 0, 0, 0.45),
        inset 0 0 200px rgba(0, 0, 0, 0.15),
        -8px 0 25px rgba(0, 0, 0, 0.4);
}

/* === Ondeggiamento del tessuto prima dell'apertura === */
@keyframes curtainSway {

    0%,
    100% {
        transform: translateX(0) skewY(0deg);
    }

    25% {
        transform: translateX(2px) skewY(0.15deg);
    }

    75% {
        transform: translateX(-2px) skewY(-0.15deg);
    }
}

/* === APERTURA — I due teli scorrono lateralmente === */
.curtain-reveal.is-visible::before {
    transform: translateX(-105%) skewY(-2deg);
    animation: none;
}

.curtain-reveal.is-visible::after {
    transform: translateX(105%) skewY(2deg);
    animation: none;
}

/* Auto-trigger sul hero dopo caricamento pagina */
.hero-section.curtain-reveal::before,
.hero-section.curtain-reveal::after {
    animation-delay: 0.3s;
}


/* -----------------------------------------------
   🧵 STITCH BORDER — Bordo cucito sulle card
   Un effetto "punto" che appare al passaggio hover
   ----------------------------------------------- */
.stitch-border {
    position: relative;
    padding: 2rem 1.5rem;
    background: var(--wp--preset--color--bianco, #fff);
    border-radius: 4px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Bordo tratteggiato che simula una cucitura */
.stitch-border::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px dashed transparent;
    border-radius: 4px;
    transition: border-color 0.6s ease;
    pointer-events: none;
}

.stitch-border:hover::before {
    border-color: var(--wp--preset--color--oro-antico, #D4AF37);
    animation: stitchDraw 1.2s ease-in-out;
}

.stitch-border:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(44, 44, 44, 0.1),
        0 8px 20px rgba(139, 69, 19, 0.08);
}

@keyframes stitchDraw {
    0% {
        border-color: transparent;
        clip-path: inset(0 100% 0 0);
    }

    100% {
        border-color: var(--wp--preset--color--oro-antico, #D4AF37);
        clip-path: inset(0 0 0 0);
    }
}

/* Icona ago nell'angolo in alto */
.stitch-border::after {
    content: '🪡';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1rem;
    opacity: 0;
    transform: rotate(-45deg) scale(0.5);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

.stitch-border:hover::after {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
}


/* -----------------------------------------------
   📜 FABRIC UNROLL — Sezione si "srotola"
   Rivela il contenuto come un rotolo di tessuto
   ----------------------------------------------- */
.fabric-unroll {
    position: relative;
    overflow: hidden;
}

.fabric-unroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wp--preset--color--ebano, #2C2C2C);
    transform-origin: top center;
    transition: transform 1.4s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 5;
    pointer-events: none;
}

.fabric-unroll.is-visible::before {
    transform: scaleY(0);
    transform-origin: top center;
}

/* Dettaglio: linea "rullo" in alto */
.fabric-unroll.is-visible::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--wp--preset--color--oro-antico, #D4AF37), transparent);
    opacity: 0;
    animation: rollShine 0.8s ease 1s forwards;
    z-index: 6;
}

@keyframes rollShine {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}


/* -----------------------------------------------
   SERVICE CARDS — Stile aggiuntivo
   ----------------------------------------------- */
.service-card {
    text-align: center;
}

.service-card .wp-block-heading {
    transition: color 0.3s ease;
}

.service-card:hover .wp-block-heading {
    color: var(--wp--preset--color--cuoio, #8B4513);
}


/* -----------------------------------------------
   MATERIAL CARDS — Hover glow
   ----------------------------------------------- */
.material-card .wp-block-group {
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.material-card:hover .wp-block-group {
    border-color: var(--wp--preset--color--oro-antico, #D4AF37) !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
    transform: translateY(-4px);
}


/* -----------------------------------------------
   PORTFOLIO GALLERY — Hover overlay
   ----------------------------------------------- */
.portfolio-gallery .wp-block-image {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.portfolio-gallery .wp-block-image img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-gallery .wp-block-image:hover img {
    transform: scale(1.08);
}

.portfolio-gallery .wp-block-image figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 1rem;
    background: linear-gradient(transparent, rgba(44, 44, 44, 0.9));
    color: var(--wp--preset--color--crema, #F5F5DC);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-gallery .wp-block-image:hover figcaption {
    transform: translateY(0);
}


/* -----------------------------------------------
   ABOUT IMAGE — Soft shadow & reveal
   ----------------------------------------------- */
.about-image img {
    border-radius: 4px;
    box-shadow: 20px 20px 0 var(--wp--preset--color--oro-antico, #D4AF37),
        25px 25px 60px rgba(0, 0, 0, 0.15);
}


/* -----------------------------------------------
   HEADER — Glass effect on scroll
   ----------------------------------------------- */
.wp-block-group[style*="position:sticky"] {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(44, 44, 44, 0.92) !important;
    transition: background-color 0.3s ease;
    z-index: 100;
}


/* -----------------------------------------------
   SMOOTH SCROLL
   ----------------------------------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}


/* -----------------------------------------------
   RESPONSIVE — Mobile optimizations
   ----------------------------------------------- */
@media (max-width: 782px) {
    .scissors-cut {
        display: none;
        /* Forbici troppo piccole su mobile */
    }

    .curtain-reveal::before,
    .curtain-reveal::after {
        display: none;
        /* Il tendaggio è troppo pesante su mobile */
    }

    .stitch-border {
        margin-bottom: 1.5rem;
    }

    .about-image img {
        box-shadow: 10px 10px 0 var(--wp--preset--color--oro-antico, #D4AF37),
            12px 12px 30px rgba(0, 0, 0, 0.15);
    }

    .portfolio-gallery .wp-block-image figcaption {
        transform: translateY(0);
        /* Sempre visibile su mobile */
        position: relative;
        background: var(--wp--preset--color--ebano, #2C2C2C);
        padding: 0.8rem;
    }
}


/* -----------------------------------------------
   SELECTION — Colore selezione testo
   ----------------------------------------------- */
::selection {
    background: var(--wp--preset--color--oro-antico, #D4AF37);
    color: var(--wp--preset--color--ebano, #2C2C2C);
}

::-moz-selection {
    background: var(--wp--preset--color--oro-antico, #D4AF37);
    color: var(--wp--preset--color--ebano, #2C2C2C);
}