/* RESET E IMPOSTAZIONI GENERALI */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-main: #0c0d0f;
    --card-bg: #15171c;
    --border-dark: #232630;
    --orange-accent: #e56b1f;
    --orange-border: #d96318;
    --text-main: #e2e8f0;
    --text-muted: #8c95a5;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* NAVBAR SUPERIORE */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5vw;
    border-bottom: 1px solid var(--border-dark);
    background: rgba(12, 13, 15, 0.95);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.navbar.hidden {
    transform: translateY(-100%);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.logo-badge {
    background: var(--text-main);
    color: var(--bg-main);
    font-family: var(--font-display);
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    font-size: 0.9rem;
    border-radius: 2px;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 1px;
    font-weight: 700;
    color: #00CCAA;
    text-shadow: 0 1px 6px rgba(204, 0, 255, 0.3);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.2s;
    font-family: var(--font-display);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--orange-accent);
}

/* ==========================================================
   HERO SECTION KUMO
   ========================================================== */
.hero-kumo {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #0b0d0c;
    padding: 6rem 2rem;
    border-bottom: 1px solid var(--border-dark);
}

.kumo-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(204, 0, 255, 0.12) 0%, rgba(11, 13, 12, 0) 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.cards-track-container.track-top {
    position: absolute;
    top: 5vh;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 2;
    pointer-events: none;
}

.cards-track-container.track-bottom {
    position: absolute;
    bottom: 5vh;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 2;
    pointer-events: none;
}

.hero-central-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin: auto 0;
}

.hero-badge {
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #00CCAA;
    background: rgba(0, 204, 170, 0.2);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    border: 1px solid rgba(0, 204, 170, 0.25);
    text-shadow: 0 2px 6px rgba(204, 0, 255, 0.4);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(204, 0, 255, 0.5);
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 0.5rem;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-primary, .btn-secondary {
    font-family: var(--font-display);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary {
    background-color: rgba(255, 255, 255, 0.92);
    color: #0b0d0c;
}

.btn-primary:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,255,255,0.15);
}

.btn-secondary {
    border: 1px solid rgba(244, 244, 240, 0.2);
    color: #f4f4f0;
}

.btn-secondary:hover {
    border-color: #00CCAA;
    color: #00CCAA;
    background: rgba(0, 204, 170, 0.05);
    transform: translateY(-2px);
}

.art-card {
    position: absolute;
    width: clamp(210px, 14.5vw, 260px);
    height: clamp(140px, 10vw, 180px);
    border-radius: 40px / 32px; 
    overflow: hidden;
    background: #161a18;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    animation: floatOrganic 6s ease-in-out infinite, jellyWobble 4s ease-in-out infinite;
    animation-delay: var(--delay);
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform, left;
}

.art-card .card-inner, .art-card .card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.art-card:hover {
    transform: scale(1.15) rotate(-2deg) !important;
    border-color: #00CCAA;
    box-shadow: 0 25px 50px rgba(204, 0, 255, 0.4);
    z-index: 10;
}

