/* =========================================================================
   DEMO WELCOME 40 ANNI - Proposta D / LAYOUT B ("overlay + CTA fuori")
   Usato da demo-01.aspx

   BREAKPOINT (da specifica cliente):
   - base (mobile): copy overlay sulla foto, bottom 3%, tasto #2 (fuori) sotto.
   - scaling di logo e titolo SEMPRE proporzionale alla larghezza del box
     (unita' cqw): la proporzione testo/carta resta costante a ogni viewport,
     quindi il lockup non sfora mai il cuneo di carta bianca.
   - >=768px: frame 16:9 (composizione d'angolo). Resta visibile SOLO il tasto
     #2 (fuori); il testo riparte piu' piccolo e cresce proporzionalmente.
   - >=1440px: torna visibile il tasto #1 (dentro la composizione), tasto #2
     nascosto; il testo continua a crescere fino ai valori attuali a 1920px.

   Base rem del sito: 1rem = 10px (html font-size 62.5%).

   Struttura markup:
     .welcome-anim  (flex column: frame + tasto #2)
       > .welcome-anim__frame          (foto + carta + copy in overlay)
           > .welcome-swiper
           > .welcome-anim__carta
           > .welcome-anim__copy
               > .welcome-anim__heading (logo + titolo)
               > a.welcome-anim__cta--inline   (tasto #1, dentro - da 1440px)
       > a.welcome-anim__cta--below            (tasto #2, fuori - fino a 1439px)
   ========================================================================= */

/* ---- Banner "DEMO 1" (solo pagine demo) ---- */
.demo-banner{position:fixed;top:1.2rem;right:1.2rem;z-index:9999;display:flex;gap:.8rem;align-items:center;padding:.8rem 1.2rem;background:rgba(2,101,174,.92);color:#fff;font-family:var(--ff-heading);font-size:1.3rem;letter-spacing:.05rem;border-radius:999px;text-decoration:none;box-shadow:0 .4rem 1.6rem rgba(0,0,0,.25)}
.demo-banner__tag{background:var(--accent-color);color:#000;font-weight:700;padding:.2rem .6rem;border-radius:999px;font-size:1.1rem}

/* =========================================================================
   BASE / MOBILE (< 768px): frame overlay + tasto #2 sotto, fuori
   ========================================================================= */

/* Contenitore: colonna (frame sopra, tasto #2 sotto). Resta flex a ogni size. */
#welcome .welcome-anim{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2rem;
    width:100%;
    margin-top:4.4rem;
}

/* Frame = box foto quadrato con overlay carta+copy */
#welcome .welcome-anim__frame{
    position:relative;
    width:100%;
    aspect-ratio:1;                  /* mobile: quadrato */
    border-radius:1.6rem;
    overflow:hidden;
    isolation:isolate;
    background:#000;
    container-type:inline-size;       /* 1cqw = 1% larghezza frame -> scaling copy */
}

/* Swiper: copre tutto il frame */
#welcome .welcome-swiper{position:absolute;inset:0;width:100%;height:100%;z-index:1}
#welcome .welcome-swiper .swiper-slide{display:block;width:100%;height:100%}
#welcome .welcome-swiper .swiper-slide img{width:100%!important;height:100%!important;object-fit:cover;display:block;margin:0!important;border-radius:0!important;aspect-ratio:auto!important;max-width:none}

/* Carta strappata: sopra la foto, strappo in basso a destra */
#welcome .welcome-anim__carta{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;line-height:0}
#welcome .welcome-anim__carta img{width:100%!important;height:100%!important;display:block;margin:0!important;border-radius:0!important;aspect-ratio:auto!important;object-fit:cover;object-position:right bottom;max-width:none}

/* Wrapper <picture> (webp + fallback): non deve generare un box proprio,
   cosi' l'<img> resta figlio effettivo dello slide / della carta */
#welcome .welcome-swiper .swiper-slide picture,
#welcome .welcome-anim__carta picture{display:contents}

