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

}


/* TUTTO IL RESTO DEL TUO CSS SOTTO */

body{
    background:black;
    color:white;
    overflow-x:hidden;
    overflow-y:auto;
}
/* LOADER */
#loader{
position:fixed;
width:100%;
height:100vh;
background:black;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:9999;
}

/* CARDS */
.aces{
position:relative;
width:300px;
height:150px;
}

.card{
position:absolute;
width:80px;
height:110px;
background:white;
border-radius:10px;
display:flex;
justify-content:center;
align-items:center;
left:50%;
top:50%;
transform:translate(-50%,-50%);
box-shadow:0 10px 25px rgba(255,255,255,.15);
overflow:hidden;
}

.card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* LOADING BAR */
.loading-container{
width:300px;
height:6px;
background:#222;
margin-top:60px;
border-radius:50px;
overflow:hidden;
}

.loading-bar{
width:0%;
height:100%;
background:#ff4d4d;
}

/* HOME */
#home {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;

opacity: 0;
pointer-events: none;
will-change: opacity;
}

/* IMMAGINE */
.hero-image {
width: 900px;
max-width: 90vw;
object-fit: contain;

opacity: 0;
transform: scale(0.8);

margin-bottom: 40px;
will-change: transform, opacity;
}

/* TITOLO */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap');