@keyframes floatOrganic {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes jellyWobble {
    0%, 100% { border-radius: 40px / 32px; }
    33% { border-radius: 32px / 44px; }
    66% { border-radius: 48px / 26px; }
}


/* ==========================================================
   SEZIONE BIO
   ========================================================== */
.bio-section {
    padding: 14vh 5vw;
    background-color: #ffffff;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

.bio-container {
    max-width: 1100px;
    margin: 0 auto;
}

.bio-header {
    text-align: center;
    margin-bottom: 5rem;
}

.bio-tag {
    font-family: var(--font-display);
    color: #e56b1f;
    font-size: 0.8rem;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 700;
}

.bio-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: -1px;
    font-weight: 700;
    color: #0f172a;
}

.bio-stage-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    min-height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bio-main-photo-card {
    position: relative;
    width: 100%;
    height: 540px;
    border-radius: 36px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12), 0 0 25px rgba(229, 107, 31, 0.22);
    border: 1px solid rgba(229, 107, 31, 0.3);
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bio-container.visible .bio-main-photo-card {
    opacity: 1;
    transform: scale(1);
}

.bio-main-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floating-textbox {
    position: absolute;
    width: 290px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(229, 107, 31, 0.25);
    border-radius: 20px;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    z-index: 10;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    animation: floatTextbox 5s ease-in-out infinite;
    animation-delay: var(--float-delay);
}

.bio-container.visible .floating-textbox {
    opacity: 1;
    transform: translateY(0);
}

.left-box {
    left: -195px;
    top: 50%;
    transform: translateY(-50%);
    animation: floatTextboxLeft 5s ease-in-out infinite;
}

.right-box-1 {
    right: -195px;
    top: 35px;
}

.right-box-2 {
    right: -180px;
    bottom: 35px;
}

@keyframes floatTextbox {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

@keyframes floatTextboxLeft {
    0%, 100% { transform: translateY(-50%) translateY(0px); }
    50% { transform: translateY(-50%) translateY(-7px); }
}

.info-num {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: #e56b1f;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.3rem;
}

.floating-textbox h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.floating-textbox p {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
}


/* ==========================================================
   SEZIONE PORTFOLIO (CAROSELLO & GRIGLIA FILTRATA)
   ========================================================== */
.portfolio-section {
    padding: 12vh 5vw;
    background-color: var(--bg-main);
    border-bottom: 1px solid var(--border-dark);
    min-height: 85vh;
}

.portfolio-container {
    max-width: 1300px;
    margin: 0 auto;
}

.portfolio-header {
    text-align: center;
    margin-bottom: 3rem;
}

.portfolio-tag {
    font-family: var(--font-display);
    color: var(--orange-accent);
    font-size: 0.8rem;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 700;
}

.portfolio-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: -1px;
    font-weight: 700;
    color: var(--text-main);
}

.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 3.5rem;
}

.filter-btn {
    font-family: var(--font-display);
    background: var(--card-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-dark);
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.filter-btn:hover {
    color: var(--text-main);
    border-color: var(--orange-accent);
}

.filter-btn.active {
    background: var(--orange-accent);
    color: #ffffff;
    border-color: var(--orange-accent);
    box-shadow: 0 4px 15px rgba(229, 107, 31, 0.3);
}

/* CLASSE UTILITY NASCONDI */
.hidden {
    display: none !important;
}

/* CAROSELLO INFINITO (SELECTED WORKS) */
.selected-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
    animation: fadeInPortfolio 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.carousel-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: none;
}

.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-item {
    width: 340px;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-dark);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Riempie l'intero box */
    transition: transform 0.5s ease;
}

.carousel-item:hover {
    transform: translateY(-6px);
    border-color: var(--orange-accent);
}

.carousel-item:hover img {
    transform: scale(1.05);
}

@keyframes infiniteScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* GRIGLIA CATEGORIE (20 ELEMENTI) CON ANIMAZIONE */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.8rem;
    animation: fadeInPortfolio 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPortfolio {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.portfolio-item {
    border-radius: 16px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-dark);
    height: 230px;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.portfolio-item.hide {
    display: none !important;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Riempie l'intero box */
    transition: transform 0.5s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    border-color: var(--orange-accent);
}

.portfolio-item:hover img {
    transform: scale(1.06);
}


/* ==========================================================
   LIGHTBOX PREVIEW MODALE
   ========================================================== */
.lightbox-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 9, 11, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    padding: 3vw;
}

.lightbox-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 3rem;
    cursor: pointer;
    font-family: var(--font-display);
    transition: color 0.2s;
    z-index: 1010;
}

.lightbox-close:hover {
    color: var(--orange-accent);
}

.lightbox-content-box {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 25px 60px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content-box img {
    max-width: 100%;
    max-height: 85vh;
    display: block;
    object-fit: contain;
}

/* Didascalia in basso a comparsa con hover sulla parte bassa */
.lightbox-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 2.5rem 1.8rem 2.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
    color: #ffffff;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

/* Attiva la didascalia quando il puntatore si avvicina alla parte bassa della preview */
.lightbox-content-box:hover .lightbox-caption {
    opacity: 1;
    transform: translateY(0);
}

.lightbox-caption h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-main);
}

.lightbox-caption p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* ==========================================================
   SEZIONE CONTATTI & FOOTER
   ========================================================== */
.contact-section {
    padding: 8vh 5vw;
    border-top: 1px solid var(--border-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-main);
}

.contact-header {
    max-width: 650px;
}