/* Copy (logo + titolo) overlay in basso a destra, sopra la carta */
#welcome .welcome-anim__copy{
    position:absolute;
    right:5%;
    bottom:3%;                        /* mobile: bottom 3% */
    width:auto;                       /* shrink-to-fit: il box segue il contenuto */
    max-width:none;
    z-index:3;
    pointer-events:none;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:0;
    margin:0;
}
#welcome .welcome-anim__heading{
    display:flex;
    width:100%;
    align-items:center;
    place-content:end;
    gap:.8rem;
    flex-wrap:nowrap;
    margin:0;
}
/* Scaling proporzionale alla larghezza del frame (cqw): costante a ogni size */
#welcome .welcome-anim__logo{
    display:block;
    width:auto!important;
    height:clamp(6rem,21cqw,13rem)!important;
    object-fit:contain;
    margin:0!important;
    border-radius:0!important;
    aspect-ratio:auto!important;
    flex:0 0 auto;
}
#welcome .welcome-anim__title{
    font-family:'Marcellus', Georgia, serif;
    font-weight:400;
    font-size:clamp(3.2rem,13cqw,6.4rem);
    color:#7a5e1e;
    line-height:1;
    margin:0;
    letter-spacing:-.02em;            /* negativo anche nei breakpoint bassi */
    white-space:nowrap;
}

/* Tasto #1 (dentro il copy): nascosto fino a 1440px */
#welcome .welcome-anim__cta--inline{display:none}

/* Tasto #2 (sotto il frame): visibile fino a 1439px */
#welcome .welcome-anim__cta--below{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.8rem;
    width:100%;
    box-shadow:0 .4rem 1.2rem rgba(0,0,0,.25);
    pointer-events:auto;
}

/* =========================================================================
   >= 768px: frame 16:9, composizione d'angolo. SOLO tasto #2 (fuori).
   Testo proporzionale al box (cqw): riparte piccolo e cresce restando
   sempre dentro il cuneo di carta bianca.
   ========================================================================= */
@media (min-width:768px){
    #welcome .welcome-anim__frame{aspect-ratio:1920/1080}

    #welcome .welcome-anim__copy{
        right:4%;
        bottom:5%;
    }
    #welcome .welcome-anim__heading{align-items:start;gap:1.2rem}

    #welcome .welcome-anim__logo{height:clamp(4.5rem,8.2cqw,15rem)!important}
    #welcome .welcome-anim__title{
        font-size:clamp(4.5rem,7.9cqw,14rem);
        letter-spacing:-.03rem;       /* negativo (era .03rem positivo) */
    }

    /* Tasto #2 sotto il frame, centrato, larghezza auto (non a tutta pagina) */
    #welcome .welcome-anim__cta--below{
        width:auto;
        align-self:center;
    }
}

/* =========================================================================
   >= 1440px: torna il tasto #1 dentro la composizione. Tasto #2 nascosto.
   ========================================================================= */
@media (min-width:1440px){
    #welcome .welcome-anim__copy{bottom:3%}   /* come mobile: bottom 3% da 1440 in su */
    #welcome .welcome-anim__title{
        margin-top:-1.8rem;
        letter-spacing:-.05em;
        line-height:1;
    }

    /* Tasto #1 di nuovo visibile, dentro il copy come nell'originale */
    #welcome .welcome-anim__cta--inline{
        display:inline-flex;
        align-items:center;
        gap:.8rem;
        align-self:center;
        width:auto;
        box-shadow:0 .4rem 1.2rem rgba(0,0,0,.25);
        pointer-events:auto;
        margin-top:1.2rem;
    }
    /* Tasto #2 nascosto da 1440 in su */
    #welcome .welcome-anim__cta--below{display:none}
}

@media (prefers-reduced-motion:reduce){
    #welcome .welcome-anim__cta--inline,
    #welcome .welcome-anim__cta--below{transition:none}
}