.titlename{
    font-family: "Playfair Display", serif;
    font-style: italic;   /* QUESTO è il vero corsivo */
    font-size: 4rem;
    color: #FFFFFF;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* =====================================================
   RESPONSIVE HOME
   Adattamento automatico PC / TABLET / SMARTPHONE
   ===================================================== */


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

@media (max-width: 1024px) {

    /* HERO */

    .hero {
        background-position: center center;
        padding-bottom: 8vh;
    }

    h1.name {
        font-size: clamp(45px, 10vw, 90px);
    }


    /* SEZIONI */

    .sfondocart,
    .sfondoescap {
        height: 450px;
    }

    .pcart,
    .pescap,
    .plibro {
        font-size: clamp(38px, 6vw, 50px);
    }


    /* LIBRO */

    .book-cover-wrap {
        width: min(320px, 70vw);
        height: auto;
        aspect-ratio: 320 / 430;
    }


    /* FOOTER */

    footer {
        padding-left: 5vw;
        padding-right: 5vw;
    }

}


/* =====================================================
   SMARTPHONE
   ===================================================== */

@media (max-width: 720px) {

    /* -------------------------------------------------
       HEADER
       ------------------------------------------------- */

    header {
        padding: 10px 18px;
        min-height: 70px;
    }

    .brandmark img {
        height: 75px;
        width: auto;
    }

    nav.links {
        width: min(82vw, 340px);
        padding: 100px 35px 40px;
        gap: 28px;
    }

    nav.links a {
        font-size: 13px;
        padding: 8px 0;
    }


    /* -------------------------------------------------
       HERO
       ------------------------------------------------- */

    .hero {
        min-height: 100svh;
        background-position: center center;
        padding: 0 15px 8vh;
    }

    .hero-inner {
        width: 100%;
        padding: 0 10px;
        transform: translateY(10px);
    }

    .eyebrow {
        font-size: 11px;
        letter-spacing: .20em;
    }

    h1.name {
        width: 100%;
        font-size: clamp(38px, 12vw, 65px);
        letter-spacing: .03em;
        line-height: 1;
        word-break: normal;
    }

    .tagline {
        font-size: clamp(13px, 4vw, 17px);
        letter-spacing: .15em;
    }


    /* -------------------------------------------------
       SCROLL CUE
       ------------------------------------------------- */

    .scroll-cue {
        bottom: 18px;
        height: 38px;
    }


    /* -------------------------------------------------
       SPAZIO / SEZIONE CARTA
       ------------------------------------------------- */

    .magic-reveal {
        width: 100%;
        min-height: 620px;
        padding: 50px 15px 80px;
    }


    /* CARTA */

    .magic-card {
        width: min(135px, 38vw);
        height: auto;
        aspect-ratio: 170 / 250;
    }


    /* FRASE */

    .magic-quote {
        width: 90vw;
        max-width: 500px;
        font-size: clamp(18px, 5vw, 25px);
        letter-spacing: .08em;
        line-height: 1.45;
    }

    .magic-line {
        max-width: 70vw;
    }


    /* BIO */

    .magic-bio {
        width: 90%;
        max-width: 500px;
        top: calc(50% + 145px);
    }

    .magic-bio p {
        font-size: 17px;
        line-height: 1.5;
    }

    .magic-button {
        padding: 13px 22px;
        font-size: 10px;
        letter-spacing: .13em;
        max-width: 90vw;
    }


    /* -------------------------------------------------
       ESCAPOLOGIA / CARTOMAGIA
       ------------------------------------------------- */

    .sfondocart,
    .sfondoescap {
        width: 100%;
        height: 430px;
        min-height: 430px;
        background-position: center center;
        padding: 20px;
    }

    .cartomagia,
    .escapologia {
        width: 100%;
        max-width: 100%;
    }

    .pcart,
    .pescap,
    .plibro {
        width: 100%;
        font-size: clamp(28px, 9vw, 38px);
        letter-spacing: .03em;
        margin-bottom: 22px;
    }


    /* BOTTONI */

    .btn,
    .btnescap,
    .btnlibro {
        padding: 13px 25px;
        font-size: 12px;
        letter-spacing: .13em;
    }


    /* -------------------------------------------------
       LIBRO
       ------------------------------------------------- */

    .book-coming {
        min-height: 650px;
        padding: 0;
    }

    .book-content {
        width: 100%;
        padding: 65px 15px;
    }

    .book-label {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .book-content h2 {
        width: 100%;
        font-size: clamp(28px, 9vw, 40px);
        letter-spacing: 1px;
        line-height: 1.15;
    }

    .book-subtitle {
        width: 90%;
        max-width: 400px;
        font-size: 18px;
        line-height: 1.4;
    }

    .book-cover-wrap {
        width: min(280px, 78vw);
        height: auto;
        aspect-ratio: 320 / 430;
        padding: 10px;
        margin: 10px 0 25px;
    }

    .book-coming-text span {
        font-size: 12px;
        letter-spacing: 4px;
        padding: 9px 15px;
    }


    /* -------------------------------------------------
       FOOTER
       ------------------------------------------------- */

    footer {
        padding: 35px 20px 45px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 20px;
    }

    footer .foot-name {
        font-size: 11px;
        letter-spacing: .12em;
    }

    footer .socials {
        width: 100%;
        justify-content: center;
        gap: 12px 16px;
    }

    footer a {
        font-size: 13px;
    }

    .footer-divider {
        display: none;
    }


    /* -------------------------------------------------
       TORNA SU / COOKIE
       ------------------------------------------------- */

    .back-top,
    .cookie-reopen {
        width: 42px;
        height: 42px;
        right: 15px;
    }

    .back-top {
        bottom: 20px;
    }

    .cookie-reopen {
        bottom: 75px;
    }


    /* -------------------------------------------------
       COOKIE BANNER
       ------------------------------------------------- */

    #cookie-banner {
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: auto;
        max-width: none;
        padding: 16px;
        gap: 11px;
    }

    .cookie-icon {
        font-size: 23px;
    }

    .cookie-title {
        font-size: 11px;
    }

    .cookie-text {
        font-size: 14px;
        line-height: 1.35;
    }

    .cookie-buttons {
        width: 100%;
        gap: 8px;
    }

    .cookie-buttons button {
        flex: 1;
        padding: 8px 10px;
        font-size: 9px;
    }

}


/* =====================================================
   IPHONE / TELEFONI STRETTI
   ===================================================== */

@media (max-width: 390px) {

    header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .brandmark img {
        height: 68px;
    }

    nav.links {
        width: 86vw;
        padding-left: 28px;
        padding-right: 28px;
    }


    /* HERO */

    h1.name {
        font-size: clamp(34px, 11vw, 48px);
    }

    .eyebrow {
        font-size: 10px;
    }

    .tagline {
        font-size: 12px;
    }


    /* CARTA */

    .magic-reveal {
        min-height: 610px;
    }

    .magic-card {
        width: 125px;
    }

    .magic-quote {
        font-size: 17px;
        letter-spacing: .06em;
    }

    .magic-bio {
        top: calc(50% + 135px);
    }

    .magic-bio p {
        font-size: 16px;
    }


    /* SEZIONI */

    .sfondocart,
    .sfondoescap {
        height: 380px;
        min-height: 380px;
    }

    .pcart,
    .pescap {
        font-size: 28px;
    }


    /* LIBRO */

    .book-content h2 {
        font-size: 29px;
    }

    .book-subtitle {
        font-size: 17px;
    }

    .book-cover-wrap {
        width: 75vw;
    }


    /* COOKIE */

    #cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 14px;
    }

    .cookie-text {
        font-size: 13px;
    }

}