.contact-tag {
    font-family: var(--font-display);
    color: var(--orange-accent);
    font-size: 0.8rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.contact-header h2 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    margin-bottom: 1rem;
    letter-spacing: -1px;
    font-weight: 700;
}

.contact-header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.hire-btn {
    display: inline-block;
    background: var(--card-bg);
    color: var(--text-main);
    border: 2px solid var(--orange-border);
    padding: 1.2rem 2.2rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.hire-btn:hover {
    background: var(--orange-accent);
    color: #fff;
    transform: translateY(-2px);
}

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4vh 5vw;
    border-top: 1px solid var(--border-dark);
    font-size: 0.75rem;
    color: var(--text-muted);
    background-color: var(--bg-main);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.site-footer.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.footer-left p {
    margin-bottom: 0.3rem;
}

.credits {
    font-family: var(--font-display);
    font-weight: 600;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-dark);
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    transition: border-color 0.2s;
}

.social-icons a:hover {
    border-color: var(--orange-accent);
    color: var(--orange-accent);
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 0.3rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--text-main);
}

/* =====================================================================
   AGGIUNTE / OVERRIDE  —  incolla TUTTO questo IN FONDO a style.css
   (le regole vecchie restano, queste vincono perché arrivano dopo)
   ===================================================================== */

:root {
    --teal: #00CCAA;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Ritmo della sezione BIO: regola qui i tempi ---- */
    --bio-tag-delay: 0.3s;     /* sottotitolo "BIOGRAPHY" (dopo che l'header è visibile) */
    --bio-title-delay: 0.75s;  /* titolo H2 */
    --bio-photo-delay: 1.4s;   /* foto (dopo che l'area foto è visibile) */
    --bio-box1-delay: 2.8s;    /* textbox 01 */
    --bio-box2-delay: 3.9s;    /* textbox 02 */
    --bio-box3-delay: 5.0s;    /* textbox 03 */
}

.portfolio-section,
.contact-section {
    overflow-x: clip;
}


/* =====================================================================
   BIO
   ===================================================================== */

/* --- Titolo e sottotitolo: comparsa in ritardo + glow #00CCAA --- */
.bio-tag,
.bio-header h2 {
    opacity: 0;
    translate: 0 36px;
    filter: blur(10px);
    transition: opacity 0.4s ease, translate 0.4s ease, filter 0.4s ease;
}

.bio-container.head-in .bio-tag {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    text-shadow: 0 0 12px rgba(0, 204, 170, 0.55), 0 0 30px rgba(0, 204, 170, 0.30);
    transition: opacity 0.9s var(--ease-out) var(--bio-tag-delay),
                translate 0.9s var(--ease-out) var(--bio-tag-delay),
                filter 0.9s var(--ease-out) var(--bio-tag-delay);
    animation: glowPulse 3.4s ease-in-out calc(var(--bio-tag-delay) + 1.4s) infinite;
}

.bio-container.head-in .bio-header h2 {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    text-shadow: 0 0 12px rgba(0, 204, 170, 0.55), 0 0 30px rgba(0, 204, 170, 0.30);
    transition: opacity 0.9s var(--ease-out) var(--bio-title-delay),
                translate 0.9s var(--ease-out) var(--bio-title-delay),
                filter 0.9s var(--ease-out) var(--bio-title-delay);
    animation: glowPulse 3.4s ease-in-out calc(var(--bio-title-delay) + 1.4s) infinite;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 12px rgba(0, 204, 170, 0.55), 0 0 30px rgba(0, 204, 170, 0.30); }
    50%      { text-shadow: 0 0 20px rgba(0, 204, 170, 0.95), 0 0 54px rgba(0, 204, 170, 0.55); }
}

/* --- Foto: arriva molto dopo, quando l'utente è già nella sezione --- */
.bio-container.stage-in .bio-main-photo-card {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s var(--ease-out) var(--bio-photo-delay),
                transform 1.2s var(--ease-out) var(--bio-photo-delay);
}

/* --- Textbox: uno per volta (01 → 02 → 03) --- */
.floating-textbox {
    opacity: 0;
    scale: 0.8;
    translate: 0 30px;
    transition: opacity 0.35s ease, scale 0.35s ease, translate 0.35s ease;
}

.bio-container.stage-in .floating-textbox {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    transition: opacity 0.8s var(--ease-out) var(--in-delay),
                scale 0.9s var(--ease-bounce) var(--in-delay),
                translate 0.9s var(--ease-out) var(--in-delay);
}

.left-box    { --in-delay: var(--bio-box1-delay); }
.right-box-1 { --in-delay: var(--bio-box2-delay); }
.right-box-2 { --in-delay: var(--bio-box3-delay); }


/* =====================================================================
   PORTFOLIO — titoli e pulsanti filtro
   ===================================================================== */

.portfolio-tag,
.portfolio-header h2 {
    opacity: 0;
    translate: 0 30px;
    filter: blur(8px);
    transition: opacity 0.4s ease, translate 0.4s ease, filter 0.4s ease;
}

.portfolio-section.head-in .portfolio-tag {
    opacity: 1; translate: 0 0; filter: blur(0);
    transition: opacity 0.9s var(--ease-out) 0.3s, translate 0.9s var(--ease-out) 0.3s, filter 0.9s var(--ease-out) 0.3s;
}

.portfolio-section.head-in .portfolio-header h2 {
    opacity: 1; translate: 0 0; filter: blur(0);
    transition: opacity 0.9s var(--ease-out) 0.7s, translate 0.9s var(--ease-out) 0.7s, filter 0.9s var(--ease-out) 0.7s;
}

.filter-btn:nth-child(1) { --i: 0; }
.filter-btn:nth-child(2) { --i: 1; }
.filter-btn:nth-child(3) { --i: 2; }
.filter-btn:nth-child(4) { --i: 3; }
.filter-btn:nth-child(5) { --i: 4; }

.filter-btn {
    opacity: 0;
    transform: translateY(26px) scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease,
                scale 0.4s var(--ease-bounce),
                background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
    animation: btnFloat 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.35s);
}

.portfolio-section.head-in .filter-btn {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease calc(1.2s + var(--i) * 0.15s),
                transform 0.9s var(--ease-bounce) calc(1.2s + var(--i) * 0.15s),
                scale 0.4s var(--ease-bounce),
                background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}

@keyframes btnFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

/* puntatore vicino (classe .near assegnata da JS) o sopra: ingrandimento con rimbalzo */
.filter-btn.near  { scale: 1.1; }
.filter-btn:hover { scale: 1.16; }


/* =====================================================================
   SELECTED WORKS — carosello controllato dal puntatore
   ===================================================================== */

.selected-carousel-wrapper {
    animation: none;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.carousel-track {
    animation: none;          /* niente più scorrimento automatico: lo gestisce il JS */
    will-change: transform;
}

.carousel-item {
    position: relative;
    opacity: 0;
    translate: calc(60vw + var(--ci, 0) * 60px) 0;
    transform: none;
    transition: opacity 0.4s ease, translate 0.5s ease,
                scale 0.45s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.selected-carousel-wrapper.play .carousel-item {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.9s ease calc(0.5s + var(--ci, 0) * 0.13s),
                translate 1.3s var(--ease-out) calc(0.5s + var(--ci, 0) * 0.13s),
                scale 0.45s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.carousel-item:hover {
    transform: none;
    scale: 1.04;
    z-index: 5;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 18px rgba(229, 107, 31, 0.25);
}

/* quando le card sono (quasi) ferme, l'immagine sotto il cursore cresce di più */
.selected-carousel-wrapper.is-idle .carousel-item:hover {
    scale: 1.1;
}


/* =====================================================================
   BENTO GRID (Backgrounds / Characters / Props / Projects)
   ===================================================================== */

.portfolio-grid {
    position: relative;   /* serve al JS per calcolare le colonne */
    animation: none;
}

.portfolio-item {
    animation: none;
    transform: none;
    opacity: 0;
    /* --fx / --fy (direzione di provenienza) e --d (ritardo) sono impostati da JS */
    translate: var(--fx, 0px) var(--fy, 60px);
    transition: opacity 0.8s ease var(--d, 0s),
                translate 1.1s var(--ease-out) var(--d, 0s),
                scale 0.45s var(--ease-out),
                box-shadow 0.4s var(--ease-out),
                border-color 0.3s ease;
}

.portfolio-item.in {
    opacity: 1;
    translate: 0 0;
}

.portfolio-item:hover {
    transform: none;
    scale: 1.05;
    z-index: 20;
    border-color: var(--orange-accent);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 20px rgba(229, 107, 31, 0.25);
}

/* etichetta che invita a cliccare sui progetti */
.portfolio-item[data-category="projects"]::after {
    content: "VIEW PROJECT ↗";
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    background: rgba(229, 107, 31, 0.92);
    border-radius: 50px;
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.3s ease, translate 0.3s var(--ease-out);
    pointer-events: none;
}

.portfolio-item[data-category="projects"]:hover::after {
    opacity: 1;
    translate: 0 0;
}


/* =====================================================================
   VIEWER DEI PROGETTI (carousel in sovrimpressione, creato da JS)
   ===================================================================== */

.project-viewer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 4vh 4vw 3vh;
    background: rgba(8, 9, 11, 0.95);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.project-viewer.active {
    opacity: 1;
    pointer-events: auto;
}

.pv-close {
    position: absolute;
    top: 1.4rem;
    right: 2rem;
    z-index: 5;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.3s var(--ease-bounce);
}

.pv-close:hover {
    background: var(--orange-accent);
    color: #fff;
    transform: rotate(90deg) scale(1.08);
}

.pv-head { max-width: 720px; }

.pv-tag {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 3px;
    font-weight: 700;
    color: var(--orange-accent);
}

.pv-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin: 0.25rem 0;
}

.pv-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.pv-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pv-slides {
    flex: 1;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    touch-action: pan-y;
}

.pv-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s var(--ease-out);
}

.pv-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.pv-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.pv-nav {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, scale 0.3s var(--ease-bounce);
}

.pv-nav:hover {
    background: var(--orange-accent);
    color: #fff;
    scale: 1.12;
}

.pv-footer {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.pv-count {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    white-space: nowrap;
}

.pv-thumbs {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.3rem 0;
}

.pv-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--card-bg);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.25s, border-color 0.25s, scale 0.25s var(--ease-out);
}

.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb:hover { opacity: 0.9; scale: 1.06; }
.pv-thumb.active { opacity: 1; border-color: var(--orange-accent); }


/* =====================================================================
   CONTACT — sfondo bianco + 3 immagini al 30% + testi zoom-in
   ===================================================================== */

.contact-section {
    position: relative;
    min-height: 75vh;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.contact-bg {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 0;
    pointer-events: none;
}

.contact-panel {
    flex: 1;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    translate: 110vw 0;                 /* parte fuori schermo a destra */
    transition: opacity 0.3s ease, translate 0.5s ease;
}

.contact-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;                        /* trasparenza al 30% */
    display: block;
}

.contact-panel:nth-child(1) { --pi: 0; }
.contact-panel:nth-child(2) { --pi: 1; }
.contact-panel:nth-child(3) { --pi: 2; }

/* la prima si ferma a sinistra, le altre si accumulano di fianco */
.contact-section.play .contact-panel {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.4s ease calc(0.2s + var(--pi) * 0.4s),
                translate 1.4s var(--ease-out) calc(0.2s + var(--pi) * 0.4s);
}

.contact-header,
.contact-cta-wrapper {
    position: relative;
    z-index: 2;
}

.contact-header h2 { color: #0f172a; }
.contact-header p  { color: #334155; font-weight: 500; }

/* zoom-in a cascata: CONTACT → GET IN TOUCH → didascalia → bottone */
.contact-tag,
.contact-header h2,
.contact-header p,
.hire-btn {
    opacity: 0;
    scale: 0.3;
    transition: opacity 0.3s ease, scale 0.3s ease;
}

.contact-tag,
.contact-header h2,
.contact-header p {
    transform-origin: left center;
}

.contact-section.play .contact-tag {
    opacity: 1; scale: 1;
    transition: opacity 0.6s ease 2.3s, scale 0.9s var(--ease-bounce) 2.3s;
}
.contact-section.play .contact-header h2 {
    opacity: 1; scale: 1;
    transition: opacity 0.6s ease 2.9s, scale 0.9s var(--ease-bounce) 2.9s;
}
.contact-section.play .contact-header p {
    opacity: 1; scale: 1;
    transition: opacity 0.6s ease 3.5s, scale 0.9s var(--ease-bounce) 3.5s;
}
.contact-section.play .hire-btn {
    opacity: 1; scale: 1;
    transition: opacity 0.6s ease 4.1s, scale 0.9s var(--ease-bounce) 4.1s,
                background 0.2s ease, color 0.2s ease;
    /* float continuo + ciclo "ingrandimento e shake" per invogliare al click */
    animation: hireFloat 3.4s ease-in-out 5.2s infinite,
               hireAttention 4.6s ease-in-out 6s infinite;
}

.contact-section.play .hire-btn:hover {
    scale: 1.08;
    animation-play-state: paused;
}

@keyframes hireFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

@keyframes hireAttention {
    0%, 60%, 100% { transform: scale(1) rotate(0deg); }
    64%           { transform: scale(1.08) rotate(0deg); }
    68%           { transform: scale(1.08) rotate(-3deg); }
    72%           { transform: scale(1.08) rotate(3deg); }
    76%           { transform: scale(1.08) rotate(-3deg); }
    80%           { transform: scale(1.08) rotate(3deg); }
    84%           { transform: scale(1.08) rotate(-2deg); }
    88%           { transform: scale(1.08) rotate(0deg); }
    94%           { transform: scale(1) rotate(0deg); }
}


/* =====================================================================
   MODULO CONTATTI (modale)
   ===================================================================== */

.cm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 4vw;
    background: rgba(8, 9, 11, 0.8);
    backdrop-filter: blur(10px);
    clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%));
    pointer-events: none;
    transition: clip-path 0.8s var(--ease-out);
}

.cm-overlay.active {
    clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%));
    pointer-events: auto;
}

.cm-card {
    position: relative;
    width: 100%;
    max-width: 980px;
    max-height: 92vh;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    border-radius: 28px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
    opacity: 0;
    scale: 0.88;
    translate: 0 30px;
    transition: opacity 0.3s ease, scale 0.3s ease, translate 0.3s ease;
}

.cm-overlay.active .cm-card {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    transition: opacity 0.6s ease 0.25s, scale 0.8s var(--ease-bounce) 0.25s, translate 0.8s var(--ease-out) 0.25s;
}

.cm-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    z-index: 5;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: rgba(12, 13, 15, 0.6);
    color: var(--text-main);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.3s var(--ease-bounce);
}

.cm-close:hover {
    background: var(--orange-accent);
    color: #fff;
    transform: rotate(90deg);
}

/* pannello sinistro */
.cm-side {
    position: relative;
    overflow: hidden;
    padding: 3rem 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
    color: #fff;
    background: linear-gradient(160deg, #e56b1f 0%, #a8390a 100%);
}

.cm-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.55;
    animation: cmBlob 7s ease-in-out infinite;
}
.cm-blob.b1 { width: 220px; height: 220px; top: -60px; left: -50px; background: var(--teal); }
.cm-blob.b2 { width: 140px; height: 140px; top: 22%; right: -40px; background: rgba(255, 255, 255, 0.35); animation-delay: -2s; }
.cm-blob.b3 { width: 90px;  height: 90px;  top: 46%; left: 14%;  background: rgba(0, 204, 170, 0.7); animation-delay: -4s; }

@keyframes cmBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(14px, -18px) scale(1.12); }
}

.cm-kicker {
    position: relative;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 3px;
    font-weight: 700;
    opacity: 0.85;
}

.cm-side h3 {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.cm-side p {
    position: relative;
    font-size: 0.9rem;
    line-height: 1.55;
    opacity: 0.9;
}

.cm-info {
    position: relative;
    list-style: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: grid;
    gap: 0.4rem;
}

/* pannello destro: form */
.cm-form {
    padding: 3rem 2.6rem 2.4rem;
    overflow-y: auto;
    transition: opacity 0.4s ease, translate 0.5s var(--ease-out);
}

.cm-field {
    position: relative;
    margin-bottom: 1.7rem;
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.3s ease, translate 0.3s ease;
}

.cm-overlay.active .cm-field {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.6s ease calc(0.6s + var(--fi) * 0.1s),
                translate 0.7s var(--ease-out) calc(0.6s + var(--fi) * 0.1s);
}

.cm-field:nth-child(1) { --fi: 0; }
.cm-field:nth-child(2) { --fi: 1; }
.cm-field:nth-child(3) { --fi: 2; }
.cm-field:nth-child(4) { --fi: 3; }

.cm-field input,
.cm-field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-dark);
    color: var(--text-main);
    font: 500 1rem var(--font-body);
    padding: 1.4rem 0 0.5rem;
    outline: none;
    resize: none;
}

.cm-field label {
    position: absolute;
    left: 0;
    top: 1.25rem;
    color: var(--text-muted);
    transform-origin: left top;
    pointer-events: none;
    transition: translate 0.3s var(--ease-out), scale 0.3s var(--ease-out), color 0.3s ease;
}

.cm-field input:focus + label,
.cm-field input:not(:placeholder-shown) + label,
.cm-field textarea:focus + label,
.cm-field textarea:not(:placeholder-shown) + label {
    translate: 0 -1.15rem;
    scale: 0.78;
    color: var(--teal);
}

.cm-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--orange-accent), var(--teal));
    transform-origin: left;
    scale: 0 1;
    transition: scale 0.45s var(--ease-out);
}

.cm-field:focus-within .cm-line { scale: 1 1; }

.cm-field.invalid .cm-line {
    scale: 1 1;
    background: #ef4444;
}

.cm-field.invalid { animation: cmShake 0.4s ease; }

@keyframes cmShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

.cm-send {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.9rem;
    border: 0;
    border-radius: 50px;
    background: var(--orange-accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.25s ease, scale 0.3s var(--ease-bounce), box-shadow 0.3s ease;
}

.cm-send:hover {
    scale: 1.05;
    box-shadow: 0 10px 28px rgba(229, 107, 31, 0.4);
}

.cm-send svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s var(--ease-out);
}

.cm-send:hover svg { transform: translate(3px, -3px); }

.cm-card.sending .cm-send svg { animation: planeFly 0.9s ease-in forwards; }

@keyframes planeFly {
    0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
    60%  { transform: translate(70px, -40px) rotate(-12deg); opacity: 1; }
    100% { transform: translate(190px, -100px) rotate(-18deg); opacity: 0; }
}

/* schermata di conferma */
.cm-success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    background: var(--card-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.cm-card.sent .cm-success { opacity: 1; pointer-events: auto; }
.cm-card.sent .cm-form    { opacity: 0; translate: 0 -16px; pointer-events: none; }

.cm-success svg { width: 84px; height: 84px; }
.cm-success circle,
.cm-success path {
    fill: none;
    stroke: var(--teal);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.cm-card.sent .cm-success circle { animation: cmDraw 0.8s ease 0.2s forwards; }
.cm-card.sent .cm-success path   { animation: cmDraw 0.5s ease 0.8s forwards; }

@keyframes cmDraw { to { stroke-dashoffset: 0; } }

.cm-success h4 { font-family: var(--font-display); font-size: 1.5rem; }
.cm-success p  { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

@media (max-width: 820px) {
    .cm-card { grid-template-columns: 1fr; overflow-y: auto; }
    .cm-side { padding: 2rem 1.6rem; min-height: 200px; }
    .cm-form { padding: 2rem 1.6rem; }
    .cm-success { width: 100%; top: 200px; }
    .contact-section { flex-direction: column; align-items: flex-start; gap: 2rem; }
}


/* =====================================================================
   Accessibilità: chi preferisce meno movimento vede tutto subito
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
    .bio-tag, .bio-header h2, .portfolio-tag, .portfolio-header h2,
    .filter-btn, .floating-textbox, .carousel-item, .portfolio-item,
    .contact-panel, .contact-tag, .contact-header h2, .contact-header p, .hire-btn {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        filter: none !important;
        transform: none !important;
    }
    .bio-main-photo-card { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   AGGIUNTE — incolla IN FONDO a style.css (dopo style-additions.css)
   ===================================================================== */

/* ---------------------------------------------------------------------
   FIX: le card della hero non avevano mai una posizione verticale
   (il codice che la gestiva era nella parte di script che non ho mai
   ricevuto per intero), quindi finivano tutte accatastate nello stesso
   punto. Le centro qui via CSS, senza toccare le animazioni esistenti.
   --------------------------------------------------------------------- */
.art-card {
    top: 50%;
    margin-top: calc(clamp(140px, 10vw, 180px) * -0.5);
}


/* ---------------------------------------------------------------------
   9) "Get in touch" con lo stesso colore di "View Portfolio"
   --------------------------------------------------------------------- */
.btn-secondary {
    background-color: #f4f4f0;
    color: #0b0d0c;
    border-color: transparent;
}

.btn-secondary:hover {
    background-color: #ffffff;
    color: #0b0d0c;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
}


/* ---------------------------------------------------------------------
   1) Frecce di scorrimento rapido — Selected Works
   --------------------------------------------------------------------- */
.sw-arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 6;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: rgba(21, 23, 28, 0.85);
    color: var(--text-main);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, color 0.2s ease, scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    touch-action: none;
    user-select: none;
}

.sw-prev { left: 0.5rem; }
.sw-next { right: 0.5rem; }

.sw-arrow:hover,
.sw-arrow:active {
    background: var(--orange-accent);
    color: #fff;
    scale: 1.1;
}


/* ---------------------------------------------------------------------
   4) Pulsante fisso "vai ai contatti" sulle schede della griglia
   --------------------------------------------------------------------- */
.scroll-to-contact-btn {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    translate: -50% 30px;
    z-index: 60;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: rgba(21, 23, 28, 0.9);
    color: var(--text-main);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transition: opacity 0.35s ease, translate 0.35s ease, background 0.2s ease, scale 0.25s ease;
}

.scroll-to-contact-btn svg {
    width: 22px;
    height: 22px;
}

.scroll-to-contact-btn.show {
    opacity: 1;
    translate: -50% 0;
    pointer-events: auto;
    animation: scb-bounce 2.6s ease-in-out infinite;
}

.scroll-to-contact-btn:hover {
    background: var(--orange-accent);
    scale: 1.08;
}

@keyframes scb-bounce {
    0%, 100% { translate: -50% 0; }
    50%      { translate: -50% 8px; }
}


/* =====================================================================
   SOLO SMARTPHONE
   ===================================================================== */
@media (max-width: 640px) {

    /* ---------------------------------------------------------------
       10) Logo header più piccolo, righe ravvicinate
       --------------------------------------------------------------- */
    .logo-text {
        display: flex;
        flex-direction: column;
        font-size: 0.88rem;          /* -20% circa rispetto a 1.1rem */
        line-height: 0.92;
        letter-spacing: 0.5px;
        gap: 0;
    }

    /* ---------------------------------------------------------------
       3) Hero: card più grandi e meno numerose
       --------------------------------------------------------------- */
    .art-card {
        width: clamp(160px, 46vw, 220px);
        height: clamp(108px, 31vw, 148px);
        margin-top: calc(clamp(108px, 31vw, 148px) * -0.5);
    }

    /* mantiene solo 1 card ogni 3 (3 per riga invece di 8) */
    .art-card:not(:nth-child(3n - 2)) {
        display: none;
    }

    /* ---------------------------------------------------------------
       7) Footer: riga del copyright ridotta della metà
       --------------------------------------------------------------- */
    .footer-left p:first-child {
        font-size: 0.375rem;   /* metà di 0.75rem */
    }

    /* ---------------------------------------------------------------
       2) Bio: layout impilato con sequenza dedicata via JS
       (classi .seq-pending / .seq-in aggiunte da script-sezioni.js)
       --------------------------------------------------------------- */
    .bio-stage-wrapper {
        position: static;
        width: 100%;
        max-width: 420px;
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }

    .bio-main-photo-card {
        position: static;
        order: 0;
        height: 62vh;
        max-height: 520px;
    }

    .floating-textbox {
        position: static;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        animation: none;
    }

    .left-box    { order: 1; }
    .right-box-1 { order: 2; }
    .right-box-2 { order: 3; }

    /* stato di partenza (prima che la sequenza JS parta) */
    .floating-textbox.seq-pending {
        opacity: 0 !important;
        transition: none !important;
    }
    .left-box.seq-pending    { transform: translateX(-70px) !important; }
    .right-box-1.seq-pending { transform: translateX(70px) !important; }
    .right-box-2.seq-pending { transform: translateX(-70px) !important; }

    /* comparsa con frenata + leggerissimo rimbalzo */
    .floating-textbox.seq-in {
        opacity: 1 !important;
        transform: translateX(0) !important;
        transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.22, 1.3, 0.36, 1) !important;
    }
}


/* =====================================================================
   Accessibilità: chi preferisce meno movimento
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .scroll-to-contact-btn.show { animation: none; }
    
    
}