/* ======================================================
   BASE
====================================================== */

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #0d0d0d;
    color: white;
    overflow-x: hidden;
}


/* ======================================================
   NAVBAR
====================================================== */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;

    /* v13: navbar glass / trasparente */
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    position: sticky;
    top: 0;

    border-bottom: 1px solid rgba(0, 191, 255, 0.08);
    z-index: 20000;
}

.navbar .logo {
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

.navbar ul li a {
    color: #00bfff;
    text-decoration: none;
    transition: 0.3s;
}

.navbar ul li a:hover {
    text-shadow: 0 0 5px #00bfff;
}


/* ======================================================
   HERO / TITOLO GLITCH
====================================================== */

.hero {
    padding: 100px 20px;
    text-align: center;
}

.glitch-title {
    font-size: 2.5rem;
    animation: glitch 3s infinite;
}

@keyframes glitch {
    0%   { text-shadow: 1px 0 #0ff, -1px 0 #f0f; }
    50%  { text-shadow: -2px 0 #0ff, 2px 0 #f0f; }
    100% { text-shadow: 1px 0 #0ff, -1px 0 #f0f; }
}


/* ======================================================
   SEZIONI SCROLL
====================================================== */

.scroll-section {
    min-height: 100vh;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}


/* ======================================================
   CARD
====================================================== */

.card {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.03);
}


/* ======================================================
   FOOTER
====================================================== */

.footer {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 0.9rem;
    opacity: 0.7;
}


/* ======================================================
   INDICATORE SCROLL LATERALE
====================================================== */

.scroll-indicator {
    position: fixed;
    right: 10px;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #00bfff, transparent);
    opacity: 0.3;
    pointer-events: none;
    z-index: 1000;
}

/* ======================================================
   SCROLLBAR PERSONALIZZATA BLU (COMPATIBILE)
====================================================== */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0d0d0d;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00c3ff, #3a77ff);
  border-radius: 10px;
  border: 2px solid #0d0d0d;
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #56ccf2, #2f80ed);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a77ff #0d0d0d;
}

/* ======================================================
   IMPORTANT: NASCONDI LA SCROLLBAR NATIVA
   Motivo:
   - Su desktop, quando il mouse va sul bordo destro, il cursore
     può "passare" sulla scrollbar nativa e tornare normale.
   - Su iOS la scrollbar nativa è un overlay e non è davvero
     personalizzabile: la soluzione robusta è nasconderla e usare
     la nostra custom.
====================================================== */

html, body {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}
/* ======================================================
   SCROLLBAR CANVAS PARTICELLARE CUSTOM
====================================================== */

#custom-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 52px; /* area ampia per interazione (mouse + touch) */
  height: 100%;
  background: transparent;
  z-index: 99;
  pointer-events: auto;
  touch-action: none; /* drag fluido su touch */
}

#custom-scrollbar canvas{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none; /* gli eventi li prende il contenitore */
}

/* il canvas disegna, ma non cattura eventi (li prende l'host) */
#custom-scrollbar canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* Disable old static scroll indicator (replaced by custom rail) */
.scroll-indicator{display:none !important;}


/* ======================================================
   CURSORE SAYONARA — PNG + AURA + SCIA
   Il cursore nativo viene nascosto SOLO quando il JS è attivo.
====================================================== */

html.sayonara-cursor-ready,
html.sayonara-cursor-ready * {
    cursor: none !important;
}

/* Canvas della scia */
#cursor-trail {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2147483645;
}

/* Wrapper cursore */
#custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    pointer-events: none;
    z-index: 2147483646;
    opacity: 0;
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform, opacity, filter;
    transition: opacity .18s ease;
    mix-blend-mode: screen;
}

#custom-cursor.is-visible {
    opacity: 1;
}

#custom-cursor .cursor-shell {
    position: absolute;
    inset: 0;
    transform-origin: 18px 18px;
    will-change: transform;
}

#custom-cursor .cursor-aura {
    position: absolute;
    left: 7px;
    top: 4px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(0, 220, 255, .42) 0%, rgba(64, 114, 255, .18) 38%, rgba(0,0,0,0) 72%);
    filter: blur(1px);
    animation: cursorAuraPulse 1.8s ease-in-out infinite alternate;
}

#custom-cursor .cursor-orbit {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    opacity: .9;
    animation: cursorOrbit 4.8s linear infinite;
}

#custom-cursor .cursor-orbit::before,
#custom-cursor .cursor-orbit::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(180,245,255,.95), rgba(0,180,255,.25));
    box-shadow: 0 0 8px rgba(0,190,255,.45);
}

#custom-cursor .cursor-orbit::before {
    width: 15px;
    height: 5px;
    right: 4px;
    top: 21px;
    transform: rotate(-25deg);
}

#custom-cursor .cursor-orbit::after {
    width: 6px;
    height: 6px;
    right: 17px;
    bottom: 8px;
    background: radial-gradient(circle, rgba(220,255,255,.95), rgba(0,150,255,.18));
}

#custom-cursor .cursor-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: auto;
    filter:
      drop-shadow(0 0 5px rgba(0,191,255,.75))
      drop-shadow(0 0 12px rgba(64,114,255,.35));
    transform-origin: 8px 8px;
    will-change: transform, filter;
}

#custom-cursor.click-left .cursor-shell {
    animation: cursorClickLeft .22s ease-out;
}

#custom-cursor.click-right .cursor-shell {
    animation: cursorClickRight .22s ease-out;
}

@keyframes cursorAuraPulse {
    from { transform: scale(.82); opacity: .45; }
    to   { transform: scale(1.18); opacity: .95; }
}

@keyframes cursorOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes cursorClickLeft {
    0%   { transform: translateX(0) scale(1) rotate(0deg); }
    45%  { transform: translateX(-6px) scale(.88) rotate(-12deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

@keyframes cursorClickRight {
    0%   { transform: translateX(0) scale(1) rotate(0deg); }
    45%  { transform: translateX(6px) scale(1.12) rotate(12deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

/* Su touch il cursore custom non serve e non deve bloccare nulla */
@media (hover: none), (pointer: coarse) {
    html.sayonara-cursor-ready,
    html.sayonara-cursor-ready * {
        cursor: auto !important;
    }
    #custom-cursor,
    #cursor-trail {
        display: none !important;
    }
}



/* ======================================================
   NAVBAR DEFINITIVA — GLASS / COMPACT / ICONS
====================================================== */

html {
    scroll-behavior: smooth;
}

.navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1rem 2rem;
    width: auto;
    min-height: 46px;

    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 191, 255, 0.10);
    border-left: 0;
    border-right: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 0 0 rgba(0, 191, 255, 0),
        0 10px 28px rgba(0, 0, 0, 0.16);

    z-index: 20000;
    transition:
        width .55s cubic-bezier(.16, 1, .3, 1),
        padding .55s cubic-bezier(.16, 1, .3, 1),
        border-radius .55s cubic-bezier(.16, 1, .3, 1),
        transform .55s cubic-bezier(.16, 1, .3, 1),
        background .35s ease,
        box-shadow .35s ease;
}

.navbar .logo {
    color: #f4fbff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-shadow: 0 0 10px rgba(0, 191, 255, .25);
    white-space: nowrap;
}

.logo-short {
    display: none;
}

.navbar .nav-links,
.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
}

.nav-link {
    --proximity: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;

    color: #00cfff;
    text-decoration: none;
    padding: .55rem .55rem;
    border-radius: 999px;

    filter:
        drop-shadow(0 0 calc(2px + 5px * var(--proximity)) rgba(0, 191, 255, .45));
    transform:
        translateY(calc(-1px * var(--proximity)))
        scale(calc(1 + .08 * var(--proximity)));

    transition:
        color .22s ease,
        background .22s ease,
        transform .16s ease,
        filter .16s ease;
}

.nav-link::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    background:
        radial-gradient(circle at center,
            rgba(0, 191, 255, calc(.06 + .22 * var(--proximity))),
            transparent 72%);
    opacity: calc(.15 + .75 * var(--proximity));
    transform: scale(calc(.8 + .22 * var(--proximity)));
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: #effcff;
    background: rgba(0, 191, 255, .08);
    outline: none;
}

.nav-link:active {
    transform: scale(.94);
}

.nav-icon {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(0, 191, 255, .48));
    animation: navIconIdle 3.6s ease-in-out infinite;
}

.nav-link:nth-child(1) .nav-icon,
.nav-links li:nth-child(1) .nav-icon { animation-delay: 0s; }

.nav-links li:nth-child(2) .nav-icon { animation-delay: .35s; }
.nav-links li:nth-child(3) .nav-icon { animation-delay: .7s; }

.icon-spark {
    stroke-width: 2.6;
    animation: navSpark 2.2s ease-in-out infinite;
}

.icon-scan {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: navScan 3s ease-in-out infinite;
}

.nav-label {
    font-size: .94rem;
    transition: opacity .25s ease, width .25s ease, transform .25s ease;
}

/* Stato compatto dopo scroll */
.navbar.compact {
    position: fixed;
    top: 14px;
    left: 14px;
    right: auto;

    width: auto;
    padding: .48rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 191, 255, .22);

    background:
        linear-gradient(135deg, rgba(0, 0, 0, .32), rgba(0, 22, 36, .22));
    box-shadow:
        0 0 18px rgba(0, 191, 255, .12),
        0 12px 32px rgba(0, 0, 0, .34);

    transform: translate3d(0,0,0);
}

.navbar.compact .logo-full {
    display: none;
}

.navbar.compact .logo-short {
    display: inline;
}

.navbar.compact .logo {
    font-size: .86rem;
    margin-right: .1rem;
    opacity: .92;
}

.navbar.compact .nav-links {
    gap: .22rem;
}

.navbar.compact .nav-link {
    width: 39px;
    height: 39px;
    padding: 0;
    gap: 0;
}

.navbar.compact .nav-icon {
    width: 25px;
    height: 25px;
}

.navbar.compact .nav-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    width: max-content;
    max-width: 140px;
    padding: .25rem .52rem;
    border-radius: 999px;

    font-size: .72rem;
    background: rgba(0, 0, 0, .68);
    border: 1px solid rgba(0, 191, 255, .22);
    color: #dffaff;
    box-shadow: 0 0 14px rgba(0, 191, 255, .12);

    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-4px);
}

.navbar.compact .nav-link:hover .nav-label,
.navbar.compact .nav-link:focus-visible .nav-label,
.navbar.compact .nav-link.proximity-hot .nav-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.nav-toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 191, 255, .22);
    border-radius: 999px;
    background: rgba(0,0,0,.24);
}

.nav-toggle span {
    position: absolute;
    left: 11px;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: #00cfff;
    box-shadow: 0 0 6px rgba(0, 191, 255, .45);
}

.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 26px; }

@keyframes navIconIdle {
    0%, 100% {
        transform: translateY(0);
        opacity: .82;
        filter: drop-shadow(0 0 4px rgba(0, 191, 255, .32));
    }
    50% {
        transform: translateY(-1.5px);
        opacity: 1;
        filter: drop-shadow(0 0 9px rgba(0, 191, 255, .72));
    }
}

@keyframes navSpark {
    0%, 78%, 100% { opacity: .25; transform: scale(.9); }
    86% { opacity: 1; transform: scale(1.18); }
}

@keyframes navScan {
    0%, 38% { stroke-dashoffset: 22; opacity: .25; }
    52% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 22; opacity: .25; }
}

/* Mobile / tablet: compatta e leggibile */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    .navbar {
        position: fixed;
        top: 12px;
        left: 12px;
        right: auto;
        border-radius: 999px;
        padding: .45rem .55rem;
        border: 1px solid rgba(0, 191, 255, .22);
        background: rgba(0, 0, 0, .32);
    }

    .navbar .logo-full { display: none; }
    .navbar .logo-short { display: inline; }

    .navbar .logo {
        font-size: .8rem;
        margin-right: .1rem;
    }

    .nav-links {
        gap: .12rem;
    }

    .nav-link {
        width: 38px;
        height: 38px;
        padding: 0;
    }

    .nav-icon {
        width: 24px;
        height: 24px;
    }

    .nav-label {
        display: none;
    }
}


/* ======================================================
   CURSORE SAYONARA v2 — GIGLIO BLU + 4072 ARC
   Raffinamento: fiore orbitante, 4072 elettrico, scia poetica/cyber.
====================================================== */

#custom-cursor {
    --cursor-speed: 0;
    width: 86px;
    height: 86px;
}

#custom-cursor .cursor-shell {
    width: 86px;
    height: 86px;
}

#custom-cursor .cursor-aura {
    left: -4px;
    top: -4px;
    width: 76px;
    height: 76px;
    background:
      radial-gradient(circle at 42% 40%,
        rgba(220, 255, 255, calc(.20 + .20 * var(--cursor-speed))) 0%,
        rgba(0, 220, 255, calc(.30 + .22 * var(--cursor-speed))) 22%,
        rgba(64, 114, 255, calc(.16 + .18 * var(--cursor-speed))) 46%,
        rgba(0,0,0,0) 74%);
    filter: blur(calc(1px + 1px * var(--cursor-speed)));
    transform-origin: 28px 28px;
}

#custom-cursor .cursor-orbit,
#custom-cursor .cursor-orbit::before,
#custom-cursor .cursor-orbit::after {
    display: none !important;
}

/* Giglio blu orbitante */
#custom-cursor .cursor-lily {
    position: absolute;
    left: 42px;
    top: 38px;
    width: 25px;
    height: 25px;
    transform-origin: -12px -12px;
    filter:
      drop-shadow(0 0 5px rgba(0, 210, 255, .72))
      drop-shadow(0 0 12px rgba(64, 114, 255, .22));
    animation:
      lilyFloat 3.8s ease-in-out infinite,
      lilyOrbit 7.2s linear infinite;
    opacity: .82;
    will-change: transform, opacity, filter;
}

#custom-cursor .lily-petal {
    position: absolute;
    left: 10px;
    top: 2px;
    width: 7px;
    height: 15px;
    border-radius: 90% 90% 55% 55%;
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.95), rgba(155,240,255,.72) 35%, rgba(0,150,255,.28) 76%, rgba(0,0,0,0) 100%);
    border: 1px solid rgba(170, 245, 255, .45);
    transform-origin: 50% 88%;
}

#custom-cursor .lily-petal.p1 { transform: rotate(0deg) translateY(-2px); }
#custom-cursor .lily-petal.p2 { transform: rotate(72deg) translateY(-2px); }
#custom-cursor .lily-petal.p3 { transform: rotate(144deg) translateY(-2px); }
#custom-cursor .lily-petal.p4 { transform: rotate(216deg) translateY(-2px); }
#custom-cursor .lily-petal.p5 { transform: rotate(288deg) translateY(-2px); }

#custom-cursor .lily-core {
    position: absolute;
    left: 10px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.98), rgba(0,210,255,.75) 55%, rgba(64,114,255,.25));
    box-shadow: 0 0 7px rgba(0, 220, 255, .7);
}

/* 4072 curvo/elettrico */
#custom-cursor .cursor-code {
    position: absolute;
    left: 28px;
    top: 1px;
    width: 46px;
    height: 22px;
    pointer-events: none;
    transform: rotate(-18deg) translateY(0);
    transform-origin: 5px 20px;
    opacity: calc(.48 + .42 * var(--cursor-speed));
    animation: codeFlicker 2.9s steps(2, end) infinite;
    filter:
      drop-shadow(0 0 4px rgba(0, 220, 255, .62))
      drop-shadow(0 0 9px rgba(64, 114, 255, .30));
}

#custom-cursor .cursor-code span {
    position: absolute;
    left: 0;
    top: 1px;
    font: 700 10px/1 "Courier New", monospace;
    letter-spacing: .08em;
    color: rgba(200, 250, 255, .94);
    text-shadow:
      0 0 5px rgba(0, 220, 255, .75),
      0 0 12px rgba(64, 114, 255, .38);
    transform: skewX(-8deg) rotate(4deg);
}

#custom-cursor .cursor-code i {
    position: absolute;
    left: 26px;
    top: 12px;
    width: 18px;
    height: 9px;
    border-right: 2px solid rgba(0, 225, 255, .85);
    border-bottom: 2px solid rgba(0, 225, 255, .55);
    transform: skewX(-25deg) rotate(-22deg);
    clip-path: polygon(0 0, 60% 0, 36% 50%, 100% 50%, 32% 100%, 58% 58%, 0 58%);
    box-shadow: 0 0 8px rgba(0, 220, 255, .7);
    animation: lightningPulse 1.7s ease-in-out infinite;
}

#custom-cursor .cursor-img {
    width: 50px;
    height: 50px;
    filter:
      drop-shadow(0 0 5px rgba(0,191,255,.85))
      drop-shadow(0 0 13px rgba(64,114,255,.45));
}

#custom-cursor.is-hovering .cursor-aura {
    animation-duration: .9s;
    opacity: 1;
}

#custom-cursor.is-hovering .cursor-lily {
    opacity: 1;
    filter:
      drop-shadow(0 0 8px rgba(0, 230, 255, .9))
      drop-shadow(0 0 18px rgba(64, 114, 255, .45));
}

#custom-cursor.is-hovering .cursor-code {
    opacity: 1;
    animation-duration: 1.1s;
}

#custom-cursor.is-fast .cursor-lily {
    animation-duration: 2.4s, 4.8s;
}

#custom-cursor.is-fast .cursor-code {
    transform: rotate(-18deg) translateX(3px) scaleX(1.12);
}

#custom-cursor.click-left .cursor-lily,
#custom-cursor.click-right .cursor-lily {
    animation: lilyClick .28s ease-out, lilyOrbit 7.2s linear infinite;
}

#custom-cursor.click-left .cursor-code,
#custom-cursor.click-right .cursor-code {
    animation: codeClick .24s ease-out;
}

@keyframes lilyFloat {
    0%, 100% { opacity: .76; transform: translate(0, 0) scale(.92); }
    50% { opacity: 1; transform: translate(1px, -3px) scale(1.05); }
}

@keyframes lilyOrbit {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

@keyframes lilyClick {
    0% { scale: 1; }
    45% { scale: .72; filter: brightness(1.8); }
    100% { scale: 1; }
}

@keyframes codeFlicker {
    0%, 84%, 100% { opacity: .56; translate: 0 0; }
    86% { opacity: 1; translate: 1px -1px; }
    88% { opacity: .38; translate: -1px 1px; }
    90% { opacity: .95; translate: 0 0; }
}

@keyframes lightningPulse {
    0%, 100% { opacity: .42; transform: skewX(-25deg) rotate(-22deg) scale(.86); }
    50% { opacity: 1; transform: skewX(-25deg) rotate(-22deg) scale(1.08); }
}

@keyframes codeClick {
    0% { filter: brightness(1); transform: rotate(-18deg) scale(1); }
    40% { filter: brightness(2); transform: rotate(-20deg) scale(1.18); }
    100% { filter: brightness(1); transform: rotate(-18deg) scale(1); }
}


/* ======================================================
   CURSORE TEST v19 — giglio stabile senza orbita
   Scopo: verificare se il bug deriva dall'orbita del giglio.
   La freccia/piuma torna animata come prima, scia e 4072 restano.
====================================================== */

#custom-cursor .cursor-lily {
    /* posizione leggermente più lontana e stabile */
    left: 50px !important;
    top: 42px !important;

    /* niente orbita per questo test */
    transform-origin: center center !important;
    animation: lilyFloatOnly 3.4s ease-in-out infinite !important;

    opacity: .9;
    filter:
      drop-shadow(0 0 6px rgba(0, 210, 255, .78))
      drop-shadow(0 0 14px rgba(64, 114, 255, .30));
}

/* Se qualche regola precedente prova a velocizzarlo in movimento, la neutralizziamo */
#custom-cursor.is-fast .cursor-lily {
    animation: lilyFloatOnly 3.4s ease-in-out infinite !important;
}

/* Click: piccolo pulse, ma senza cambiare lato/orbita */
#custom-cursor.click-left .cursor-lily,
#custom-cursor.click-right .cursor-lily {
    animation: lilyPulseOnly .24s ease-out, lilyFloatOnly 3.4s ease-in-out infinite !important;
}

@keyframes lilyFloatOnly {
    0%, 100% {
        transform: translate(0, 0) scale(.94);
        opacity: .78;
    }
    50% {
        transform: translate(1px, -3px) scale(1.06);
        opacity: 1;
    }
}

@keyframes lilyPulseOnly {
    0%   { transform: translate(0, 0) scale(1); }
    45%  { transform: translate(0, -1px) scale(.82); filter: brightness(1.7); }
    100% { transform: translate(0, 0) scale(1); }
}




/* ======================================================
   CURSORE FIX v21 — freccia ferma in movimento, click attivo
   La piuma non ruota durante il movimento, ma reagisce al click.
====================================================== */

/* Stato normale: stabile */
#custom-cursor .cursor-img {
    transition: none;
}

/* Il wrapper resta stabile e non influenza giglio/4072 */
#custom-cursor .cursor-shell {
    transform: none !important;
}

/* Click sinistro: impulso verso sinistra/avanti */
#custom-cursor.click-left .cursor-img {
    animation: featherClickLeftV21 .24s ease-out both !important;
}

/* Click destro: impulso verso destra */
#custom-cursor.click-right .cursor-img {
    animation: featherClickRightV21 .24s ease-out both !important;
}

@keyframes featherClickLeftV21 {
    0%   { transform: translateX(0) translateY(0) rotate(0deg) scale(1); filter: brightness(1); }
    42%  { transform: translateX(-6px) translateY(1px) rotate(-10deg) scale(.90); filter: brightness(1.45); }
    100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); filter: brightness(1); }
}

@keyframes featherClickRightV21 {
    0%   { transform: translateX(0) translateY(0) rotate(0deg) scale(1); filter: brightness(1); }
    42%  { transform: translateX(6px) translateY(1px) rotate(10deg) scale(1.08); filter: brightness(1.45); }
    100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); filter: brightness(1); }
}


/* ======================================================
   CURSORE FIX v22 — giglio soft-orbit stabile
   Niente orbita 360°: movimento ellittico controllato, senza duplicazioni/salti.
====================================================== */

/* Il giglio resta vicino alla piuma ma non la incrocia */
#custom-cursor .cursor-lily {
    left: 50px !important;
    top: 42px !important;
    width: 26px !important;
    height: 26px !important;

    transform-origin: center center !important;
    animation: lilySoftOrbitV22 4.6s ease-in-out infinite !important;

    opacity: .88;
    filter:
      drop-shadow(0 0 6px rgba(0, 210, 255, .78))
      drop-shadow(0 0 14px rgba(64, 114, 255, .30));
    will-change: transform, opacity, filter;
}

/* Hover/interazione: glow più forte, ma senza alterare il percorso */
#custom-cursor.is-hovering .cursor-lily {
    opacity: 1;
    filter:
      drop-shadow(0 0 9px rgba(0, 230, 255, .95))
      drop-shadow(0 0 20px rgba(64, 114, 255, .48));
}

/* Movimento veloce: non cambiamo lato, aumenta solo leggermente la vitalità */
#custom-cursor.is-fast .cursor-lily {
    animation: lilySoftOrbitV22 3.7s ease-in-out infinite !important;
}

/* Click: pulse + poi ritorno alla soft orbit */
#custom-cursor.click-left .cursor-lily,
#custom-cursor.click-right .cursor-lily {
    animation: lilyPulseV22 .26s ease-out, lilySoftOrbitV22 4.6s ease-in-out infinite !important;
}

/* movimento ellittico piccolo: sembra orbitare/fluttuare senza passare dall'altra parte */
@keyframes lilySoftOrbitV22 {
    0%, 100% {
        transform: translate(0, 0) scale(.94) rotate(-2deg);
        opacity: .82;
    }
    25% {
        transform: translate(3px, -3px) scale(1.00) rotate(4deg);
        opacity: .95;
    }
    50% {
        transform: translate(0px, -6px) scale(1.07) rotate(0deg);
        opacity: 1;
    }
    75% {
        transform: translate(-3px, -2px) scale(1.00) rotate(-4deg);
        opacity: .94;
    }
}

@keyframes lilyPulseV22 {
    0%   { transform: translate(0, 0) scale(1); filter: brightness(1); }
    42%  { transform: translate(0, -1px) scale(.78); filter: brightness(1.75); }
    100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}


/* ======================================================
   CURSORE FIX v23 — giglio Bloom Orbit
   Versione più elegante: orbita morbida, bloom, shimmer, petali più vivi.
   Non tocca freccia, scia, scrollbar, navbar.
====================================================== */

#custom-cursor .cursor-lily {
    left: 50px !important;
    top: 41px !important;
    width: 28px !important;
    height: 28px !important;
    transform-origin: center center !important;
    animation:
        lilyBloomOrbitV23 5.2s cubic-bezier(.45, 0, .25, 1) infinite,
        lilyBloomGlowV23 2.8s ease-in-out infinite !important;
    opacity: .92;
    filter:
      drop-shadow(0 0 7px rgba(0, 225, 255, .82))
      drop-shadow(0 0 16px rgba(64, 114, 255, .36));
    will-change: transform, opacity, filter;
}

#custom-cursor .cursor-lily .lily-petal {
    background:
      radial-gradient(circle at 50% 12%,
        rgba(255,255,255,.98) 0%,
        rgba(200,250,255,.88) 24%,
        rgba(80,220,255,.48) 58%,
        rgba(0,120,255,.18) 88%,
        rgba(0,0,0,0) 100%);
    border: 1px solid rgba(205, 250, 255, .62);
    box-shadow:
      inset 0 0 4px rgba(255,255,255,.24),
      0 0 5px rgba(0, 210, 255, .28);
}

#custom-cursor .cursor-lily .lily-core {
    background:
      radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(170,245,255,.95) 35%,
        rgba(0,210,255,.72) 67%,
        rgba(64,114,255,.20) 100%);
    box-shadow:
      0 0 7px rgba(0, 230, 255, .88),
      0 0 13px rgba(64, 114, 255, .38);
    animation: lilyCorePulseV23 2.4s ease-in-out infinite;
}

#custom-cursor .cursor-lily::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 1px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background:
      linear-gradient(115deg,
        transparent 0%,
        transparent 36%,
        rgba(255,255,255,.34) 45%,
        rgba(130,240,255,.28) 51%,
        transparent 62%,
        transparent 100%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-8px) rotate(18deg);
    animation: lilyShimmerV23 4.6s ease-in-out infinite;
    pointer-events: none;
}

#custom-cursor.is-hovering .cursor-lily {
    opacity: 1;
    animation:
        lilyBloomOrbitHoverV23 4.2s cubic-bezier(.45, 0, .25, 1) infinite,
        lilyBloomGlowV23 1.8s ease-in-out infinite !important;
    filter:
      drop-shadow(0 0 10px rgba(0, 235, 255, .98))
      drop-shadow(0 0 23px rgba(64, 114, 255, .56));
}

#custom-cursor.is-fast .cursor-lily {
    animation:
        lilyBloomOrbitFastV23 3.9s cubic-bezier(.45, 0, .25, 1) infinite,
        lilyBloomGlowV23 1.9s ease-in-out infinite !important;
}

#custom-cursor.click-left .cursor-lily,
#custom-cursor.click-right .cursor-lily {
    animation:
        lilyBloomClickV23 .32s ease-out,
        lilyBloomOrbitV23 5.2s cubic-bezier(.45, 0, .25, 1) infinite,
        lilyBloomGlowV23 2.8s ease-in-out infinite !important;
}

@keyframes lilyBloomOrbitV23 {
    0%, 100% { transform: translate(0, 0) scale(.94) rotate(-5deg); opacity: .82; }
    22% { transform: translate(4px, -4px) scale(1.00) rotate(4deg); opacity: .94; }
    50% { transform: translate(0px, -8px) scale(1.09) rotate(0deg); opacity: 1; }
    76% { transform: translate(-4px, -3px) scale(1.01) rotate(-6deg); opacity: .95; }
}

@keyframes lilyBloomOrbitHoverV23 {
    0%, 100% { transform: translate(0, 0) scale(.98) rotate(-3deg); }
    50% { transform: translate(0, -6px) scale(1.12) rotate(3deg); }
}

@keyframes lilyBloomOrbitFastV23 {
    0%, 100% { transform: translate(0, 0) scale(.96) rotate(-6deg); }
    35% { transform: translate(4px, -5px) scale(1.05) rotate(5deg); }
    70% { transform: translate(-3px, -3px) scale(1.02) rotate(-5deg); }
}

@keyframes lilyBloomGlowV23 {
    0%, 100% {
        filter:
          drop-shadow(0 0 6px rgba(0, 215, 255, .70))
          drop-shadow(0 0 14px rgba(64, 114, 255, .30));
    }
    50% {
        filter:
          drop-shadow(0 0 10px rgba(0, 240, 255, .98))
          drop-shadow(0 0 22px rgba(64, 114, 255, .52));
    }
}

@keyframes lilyCorePulseV23 {
    0%, 100% { transform: scale(.90); opacity: .82; }
    50% { transform: scale(1.18); opacity: 1; }
}

@keyframes lilyShimmerV23 {
    0%, 68%, 100% { opacity: 0; transform: translateX(-10px) rotate(18deg); }
    75% { opacity: .65; transform: translateX(3px) rotate(18deg); }
    84% { opacity: 0; transform: translateX(12px) rotate(18deg); }
}

@keyframes lilyBloomClickV23 {
    0% { transform: translate(0, 0) scale(1); filter: brightness(1); }
    38% { transform: translate(0, -2px) scale(.78); filter: brightness(1.9); }
    72% { transform: translate(0, -4px) scale(1.18); filter: brightness(1.55); }
    100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}


/* ======================================================
   NAVBAR v24 — Liquid Morph + Blue Lily Logo
   Transizione compatta tipo goccia d'acqua e logo giglio animato.
====================================================== */

.navbar {
    transform-origin: top left;
    overflow: visible;
    transition:
        width .72s cubic-bezier(.2, 1.25, .22, 1),
        max-width .72s cubic-bezier(.2, 1.25, .22, 1),
        padding .72s cubic-bezier(.2, 1.25, .22, 1),
        border-radius .72s cubic-bezier(.2, 1.25, .22, 1),
        transform .72s cubic-bezier(.2, 1.25, .22, 1),
        background .45s ease,
        box-shadow .45s ease,
        filter .45s ease;
}

/* pseudo-goccia luminosa durante/nel compatto */
.navbar::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    background:
      radial-gradient(circle at 18% 50%, rgba(0, 225, 255, .20), transparent 38%),
      radial-gradient(circle at 82% 50%, rgba(64, 114, 255, .13), transparent 48%);
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
    z-index: -1;
    transition: opacity .55s ease, transform .72s cubic-bezier(.2, 1.25, .22, 1);
}

.navbar.compact::before {
    opacity: 1;
    animation: liquidDropPulse 3.8s ease-in-out infinite;
}

/* Effetto goccia: piccolo stretch/spring quando diventa compatta */
.navbar.compact {
    border-radius: 999px 999px 999px 28px;
    filter: saturate(1.08);
    animation: liquidCompactSettle .72s cubic-bezier(.2, 1.25, .22, 1) both;
}

/* al passaggio del mouse si apre come goccia viva, ma resta compatta */
.navbar.compact:hover,
.navbar.compact:focus-within {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .38), rgba(0, 30, 48, .28));
    box-shadow:
        0 0 24px rgba(0, 210, 255, .18),
        0 16px 38px rgba(0, 0, 0, .38);
    transform: scale(1.015);
}

@keyframes liquidCompactSettle {
    0% {
        transform: translate3d(0, -4px, 0) scaleX(1.12) scaleY(.88);
        border-radius: 26px 999px 999px 999px;
    }
    48% {
        transform: translate3d(0, 1px, 0) scaleX(.96) scaleY(1.06);
        border-radius: 999px 32px 999px 999px;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 999px 999px 999px 28px;
    }
}

@keyframes liquidDropPulse {
    0%, 100% {
        transform: scale(.94, .86);
        opacity: .52;
    }
    50% {
        transform: scale(1.08, 1.02);
        opacity: .90;
    }
}

/* Logo giglio compatto */
.logo-lily {
    position: relative;
    display: none;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    filter:
      drop-shadow(0 0 6px rgba(0, 220, 255, .58))
      drop-shadow(0 0 14px rgba(64, 114, 255, .25));
    transform-origin: center;
    animation: logoLilyFloat 3.6s ease-in-out infinite;
}

.logo-lily-svg {
    width: 34px;
    height: 34px;
    overflow: visible;
}

.logo-lily .lily-petal {
    fill: url(#none);
    stroke: rgba(205, 250, 255, .88);
    stroke-width: 2.2;
    stroke-linejoin: round;
    fill: rgba(0, 190, 255, .18);
    transform-origin: 32px 32px;
    animation: logoPetalBreath 3.6s ease-in-out infinite;
}

.logo-lily .lp1 { animation-delay: 0s; }
.logo-lily .lp2 { animation-delay: .08s; }
.logo-lily .lp3 { animation-delay: .16s; }
.logo-lily .lp4 { animation-delay: .24s; }
.logo-lily .lp5 { animation-delay: .32s; }

.logo-lily .lily-core-logo {
    fill: rgba(235, 255, 255, .96);
    filter: drop-shadow(0 0 5px rgba(0, 230, 255, .85));
    animation: logoCorePulse 2.4s ease-in-out infinite;
}

.logo-lily .lily-stem-logo,
.logo-lily .lily-spark-logo {
    fill: none;
    stroke: rgba(0, 220, 255, .72);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-lily .lily-spark-logo {
    opacity: .55;
    animation: logoSpark 2.1s ease-in-out infinite;
}

/* In compatto: niente s_a.exe, solo giglio */
.navbar.compact .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .12rem;
}

.navbar.compact .logo-short {
    display: inline-flex;
}

.navbar.compact .logo-lily {
    display: inline-flex;
}

/* In expanded resta il testo completo */
.navbar:not(.compact) .logo-lily {
    display: none;
}

/* Hover/proximity del logo giglio */
.navbar.compact .logo:hover .logo-lily,
.navbar.compact .logo:focus-visible .logo-lily,
.navbar.compact .logo.logo-proximity .logo-lily {
    filter:
      drop-shadow(0 0 9px rgba(0, 240, 255, .95))
      drop-shadow(0 0 23px rgba(64, 114, 255, .48));
    animation-duration: 2.2s;
}

.navbar.compact .logo:hover .lily-petal,
.navbar.compact .logo:focus-visible .lily-petal,
.navbar.compact .logo.logo-proximity .lily-petal {
    stroke: rgba(240, 255, 255, .98);
    fill: rgba(0, 220, 255, .28);
}

@keyframes logoLilyFloat {
    0%, 100% { transform: translateY(0) scale(.96) rotate(-2deg); }
    50% { transform: translateY(-2px) scale(1.05) rotate(2deg); }
}

@keyframes logoPetalBreath {
    0%, 100% { transform: scale(.94); opacity: .82; }
    50% { transform: scale(1.04); opacity: 1; }
}

@keyframes logoCorePulse {
    0%, 100% { transform: scale(.86); opacity: .78; }
    50% { transform: scale(1.16); opacity: 1; }
}

@keyframes logoSpark {
    0%, 72%, 100% { opacity: .2; transform: scale(.85); }
    82% { opacity: 1; transform: scale(1.16); }
}


/* ======================================================
   NAVBAR v25 — Liquid slow morph + refined blue lily + wider compact icons
====================================================== */

/* transizione più lenta, morbida e meno scattosa */
.navbar {
    transition:
        width 1.05s cubic-bezier(.22, .90, .22, 1),
        max-width 1.05s cubic-bezier(.22, .90, .22, 1),
        padding 1.05s cubic-bezier(.22, .90, .22, 1),
        border-radius 1.05s cubic-bezier(.22, .90, .22, 1),
        transform 1.05s cubic-bezier(.22, .90, .22, 1),
        background .72s ease,
        box-shadow .72s ease,
        filter .72s ease,
        backdrop-filter .72s ease;
}

/* niente scatto eccessivo: morph liquido più lento e respirato */
.navbar.compact {
    animation: liquidCompactSettleV25 1.08s cubic-bezier(.22, .90, .22, 1) both !important;
}

/* la goccia respira più lentamente */
.navbar.compact::before {
    animation: liquidDropPulseV25 5.8s ease-in-out infinite !important;
}

/* spazio maggiore tra icone in compatto: circa 40px di respiro */
.navbar.compact .nav-links {
    gap: 40px !important;
    margin-left: 10px;
    margin-right: 8px;
}

/* icone leggermente più comode dentro la pillola più larga */
.navbar.compact .nav-link {
    width: 42px;
    height: 42px;
}

/* pillola più elegante per accogliere lo spazio tra icone */
.navbar.compact {
    padding: .52rem 1.05rem !important;
}

/* giglio logo più grande e più rifinito */
.logo-lily {
    width: 40px !important;
    height: 40px !important;
    filter:
      drop-shadow(0 0 7px rgba(0, 230, 255, .72))
      drop-shadow(0 0 18px rgba(64, 114, 255, .34)) !important;
    animation: logoLilyFloatV25 4.8s ease-in-out infinite !important;
}

.logo-lily-svg {
    width: 40px !important;
    height: 40px !important;
    overflow: visible;
}

/* nuovo giglio pieno/curato */
.logo-lily-halo circle {
    fill: rgba(0, 210, 255, .06);
    stroke: rgba(0, 220, 255, .18);
    stroke-width: 1.2;
    transform-origin: 40px 40px;
    animation: logoHaloBreathV25 4.8s ease-in-out infinite;
}

.logo-petal {
    fill: url(#lilyPetalBlue);
    stroke: rgba(225, 255, 255, .82);
    stroke-width: 1.85;
    stroke-linejoin: round;
    transform-origin: 40px 40px;
    animation: logoPetalBloomV25 5.2s ease-in-out infinite;
}

.logo-p1 { animation-delay: 0s; }
.logo-p2 { animation-delay: .10s; }
.logo-p3 { animation-delay: .20s; }
.logo-p4 { animation-delay: .30s; }
.logo-p5 { animation-delay: .40s; }
.logo-p6 { animation-delay: .50s; }

.logo-lily-core {
    fill: url(#lilyCoreGlow);
    animation: logoCorePulseV25 2.9s ease-in-out infinite;
}

.logo-lily-stamen {
    fill: none;
    stroke: rgba(235, 255, 255, .72);
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: .82;
}

.logo-lily-stem {
    fill: none;
    stroke: rgba(0, 220, 255, .58);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .78;
}

.logo-lily-spark {
    fill: none;
    stroke: rgba(195, 248, 255, .86);
    stroke-width: 2.1;
    stroke-linecap: round;
    opacity: .52;
    animation: logoSparkV25 2.8s ease-in-out infinite;
}

.logo-lily-spark.small {
    opacity: .34;
    animation-delay: .7s;
}

/* Hover/proximity: più luce e bloom, ma controllato */
.navbar.compact .logo:hover .logo-lily,
.navbar.compact .logo:focus-visible .logo-lily,
.navbar.compact .logo.logo-proximity .logo-lily {
    filter:
      drop-shadow(0 0 11px rgba(0, 245, 255, .98))
      drop-shadow(0 0 26px rgba(64, 114, 255, .54)) !important;
    animation-duration: 3.2s !important;
}

.navbar.compact .logo:hover .logo-petal,
.navbar.compact .logo:focus-visible .logo-petal,
.navbar.compact .logo.logo-proximity .logo-petal {
    stroke: rgba(255, 255, 255, .98);
    filter: brightness(1.25);
}

/* Animazione navbar più acqua/liquid, non scattosa */
@keyframes liquidCompactSettleV25 {
    0% {
        transform: translate3d(-4px, -3px, 0) scaleX(1.045) scaleY(.965);
        border-radius: 32px 999px 999px 999px;
        filter: saturate(1.02) blur(0px);
    }
    42% {
        transform: translate3d(1px, .5px, 0) scaleX(.985) scaleY(1.018);
        border-radius: 999px 46px 999px 999px;
        filter: saturate(1.10);
    }
    72% {
        transform: translate3d(0, 0, 0) scaleX(1.006) scaleY(.997);
        border-radius: 999px 999px 999px 36px;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 999px 999px 999px 32px;
    }
}

@keyframes liquidDropPulseV25 {
    0%, 100% {
        transform: scale(.96, .88);
        opacity: .42;
    }
    50% {
        transform: scale(1.06, 1.02);
        opacity: .78;
    }
}

@keyframes logoLilyFloatV25 {
    0%, 100% { transform: translateY(0) scale(.96) rotate(-1.5deg); }
    50% { transform: translateY(-2px) scale(1.045) rotate(1.5deg); }
}

@keyframes logoHaloBreathV25 {
    0%, 100% { transform: scale(.86); opacity: .28; }
    50% { transform: scale(1.10); opacity: .74; }
}

@keyframes logoPetalBloomV25 {
    0%, 100% { transform: scale(.94); opacity: .82; }
    50% { transform: scale(1.055); opacity: 1; }
}

@keyframes logoCorePulseV25 {
    0%, 100% { transform: scale(.86); opacity: .78; }
    50% { transform: scale(1.18); opacity: 1; }
}

@keyframes logoSparkV25 {
    0%, 72%, 100% { opacity: .22; transform: scale(.86); }
    82% { opacity: 1; transform: scale(1.18); }
}

/* tablet/mobile: gap ridotto per non uscire dallo schermo */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    .navbar.compact .nav-links,
    .nav-links {
        gap: 14px !important;
    }

    .logo-lily,
    .logo-lily-svg {
        width: 34px !important;
        height: 34px !important;
    }
}


/* ======================================================
   NAVBAR v26 — precision hover + smoother continuous morph
   - meno conflitto tra icone
   - gap icone compatte 20px
   - passaggio expanded/compact più fluido perché la navbar resta fixed
====================================================== */

/* Sempre fixed: evita il salto sticky -> fixed durante il morph */
.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: auto;
    width: 100vw;
    box-sizing: border-box;

    /* transizione più lunga, continua e meno scattosa */
    transition:
        width 1.28s cubic-bezier(.18, .82, .22, 1),
        max-width 1.28s cubic-bezier(.18, .82, .22, 1),
        padding 1.28s cubic-bezier(.18, .82, .22, 1),
        border-radius 1.28s cubic-bezier(.18, .82, .22, 1),
        transform 1.28s cubic-bezier(.18, .82, .22, 1),
        background .85s ease,
        box-shadow .85s ease,
        filter .85s ease,
        backdrop-filter .85s ease !important;
}

/* Siccome ora è fixed, diamo aria al contenuto iniziale */
.hero {
    padding-top: 145px;
}

/* Compact con larghezza numerica: la width può interpolare davvero */
.navbar.compact {
    top: 14px;
    left: 14px;
    width: min(335px, calc(100vw - 28px));
    padding: .52rem .82rem !important;

    /* niente keyframe scattoso sul container: ora transizione continua */
    animation: none !important;

    border-radius: 999px 999px 999px 34px;
    transform: translate3d(0, 0, 0) scale(1);
}

/* effetto liquido morbido solo come respiro interno, non come salto del container */
.navbar.compact::before {
    animation: liquidDropPulseV26 6.4s ease-in-out infinite !important;
}

/* gap richiesto: 20px tra icone */
.navbar.compact .nav-links {
    gap: 20px !important;
    margin-left: 8px;
    margin-right: 4px;
}

/* area attiva più precisa e non enorme */
.navbar.compact .nav-link {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    flex: 0 0 38px;
}

/* Riduciamo l'effetto visivo di proximity: meno possibilità che due sembrino attive */
.nav-link {
    transform:
        translateY(calc(-0.5px * var(--proximity)))
        scale(calc(1 + .045 * var(--proximity))) !important;
    filter:
        drop-shadow(0 0 calc(1px + 3.5px * var(--proximity)) rgba(0, 191, 255, .40)) !important;
}

.nav-link::before {
    inset: -2px !important;
    opacity: calc(.05 + .52 * var(--proximity)) !important;
    transform: scale(calc(.78 + .16 * var(--proximity))) !important;
}

/* Label: appare solo su hover/focus o sull'unico link più vicino scelto dal JS */
.navbar.compact .nav-link:not(:hover):not(:focus-visible):not(.proximity-hot) .nav-label {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-4px) !important;
}

/* Ingrandimento/hover della navbar più morbido e continuo */
.navbar.compact:hover,
.navbar.compact:focus-within {
    transform: translate3d(0,0,0) scale(1.008) !important;
}

/* Piccolo "wet highlight" che scivola durante hover, senza scattare */
.navbar::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
      linear-gradient(115deg,
        transparent 0%,
        transparent 42%,
        rgba(180, 245, 255, .10) 50%,
        transparent 60%,
        transparent 100%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-18%);
    transition: opacity .75s ease, transform 1.15s cubic-bezier(.18,.82,.22,1);
}

.navbar.compact:hover::after,
.navbar.compact:focus-within::after {
    opacity: 1;
    transform: translateX(18%);
}

@keyframes liquidDropPulseV26 {
    0%, 100% {
        transform: scale(.98, .92);
        opacity: .34;
    }
    50% {
        transform: scale(1.045, 1.015);
        opacity: .64;
    }
}

/* Mobile/tablet: non forziamo 335px se non serve */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    .navbar {
        width: auto !important;
    }

    .navbar.compact {
        width: auto !important;
        max-width: calc(100vw - 24px);
    }

    .navbar.compact .nav-links,
    .nav-links {
        gap: 12px !important;
    }

    .hero {
        padding-top: 120px;
    }
}


/* ======================================================
   NAVBAR v27 — LEGENDARY LIQUID GLITCH MORPH
   Trasformazione/detrasformazione narrativa:
   glass liquido + micro glitch + condensazione verso il giglio.
====================================================== */

/* Variabili di morph */
.navbar {
    --morph-glow: 0;
    --morph-blur: 0px;
    --morph-shift: 0px;
    isolation: isolate;
}

/* Layer glitch/liquido superiore */
.navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    mix-blend-mode: screen;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(0, 230, 255, .00) 18%,
        rgba(0, 230, 255, .22) 38%,
        rgba(240, 255, 255, .20) 48%,
        rgba(64, 114, 255, .18) 58%,
        transparent 78%),
      repeating-linear-gradient(
        180deg,
        rgba(0, 220, 255, .0) 0px,
        rgba(0, 220, 255, .0) 7px,
        rgba(0, 220, 255, .16) 8px,
        rgba(0, 220, 255, .0) 10px
      );
    transform: translateX(-26%) skewX(-8deg);
    filter: blur(.2px);
}

/* Micro testo 4072 durante morph */
.navbar .logo::after {
    content: "4072";
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    font: 700 .68rem/1 "Courier New", monospace;
    letter-spacing: .12em;
    color: rgba(160, 245, 255, .0);
    text-shadow:
      0 0 7px rgba(0, 220, 255, .0),
      0 0 16px rgba(64, 114, 255, .0);
    pointer-events: none;
    transition: opacity .3s ease, color .3s ease, text-shadow .3s ease, transform .55s ease;
}

/* Stati morph: effetto condensazione */
.navbar.morph-to-compact,
.navbar.morph-to-expanded {
    box-shadow:
      0 0 calc(18px + 22px * var(--morph-glow)) rgba(0, 210, 255, .18),
      0 18px 48px rgba(0, 0, 0, .40);
}

.navbar.morph-to-compact::after {
    animation: morphScanToCompact 1.08s cubic-bezier(.18, .82, .22, 1) both;
}

.navbar.morph-to-expanded::after {
    animation: morphScanToExpanded 1.02s cubic-bezier(.18, .82, .22, 1) both;
}

.navbar.morph-to-compact {
    animation: liquidGlitchCompactV27 1.08s cubic-bezier(.18, .82, .22, 1) both !important;
}

.navbar.morph-to-expanded {
    animation: liquidGlitchExpandedV27 1.02s cubic-bezier(.18, .82, .22, 1) both !important;
}

/* Testi/link: dissolvenza narrativa durante il morph */
.navbar.morph-to-compact .logo-full,
.navbar.morph-to-compact .nav-label {
    animation: textCondenseV27 .72s ease both;
}

.navbar.morph-to-expanded .logo-full,
.navbar.morph-to-expanded .nav-label {
    animation: textRevealV27 .78s ease both;
}

/* Icone: emergono come ricostruite dal glitch */
.navbar.morph-to-compact .nav-icon {
    animation:
      navIconRebuildV27 .82s cubic-bezier(.18, .82, .22, 1) both,
      navIconIdle 3.6s ease-in-out infinite .85s !important;
}

.navbar.morph-to-compact .nav-links li:nth-child(1) .nav-icon { animation-delay: .08s, .9s !important; }
.navbar.morph-to-compact .nav-links li:nth-child(2) .nav-icon { animation-delay: .16s, 1s !important; }
.navbar.morph-to-compact .nav-links li:nth-child(3) .nav-icon { animation-delay: .24s, 1.1s !important; }

.navbar.morph-to-expanded .nav-icon {
    animation:
      navIconDecompileV27 .54s ease both,
      navIconIdle 3.6s ease-in-out infinite .58s !important;
}

/* Giglio logo: bloom di condensazione/espansione */
.navbar.morph-to-compact .logo-lily {
    animation:
      logoLilyCondenseV27 1.05s cubic-bezier(.18,.82,.22,1) both,
      logoLilyFloatV25 4.8s ease-in-out infinite 1.05s !important;
}

.navbar.morph-to-expanded .logo-lily {
    animation: logoLilyReleaseV27 .82s ease both !important;
}

/* 4072 appare come frammento di compilazione */
.navbar.morph-to-compact .logo::after,
.navbar.morph-to-expanded .logo::after {
    color: rgba(185, 250, 255, .88);
    text-shadow:
      0 0 7px rgba(0, 220, 255, .8),
      0 0 16px rgba(64, 114, 255, .42);
    animation: codeBlinkV27 1.05s steps(2, end) both;
}

/* Piccoli glitch sui link durante morph, controllati */
.navbar.morph-to-compact .nav-link,
.navbar.morph-to-expanded .nav-link {
    animation: navLinkMicroGlitchV27 .42s steps(2, end) 1;
}

/* Highlight liquido più leggibile durante hover dopo morph */
.navbar.compact:hover::after,
.navbar.compact:focus-within::after {
    opacity: .55;
    animation: hoverLiquidSweepV27 1.25s cubic-bezier(.18,.82,.22,1) both;
}

/* Morph container: compatta */
@keyframes liquidGlitchCompactV27 {
    0% {
        transform: translate3d(0,0,0) scaleX(1) scaleY(1);
        filter: saturate(1) blur(0);
        border-radius: 0;
    }
    18% {
        transform: translate3d(-2px, -1px, 0) scaleX(1.018) scaleY(.985);
        filter: saturate(1.2) blur(.15px);
        border-radius: 24px 60px 60px 24px;
    }
    45% {
        transform: translate3d(2px, 1px, 0) scaleX(.982) scaleY(1.028);
        filter: saturate(1.35) blur(.05px);
        border-radius: 999px 52px 999px 999px;
    }
    72% {
        transform: translate3d(0,0,0) scaleX(1.006) scaleY(.998);
        filter: saturate(1.12) blur(0);
        border-radius: 999px 999px 999px 38px;
    }
    100% {
        transform: translate3d(0,0,0) scale(1);
        filter: saturate(1.08);
        border-radius: 999px 999px 999px 34px;
    }
}

/* Morph container: espansa */
@keyframes liquidGlitchExpandedV27 {
    0% {
        transform: translate3d(0,0,0) scaleX(.985) scaleY(1.02);
        filter: saturate(1.14);
        border-radius: 999px 999px 999px 34px;
    }
    30% {
        transform: translate3d(1px, -1px, 0) scaleX(1.015) scaleY(.986);
        filter: saturate(1.25) blur(.12px);
        border-radius: 40px 999px 999px 40px;
    }
    66% {
        transform: translate3d(0,0,0) scaleX(.998) scaleY(1.004);
        filter: saturate(1.08);
        border-radius: 22px;
    }
    100% {
        transform: translate3d(0,0,0) scale(1);
        filter: saturate(1);
        border-radius: 0;
    }
}

@keyframes morphScanToCompact {
    0% { opacity: 0; transform: translateX(-32%) skewX(-10deg); }
    22% { opacity: .65; }
    52% { opacity: .9; transform: translateX(22%) skewX(-7deg); }
    100% { opacity: 0; transform: translateX(54%) skewX(-4deg); }
}

@keyframes morphScanToExpanded {
    0% { opacity: 0; transform: translateX(44%) skewX(8deg); }
    22% { opacity: .72; }
    58% { opacity: .85; transform: translateX(-16%) skewX(6deg); }
    100% { opacity: 0; transform: translateX(-36%) skewX(2deg); }
}

@keyframes textCondenseV27 {
    0% { opacity: 1; transform: translateY(0); filter: blur(0); }
    35% { opacity: .45; transform: translateY(-1px); filter: blur(.25px); }
    100% { opacity: 0; transform: translateY(-5px); filter: blur(1px); }
}

@keyframes textRevealV27 {
    0% { opacity: 0; transform: translateY(5px); filter: blur(1px); }
    48% { opacity: .55; transform: translateY(1px); filter: blur(.25px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes navIconRebuildV27 {
    0% { opacity: 0; transform: translateX(-6px) scale(.72); filter: blur(1px) drop-shadow(0 0 0 rgba(0,191,255,0)); }
    45% { opacity: 1; transform: translateX(1px) scale(1.12); filter: blur(.2px) drop-shadow(0 0 13px rgba(0,191,255,.78)); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0) drop-shadow(0 0 7px rgba(0,191,255,.44)); }
}

@keyframes navIconDecompileV27 {
    0% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 7px rgba(0,191,255,.44)); }
    48% { opacity: .75; transform: translateX(3px) scale(.96); filter: blur(.25px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes logoLilyCondenseV27 {
    0% { opacity: .0; transform: scale(.65) rotate(-18deg); filter: brightness(.8); }
    45% { opacity: 1; transform: scale(1.22) rotate(5deg); filter: brightness(1.55); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes logoLilyReleaseV27 {
    0% { opacity: 1; transform: scale(1.05); filter: brightness(1.35); }
    70% { opacity: .25; transform: scale(.82) rotate(-8deg); filter: brightness(.9); }
    100% { opacity: 0; transform: scale(.75) rotate(-12deg); }
}

@keyframes codeBlinkV27 {
    0%, 100% { opacity: 0; transform: translateY(-50%) translateX(-8px); }
    16% { opacity: .95; transform: translateY(-50%) translateX(0); }
    22% { opacity: .35; transform: translateY(-50%) translateX(2px); }
    32% { opacity: .85; transform: translateY(-50%) translateX(-1px); }
    58% { opacity: .25; }
    72% { opacity: .7; }
}

@keyframes navLinkMicroGlitchV27 {
    0%, 100% { translate: 0 0; }
    28% { translate: 1px -1px; }
    48% { translate: -1px 1px; }
    70% { translate: .5px 0; }
}

@keyframes hoverLiquidSweepV27 {
    0% { opacity: 0; transform: translateX(-24%) skewX(-8deg); }
    45% { opacity: .55; }
    100% { opacity: 0; transform: translateX(28%) skewX(-3deg); }
}

/* Accessibilità: se l'utente riduce animazioni, niente morph glitch */
@media (prefers-reduced-motion: reduce) {
    .navbar,
    .navbar.compact,
    .navbar.morph-to-compact,
    .navbar.morph-to-expanded,
    .navbar::after,
    .navbar::before,
    .nav-icon,
    .logo-lily {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}


/* ======================================================
   NAVBAR v28 — SAYONARA VHS LIQUID MORPH
   Glitch irregolare clippato dentro la navbar:
   statico VHS / broken HDR / pixel memory, senza linee fuori.
====================================================== */

/* Durante il morph tagliamo tutto dentro il contenitore */
.navbar.morph-to-compact,
.navbar.morph-to-expanded {
    overflow: hidden !important;
}

/* A riposo lasciamo visibili tooltip/label fuori dalla pillola */
.navbar.compact:not(.morph-to-compact):not(.morph-to-expanded) {
    overflow: visible;
}

/* Sostituiamo lo sweep lineare con glitch VHS interno */
.navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;

    background:
      /* blocchi pixel orizzontali */
      linear-gradient(90deg, transparent 0 8%, rgba(0, 238, 255, .28) 8% 12%, transparent 12% 28%, rgba(255,255,255,.18) 28% 31%, transparent 31% 100%),
      linear-gradient(90deg, transparent 0 48%, rgba(64, 114, 255, .26) 48% 54%, transparent 54% 100%),
      /* static noise lineare */
      repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) 3px,
        rgba(0, 225, 255, .08) 4px,
        rgba(255,255,255,0) 5px,
        rgba(64, 114, 255, .10) 7px,
        rgba(255,255,255,0) 9px
      ),
      /* glow interno */
      radial-gradient(circle at 15% 55%, rgba(0, 220, 255, .20), transparent 38%),
      radial-gradient(circle at 78% 42%, rgba(64, 114, 255, .16), transparent 45%);
    background-size:
      160px 100%,
      210px 100%,
      100% 12px,
      100% 100%,
      100% 100%;
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;

    transform: none;
    filter: contrast(1.18) saturate(1.25);
}

/* Layer liquido resta, ma più organico e meno laser */
.navbar::before {
    overflow: hidden;
    background:
      radial-gradient(circle at 14% 50%, rgba(0, 235, 255, .28), transparent 33%),
      radial-gradient(circle at 52% 52%, rgba(255, 255, 255, .08), transparent 32%),
      radial-gradient(circle at 82% 46%, rgba(64, 114, 255, .20), transparent 45%);
    filter: blur(12px);
}

/* Morph compatto: glitch più irregolare e contenuto */
.navbar.morph-to-compact::after {
    animation: sayonaraVhsCompactV28 1.05s steps(2, end) both !important;
}

.navbar.morph-to-expanded::after {
    animation: sayonaraVhsExpandV28 1.00s steps(2, end) both !important;
}

/* Container: broken HDR più morbido, niente linee fuori */
.navbar.morph-to-compact {
    animation: liquidBrokenCompactV28 1.12s cubic-bezier(.18, .82, .22, 1) both !important;
}

.navbar.morph-to-expanded {
    animation: liquidBrokenExpandedV28 1.05s cubic-bezier(.18, .82, .22, 1) both !important;
}

/* Glitch dei link più 'memory corruption', ma breve */
.navbar.morph-to-compact .nav-link,
.navbar.morph-to-expanded .nav-link {
    animation: navLinkMemoryGlitchV28 .58s steps(2, end) 1 !important;
}

/* Il logo full si degrada verso il giglio */
.navbar.morph-to-compact .logo-full {
    animation: logoTextCorruptV28 .78s ease both !important;
}

.navbar.morph-to-expanded .logo-full {
    animation: logoTextRestoreV28 .82s ease both !important;
}

/* Icone appaiono come ricostruite, meno scatto */
.navbar.morph-to-compact .nav-icon {
    animation:
      navIconDecodeV28 .86s cubic-bezier(.18, .82, .22, 1) both,
      navIconIdle 3.6s ease-in-out infinite .9s !important;
}

.navbar.morph-to-expanded .nav-icon {
    animation:
      navIconEncodeV28 .58s ease both,
      navIconIdle 3.6s ease-in-out infinite .6s !important;
}

/* Manteniamo il 4072 perfetto, solo più integrato nel VHS */
.navbar.morph-to-compact .logo::after,
.navbar.morph-to-expanded .logo::after {
    animation: codeBlinkV28 1.05s steps(2, end) both !important;
}

/* Il giglio come nucleo della condensazione */
.navbar.morph-to-compact .logo-lily {
    animation:
      logoLilyMemoryBloomV28 1.05s cubic-bezier(.18,.82,.22,1) both,
      logoLilyFloatV25 4.8s ease-in-out infinite 1.05s !important;
}

.navbar.morph-to-expanded .logo-lily {
    animation: logoLilyMemoryReleaseV28 .86s ease both !important;
}

/* VHS compact */
@keyframes sayonaraVhsCompactV28 {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
        filter: contrast(1) saturate(1);
    }
    14% {
        opacity: .72;
        clip-path: inset(12% 0 64% 0);
        background-position: 18px 0, -12px 0, 0 6px, 0 0, 0 0;
        filter: contrast(1.75) saturate(1.65) hue-rotate(4deg);
    }
    24% {
        opacity: .42;
        clip-path: inset(48% 0 30% 0);
        background-position: -28px 0, 24px 0, 0 -4px, 0 0, 0 0;
    }
    36% {
        opacity: .88;
        clip-path: inset(6% 0 18% 0);
        background-position: 46px 0, -42px 0, 0 10px, 0 0, 0 0;
        filter: contrast(1.95) saturate(1.8);
    }
    52% {
        opacity: .30;
        clip-path: inset(68% 0 8% 0);
        background-position: -10px 0, 30px 0, 0 2px, 0 0, 0 0;
    }
    72% {
        opacity: .62;
        clip-path: inset(0 0 0 0);
        background-position: 64px 0, -58px 0, 0 -9px, 0 0, 0 0;
        filter: contrast(1.35) saturate(1.4);
    }
    100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        background-position: 90px 0, -70px 0, 0 0, 0 0, 0 0;
        filter: contrast(1) saturate(1);
    }
}

@keyframes sayonaraVhsExpandV28 {
    0% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        background-position: 80px 0, -60px 0, 0 0, 0 0, 0 0;
    }
    18% {
        opacity: .68;
        clip-path: inset(20% 0 52% 0);
        background-position: -18px 0, 22px 0, 0 7px, 0 0, 0 0;
        filter: contrast(1.75) saturate(1.65);
    }
    34% {
        opacity: .38;
        clip-path: inset(58% 0 20% 0);
        background-position: 28px 0, -30px 0, 0 -5px, 0 0, 0 0;
    }
    50% {
        opacity: .82;
        clip-path: inset(4% 0 34% 0);
        background-position: -46px 0, 42px 0, 0 11px, 0 0, 0 0;
    }
    74% {
        opacity: .42;
        clip-path: inset(0 0 0 0);
        background-position: -70px 0, 64px 0, 0 -3px, 0 0, 0 0;
    }
    100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
        filter: contrast(1) saturate(1);
    }
}

/* Liquid/Broken HDR container */
@keyframes liquidBrokenCompactV28 {
    0% {
        transform: translate3d(0,0,0) scaleX(1) scaleY(1);
        filter: saturate(1) contrast(1) blur(0);
        border-radius: 0;
    }
    16% {
        transform: translate3d(-1px, 0, 0) scaleX(1.012) scaleY(.992);
        filter: saturate(1.28) contrast(1.10) blur(.10px);
        border-radius: 18px 72px 62px 22px;
    }
    39% {
        transform: translate3d(2px, -1px, 0) scaleX(.985) scaleY(1.024);
        filter: saturate(1.55) contrast(1.18) blur(.18px);
        border-radius: 999px 42px 999px 999px;
    }
    68% {
        transform: translate3d(0,0,0) scaleX(1.004) scaleY(.998);
        filter: saturate(1.16) contrast(1.04) blur(0);
        border-radius: 999px 999px 999px 38px;
    }
    100% {
        transform: translate3d(0,0,0) scale(1);
        filter: saturate(1.08) contrast(1);
        border-radius: 999px 999px 999px 34px;
    }
}

@keyframes liquidBrokenExpandedV28 {
    0% {
        transform: translate3d(0,0,0) scaleX(.988) scaleY(1.018);
        filter: saturate(1.16) contrast(1.06);
        border-radius: 999px 999px 999px 34px;
    }
    26% {
        transform: translate3d(1px, -1px, 0) scaleX(1.010) scaleY(.990);
        filter: saturate(1.42) contrast(1.14) blur(.12px);
        border-radius: 36px 999px 999px 34px;
    }
    58% {
        transform: translate3d(0,0,0) scaleX(.998) scaleY(1.004);
        filter: saturate(1.10) contrast(1.04);
        border-radius: 18px;
    }
    100% {
        transform: translate3d(0,0,0) scale(1);
        filter: saturate(1) contrast(1);
        border-radius: 0;
    }
}

@keyframes logoTextCorruptV28 {
    0% { opacity: 1; transform: translateY(0) skewX(0); filter: blur(0); }
    28% { opacity: .58; transform: translateY(-1px) skewX(-5deg); filter: blur(.35px); }
    44% { opacity: .82; transform: translateY(1px) skewX(4deg); }
    100% { opacity: 0; transform: translateY(-6px) skewX(-8deg); filter: blur(1.2px); }
}

@keyframes logoTextRestoreV28 {
    0% { opacity: 0; transform: translateY(6px) skewX(7deg); filter: blur(1.2px); }
    42% { opacity: .45; transform: translateY(1px) skewX(-4deg); filter: blur(.35px); }
    100% { opacity: 1; transform: translateY(0) skewX(0); filter: blur(0); }
}

@keyframes navIconDecodeV28 {
    0% { opacity: 0; transform: translateX(-5px) scale(.78); filter: blur(1px) contrast(1.8); }
    22% { opacity: .85; transform: translateX(2px) scale(1.12); filter: blur(.2px) contrast(1.3) drop-shadow(0 0 14px rgba(0,230,255,.75)); }
    48% { opacity: .55; transform: translateX(-1px) scale(.96); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0) drop-shadow(0 0 7px rgba(0,191,255,.44)); }
}

@keyframes navIconEncodeV28 {
    0% { opacity: 1; transform: scale(1); filter: blur(0); }
    34% { opacity: .62; transform: translateX(3px) scale(.94); filter: blur(.35px) contrast(1.4); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes navLinkMemoryGlitchV28 {
    0%, 100% { translate: 0 0; filter: none; }
    18% { translate: 1px -1px; filter: contrast(1.35); }
    36% { translate: -1px 1px; }
    58% { translate: 1px 0; filter: hue-rotate(5deg); }
    74% { translate: 0 -1px; }
}

@keyframes logoLilyMemoryBloomV28 {
    0% { opacity: 0; transform: scale(.64) rotate(-16deg); filter: brightness(.75) blur(.6px); }
    34% { opacity: 1; transform: scale(1.24) rotate(6deg); filter: brightness(1.65) blur(0); }
    58% { transform: scale(.96) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes logoLilyMemoryReleaseV28 {
    0% { opacity: 1; transform: scale(1.05); filter: brightness(1.35); }
    62% { opacity: .28; transform: scale(.82) rotate(-8deg); filter: blur(.3px); }
    100% { opacity: 0; transform: scale(.72) rotate(-12deg); }
}

@keyframes codeBlinkV28 {
    0%, 100% { opacity: 0; transform: translateY(-50%) translateX(-8px); }
    13% { opacity: .95; transform: translateY(-50%) translateX(0); }
    19% { opacity: .20; transform: translateY(-50%) translateX(3px); }
    28% { opacity: .88; transform: translateY(-50%) translateX(-1px); }
    46% { opacity: .34; }
    60% { opacity: .82; }
    78% { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
    .navbar.morph-to-compact,
    .navbar.morph-to-expanded,
    .navbar.morph-to-compact::after,
    .navbar.morph-to-expanded::after {
        animation: none !important;
    }
}


/* ======================================================
   NAVBAR v29 — Compact Idle Glitch
   Quando la navbar è ridotta resta viva: micro-glitch controllato, non invasivo.
====================================================== */

/* Piccolo movimento "segnale instabile" solo quando è compatta e ferma */
.navbar.compact:not(.morph-to-compact):not(.morph-to-expanded) {
    animation:
        compactIdleGlitchV29 7.6s steps(1, end) infinite,
        compactGlowBreathV29 4.8s ease-in-out infinite !important;
}

/* Glitch interno leggero e clippato dentro la pillola */
.navbar.compact:not(.morph-to-compact):not(.morph-to-expanded)::after {
    opacity: 0;
    animation: compactStaticBlinkV29 6.4s steps(2, end) infinite !important;
}

/* bordo/glow che respira appena */
.navbar.compact:not(.morph-to-compact):not(.morph-to-expanded)::before {
    animation:
        liquidDropPulseV26 6.4s ease-in-out infinite,
        compactEdgeFlickerV29 5.7s steps(2, end) infinite !important;
}

/* Se hover/focus: meno twitch, più stabilità per usabilità */
.navbar.compact:hover,
.navbar.compact:focus-within {
    animation:
        compactGlowBreathV29 4.8s ease-in-out infinite !important;
}

/* Micro twitch irregolare: pochi frame, molto controllato */
@keyframes compactIdleGlitchV29 {
    0%, 88%, 100% {
        transform: translate3d(0,0,0) scale(1);
        filter: saturate(1.08) contrast(1);
    }

    89% {
        transform: translate3d(1px,-1px,0) scaleX(1.006) scaleY(.996);
        filter: saturate(1.18) contrast(1.08);
    }

    90% {
        transform: translate3d(-1px,1px,0) scaleX(.998) scaleY(1.004);
        filter: saturate(1.02) contrast(1.02);
    }

    91% {
        transform: translate3d(0,0,0) scale(1);
        filter: saturate(1.08) contrast(1);
    }

    96% {
        transform: translate3d(.5px,0,0);
        filter: saturate(1.14) contrast(1.04);
    }

    97% {
        transform: translate3d(0,0,0);
        filter: saturate(1.08) contrast(1);
    }
}

@keyframes compactGlowBreathV29 {
    0%, 100% {
        box-shadow:
          0 0 18px rgba(0, 210, 255, .12),
          0 16px 38px rgba(0, 0, 0, .38);
    }
    50% {
        box-shadow:
          0 0 25px rgba(0, 225, 255, .18),
          0 16px 42px rgba(0, 0, 0, .42);
    }
}

/* Flash VHS sottile dentro la navbar compatta */
@keyframes compactStaticBlinkV29 {
    0%, 82%, 100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
        filter: contrast(1) saturate(1);
    }

    84% {
        opacity: .38;
        clip-path: inset(22% 0 56% 0);
        background-position: 22px 0, -18px 0, 0 5px, 0 0, 0 0;
        filter: contrast(1.55) saturate(1.35);
    }

    85% {
        opacity: .18;
        clip-path: inset(60% 0 18% 0);
        background-position: -32px 0, 28px 0, 0 -4px, 0 0, 0 0;
    }

    86% {
        opacity: .46;
        clip-path: inset(7% 0 70% 0);
        background-position: 44px 0, -36px 0, 0 8px, 0 0, 0 0;
    }

    87% {
        opacity: 0;
    }
}

/* Flicker del bordo/aura */
@keyframes compactEdgeFlickerV29 {
    0%, 76%, 100% {
        opacity: .64;
        filter: blur(12px);
    }

    78% {
        opacity: .92;
        filter: blur(10px) saturate(1.4);
    }

    79% {
        opacity: .42;
    }

    81% {
        opacity: .78;
    }
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce) {
    .navbar.compact,
    .navbar.compact::after,
    .navbar.compact::before {
        animation: none !important;
    }
}


/* ======================================================
   v44 — Site master images + lightweight animated cards
====================================================== */

:root {
  --sa-bg: #03070d;
  --sa-panel: rgba(2, 18, 28, .58);
  --sa-line: rgba(0, 220, 255, .20);
  --sa-line-strong: rgba(0, 230, 255, .42);
  --sa-text: #effcff;
  --sa-muted: rgba(220, 250, 255, .70);
  --sa-blue: #00d9ff;
  --sa-deep: #4072ff;
}

body {
  background:
    radial-gradient(circle at 72% 8%, rgba(0, 120, 255, .12), transparent 34%),
    radial-gradient(circle at 18% 30%, rgba(0, 220, 255, .08), transparent 30%),
    linear-gradient(180deg, #020509 0%, #050910 45%, #020407 100%) !important;
  color: var(--sa-text);
}

.hero-manifest,
.project-intro,
.card-system-section {
  position: relative;
  overflow: hidden;
}

.hero-manifest {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, 560px);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 4rem);
  padding: clamp(5rem, 9vw, 8rem) clamp(1.2rem, 5vw, 5rem) clamp(3rem, 7vw, 6rem);
  text-align: left;
}

.hero-manifest::before,
.project-intro::before,
.card-system-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 220, 255, .055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 220, 255, .035) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 72%);
  opacity: .28;
}

.hero-copy,
.project-copy,
.section-heading {
  position: relative;
  z-index: 2;
}

.section-kicker {
  margin: 0 0 .85rem;
  color: #8ff4ff;
  font: 800 .76rem/1.2 "Courier New", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0, 220, 255, .48);
}

.hero-manifest .glitch-title {
  margin: 0;
  max-width: 820px;
  font-size: clamp(2.9rem, 7vw, 6.9rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.hero-manifest .subtitle {
  max-width: 600px;
  margin: 1.25rem 0 0;
  color: var(--sa-muted);
  font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.65rem;
}

.sayonara-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 230, 255, .30);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 220, 255, .20), transparent 64%),
    rgba(0, 191, 255, .08);
  color: #dffcff;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(0, 220, 255, .10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sayonara-btn:hover,
.sayonara-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 245, 255, .55);
  box-shadow: 0 0 24px rgba(0, 220, 255, .22);
  outline: none;
}

.sayonara-btn.ghost {
  background: rgba(0, 0, 0, .18);
}

.hero-art-frame {
  position: relative;
  z-index: 2;
  margin: 0;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(0, 230, 255, .22);
  background: rgba(0,0,0,.22);
  box-shadow:
    0 0 32px rgba(0, 220, 255, .13),
    0 24px 70px rgba(0, 0, 0, .48),
    inset 0 0 18px rgba(0, 220, 255, .06);
  isolation: isolate;
}

.hero-art-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 18%, transparent 76%, rgba(0,220,255,.18)),
    linear-gradient(90deg, transparent, rgba(0,220,255,.12), transparent);
  mix-blend-mode: screen;
  opacity: .45;
  animation: heroFrameScanV44 5.8s ease-in-out infinite;
}

.hero-art-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.012);
}

.hero-art-frame figcaption {
  position: absolute;
  left: 1rem;
  bottom: .9rem;
  z-index: 3;
  padding: .34rem .55rem;
  border-radius: 999px;
  color: rgba(220, 250, 255, .70);
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(0,220,255,.12);
  font: 700 .62rem/1 "Courier New", monospace;
  letter-spacing: .06em;
  backdrop-filter: blur(8px);
}

.hero-art-primary {
  width: min(42vw, 520px);
  justify-self: center;
  animation: heroFloatV44 7.5s ease-in-out infinite;
}

.project-intro {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 520px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.2rem, 5vw, 5rem);
}

.project-copy h2,
.section-heading h2 {
  margin: 0;
  color: var(--sa-text);
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-shadow: 0 0 22px rgba(0,220,255,.14);
}

.project-copy p,
.section-heading p {
  max-width: 620px;
  color: var(--sa-muted);
  line-height: 1.75;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
}

.project-art-frame {
  width: min(44vw, 560px);
  justify-self: center;
}

.micro-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.3rem;
}

.micro-symbols span {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .72rem;
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,.18);
  color: #9ef4ff;
  background: rgba(0, 191, 255, .06);
  text-shadow: 0 0 10px rgba(0,220,255,.48);
}

.card-system-section {
  min-height: auto;
  padding: clamp(4rem, 7vw, 7rem) clamp(1.2rem, 5vw, 5rem);
}

.section-heading {
  width: min(980px, 100%);
  margin: 0 auto 2rem;
  text-align: center;
}

.section-heading p {
  margin-left: auto;
  margin-right: auto;
}

.archive-card-grid {
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.2rem);
}

.archive-card {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-radius: 24px;
  padding: 1.15rem;
  color: #dffcff;
  text-decoration: none;
  border: 1px solid rgba(0, 220, 255, .16);
  background:
    radial-gradient(circle at 50% 12%, rgba(0, 220, 255, .14), transparent 46%),
    linear-gradient(145deg, rgba(0, 35, 50, .46), rgba(0, 8, 14, .70));
  box-shadow: inset 0 0 18px rgba(0,220,255,.04);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.archive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(0,220,255,.055) 17px, transparent 18px),
    radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(0,220,255,.22), transparent 36%);
  opacity: .32;
  transition: opacity .22s ease;
}

.archive-card::after {
  content: "4072";
  position: absolute;
  right: .9rem;
  bottom: .7rem;
  color: rgba(143,244,255,.14);
  font: 900 1.4rem/1 "Courier New", monospace;
  letter-spacing: -.05em;
}

.archive-card:hover,
.archive-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0, 235, 255, .42);
  box-shadow:
    0 0 26px rgba(0,220,255,.16),
    inset 0 0 18px rgba(0,220,255,.08);
  outline: none;
}

.archive-card:hover::before,
.archive-card:focus-visible::before {
  opacity: .62;
  animation: cardGlitchV44 .7s steps(2,end) both;
}

.card-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: #9ef4ff;
  border: 1px solid rgba(0,220,255,.24);
  background: rgba(0, 220, 255, .08);
  text-shadow: 0 0 14px rgba(0,220,255,.58);
  font-size: 1.25rem;
}

.archive-card h3,
.archive-card p,
.card-code {
  position: relative;
  z-index: 2;
}

.archive-card h3 {
  margin: 0;
  font-size: 1.25rem;
}

.archive-card p {
  color: rgba(220,250,255,.68);
  line-height: 1.45;
}

.card-code {
  display: inline-flex;
  margin-top: .7rem;
  color: rgba(143,244,255,.55);
  font: 700 .68rem/1 "Courier New", monospace;
}

.content-section .card,
.gallery-section .card {
  border: 1px solid rgba(0,220,255,.12);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,220,255,.10), transparent 56%),
    rgba(255,255,255,.035);
  box-shadow: inset 0 0 18px rgba(0,220,255,.025);
}

@keyframes heroFrameScanV44 {
  0%, 100% { transform: translateX(-18%); opacity: .28; }
  50% { transform: translateX(18%); opacity: .58; }
}

@keyframes heroFloatV44 {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(-10px) rotate(.35deg); }
}

@keyframes cardGlitchV44 {
  0% { transform: translateX(0); filter: none; }
  32% { transform: translateX(2px); filter: contrast(1.35); }
  64% { transform: translateX(-2px); }
  100% { transform: translateX(0); filter: none; }
}

@media (max-width: 980px) {
  .hero-manifest {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 4.8rem;
  }

  .hero-copy {
    order: 2;
  }

  .hero-actions,
  .micro-symbols {
    justify-content: center;
  }

  .hero-art-primary,
  .project-art-frame {
    width: min(82vw, 440px);
  }

  .project-intro {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .project-art-frame {
    order: -1;
  }

  .project-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .archive-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hero-manifest .glitch-title {
    font-size: clamp(2.5rem, 15vw, 4.4rem);
  }

  .hero-art-primary,
  .project-art-frame {
    width: min(88vw, 380px);
    border-radius: 26px;
  }

  .archive-card-grid {
    grid-template-columns: 1fr;
  }

  .archive-card {
    min-height: 168px;
  }

  .hero-art-frame figcaption {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-primary,
  .hero-art-frame::before,
  .archive-card:hover::before {
    animation: none !important;
  }
}


/* ======================================================
   v45 — translation fallback, clean image frames, mobile nav fit
====================================================== */

/* Never show technical figcaptions over the artwork */
.hero-art-frame figcaption {
  display: none !important;
}

/* Mobile/tablet navbar: keep every icon inside the glass pill */
@media (max-width: 640px) {
  .navbar {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    box-sizing: border-box !important;
    left: 11px !important;
    right: 11px !important;
    padding: .42rem .42rem !important;
    gap: .28rem !important;
    overflow: visible !important;
  }

  .navbar .logo,
  .logo-short {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
  }

  .logo-lily,
  .logo-lily-svg {
    width: 34px !important;
    height: 34px !important;
  }

  .navbar .nav-links,
  .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: space-evenly !important;
    gap: clamp(.16rem, 1.4vw, .42rem) !important;
  }

  .nav-links > li {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .nav-link,
  .nav-submenu-button {
    width: clamp(30px, 8vw, 36px) !important;
    height: clamp(30px, 8vw, 36px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  .nav-svg {
    width: clamp(17px, 4.8vw, 21px) !important;
    height: clamp(17px, 4.8vw, 21px) !important;
  }

  .nav-label {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .navbar {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    left: 7px !important;
    right: 7px !important;
    padding: .38rem .34rem !important;
  }

  .navbar .logo,
  .logo-short {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
  }

  .logo-lily,
  .logo-lily-svg {
    width: 30px !important;
    height: 30px !important;
  }

  .nav-link,
  .nav-submenu-button {
    width: 28px !important;
    height: 28px !important;
  }

  .nav-svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Slightly safer hero spacing on mobile */
@media (max-width: 560px) {
  .hero-manifest {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hero-art-primary,
  .project-art-frame {
    width: min(86vw, 360px) !important;
  }
}


/* ======================================================
   v46 — Tablet / iPad responsive refinement
   Obiettivo:
   - tablet landscape = desktop-like a 2 colonne
   - tablet portrait = ancora leggibile, non mobile schiacciato
   - mobile vero = colonna singola solo sotto 760px
====================================================== */

/* Tablet e iPad: forza layout desktop-like fino a 761px */
/* Height guard, same classification the navbar uses. An iPhone 12 in
   landscape is 844px wide and was landing in this tablet block, whose
   `padding: clamp(2rem, 4vw, 3.2rem) !important` resolves to 33.76px and
   beat the content-safe gutter — which is why readable text kept entering
   the camera band on that device and never did on an SE (667px, below the
   761 floor). Real tablets are 744px tall or more in landscape and are
   untouched. */
@media (min-width: 761px) and (max-width: 1180px) and (min-height: 501px) {
  .hero-manifest {
    grid-template-columns: minmax(0, .88fr) minmax(300px, 44vw) !important;
    text-align: left !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    padding:
      clamp(5.4rem, 9vw, 7rem)
      clamp(2rem, 4vw, 3.2rem)
      clamp(3.4rem, 6vw, 5rem) !important;
  }

  .hero-copy {
    order: 0 !important;
  }

  .hero-actions,
  .micro-symbols {
    justify-content: flex-start !important;
  }

  .hero-art-primary {
    width: min(43vw, 460px) !important;
    justify-self: center !important;
  }

  .hero-manifest .glitch-title {
    font-size: clamp(3.2rem, 7.6vw, 5.9rem) !important;
    max-width: 680px !important;
  }

  .hero-manifest .subtitle {
    max-width: 520px !important;
  }

  .project-intro {
    grid-template-columns: minmax(300px, 46vw) minmax(0, 1fr) !important;
    text-align: left !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    padding:
      clamp(4.8rem, 8vw, 6.6rem)
      clamp(2rem, 4vw, 3.2rem) !important;
  }

  .project-art-frame {
    order: 0 !important;
    width: min(43vw, 470px) !important;
    justify-self: center !important;
  }

  .project-copy p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .project-copy h2,
  .section-heading h2 {
    font-size: clamp(2.3rem, 5.6vw, 4.2rem) !important;
  }

  .archive-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(900px, 100%) !important;
  }
}

/* Tablet touch: non usare spaziatura da mobile, le icone devono respirare */
@media (min-width: 700px) and (max-width: 1180px) and (pointer: coarse) and (min-height: 501px) {
  .navbar.compact {
    max-width: calc(100vw - 28px) !important;
    padding: .52rem .9rem !important;
  }

  .navbar.compact .nav-links,
  .nav-links {
    gap: clamp(1rem, 2.7vw, 1.8rem) !important;
  }

  .nav-link,
  .nav-submenu-button {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
  }

  .nav-svg {
    width: 23px !important;
    height: 23px !important;
  }

  .logo-lily,
  .logo-lily-svg {
    width: 40px !important;
    height: 40px !important;
  }
}

/* iPad/tablet portrait: più compatto del landscape, ma ancora ordinato */
@media (min-width: 761px) and (max-width: 920px) and (orientation: portrait) {
  .hero-manifest {
    grid-template-columns: minmax(0, .92fr) minmax(260px, 40vw) !important;
    gap: 1.6rem !important;
    padding-left: 1.8rem !important;
    padding-right: 1.8rem !important;
  }

  .hero-art-primary {
    width: min(40vw, 340px) !important;
  }

  .hero-manifest .glitch-title {
    font-size: clamp(2.65rem, 7.4vw, 4.4rem) !important;
  }

  .sayonara-btn {
    min-height: 42px !important;
    padding: .62rem .86rem !important;
  }

  .project-intro {
    grid-template-columns: minmax(250px, 40vw) minmax(0, 1fr) !important;
    padding-left: 1.8rem !important;
    padding-right: 1.8rem !important;
  }

  .project-art-frame {
    width: min(40vw, 340px) !important;
  }
}

/* Mobile vero: colonna singola solo sotto 760px */
@media (max-width: 760px) {
  .hero-manifest {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding-top: 4.8rem !important;
  }

  .hero-copy {
    order: 2 !important;
  }

  .hero-actions,
  .micro-symbols {
    justify-content: center !important;
  }

  .hero-art-primary,
  .project-art-frame {
    width: min(86vw, 390px) !important;
  }

  .project-intro {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .project-art-frame {
    order: -1 !important;
  }

  .project-copy p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ======================================================
   v47 — Tablet navbar desktop-like first, compact later
   - iPad/tablet iniziale: scritte, non icone.
   - riduzione icone dopo scroll più lungo.
   - mobile vero sotto 760px resta compatto.
====================================================== */

/* Tablet touch NON compatto: navbar testuale, centrata, stile desktop */
@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) and (min-height: 501px) {
  .navbar:not(.compact) {
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    transform: translateX(-50%) !important;
    padding: .72rem 1.15rem !important;
    border-radius: 999px !important;
    background:
      linear-gradient(135deg, rgba(0, 18, 28, .58), rgba(0, 0, 0, .24)) !important;
    border: 1px solid rgba(0, 220, 255, .18) !important;
    box-shadow:
      0 0 24px rgba(0, 220, 255, .11),
      0 14px 38px rgba(0, 0, 0, .34) !important;
    gap: clamp(1rem, 2vw, 1.55rem) !important;
  }

  .navbar:not(.compact) .logo-full {
    display: inline !important;
  }

  .navbar:not(.compact) .logo-short {
    display: none !important;
  }

  .navbar:not(.compact) .logo {
    width: auto !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
    margin-right: clamp(.7rem, 1.8vw, 1.25rem) !important;
    font-size: clamp(.86rem, 1.45vw, 1.02rem) !important;
  }

  .navbar:not(.compact) .nav-links {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(.55rem, 1.6vw, 1rem) !important;
    min-width: 0 !important;
  }

  .navbar:not(.compact) .nav-link,
  .navbar:not(.compact) .nav-submenu-button {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: .42rem .62rem !important;
    gap: 0 !important;
    border-radius: 999px !important;
  }

  /* Richiesta: inizialmente scritte, non icone */
  .navbar:not(.compact) .nav-svg,
  .navbar:not(.compact) .nav-icon {
    display: none !important;
  }

  .navbar:not(.compact) .nav-label {
    display: inline !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #dffcff !important;
    font-size: clamp(.82rem, 1.45vw, .96rem) !important;
    letter-spacing: .01em !important;
    text-shadow: 0 0 10px rgba(0, 220, 255, .26) !important;
  }

  .navbar:not(.compact) .nav-link:hover .nav-label,
  .navbar:not(.compact) .nav-link:focus-visible .nav-label,
  .navbar:not(.compact) .nav-link.proximity-hot .nav-label {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Evita che la regola vecchia touch/mobile forzi la navbar a icone */
  .navbar:not(.compact) .nav-links > li {
    flex: 0 0 auto !important;
  }

  /* Dropdown da tablet: si apre sotto la voce testuale */
  .navbar:not(.compact) .nav-submenu {
    top: calc(100% + 12px) !important;
  }
}

/* Tablet compatto DOPO scroll: torna al linguaggio icone, ma con respiro */
@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) and (min-height: 501px) {
  .navbar.compact {
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    padding: .54rem .9rem !important;
    border-radius: 999px 999px 999px 34px !important;
  }

  .navbar.compact .logo-full {
    display: none !important;
  }

  .navbar.compact .logo-short {
    display: inline !important;
  }

  .navbar.compact .nav-links {
    gap: clamp(1rem, 2.4vw, 1.65rem) !important;
    margin-left: .55rem !important;
  }

  .navbar.compact .nav-link,
  .navbar.compact .nav-submenu-button {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
  }

  .navbar.compact .nav-svg,
  .navbar.compact .nav-icon {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
  }

  .navbar.compact .nav-label {
    display: block !important;
  }
}

/* Tablet più stretto: testo iniziale più piccolo ma ancora testuale */
@media (min-width: 761px) and (max-width: 900px) and (pointer: coarse) and (min-height: 501px) {
  .navbar:not(.compact) {
    padding: .62rem .82rem !important;
    max-width: calc(100vw - 22px) !important;
  }

  .navbar:not(.compact) .logo {
    display: none !important;
  }

  .navbar:not(.compact) .nav-links {
    gap: clamp(.35rem, 1.05vw, .62rem) !important;
  }

  .navbar:not(.compact) .nav-link,
  .navbar:not(.compact) .nav-submenu-button {
    padding: .38rem .48rem !important;
  }

  .navbar:not(.compact) .nav-label {
    font-size: clamp(.74rem, 1.55vw, .88rem) !important;
  }
}

/* Mobile vero: sotto 760px rimane iconico/compatto */
@media (max-width: 760px) {
  .navbar .nav-svg,
  .navbar .nav-icon {
    display: block !important;
  }

  .navbar .nav-label {
    display: none !important;
  }
}


/* ======================================================
   v48 — Fix micro-jump/flicker when tablet navbar returns top
====================================================== */

/*
  Il micro salto a destra sul ritorno in alto veniva dal cambio simultaneo
  left/transform/width tra .compact e :not(.compact).
  Su tablet usiamo sempre una base stabile centrata; la compatta si sposta
  con translate invece di cambiare bruscamente coordinate.
*/
@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) and (min-height: 501px) {
  .navbar {
    left: 50% !important;
    right: auto !important;
    will-change: transform, width, max-width, padding, border-radius;
    transition:
      transform .58s cubic-bezier(.16, 1, .3, 1),
      width .58s cubic-bezier(.16, 1, .3, 1),
      max-width .58s cubic-bezier(.16, 1, .3, 1),
      padding .58s cubic-bezier(.16, 1, .3, 1),
      border-radius .58s cubic-bezier(.16, 1, .3, 1),
      background .35s ease,
      box-shadow .35s ease !important;
  }

  .navbar:not(.compact) {
    transform: translateX(-50%) !important;
  }

  /*
    Stato compatto: invece di left:14px + transform:none,
    resta ancorata allo stesso punto logico e si porta verso sinistra.
    Così quando torna su non fa il flash laterale.
  */
  .navbar.compact {
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50vw + 14px)) !important;
  }

  .navbar.navbar-morphing {
    pointer-events: none;
  }
}

/* Piccolo refinement: in tablet landscape la navbar testuale resta più naturale */
@media (min-width: 921px) and (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) and (min-height: 501px) {
  .navbar:not(.compact) {
    top: 14px !important;
  }
}

/* Mobile vero: non applicare la logica tablet anti-flicker */
@media (max-width: 760px) {
  .navbar.compact,
  .navbar:not(.compact) {
    transform: none;
  }
}


/* ======================================================
   v49 — Tablet navbar lateral jump definitive fix
   Problema:
   Safari/iPad animava male il passaggio left/transform tra navbar centrata
   e navbar compatta, causando un flash verso destra prima di andare a sinistra.
   Soluzione:
   su tablet NON animiamo più lo spostamento laterale. L'ancoraggio cambia
   subito, mentre il morph estetico resta su glow, padding, border-radius e scan.
====================================================== */

@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) and (min-height: 501px) {
  .navbar {
    transition:
      width .46s cubic-bezier(.16, 1, .3, 1),
      max-width .46s cubic-bezier(.16, 1, .3, 1),
      padding .46s cubic-bezier(.16, 1, .3, 1),
      border-radius .46s cubic-bezier(.16, 1, .3, 1),
      background .32s ease,
      box-shadow .32s ease,
      opacity .22s ease,
      filter .22s ease !important;
  }

  /* Stato iniziale tablet: desktop-like testuale, centrato */
  .navbar:not(.compact) {
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  /* Stato compatto tablet: icone a sinistra, senza viaggio laterale animato */
  .navbar.compact {
    left: 14px !important;
    right: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  /* Morph visivo: resta elegante senza spostarsi attraverso lo schermo */
  .navbar.morph-to-compact,
  .navbar.morph-to-expanded,
  .navbar.navbar-morphing {
    filter: brightness(1.08) saturate(1.08);
  }

  .navbar.morph-to-compact::after,
  .navbar.morph-to-expanded::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent, rgba(0, 220, 255, .16), transparent);
    opacity: .42;
    mix-blend-mode: screen;
    animation: tabletNavMorphScanV49 .46s ease-out both;
  }
}

@keyframes tabletNavMorphScanV49 {
  from { transform: translateX(-18%); opacity: 0; }
  35% { opacity: .48; }
  to { transform: translateX(18%); opacity: 0; }
}

/* Extra safety: evita overflow orizzontale da transform/calcoli precedenti */
@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

/* Mobile vero: non usare la logica tablet anti-jump */
@media (max-width: 760px) {
  .navbar.compact,
  .navbar:not(.compact) {
    left: 7px !important;
    right: 7px !important;
    transform: none !important;
  }
}


/* ======================================================
   v50 — final tablet nav lock + boot sequence + first real sections
====================================================== */

/* Final fix: position switch on tablet is instant, no lateral travel. */
@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) and (min-height: 501px) {
  .navbar.nav-position-lock {
    transition: none !important;
  }

  .navbar.nav-position-lock.compact {
    left: 14px !important;
    right: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .navbar.nav-position-lock:not(.compact) {
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
}

/* Boot sequence */
.sayonara-boot {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 220, 255, .12), transparent 36%),
    linear-gradient(180deg, #02050a 0%, #000 100%);
  color: #dffcff;
  opacity: 1;
  transition: opacity .55s ease, filter .55s ease;
}

.sayonara-boot.is-leaving {
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}

.boot-shell {
  width: min(560px, calc(100vw - 40px));
  text-align: center;
  padding: 2rem;
  border-radius: 28px;
  border: 1px solid rgba(0, 220, 255, .16);
  background: rgba(0, 16, 26, .36);
  box-shadow:
    0 0 40px rgba(0, 220, 255, .12),
    inset 0 0 22px rgba(0, 220, 255, .035);
}

.boot-lily {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  color: #dffcff;
  background: rgba(0, 220, 255, .08);
  border: 1px solid rgba(0, 220, 255, .18);
  text-shadow: 0 0 18px rgba(0, 220, 255, .75);
  animation: bootLilyPulseV50 1.15s ease-in-out infinite alternate;
}

.boot-kicker {
  margin: 0 0 .55rem;
  color: #9ef4ff;
  font: 800 .78rem/1.2 "Courier New", monospace;
  letter-spacing: .18em;
}

.boot-shell h1 {
  margin: 0;
  font: 900 clamp(1.6rem, 6vw, 3rem)/1.05 "Segoe UI", sans-serif;
  letter-spacing: -.04em;
  text-shadow: 0 0 16px rgba(0, 220, 255, .20);
}

.boot-line {
  margin: .9rem 0 1.3rem;
  color: rgba(220, 250, 255, .70);
}

.boot-dots {
  animation: bootDotsV50 .9s steps(3, end) infinite;
}

.boot-bar {
  width: min(320px, 82%);
  height: 6px;
  margin: 0 auto;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 220, 255, .08);
  border: 1px solid rgba(0, 220, 255, .12);
}

.boot-bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,220,255,.12), rgba(180,250,255,.9), rgba(64,114,255,.22));
  transform-origin: left;
  animation: bootLoadV50 1.35s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes bootLilyPulseV50 {
  from { transform: scale(.94) rotate(-4deg); filter: drop-shadow(0 0 8px rgba(0,220,255,.34)); }
  to { transform: scale(1.06) rotate(4deg); filter: drop-shadow(0 0 18px rgba(0,220,255,.64)); }
}

@keyframes bootDotsV50 {
  0% { opacity: .25; }
  50% { opacity: 1; }
  100% { opacity: .25; }
}

@keyframes bootLoadV50 {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Archive entry pulse */
body.archive-entry-pulse::after {
  content: "archive access granted";
  position: fixed;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  z-index: 2147483000;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 220, 255, .24);
  background: rgba(0, 12, 18, .72);
  color: #dffcff;
  font: 800 .72rem/1 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(0,220,255,.18);
  animation: archivePulseV50 .9s ease both;
}

@keyframes archivePulseV50 {
  0% { opacity: 0; transform: translate(-50%, 12px); filter: blur(4px); }
  25% { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -10px); filter: blur(3px); }
}

/* Better temporary sections */
.mini-heading {
  max-width: 900px;
}

.mini-heading h2 {
  margin: 0;
}

.archive-placeholder,
.mini-character-grid {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
  display: grid;
  gap: .9rem;
}

.archive-placeholder {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.archive-placeholder span,
.mini-character-grid article {
  min-height: 94px;
  border-radius: 20px;
  border: 1px solid rgba(0,220,255,.14);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,220,255,.10), transparent 54%),
    rgba(0, 16, 24, .34);
  display: grid;
  place-items: center;
  color: rgba(220,250,255,.72);
  font: 800 .75rem/1 "Courier New", monospace;
  letter-spacing: .08em;
  box-shadow: inset 0 0 18px rgba(0,220,255,.025);
}

.mini-character-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mini-character-grid article {
  place-items: start;
  padding: 1rem;
}

.mini-character-grid strong {
  color: #dffcff;
  font: 900 1rem/1.2 "Segoe UI", sans-serif;
}

.mini-character-grid span {
  margin-top: auto;
  color: rgba(143,244,255,.58);
  font: 800 .68rem/1 "Courier New", monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.support-section,
.secret-archive-section {
  min-height: auto !important;
  padding-top: clamp(4rem, 8vw, 6rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}

.secret-archive-section {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 220, 255, .08), transparent 44%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.22));
}

/* Footer rough pass */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,220,255,.10);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,220,255,.09), transparent 44%),
    rgba(0,0,0,.18);
}

.footer-lily {
  margin: 0 auto .75rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0,220,255,.18);
  color: #dffcff;
  text-shadow: 0 0 14px rgba(0,220,255,.70);
}

.footer-sub {
  margin-top: .3rem;
  color: rgba(220,250,255,.52);
}

@media (max-width: 760px) {
  .archive-placeholder,
  .mini-character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-placeholder span,
  .mini-character-grid article {
    min-height: 84px;
  }

  .sayonara-boot .boot-shell {
    padding: 1.35rem;
  }
}

@media (max-width: 430px) {
  .archive-placeholder,
  .mini-character-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sayonara-boot,
  .boot-lily,
  .boot-bar span,
  body.archive-entry-pulse::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ======================================================
   v51 — Character triad + Archive Vault Footer
====================================================== */

/* Character triad refinement */
.character-triad {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(840px, 100%) !important;
}

.character-triad .character-card {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.character-triad .character-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 220, 255, .18), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 220, 255, .045) 17px, transparent 18px);
  pointer-events: none;
}

.character-triad .character-card::after {
  content: "4072";
  position: absolute;
  right: .85rem;
  bottom: .75rem;
  color: rgba(143,244,255,.14);
  font: 900 1.2rem/1 "Courier New", monospace;
}

.character-triad .character-card:hover,
.character-triad .character-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(0, 230, 255, .34);
  box-shadow: 0 0 24px rgba(0, 220, 255, .13);
}

.character-triad .character-card strong,
.character-triad .character-card span {
  position: relative;
  z-index: 2;
}

/* Vault footer */
.vault-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 6.5rem) clamp(1.2rem, 5vw, 5rem) 2rem !important;
  border-top: 1px solid rgba(0, 220, 255, .16);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 220, 255, .10), transparent 34%),
    radial-gradient(circle at 15% 18%, rgba(64, 114, 255, .10), transparent 28%),
    linear-gradient(180deg, rgba(0, 12, 18, .54), rgba(0, 0, 0, .72));
  isolation: isolate;
}

.vault-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,220,255,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,220,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 35%, black, transparent 78%);
  opacity: .26;
}

.vault-footer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(940px, 86vw);
  height: 1px;
  transform: translateX(-50%) scaleX(.18);
  background: linear-gradient(90deg, transparent, rgba(180, 250, 255, .92), transparent);
  box-shadow: 0 0 18px rgba(0, 220, 255, .36);
  opacity: 0;
  transform-origin: center;
}

.vault-footer.footer-awakened::after {
  animation: vaultTopScanV51 1.2s cubic-bezier(.16, 1, .3, 1) both;
}

.footer-grid {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) .75fr 1fr .75fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  text-align: left;
}

.footer-brand h2 {
  margin: 0 0 .85rem;
  color: #effcff;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  letter-spacing: -.04em;
  text-shadow: 0 0 18px rgba(0,220,255,.18);
}

.footer-brand p,
.footer-col li,
.footer-bottom {
  color: rgba(220, 250, 255, .66);
  line-height: 1.65;
}

.footer-brand .footer-motto {
  margin-top: 1rem;
  color: #9ef4ff;
  font: 800 .78rem/1.4 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-col h3 {
  margin: 0 0 .9rem;
  color: #dffcff;
  font: 900 .82rem/1.2 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0,220,255,.22);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.footer-col a,
.footer-sound-toggle {
  color: rgba(220, 250, 255, .72);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: inherit;
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible,
.footer-sound-toggle:hover,
.footer-sound-toggle:focus-visible {
  color: #dffcff;
  text-shadow: 0 0 12px rgba(0,220,255,.42);
  outline: none;
}

.footer-contact-item {
  min-width: 0;
  margin-top: .35rem;
  padding-top: .72rem;
  border-top: 1px solid rgba(0, 220, 255, .10);
  display: grid;
  gap: .22rem;
}

.footer-contact-label {
  color: rgba(143, 244, 255, .52);
  font: 800 .64rem/1.2 "Courier New", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer-contact-link {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: .8rem !important;
  line-height: 1.45 !important;
}

.footer-sound-toggle.is-pulsing {
  animation: footerSoundPulseV51 .42s ease both;
}

.social-buttons {
  display: grid;
  gap: .75rem;
}

.footer-social-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  column-gap: .72rem;
  min-height: 54px;
  padding: .48rem .65rem;
  border-radius: 18px;
  border: 1px solid rgba(0, 220, 255, .14);
  background:
    radial-gradient(circle at 10% 0%, rgba(0,220,255,.13), transparent 54%),
    rgba(0, 20, 30, .34);
  color: #dffcff !important;
  box-shadow: inset 0 0 16px rgba(0,220,255,.025);
}

.footer-social-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 220, 255, .14), transparent);
  transform: translateX(-38%);
  transition: opacity .2s ease;
}

.footer-social-card:hover::after,
.footer-social-card:focus-visible::after {
  opacity: 1;
  animation: footerSocialScanV51 .65s ease both;
}

.social-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0,220,255,.20);
  background: rgba(0,220,255,.07);
  color: #9ef4ff;
  text-shadow: 0 0 12px rgba(0,220,255,.58);
}

.footer-social-card small {
  grid-column: 2;
  margin-top: -.5rem;
  color: rgba(143,244,255,.46);
  font: 800 .62rem/1 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.footer-seal {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto 1.6rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #9ef4ff;
  font: 900 .78rem/1 "Courier New", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}

.seal-lily {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0,220,255,.18);
  background: rgba(0,220,255,.07);
  text-shadow: 0 0 16px rgba(0,220,255,.7);
}

.vault-lightning {
  position: absolute;
  top: 16%;
  bottom: 14%;
  width: 110px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  filter: blur(.15px) drop-shadow(0 0 10px rgba(0,220,255,.45));
  background:
    linear-gradient(155deg, transparent 0 22%, rgba(0,220,255,.0) 22% 28%, rgba(155,245,255,.64) 29%, transparent 31%),
    linear-gradient(25deg, transparent 0 48%, rgba(64,114,255,.0) 48% 53%, rgba(0,220,255,.44) 54%, transparent 57%),
    linear-gradient(145deg, transparent 0 65%, rgba(180,250,255,.52) 66%, transparent 69%);
  mask-image: linear-gradient(180deg, transparent, black 18%, black 80%, transparent);
}

.vault-lightning.left {
  left: 0;
  transform: translateX(-28px);
}

.vault-lightning.right {
  right: 0;
  transform: translateX(28px) scaleX(-1);
}

.footer-awakened .vault-lightning.left {
  animation: vaultLightningLeftV51 1.28s steps(2,end) both;
}

.footer-awakened .vault-lightning.right {
  animation: vaultLightningRightV51 1.28s steps(2,end) both .08s;
}

.vault-pixels span {
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: rgba(0, 220, 255, .68);
  box-shadow: 0 0 10px rgba(0,220,255,.64);
  opacity: 0;
}

.vault-pixels span:nth-child(1) { left: 8%; top: 26%; }
.vault-pixels span:nth-child(2) { left: 13%; top: 62%; }
.vault-pixels span:nth-child(3) { right: 8%; top: 32%; }
.vault-pixels span:nth-child(4) { right: 15%; top: 72%; }
.vault-pixels span:nth-child(5) { left: 52%; top: 14%; }
.vault-pixels span:nth-child(6) { right: 48%; bottom: 16%; }

.footer-awakened .vault-pixels span {
  animation: vaultPixelBlinkV51 1.35s steps(2,end) both;
}

.footer-awakened .vault-pixels span:nth-child(2) { animation-delay: .12s; }
.footer-awakened .vault-pixels span:nth-child(3) { animation-delay: .22s; }
.footer-awakened .vault-pixels span:nth-child(4) { animation-delay: .31s; }
.footer-awakened .vault-pixels span:nth-child(5) { animation-delay: .18s; }
.footer-awakened .vault-pixels span:nth-child(6) { animation-delay: .42s; }

.footer-grid > section,
.footer-seal,
.footer-bottom {
  opacity: .22;
  transform: translateY(12px);
}

.footer-awakened .footer-grid > section,
.footer-awakened .footer-seal,
.footer-awakened .footer-bottom {
  animation: footerRevealV51 .7s cubic-bezier(.16,1,.3,1) both;
}

.footer-awakened .footer-grid > section:nth-child(2) { animation-delay: .08s; }
.footer-awakened .footer-grid > section:nth-child(3) { animation-delay: .16s; }
.footer-awakened .footer-grid > section:nth-child(4) { animation-delay: .24s; }
.footer-awakened .footer-bottom { animation-delay: .30s; }

.footer-bottom {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,220,255,.10);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font: 700 .74rem/1.4 "Courier New", monospace;
  letter-spacing: .07em;
}

.footer-bottom p {
  margin: 0;
}

/* Hide old rough footer icon if present from v50 */
.footer-lily,
.footer-sub {
  display: none !important;
}

@keyframes vaultTopScanV51 {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.18); }
  45% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  100% { opacity: .35; transform: translateX(-50%) scaleX(.72); }
}

@keyframes vaultLightningLeftV51 {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  18% { opacity: .9; clip-path: inset(0 0 0 0); }
  30% { opacity: .22; transform: translateX(-18px) skewX(-6deg); }
  45% { opacity: .74; }
  100% { opacity: .18; transform: translateX(-28px); }
}

@keyframes vaultLightningRightV51 {
  0% { opacity: 0; clip-path: inset(0 0 0 100%); }
  18% { opacity: .85; clip-path: inset(0 0 0 0); }
  30% { opacity: .20; transform: translateX(18px) scaleX(-1) skewX(6deg); }
  45% { opacity: .68; }
  100% { opacity: .16; transform: translateX(28px) scaleX(-1); }
}

@keyframes vaultPixelBlinkV51 {
  0%, 12% { opacity: 0; transform: scale(.5); }
  18%, 26% { opacity: 1; transform: scale(1); }
  34%, 45% { opacity: .2; }
  54%, 64% { opacity: .9; transform: scale(1.25); }
  100% { opacity: .12; transform: scale(.8); }
}

@keyframes footerRevealV51 {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes footerSocialScanV51 {
  from { transform: translateX(-42%); }
  to { transform: translateX(42%); }
}

@keyframes footerSoundPulseV51 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); text-shadow: 0 0 18px rgba(0,220,255,.75); }
}

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .character-triad {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .vault-footer {
    padding-inline: 1rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .footer-seal {
    justify-content: center;
  }

  .footer-brand,
  .footer-col,
  .footer-bottom {
    text-align: center;
  }

  .footer-col ul {
    justify-items: center;
  }

  .footer-social-card {
    width: min(320px, 100%);
    margin: 0 auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
  }

  .vault-lightning {
    width: 70px;
    opacity: .12;
  }

  .character-triad {
    grid-template-columns: 1fr !important;
    width: min(360px, 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-footer::after,
  .footer-awakened .vault-lightning,
  .footer-awakened .vault-pixels span,
  .footer-awakened .footer-grid > section,
  .footer-awakened .footer-seal,
  .footer-awakened .footer-bottom,
  .footer-social-card:hover::after,
  .footer-sound-toggle.is-pulsing {
    animation: none !important;
  }

  .footer-grid > section,
  .footer-seal,
  .footer-bottom {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ======================================================
   v52 — Legendary footer awaken + mobile/tablet edge LED rails
====================================================== */

/* Mobile/tablet side LED rails — replaces the missing custom scrollbar feel */
.sayonara-edge-rails {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  display: none;
}

.edge-rail {
  position: absolute;
  top: 82px;
  bottom: 24px;
  width: 12px;
  opacity: .62;
  filter: drop-shadow(0 0 9px rgba(0, 220, 255, .32));
}

.edge-rail-left { left: 0; }
.edge-rail-right { right: 0; transform: scaleX(-1); }

.edge-rail::before,
.edge-rail::after,
.edge-rail i {
  content: "";
  position: absolute;
  left: 2px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(0, 230, 255, .92), rgba(64, 114, 255, .42), transparent);
  box-shadow: 0 0 12px rgba(0, 220, 255, .56);
  opacity: .22;
}

.edge-rail::before {
  top: 0;
  height: 28%;
  animation: edgeRailDriftV52 5.8s linear infinite;
}

.edge-rail::after {
  bottom: 0;
  height: 18%;
  animation: edgeRailDriftV52 7.2s linear infinite reverse;
}

.edge-rail i:nth-child(1) { top: 12%; height: 36px; animation: edgeLedBlinkV52 2.9s steps(2,end) infinite; }
.edge-rail i:nth-child(2) { top: 34%; height: 18px; animation: edgeLedBlinkV52 3.7s steps(2,end) infinite .35s; }
.edge-rail i:nth-child(3) { top: 54%; height: 52px; animation: edgeLedBlinkV52 4.1s steps(2,end) infinite .7s; }
.edge-rail i:nth-child(4) { top: 73%; height: 24px; animation: edgeLedBlinkV52 3.3s steps(2,end) infinite .2s; }
.edge-rail i:nth-child(5) { top: 86%; height: 42px; animation: edgeLedBlinkV52 5.2s steps(2,end) infinite .95s; }

@media (max-width: 1180px) and (pointer: coarse) {
  .sayonara-edge-rails { display: block; }
}

@media (max-width: 760px) {
  .edge-rail { top: 70px; bottom: 18px; opacity: .50; }
  .edge-rail-left { left: 1px; }
  .edge-rail-right { right: 1px; }
}

/* Stronger footer entry: personal Sayonara vault ignition */
.vault-footer {
  --vault-glow: rgba(0, 220, 255, .18);
}

.vault-footer.footer-prewake {
  box-shadow: inset 0 1px 0 rgba(0,220,255,.10), 0 -22px 70px rgba(0,220,255,.045);
}

.vault-footer.footer-awakened {
  animation: vaultBootstrapV52 1.15s steps(2,end) both;
}

.vault-footer.footer-awakened .footer-seal {
  animation: vaultSealIgnitionV52 .92s cubic-bezier(.16,1,.3,1) both;
}

.vault-footer.footer-awakened .seal-lily {
  animation: vaultLilyPopV52 .98s cubic-bezier(.16,1,.3,1) both;
}

.vault-impact-wave {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.vault-impact-wave span {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(980px, 92vw);
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(223, 252, 255, .95), rgba(0, 220, 255, .58), transparent);
  box-shadow: 0 0 20px rgba(0, 220, 255, .48), 0 0 46px rgba(64,114,255,.20);
  opacity: 0;
}

.vault-impact-wave span:nth-child(1) { top: 0; }
.vault-impact-wave span:nth-child(2) { top: 43%; width: min(760px, 84vw); }
.vault-impact-wave span:nth-child(3) { bottom: 0; top: auto; width: min(680px, 74vw); }

.footer-awakened .vault-impact-wave span:nth-child(1) { animation: vaultImpactLineV52 .78s cubic-bezier(.16,1,.3,1) both; }
.footer-awakened .vault-impact-wave span:nth-child(2) { animation: vaultImpactLineV52 .9s cubic-bezier(.16,1,.3,1) both .16s; }
.footer-awakened .vault-impact-wave span:nth-child(3) { animation: vaultImpactLineV52 .95s cubic-bezier(.16,1,.3,1) both .28s; }

.vault-code-rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.vault-code-rain span {
  position: absolute;
  color: rgba(143, 244, 255, .34);
  font: 900 .72rem/1 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 220, 255, .32);
  opacity: 0;
}

.vault-code-rain span:nth-child(1) { left: 8%; top: 18%; }
.vault-code-rain span:nth-child(2) { right: 12%; top: 28%; }
.vault-code-rain span:nth-child(3) { left: 18%; bottom: 18%; }
.vault-code-rain span:nth-child(4) { right: 18%; bottom: 28%; }

.footer-awakened .vault-code-rain {
  opacity: 1;
}

.footer-awakened .vault-code-rain span {
  animation: vaultCodeFlickerV52 1.25s steps(2,end) both;
}
.footer-awakened .vault-code-rain span:nth-child(2) { animation-delay: .16s; }
.footer-awakened .vault-code-rain span:nth-child(3) { animation-delay: .32s; }
.footer-awakened .vault-code-rain span:nth-child(4) { animation-delay: .48s; }

/* More dramatic side lightning: double strike at entry, then quiet idle */
.footer-awakened .vault-lightning.left {
  animation: vaultLightningLeftV52 1.8s steps(2,end) both !important;
}

.footer-awakened .vault-lightning.right {
  animation: vaultLightningRightV52 1.8s steps(2,end) both .08s !important;
}

.footer-idle .vault-lightning.left {
  animation: vaultLightningIdleV52 6.8s steps(2,end) infinite !important;
}
.footer-idle .vault-lightning.right {
  animation: vaultLightningIdleV52 7.6s steps(2,end) infinite 1.4s !important;
}

.footer-idle .footer-seal {
  filter: drop-shadow(0 0 12px rgba(0,220,255,.15));
}

/* Social cards enter with a subtle glitch after vault opens */
.footer-awakened .footer-social-card {
  animation: socialCardBootV52 .68s cubic-bezier(.16,1,.3,1) both;
}
.footer-awakened .footer-social-card:nth-child(2) { animation-delay: .12s; }
.footer-awakened .footer-social-card:nth-child(3) { animation-delay: .24s; }

@keyframes vaultBootstrapV52 {
  0% { filter: brightness(.72) contrast(1.15) saturate(1.4); transform: translateY(10px); }
  12% { filter: brightness(1.9) contrast(1.55) hue-rotate(10deg); }
  22% { filter: brightness(.86) contrast(1.25); transform: translateY(-2px) skewX(-.6deg); }
  34% { filter: brightness(1.35) contrast(1.4); transform: translateY(0) skewX(.35deg); }
  52% { filter: brightness(.96) contrast(1.12); }
  100% { filter: none; transform: none; }
}

@keyframes vaultSealIgnitionV52 {
  0% { opacity: 0; transform: translateY(16px) scale(.92); filter: blur(8px); }
  35% { opacity: 1; transform: translateY(-2px) scale(1.05); filter: blur(0); }
  100% { opacity: .86; transform: translateY(0) scale(1); }
}

@keyframes vaultLilyPopV52 {
  0% { transform: scale(.45) rotate(-28deg); opacity: .1; }
  45% { transform: scale(1.22) rotate(8deg); opacity: 1; box-shadow: 0 0 28px rgba(0,220,255,.38); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes vaultImpactLineV52 {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0); filter: blur(8px); }
  24% { opacity: 1; filter: blur(0); }
  72% { opacity: .92; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(.58); filter: blur(4px); }
}

@keyframes vaultCodeFlickerV52 {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  16%, 28% { opacity: .9; transform: translateY(0); }
  34%, 40% { opacity: .18; transform: translateX(4px); }
  44%, 56% { opacity: .62; transform: translateX(-2px); }
  100% { opacity: .05; transform: translateY(-12px); }
}

@keyframes vaultLightningLeftV52 {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-36px) skewX(-10deg); }
  8% { opacity: 1; clip-path: inset(0 0 0 0); }
  14% { opacity: .18; transform: translateX(-20px) skewX(8deg); }
  22% { opacity: .95; }
  31% { opacity: .32; transform: translateX(-34px); }
  48% { opacity: .84; filter: blur(.1px) drop-shadow(0 0 18px rgba(0,220,255,.72)); }
  100% { opacity: .16; transform: translateX(-28px); }
}

@keyframes vaultLightningRightV52 {
  0% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(36px) scaleX(-1) skewX(10deg); }
  8% { opacity: .94; clip-path: inset(0 0 0 0); }
  14% { opacity: .16; transform: translateX(20px) scaleX(-1) skewX(-8deg); }
  22% { opacity: .88; }
  31% { opacity: .28; transform: translateX(34px) scaleX(-1); }
  48% { opacity: .78; filter: blur(.1px) drop-shadow(0 0 18px rgba(0,220,255,.68)); }
  100% { opacity: .14; transform: translateX(28px) scaleX(-1); }
}

@keyframes vaultLightningIdleV52 {
  0%, 82%, 100% { opacity: .12; }
  84% { opacity: .58; filter: drop-shadow(0 0 20px rgba(0,220,255,.60)); }
  86% { opacity: .08; }
  88% { opacity: .34; }
  91% { opacity: .12; }
}

@keyframes socialCardBootV52 {
  0% { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  72% { opacity: 1; transform: translateY(-2px); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes edgeRailDriftV52 {
  from { transform: translateY(-18%); opacity: .12; }
  45% { opacity: .62; }
  to { transform: translateY(118%); opacity: .08; }
}

@keyframes edgeLedBlinkV52 {
  0%, 78%, 100% { opacity: .16; transform: translateX(0); }
  80% { opacity: .82; transform: translateX(1px); }
  83% { opacity: .24; transform: translateX(-1px); }
  86% { opacity: .62; transform: translateX(0); }
}

@media (max-width: 640px) {
  .vault-impact-wave span:nth-child(2),
  .vault-impact-wave span:nth-child(3) {
    display: none;
  }

  .vault-code-rain span:nth-child(n+3) {
    display: none;
  }

  .footer-awakened .vault-lightning.left,
  .footer-awakened .vault-lightning.right {
    animation-duration: 1.2s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sayonara-edge-rails,
  .vault-impact-wave,
  .vault-code-rain {
    display: none !important;
  }

  .vault-footer.footer-awakened,
  .footer-awakened .footer-seal,
  .footer-awakened .seal-lily,
  .footer-awakened .vault-lightning.left,
  .footer-awakened .vault-lightning.right,
  .footer-idle .vault-lightning.left,
  .footer-idle .vault-lightning.right,
  .footer-awakened .footer-social-card {
    animation: none !important;
  }
}


/* ======================================================
   v53 — Footer Vault Awakening Plus + Stronger Edge Rails
   - Side rails più visibili su tablet/mobile.
   - Footer opening più lungo, scenografico e con idle vivo.
====================================================== */

/* Più aria sotto la navbar compatta quando si arriva alle sezioni basse */
@media (max-width: 1180px) and (pointer: coarse) {
  #support,
  #secret-archive {
    padding-top: clamp(7.5rem, 16vw, 10rem) !important;
    scroll-margin-top: 118px;
  }
}

/* Edge rails: da accenno minimal a cornice viva, ma senza invadere */
@media (max-width: 1180px) and (pointer: coarse) {
  .sayonara-edge-rails {
    display: block !important;
    z-index: 119;
    opacity: 1;
    mix-blend-mode: screen;
  }

  .sayonara-edge-rails::before,
  .sayonara-edge-rails::after {
    content: "";
    position: fixed;
    top: 88px;
    bottom: 20px;
    width: 26px;
    pointer-events: none;
    opacity: .46;
    background:
      radial-gradient(circle at 50% 8%, rgba(180,250,255,.38), transparent 16px),
      radial-gradient(circle at 50% 50%, rgba(0,220,255,.28), transparent 18px),
      radial-gradient(circle at 50% 92%, rgba(64,114,255,.30), transparent 16px),
      linear-gradient(180deg, transparent, rgba(0,220,255,.12), transparent);
    filter: drop-shadow(0 0 14px rgba(0,220,255,.42));
    animation: edgeRailAuraV53 5.8s ease-in-out infinite;
  }

  .sayonara-edge-rails::before { left: 0; }
  .sayonara-edge-rails::after { right: 0; animation-delay: 1.25s; }

  .edge-rail {
    top: 86px !important;
    bottom: 22px !important;
    width: 24px !important;
    opacity: .88 !important;
    filter:
      drop-shadow(0 0 10px rgba(0,220,255,.62))
      drop-shadow(0 0 24px rgba(64,114,255,.22)) !important;
  }

  .edge-rail-left { left: 0 !important; }
  .edge-rail-right { right: 0 !important; transform: scaleX(-1) !important; }

  .edge-rail::before,
  .edge-rail::after,
  .edge-rail i {
    left: 5px !important;
    width: 5px !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg,
        transparent,
        rgba(200,252,255,.96),
        rgba(0,220,255,.76),
        rgba(64,114,255,.35),
        transparent) !important;
    box-shadow:
      0 0 10px rgba(0,220,255,.78),
      0 0 22px rgba(0,220,255,.38),
      0 0 36px rgba(64,114,255,.16) !important;
  }

  .edge-rail::before {
    height: 34% !important;
    opacity: .42 !important;
    animation: edgeRailDriftV53 4.9s linear infinite !important;
  }

  .edge-rail::after {
    height: 24% !important;
    opacity: .34 !important;
    animation: edgeRailDriftV53 6.2s linear infinite reverse !important;
  }

  .edge-rail i:nth-child(1) { top: 9% !important; height: 48px !important; opacity: .38; animation: edgeLedBlinkV53 2.35s steps(2,end) infinite !important; }
  .edge-rail i:nth-child(2) { top: 28% !important; height: 28px !important; opacity: .32; animation: edgeLedBlinkV53 3.05s steps(2,end) infinite .28s !important; }
  .edge-rail i:nth-child(3) { top: 48% !important; height: 70px !important; opacity: .42; animation: edgeLedBlinkV53 3.55s steps(2,end) infinite .72s !important; }
  .edge-rail i:nth-child(4) { top: 70% !important; height: 36px !important; opacity: .34; animation: edgeLedBlinkV53 2.75s steps(2,end) infinite .18s !important; }
  .edge-rail i:nth-child(5) { top: 84% !important; height: 58px !important; opacity: .40; animation: edgeLedBlinkV53 4.2s steps(2,end) infinite .92s !important; }
}

@media (max-width: 760px) {
  .sayonara-edge-rails::before,
  .sayonara-edge-rails::after {
    top: 72px;
    bottom: 16px;
    width: 18px;
    opacity: .38;
  }

  .edge-rail {
    top: 72px !important;
    bottom: 16px !important;
    width: 17px !important;
    opacity: .72 !important;
  }

  .edge-rail::before,
  .edge-rail::after,
  .edge-rail i {
    left: 3px !important;
    width: 4px !important;
  }
}

/* Footer v53: carica prima, si apre più a lungo, poi resta vivo */
.vault-footer.footer-v53-prewake {
  box-shadow:
    inset 0 1px 0 rgba(0,220,255,.16),
    0 -32px 90px rgba(0,220,255,.07) !important;
}

.vault-footer.footer-vault-charging {
  animation: vaultChargeV53 1.05s steps(3,end) both !important;
}

.vault-footer.footer-v53-open {
  animation: vaultBootstrapV53 2.75s steps(2,end) both !important;
}

.vault-footer.footer-v53-idle {
  box-shadow:
    inset 0 1px 0 rgba(0,220,255,.18),
    inset 0 0 54px rgba(0,220,255,.035),
    0 -22px 90px rgba(0,220,255,.07) !important;
}

.vault-footer.footer-v53-idle::before {
  animation: vaultGridBreathV53 5.8s ease-in-out infinite !important;
}

.vault-footer.footer-v53-idle::after {
  opacity: .42 !important;
  animation: vaultTopIdleV53 4.8s ease-in-out infinite !important;
}

/* Extra gate lines: sembrano una porta/vault che si apre */
.vault-deep-gate {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.vault-deep-gate span {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(0,220,255,.16);
  border-radius: 34px;
  transform: translate(-50%, -50%) scale(.72);
  box-shadow: inset 0 0 24px rgba(0,220,255,.055), 0 0 22px rgba(0,220,255,.08);
}

.vault-deep-gate span:nth-child(1) { width: min(980px, 86vw); height: 72%; }
.vault-deep-gate span:nth-child(2) { width: min(760px, 72vw); height: 52%; }
.vault-deep-gate span:nth-child(3) { width: min(520px, 58vw); height: 34%; }

.footer-v53-open .vault-deep-gate {
  opacity: 1;
}

.footer-v53-open .vault-deep-gate span {
  animation: vaultGateOpenV53 2.45s cubic-bezier(.16,1,.3,1) both;
}
.footer-v53-open .vault-deep-gate span:nth-child(2) { animation-delay: .12s; }
.footer-v53-open .vault-deep-gate span:nth-child(3) { animation-delay: .24s; }

.footer-v53-idle .vault-deep-gate {
  opacity: .42;
}
.footer-v53-idle .vault-deep-gate span {
  transform: translate(-50%, -50%) scale(1);
  animation: vaultGateIdleV53 6.4s ease-in-out infinite;
}
.footer-v53-idle .vault-deep-gate span:nth-child(2) { animation-delay: 1s; }
.footer-v53-idle .vault-deep-gate span:nth-child(3) { animation-delay: 2s; }

/* Piccole scintille di apertura */
.vault-signal-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.vault-signal-burst i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(0,230,255,.78);
  box-shadow: 0 0 12px rgba(0,220,255,.75), 0 0 28px rgba(64,114,255,.22);
  opacity: 0;
}

.vault-signal-burst i:nth-child(1) { left: 12%; top: 22%; }
.vault-signal-burst i:nth-child(2) { left: 29%; top: 76%; }
.vault-signal-burst i:nth-child(3) { left: 52%; top: 15%; }
.vault-signal-burst i:nth-child(4) { right: 10%; top: 30%; }
.vault-signal-burst i:nth-child(5) { right: 22%; bottom: 20%; }
.vault-signal-burst i:nth-child(6) { left: 61%; bottom: 11%; }

.footer-v53-open .vault-signal-burst i {
  animation: vaultSignalBurstV53 2.3s steps(2,end) both;
}
.footer-v53-open .vault-signal-burst i:nth-child(2) { animation-delay: .18s; }
.footer-v53-open .vault-signal-burst i:nth-child(3) { animation-delay: .36s; }
.footer-v53-open .vault-signal-burst i:nth-child(4) { animation-delay: .24s; }
.footer-v53-open .vault-signal-burst i:nth-child(5) { animation-delay: .48s; }
.footer-v53-open .vault-signal-burst i:nth-child(6) { animation-delay: .62s; }

.footer-v53-idle .vault-signal-burst i {
  animation: vaultSignalIdleV53 7.2s steps(2,end) infinite;
}
.footer-v53-idle .vault-signal-burst i:nth-child(2) { animation-delay: 1.1s; }
.footer-v53-idle .vault-signal-burst i:nth-child(3) { animation-delay: 2.4s; }
.footer-v53-idle .vault-signal-burst i:nth-child(4) { animation-delay: 3.2s; }
.footer-v53-idle .vault-signal-burst i:nth-child(5) { animation-delay: 4.1s; }
.footer-v53-idle .vault-signal-burst i:nth-child(6) { animation-delay: 5.0s; }

/* Override v52: opening più lunga e più presente */
.footer-v53-open .vault-impact-wave span:nth-child(1) { animation: vaultImpactLineV53 1.85s cubic-bezier(.16,1,.3,1) both !important; }
.footer-v53-open .vault-impact-wave span:nth-child(2) { animation: vaultImpactLineV53 2.15s cubic-bezier(.16,1,.3,1) both .28s !important; }
.footer-v53-open .vault-impact-wave span:nth-child(3) { animation: vaultImpactLineV53 2.25s cubic-bezier(.16,1,.3,1) both .46s !important; }

.footer-v53-open .vault-lightning.left { animation: vaultLightningLeftV53 2.65s steps(2,end) both !important; }
.footer-v53-open .vault-lightning.right { animation: vaultLightningRightV53 2.65s steps(2,end) both .12s !important; }

.footer-v53-idle .vault-lightning.left { animation: vaultLightningIdleV53 5.9s steps(2,end) infinite !important; }
.footer-v53-idle .vault-lightning.right { animation: vaultLightningIdleV53 6.7s steps(2,end) infinite 1.7s !important; }

.footer-v53-open .vault-code-rain span {
  animation: vaultCodeFlickerV53 2.65s steps(2,end) both !important;
}
.footer-v53-open .vault-code-rain span:nth-child(2) { animation-delay: .24s !important; }
.footer-v53-open .vault-code-rain span:nth-child(3) { animation-delay: .48s !important; }
.footer-v53-open .vault-code-rain span:nth-child(4) { animation-delay: .72s !important; }

.footer-v53-idle .vault-code-rain {
  opacity: .55 !important;
}
.footer-v53-idle .vault-code-rain span {
  opacity: .10 !important;
  animation: vaultCodeIdleV53 8.4s steps(2,end) infinite !important;
}

.footer-v53-idle .footer-seal {
  animation: footerSealIdleV53 4.8s ease-in-out infinite !important;
}

.footer-v53-idle .seal-lily {
  animation: footerLilyIdleV53 5.4s ease-in-out infinite !important;
}

.footer-v53-idle .footer-social-card {
  box-shadow:
    inset 0 0 18px rgba(0,220,255,.045),
    0 0 18px rgba(0,220,255,.035);
  animation: footerSocialBreathV53 5.6s ease-in-out infinite;
}
.footer-v53-idle .footer-social-card:nth-child(2) { animation-delay: .9s; }
.footer-v53-idle .footer-social-card:nth-child(3) { animation-delay: 1.8s; }

@keyframes edgeRailAuraV53 {
  0%, 100% { opacity: .30; filter: drop-shadow(0 0 10px rgba(0,220,255,.28)); }
  45% { opacity: .58; filter: drop-shadow(0 0 22px rgba(0,220,255,.52)); }
  54% { opacity: .22; transform: translateX(1px); }
  58% { opacity: .62; transform: translateX(0); }
}

@keyframes edgeRailDriftV53 {
  0% { transform: translateY(-24%); opacity: .14; }
  18% { opacity: .52; }
  46% { opacity: .86; }
  54% { opacity: .22; transform: translateY(46%) translateX(2px); }
  58% { opacity: .78; transform: translateY(52%) translateX(-1px); }
  100% { transform: translateY(124%); opacity: .10; }
}

@keyframes edgeLedBlinkV53 {
  0%, 66%, 100% { opacity: .24; transform: translateX(0) scaleY(.96); }
  70% { opacity: .95; transform: translateX(1px) scaleY(1.08); }
  72% { opacity: .18; transform: translateX(-2px) scaleY(.84); }
  75% { opacity: .88; transform: translateX(0) scaleY(1.02); }
  82% { opacity: .38; }
}

@keyframes vaultChargeV53 {
  0% { filter: brightness(.76) contrast(1.2) saturate(1.25); transform: translateY(12px); }
  18% { filter: brightness(1.75) contrast(1.55) hue-rotate(8deg); transform: translateY(4px) skewX(-.35deg); }
  32% { filter: brightness(.85) contrast(1.18); transform: translateY(0) skewX(.25deg); }
  54% { filter: brightness(1.38) contrast(1.4); }
  100% { filter: brightness(1.04) contrast(1.1); transform: none; }
}

@keyframes vaultBootstrapV53 {
  0% { filter: brightness(.80) contrast(1.2) saturate(1.35); transform: translateY(8px); }
  8% { filter: brightness(2.05) contrast(1.65) saturate(1.55); transform: translateY(-2px) skewX(-.55deg); }
  14% { filter: brightness(.78) contrast(1.30); }
  22% { filter: brightness(1.72) contrast(1.5); transform: skewX(.38deg); }
  35% { filter: brightness(.96) contrast(1.12); }
  48% { filter: brightness(1.32) contrast(1.28); }
  64% { filter: brightness(1.05) contrast(1.08); transform: none; }
  100% { filter: none; transform: none; }
}

@keyframes vaultGridBreathV53 {
  0%, 100% { opacity: .28; filter: brightness(1); }
  45% { opacity: .42; filter: brightness(1.25); }
  52% { opacity: .22; transform: translateX(1px); }
  56% { opacity: .44; transform: translateX(0); }
}

@keyframes vaultTopIdleV53 {
  0%, 100% { opacity: .26; transform: translateX(-50%) scaleX(.60); }
  50% { opacity: .58; transform: translateX(-50%) scaleX(.82); }
}

@keyframes vaultGateOpenV53 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.62); filter: blur(10px); }
  28% { opacity: .95; transform: translate(-50%, -50%) scale(1.04); filter: blur(0); }
  70% { opacity: .38; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .18; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes vaultGateIdleV53 {
  0%, 100% { opacity: .16; filter: brightness(1); }
  50% { opacity: .30; filter: brightness(1.25); }
}

@keyframes vaultSignalBurstV53 {
  0%, 12% { opacity: 0; transform: scale(.3); }
  18%, 24% { opacity: 1; transform: scale(1.15); }
  30%, 36% { opacity: .18; transform: translateX(5px) scale(.8); }
  42%, 54% { opacity: .85; transform: translateX(-2px) scale(1); }
  100% { opacity: .08; transform: translateY(-16px) scale(.75); }
}

@keyframes vaultSignalIdleV53 {
  0%, 86%, 100% { opacity: .06; transform: scale(.75); }
  88% { opacity: .68; transform: scale(1.2); }
  90% { opacity: .12; transform: translateX(3px) scale(.85); }
  92% { opacity: .42; transform: scale(1); }
}

@keyframes vaultImpactLineV53 {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0); filter: blur(10px); }
  20% { opacity: 1; filter: blur(0); }
  58% { opacity: .95; transform: translateX(-50%) scaleX(1); }
  74% { opacity: .28; transform: translateX(-50%) scaleX(.72) translateY(1px); }
  88% { opacity: .72; transform: translateX(-50%) scaleX(.86); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(.52); filter: blur(5px); }
}

@keyframes vaultLightningLeftV53 {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-42px) skewX(-12deg); }
  7% { opacity: 1; clip-path: inset(0 0 0 0); }
  12% { opacity: .18; transform: translateX(-22px) skewX(7deg); }
  19% { opacity: .96; }
  28% { opacity: .32; transform: translateX(-38px); }
  42% { opacity: .92; filter: blur(.1px) drop-shadow(0 0 26px rgba(0,220,255,.84)); }
  58% { opacity: .20; }
  72% { opacity: .66; }
  100% { opacity: .22; transform: translateX(-28px); }
}

@keyframes vaultLightningRightV53 {
  0% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(42px) scaleX(-1) skewX(12deg); }
  7% { opacity: .96; clip-path: inset(0 0 0 0); }
  12% { opacity: .16; transform: translateX(22px) scaleX(-1) skewX(-7deg); }
  19% { opacity: .88; }
  28% { opacity: .28; transform: translateX(38px) scaleX(-1); }
  42% { opacity: .84; filter: blur(.1px) drop-shadow(0 0 26px rgba(0,220,255,.76)); }
  58% { opacity: .18; }
  72% { opacity: .58; }
  100% { opacity: .20; transform: translateX(28px) scaleX(-1); }
}

@keyframes vaultLightningIdleV53 {
  0%, 76%, 100% { opacity: .18; }
  78% { opacity: .64; filter: drop-shadow(0 0 24px rgba(0,220,255,.70)); }
  80% { opacity: .10; }
  82% { opacity: .44; }
  85% { opacity: .18; }
}

@keyframes vaultCodeFlickerV53 {
  0%, 8% { opacity: 0; transform: translateY(12px); }
  14%, 28% { opacity: .88; transform: translateY(0); }
  34%, 42% { opacity: .22; transform: translateX(6px); }
  46%, 64% { opacity: .62; transform: translateX(-3px); }
  72% { opacity: .34; }
  100% { opacity: .12; transform: translateY(-16px); }
}

@keyframes vaultCodeIdleV53 {
  0%, 82%, 100% { opacity: .08; }
  84% { opacity: .34; transform: translateX(3px); }
  86% { opacity: .05; }
  88% { opacity: .24; transform: translateX(-2px); }
}

@keyframes footerSealIdleV53 {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0,220,255,.16)); opacity: .82; }
  50% { filter: drop-shadow(0 0 24px rgba(0,220,255,.36)); opacity: 1; }
}

@keyframes footerLilyIdleV53 {
  0%, 100% { transform: scale(1) rotate(0deg); }
  48% { transform: scale(1.05) rotate(3deg); }
  52% { transform: scale(.98) rotate(-2deg); }
}

@keyframes footerSocialBreathV53 {
  0%, 100% { filter: brightness(1); border-color: rgba(0,220,255,.14); }
  50% { filter: brightness(1.12); border-color: rgba(0,220,255,.24); }
}

@media (max-width: 640px) {
  .vault-deep-gate span:nth-child(1) { width: 92vw; height: 70%; }
  .vault-deep-gate span:nth-child(2) { width: 78vw; height: 50%; }
  .vault-deep-gate span:nth-child(3) { display: none; }
  .footer-v53-open .vault-lightning.left,
  .footer-v53-open .vault-lightning.right {
    animation-duration: 2.05s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-deep-gate,
  .vault-signal-burst {
    display: none !important;
  }
  .vault-footer.footer-vault-charging,
  .vault-footer.footer-v53-open,
  .vault-footer.footer-v53-idle,
  .vault-footer.footer-v53-idle::before,
  .vault-footer.footer-v53-idle::after,
  .footer-v53-idle .footer-seal,
  .footer-v53-idle .seal-lily,
  .footer-v53-idle .footer-social-card {
    animation: none !important;
  }
}


/* ======================================================
   v54 — Footer idle alive balance
   Mantiene l'effetto sorpresa della v53, ma dopo il reveal il footer
   resta vivo, leggibile e luminoso senza diventare caotico.
====================================================== */

.vault-footer.footer-awakened {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 220, 255, .155), transparent 38%),
    radial-gradient(circle at 18% 28%, rgba(64, 114, 255, .115), transparent 30%),
    radial-gradient(circle at 82% 32%, rgba(0, 220, 255, .095), transparent 30%),
    linear-gradient(180deg, rgba(0, 18, 28, .70), rgba(0, 0, 0, .74)) !important;
  box-shadow:
    inset 0 1px 0 rgba(180, 250, 255, .12),
    inset 0 0 90px rgba(0, 220, 255, .060),
    0 -20px 70px rgba(0, 220, 255, .050);
}

/* Aura viva ma contenuta dietro alle colonne */
.vault-footer .footer-grid::before {
  content: "";
  position: absolute;
  inset: -2.2rem -1rem -1.8rem;
  z-index: -1;
  border-radius: 34px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 220, 255, .105), transparent 58%),
    linear-gradient(90deg, transparent, rgba(0, 220, 255, .045), transparent);
  border: 1px solid rgba(0, 220, 255, .065);
  filter: blur(.1px);
}

.vault-footer.footer-awakened .footer-grid::before {
  opacity: 1;
  animation: footerIdleAuraV54 5.4s ease-in-out infinite;
}

/* Testi meno fiacchi dopo il reveal */
.vault-footer.footer-awakened .footer-brand h2 {
  color: #f4fdff !important;
  text-shadow:
    0 0 18px rgba(0, 220, 255, .28),
    0 0 42px rgba(0, 90, 255, .12);
}

.vault-footer.footer-awakened .footer-brand p,
.vault-footer.footer-awakened .footer-col li,
.vault-footer.footer-awakened .footer-bottom {
  color: rgba(226, 251, 255, .78) !important;
}

.vault-footer.footer-awakened .footer-brand .footer-motto,
.vault-footer.footer-awakened .footer-col h3,
.vault-footer.footer-awakened .seal-code {
  color: #aef7ff !important;
  text-shadow:
    0 0 12px rgba(0, 220, 255, .38),
    0 0 28px rgba(0, 120, 255, .16);
}

.vault-footer.footer-awakened .footer-col a,
.vault-footer.footer-awakened .footer-sound-toggle {
  color: rgba(230, 252, 255, .80) !important;
}

.vault-footer.footer-awakened .footer-col a:hover,
.vault-footer.footer-awakened .footer-col a:focus-visible,
.vault-footer.footer-awakened .footer-sound-toggle:hover,
.vault-footer.footer-awakened .footer-sound-toggle:focus-visible {
  color: #ffffff !important;
  text-shadow:
    0 0 12px rgba(0, 220, 255, .66),
    0 0 26px rgba(0, 120, 255, .22);
}

/* Social più presenti nel dopo, non solo durante il reveal */
.vault-footer.footer-awakened .footer-social-card {
  border-color: rgba(0, 220, 255, .24) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(0,220,255,.18), transparent 55%),
    linear-gradient(90deg, rgba(0, 220, 255, .040), transparent 48%, rgba(0, 220, 255, .030)),
    rgba(0, 24, 34, .48) !important;
  box-shadow:
    inset 0 0 20px rgba(0,220,255,.045),
    0 0 20px rgba(0,220,255,.055);
}

.vault-footer.footer-awakened .footer-social-card:nth-child(1) {
  animation: footerSocialIdleV54 4.8s ease-in-out infinite .10s;
}
.vault-footer.footer-awakened .footer-social-card:nth-child(2) {
  animation: footerSocialIdleV54 5.2s ease-in-out infinite .55s;
}
.vault-footer.footer-awakened .footer-social-card:nth-child(3) {
  animation: footerSocialIdleV54 5.7s ease-in-out infinite .95s;
}

.vault-footer.footer-awakened .social-icon {
  border-color: rgba(0, 220, 255, .34) !important;
  background:
    radial-gradient(circle, rgba(170, 250, 255, .18), rgba(0, 220, 255, .07) 58%, transparent 72%) !important;
  box-shadow:
    inset 0 0 12px rgba(0,220,255,.08),
    0 0 18px rgba(0,220,255,.16);
}

/* Sigillo più vivo */
.vault-footer.footer-awakened .footer-seal {
  opacity: 1 !important;
}

.vault-footer.footer-awakened .seal-lily {
  border-color: rgba(0, 220, 255, .34) !important;
  background: rgba(0, 220, 255, .105) !important;
  box-shadow:
    inset 0 0 12px rgba(0,220,255,.07),
    0 0 26px rgba(0,220,255,.18);
  animation: sealIdleBreathV54 3.8s ease-in-out infinite;
}

/* Scanline idle sottile, sempre viva */
.vault-footer.footer-awakened::after {
  opacity: .48 !important;
  box-shadow:
    0 0 18px rgba(0, 220, 255, .42),
    0 0 42px rgba(0, 120, 255, .16) !important;
  animation:
    vaultTopScanV51 1.2s cubic-bezier(.16, 1, .3, 1) both,
    footerIdleScanV54 6.4s ease-in-out 1.25s infinite !important;
}

/* Le saette laterali restano più presenti dopo il reveal */
.vault-footer.footer-awakened .vault-lightning {
  opacity: .28 !important;
  filter:
    blur(.12px)
    drop-shadow(0 0 12px rgba(0,220,255,.48))
    drop-shadow(0 0 28px rgba(0,100,255,.18)) !important;
}

.vault-footer.footer-awakened .vault-lightning.left {
  animation:
    vaultLightningLeftV51 1.28s steps(2,end) both,
    footerLightningIdleLeftV54 7.2s steps(2,end) 1.5s infinite !important;
}

.vault-footer.footer-awakened .vault-lightning.right {
  animation:
    vaultLightningRightV51 1.28s steps(2,end) both .08s,
    footerLightningIdleRightV54 7.6s steps(2,end) 1.8s infinite !important;
}

/* Pixel/dati più leggibili dopo l'ingresso */
.vault-footer.footer-awakened .vault-pixels span {
  background: rgba(110, 240, 255, .88) !important;
  box-shadow:
    0 0 10px rgba(0,220,255,.75),
    0 0 22px rgba(0,120,255,.26);
}

.vault-footer.footer-awakened .footer-bottom {
  border-top-color: rgba(0, 220, 255, .18) !important;
}

/* Idle animations */
@keyframes footerIdleAuraV54 {
  0%, 100% {
    opacity: .72;
    transform: scaleX(.988);
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
    filter: brightness(1.16);
  }
}

@keyframes footerSocialIdleV54 {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      inset 0 0 20px rgba(0,220,255,.045),
      0 0 20px rgba(0,220,255,.055);
  }
  48% {
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 24px rgba(0,220,255,.07),
      0 0 30px rgba(0,220,255,.105);
  }
}

@keyframes sealIdleBreathV54 {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    text-shadow: 0 0 14px rgba(0,220,255,.72);
  }
  50% {
    transform: scale(1.055) rotate(3deg);
    text-shadow:
      0 0 18px rgba(0,220,255,.9),
      0 0 34px rgba(0,120,255,.28);
  }
}

@keyframes footerIdleScanV54 {
  0%, 100% {
    opacity: .42;
    transform: translateX(-50%) scaleX(.68);
  }
  45% {
    opacity: .78;
    transform: translateX(-50%) scaleX(.96);
  }
  55% {
    opacity: .30;
    transform: translateX(-50%) scaleX(.74);
  }
}

@keyframes footerLightningIdleLeftV54 {
  0%, 72%, 100% {
    opacity: .24;
    transform: translateX(-28px);
  }
  74% {
    opacity: .58;
    transform: translateX(-22px) skewX(-4deg);
  }
  76% {
    opacity: .16;
    transform: translateX(-32px);
  }
  79% {
    opacity: .42;
    transform: translateX(-24px);
  }
}

@keyframes footerLightningIdleRightV54 {
  0%, 70%, 100% {
    opacity: .22;
    transform: translateX(28px) scaleX(-1);
  }
  73% {
    opacity: .52;
    transform: translateX(22px) scaleX(-1) skewX(4deg);
  }
  75% {
    opacity: .15;
    transform: translateX(32px) scaleX(-1);
  }
  80% {
    opacity: .39;
    transform: translateX(24px) scaleX(-1);
  }
}

/* Tablet/mobile: un po' più luminoso perché lo schermo tende a spegnere il footer */
@media (max-width: 1180px) and (pointer: coarse) {
  .vault-footer.footer-awakened {
    background:
      radial-gradient(circle at 50% 18%, rgba(0, 220, 255, .18), transparent 40%),
      radial-gradient(circle at 16% 30%, rgba(64, 114, 255, .12), transparent 32%),
      radial-gradient(circle at 84% 34%, rgba(0, 220, 255, .11), transparent 32%),
      linear-gradient(180deg, rgba(0, 18, 28, .74), rgba(0, 0, 0, .76)) !important;
  }

  .vault-footer.footer-awakened .footer-brand p,
  .vault-footer.footer-awakened .footer-col li,
  .vault-footer.footer-awakened .footer-bottom {
    color: rgba(232, 252, 255, .82) !important;
  }

  .vault-footer .footer-grid::before {
    inset: -2rem -.5rem -1.4rem;
    opacity: .9;
  }
}

@media (max-width: 640px) {
  .vault-footer.footer-awakened .vault-lightning {
    opacity: .22 !important;
  }

  .vault-footer.footer-awakened .footer-social-card {
    box-shadow:
      inset 0 0 18px rgba(0,220,255,.05),
      0 0 18px rgba(0,220,255,.065);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-footer.footer-awakened .footer-grid::before,
  .vault-footer.footer-awakened .footer-social-card,
  .vault-footer.footer-awakened .seal-lily,
  .vault-footer.footer-awakened::after,
  .vault-footer.footer-awakened .vault-lightning.left,
  .vault-footer.footer-awakened .vault-lightning.right {
    animation: none !important;
  }
}


/* ======================================================
   v55 — Touch Flow Feedback
   Mobile/tablet: il sito reagisce allo scroll/touch anche senza cursore.
====================================================== */

#touch-flow-canvas {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .88;
}

/* Mantieni navbar sopra al touch canvas */
.navbar,
.game-modal,
.sayonara-boot {
  z-index: 2147483000;
}

/* Side rails reattive: più energia durante scroll/touch */
@media (hover: none), (pointer: coarse) {
  body.touch-flow-active::before,
  body.touch-flow-active::after {
    filter:
      drop-shadow(0 0 10px rgba(0, 220, 255, .60))
      drop-shadow(0 0 24px rgba(0, 110, 255, .30)) !important;
    opacity: .95 !important;
  }

  body.touch-flow-fast::before,
  body.touch-flow-fast::after {
    opacity: 1 !important;
    filter:
      drop-shadow(0 0 16px rgba(0, 235, 255, .82))
      drop-shadow(0 0 34px rgba(0, 110, 255, .42)) !important;
    animation-duration: 1.85s !important;
  }

  body.touch-flow-tap::before,
  body.touch-flow-tap::after {
    opacity: 1 !important;
  }

  /* Leggera onda sullo sfondo durante scroll veloce */
  body.touch-flow-fast .page-shell::before,
  body.touch-flow-fast main::before {
    opacity: .18;
  }

  .touch-flow-active .vault-footer.footer-awakened .vault-lightning,
  .touch-flow-fast .vault-footer.footer-awakened .vault-lightning {
    opacity: .38 !important;
  }

  .touch-flow-fast .navbar.compact {
    box-shadow:
      0 0 22px rgba(0, 220, 255, .22),
      0 14px 42px rgba(0, 0, 0, .38) !important;
  }
}

/* Micro scan di sezione quando si scrolla su touch */
@media (hover: none), (pointer: coarse) {
  .scroll-section {
    position: relative;
  }

  body.touch-flow-fast .scroll-section::after {
    content: "";
    position: absolute;
    left: 8vw;
    right: 8vw;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(144, 244, 255, .42), transparent);
    opacity: .0;
    animation: touchSectionScanV55 .9s ease-out both;
  }
}

@keyframes touchSectionScanV55 {
  0% {
    opacity: 0;
    transform: translateY(16px) scaleX(.25);
  }
  30% {
    opacity: .55;
  }
  100% {
    opacity: 0;
    transform: translateY(56px) scaleX(.9);
  }
}

/* Tablet: touch feedback più presente */
@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) {
  #touch-flow-canvas {
    opacity: .95;
  }

  body.touch-flow-active .navbar {
    border-color: rgba(0, 220, 255, .26) !important;
  }
}

/* Mobile: meno invasivo */
@media (max-width: 760px) {
  #touch-flow-canvas {
    opacity: .70;
  }

  body.touch-flow-fast::before,
  body.touch-flow-fast::after {
    filter:
      drop-shadow(0 0 12px rgba(0, 235, 255, .62))
      drop-shadow(0 0 24px rgba(0, 110, 255, .28)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #touch-flow-canvas {
    display: none !important;
  }
}


/* ======================================================
   v56 — Touch Flick Memory
   Gesture rapide / tap+micro-drag ora hanno direzione visibile.
====================================================== */

#touch-flick-canvas {
  position: fixed;
  inset: 0;
  z-index: 2147482600;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .96;
}

@media (hover: none), (pointer: coarse) {
  body.touch-flick-active::before,
  body.touch-flick-active::after {
    opacity: 1 !important;
    filter:
      drop-shadow(0 0 14px rgba(0, 235, 255, .78))
      drop-shadow(0 0 30px rgba(0, 110, 255, .38)) !important;
  }

  body.touch-flick-fast::before,
  body.touch-flick-fast::after {
    filter:
      drop-shadow(0 0 20px rgba(0, 245, 255, .92))
      drop-shadow(0 0 42px rgba(0, 110, 255, .48)) !important;
  }

  body.touch-flick-micro::before,
  body.touch-flick-micro::after {
    opacity: .92 !important;
  }

  body.touch-flick-active .navbar {
    border-color: rgba(0, 235, 255, .30) !important;
  }

  body.touch-flick-fast .navbar.compact {
    box-shadow:
      0 0 26px rgba(0, 230, 255, .28),
      0 16px 44px rgba(0, 0, 0, .40) !important;
  }

  body.touch-flick-active .vault-footer.footer-awakened .vault-lightning {
    opacity: .44 !important;
  }

  body.touch-flick-fast .vault-footer.footer-awakened .vault-lightning {
    opacity: .58 !important;
  }

  body.touch-flick-up .scroll-section::before,
  body.touch-flick-down .scroll-section::before,
  body.touch-flick-left .scroll-section::before,
  body.touch-flick-right .scroll-section::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(170, 248, 255, .34), transparent);
    filter: drop-shadow(0 0 10px rgba(0, 220, 255, .26));
    animation: flickDirectionalScanV56 .62s ease-out both;
  }

  body.touch-flick-up .scroll-section::before,
  body.touch-flick-down .scroll-section::before {
    left: 12vw;
    right: 12vw;
    height: 1px;
    top: 18%;
  }

  body.touch-flick-left .scroll-section::before,
  body.touch-flick-right .scroll-section::before {
    top: 18%;
    bottom: 18%;
    width: 1px;
    left: 50%;
    background: linear-gradient(180deg, transparent, rgba(170, 248, 255, .34), transparent);
  }
}

@keyframes flickDirectionalScanV56 {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(.22);
  }
  28% {
    opacity: .52;
  }
  100% {
    opacity: 0;
    transform: translateY(42px) scaleX(.82);
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (pointer: coarse) {
  #touch-flick-canvas {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  #touch-flick-canvas {
    opacity: .78;
  }

  body.touch-flick-fast::before,
  body.touch-flick-fast::after {
    filter:
      drop-shadow(0 0 15px rgba(0, 245, 255, .74))
      drop-shadow(0 0 30px rgba(0, 110, 255, .34)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #touch-flick-canvas {
    display: none !important;
  }
}



.memory-butterfly-hud {
  position: fixed;
  top: 86px;
  right: 18px;
  z-index: 2147483200;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 166px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 220, 255, .24);
  background:
    radial-gradient(circle at 18% 0%, rgba(0,220,255,.19), transparent 58%),
    linear-gradient(180deg, rgba(2, 18, 28, .88), rgba(0, 0, 0, .84));
  box-shadow:
    inset 0 0 18px rgba(0,220,255,.045),
    0 0 22px rgba(0,220,255,.10);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .28s ease, transform .28s ease;
}

.memory-butterfly-hud.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.memory-butterfly-hud-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #dffcff;
  border: 1px solid rgba(0,220,255,.22);
  background: rgba(0,220,255,.075);
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0,220,255,.55);
  filter: drop-shadow(0 0 10px rgba(0,220,255,.34));
}

.memory-butterfly-hud-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.memory-butterfly-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(174, 248, 255, .72);
}

#memory-butterfly-count {
  color: #f0fdff;
  text-shadow: 0 0 12px rgba(0,220,255,.30);
  font-size: 13px;
}

.memory-butterfly-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(8px) scale(.98);
  z-index: 2147483200;
  max-width: min(86vw, 430px);
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,220,255,.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,220,255,.19), transparent 60%),
    linear-gradient(180deg, rgba(0, 18, 28, .93), rgba(0, 0, 0, .88));
  color: rgba(240,253,255,.96);
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  box-shadow:
    inset 0 0 18px rgba(0,220,255,.065),
    0 0 24px rgba(0,220,255,.12);
  opacity: 0;
  transition: opacity .32s ease, transform .32s ease;
  overflow: hidden;
}

.memory-butterfly-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.memory-butterfly-toast-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(0,220,255,.065), transparent),
    repeating-linear-gradient(180deg, rgba(0,220,255,.045) 0 1px, transparent 1px 3px);
  opacity: .9;
}

@keyframes butterflyWingLeftV57 {
  0%, 100% { transform: rotate(-16deg) scaleY(1); }
  50% { transform: rotate(-38deg) scaleY(.90); }
}

@keyframes butterflyWingRightV57 {
  0%, 100% { transform: scaleX(-1) rotate(-16deg) scaleY(1); }
  50% { transform: scaleX(-1) rotate(-38deg) scaleY(.90); }
}

@keyframes butterflyAppearV57 {
  from {
    opacity: 0;
    filter: blur(2px) drop-shadow(0 0 0 rgba(0,220,255,0));
  }
  to {
    opacity: 1;
  }
}

@keyframes butterflyBobV57 {
  0%, 100% {
    margin-top: 0;
    margin-left: 0;
  }
  50% {
    margin-top: -4px;
    margin-left: 1px;
  }
}

@keyframes butterflyLeaveV57 {
  from {
    opacity: 1;
    filter: blur(0) drop-shadow(0 0 10px rgba(0,220,255,.42));
  }
  to {
    opacity: 0;
    filter: blur(4px) drop-shadow(0 0 0 rgba(0,220,255,0));
  }
}

@keyframes butterflyCollectV57 {
  0% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 0 14px rgba(0,220,255,.60));
  }
  38% {
    opacity: 1;
    filter: blur(.5px) drop-shadow(0 0 26px rgba(0,220,255,.86));
  }
  100% {
    opacity: 0;
    filter: blur(6px) drop-shadow(0 0 0 rgba(0,220,255,0));
  }
}

@keyframes butterflyGlitchV57 {
  0% {
    transform: translateX(0);
    opacity: .4;
  }
  40% {
    transform: translateX(2px);
    opacity: .95;
  }
  60% {
    transform: translateX(-2px);
    opacity: .48;
  }
  100% {
    transform: translateX(0);
    opacity: .64;
  }
}

@media (max-width: 1180px) and (pointer: coarse) {
  .memory-butterfly-hud {
    top: auto;
    bottom: 84px;
    right: 14px;
    min-width: 154px;
  }
}

@media (max-width: 760px) {
  .memory-butterfly-hud {
    right: 10px;
    bottom: 78px;
    min-width: 146px;
    padding: 9px 12px;
    border-radius: 16px;
  }

  .memory-butterfly-toast {
    bottom: 16px;
    font-size: 12px;
    padding: 11px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-butterfly-hud,
  .memory-butterfly-toast {
    animation: none !important;
    transition: none !important;
  }
}


/* HUD icon no emoji: coherent with site */
.memory-butterfly-hud-icon {
  font-size: 0 !important;
  position: relative;
}

.memory-butterfly-hud-icon::before,
.memory-butterfly-hud-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 9px;
  height: 10px;
  border-radius: 72% 28% 70% 30%;
  background: rgba(115, 235, 255, .70);
  border: 1px solid rgba(220, 252, 255, .42);
  box-shadow: 0 0 9px rgba(0,220,255,.35);
}

.memory-butterfly-hud-icon::before {
  left: 6px;
  transform: rotate(-22deg);
}

.memory-butterfly-hud-icon::after {
  right: 6px;
  transform: scaleX(-1) rotate(-22deg);
}


/* ======================================================
   v58 — Visual Intensity Auto + Manual Override
====================================================== */

:root {
  --visual-intensity: 1;
  --visual-particle-opacity: .84;
  --visual-glow: 1;
  --visual-rail-opacity: .88;
  --visual-butterfly-rate: 1;
}

.visual-intensity-panel {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(760px, 100%);
  margin: 2rem auto 0;
  padding: 1.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border-radius: 24px;
  border: 1px solid rgba(0, 220, 255, .17);
  background:
    radial-gradient(circle at 0% 0%, rgba(0,220,255,.13), transparent 46%),
    linear-gradient(135deg, rgba(0, 20, 30, .48), rgba(0, 0, 0, .22));
  box-shadow:
    inset 0 0 18px rgba(0,220,255,.035),
    0 0 22px rgba(0,220,255,.055);
  text-align: left;
}

.visual-intensity-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,220,255,.09), transparent);
  opacity: .58;
  mask-image: linear-gradient(180deg, black, transparent 80%);
}

.visual-intensity-copy {
  position: relative;
  z-index: 2;
}

.visual-intensity-copy h3 {
  margin: .2rem 0 .35rem;
  color: #f1fdff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: -.02em;
}

.visual-intensity-copy p {
  margin: 0;
  color: rgba(220,250,255,.68);
  line-height: 1.55;
}

.visual-intensity-kicker {
  margin: 0 0 .25rem !important;
  color: #9ef4ff !important;
  font: 900 .68rem/1.2 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.visual-intensity-status {
  margin-top: .6rem !important;
  color: rgba(158,244,255,.72) !important;
  font: 800 .72rem/1.35 "Courier New", monospace;
  letter-spacing: .07em;
}

.visual-intensity-control {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .38rem;
  min-width: 170px;
  color: rgba(220,250,255,.72);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.visual-intensity-control select {
  width: 100%;
  min-height: 44px;
  appearance: none;
  cursor: pointer;
  color-scheme: dark;
  border: 1px solid rgba(0,220,255,.25);
  border-radius: 16px;
  padding: .72rem 2.25rem .72rem .9rem;
  color: #eaffff;
  background-color: #03141d;
  background-image:
    linear-gradient(135deg, rgba(0, 32, 44, .88), rgba(0, 0, 0, .72));
  box-shadow:
    inset 0 0 16px rgba(0,220,255,.035),
    0 0 16px rgba(0,220,255,.08);
  font: 800 .88rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .03em;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.visual-intensity-control select:hover {
  border-color: rgba(0,220,255,.42);
  background-color: #041a24;
}

.visual-intensity-control select:focus-visible {
  outline: none;
  border-color: rgba(120, 235, 255, .85);
  box-shadow:
    0 0 0 3px rgba(0,220,255,.28),
    inset 0 0 16px rgba(0,220,255,.06),
    0 0 20px rgba(0,220,255,.2);
}

.visual-intensity-control select option {
  color: #eaffff;
  background-color: #03141d;
  font-family: "Courier New", Consolas, monospace;
  font-weight: 700;
}

.visual-intensity-control::after {
  content: "▾";
  position: absolute;
  right: .85rem;
  bottom: .72rem;
  color: #9ef4ff;
  pointer-events: none;
}

@media (max-width: 760px) {
  .visual-intensity-control select {
    max-width: 100%;
  }
}

/* Global effect scaling */
html.visual-soft #touch-flow-canvas,
html.visual-soft #touch-flick-canvas {
  opacity: .48 !important;
}

html.visual-normal #touch-flow-canvas,
html.visual-normal #touch-flick-canvas {
  opacity: .78 !important;
}

html.visual-full #touch-flow-canvas,
html.visual-full #touch-flick-canvas {
  opacity: 1 !important;
}

html.visual-soft .vault-footer.footer-awakened {
  box-shadow:
    inset 0 1px 0 rgba(180, 250, 255, .08),
    inset 0 0 55px rgba(0, 220, 255, .035),
    0 -14px 45px rgba(0, 220, 255, .025) !important;
}

html.visual-full .vault-footer.footer-awakened {
  box-shadow:
    inset 0 1px 0 rgba(180, 250, 255, .15),
    inset 0 0 110px rgba(0, 220, 255, .075),
    0 -22px 85px rgba(0, 220, 255, .075) !important;
}

html.visual-soft .vault-footer.footer-awakened .footer-social-card {
  animation: none !important;
}

html.visual-soft body::before,
html.visual-soft body::after {
  opacity: calc(var(--visual-rail-opacity) * .78) !important;
}

html.visual-full body::before,
html.visual-full body::after {
  opacity: var(--visual-rail-opacity) !important;
}

@media (max-width: 760px) {
  .visual-intensity-panel {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1rem;
  }

  .visual-intensity-control {
    min-width: 0;
    width: min(260px, 100%);
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-intensity-panel::before {
    display: none !important;
  }
}


/* ======================================================
   v59 — Butterfly reset + Sayonara Core visual mode
   - Butterflies reset on every reload for testing.
   - Full is now presented as Sayonara Core.
   - Core mode visibly changes the atmosphere, not just intensity.
====================================================== */

/* Select/panel communicates Core as special */
html.visual-full .visual-intensity-panel {
  border-color: rgba(0, 235, 255, .36) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(0,235,255,.22), transparent 44%),
    radial-gradient(circle at 92% 30%, rgba(83, 92, 255, .16), transparent 34%),
    linear-gradient(135deg, rgba(0, 32, 44, .58), rgba(0, 0, 0, .26)) !important;
  box-shadow:
    inset 0 0 26px rgba(0,220,255,.06),
    0 0 34px rgba(0,220,255,.12) !important;
}

html.visual-full .visual-intensity-kicker::after {
  content: " · CORE ONLINE";
  color: #e9fdff;
  text-shadow: 0 0 12px rgba(0,220,255,.6);
}

html.visual-full .visual-intensity-status {
  color: #dffcff !important;
  text-shadow:
    0 0 12px rgba(0,220,255,.55),
    0 0 26px rgba(64,114,255,.22);
}

/* Core atmospheric background layer */
html.visual-full body {
  --core-haze-opacity: .22;
}

html.visual-full body::selection {
  background: rgba(0, 220, 255, .35);
}

html.visual-full .page-shell,
html.visual-full main {
  position: relative;
}

html.visual-full .page-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .34;
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 220, 255, .10), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(64, 114, 255, .10), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(0, 220, 255, .08), transparent 36%),
    repeating-linear-gradient(180deg, rgba(0,220,255,.026) 0 1px, transparent 1px 7px);
  animation: sayonaraCoreAmbientV59 6.4s ease-in-out infinite;
}

/* Core navbar */
html.visual-full .navbar {
  border-color: rgba(0, 235, 255, .34) !important;
  box-shadow:
    0 0 30px rgba(0, 220, 255, .23),
    0 18px 48px rgba(0, 0, 0, .42),
    inset 0 0 18px rgba(0, 220, 255, .045) !important;
}

html.visual-full .navbar.compact .nav-svg,
html.visual-full .nav-svg {
  filter:
    drop-shadow(0 0 8px rgba(0,220,255,.7))
    drop-shadow(0 0 20px rgba(64,114,255,.25));
}

html.visual-full .logo-lily,
html.visual-full .logo-lily-svg {
  filter:
    drop-shadow(0 0 13px rgba(0, 235, 255, .86))
    drop-shadow(0 0 30px rgba(64, 114, 255, .33)) !important;
}

/* Core side rails: clearly alive */
@media (hover: none), (pointer: coarse) {
  html.visual-full body::before,
  html.visual-full body::after {
    opacity: 1 !important;
    filter:
      drop-shadow(0 0 18px rgba(0, 245, 255, .88))
      drop-shadow(0 0 42px rgba(0, 110, 255, .55)) !important;
    animation-duration: 2.05s !important;
  }
}

/* Core hero/section glow */
html.visual-full .hero-manifest,
html.visual-full .project-intro,
html.visual-full .content-section,
html.visual-full .archive-card,
html.visual-full .visual-intensity-panel {
  filter: saturate(1.06) brightness(1.035);
}

html.visual-full .scroll-section::before {
  content: "";
  position: absolute;
  left: 8vw;
  right: 8vw;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(180, 252, 255, .26), transparent);
  opacity: .30;
  box-shadow: 0 0 14px rgba(0,220,255,.18);
}

/* Core buttons */
html.visual-full .sayonara-btn,
html.visual-full .footer-social-card,
html.visual-full .archive-card,
html.visual-full .character-card {
  border-color: rgba(0, 220, 255, .28) !important;
  box-shadow:
    inset 0 0 20px rgba(0,220,255,.045),
    0 0 24px rgba(0,220,255,.075) !important;
}

/* Core footer remains more alive */
html.visual-full .vault-footer.footer-awakened {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 235, 255, .20), transparent 40%),
    radial-gradient(circle at 18% 32%, rgba(64, 114, 255, .16), transparent 34%),
    radial-gradient(circle at 84% 30%, rgba(0, 220, 255, .15), transparent 32%),
    linear-gradient(180deg, rgba(0, 22, 34, .80), rgba(0, 0, 0, .76)) !important;
}

html.visual-soft .page-shell::after {
  display: none !important;
}

/* Core Surge activation overlay */
.sayonara-core-surge {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 235, 255, .18), transparent 34%),
    repeating-linear-gradient(180deg, rgba(0, 220, 255, .045) 0 1px, transparent 1px 5px),
    rgba(0,0,0,.18);
  mix-blend-mode: screen;
}

.sayonara-core-surge.show {
  animation: coreSurgeOverlayV59 2.25s cubic-bezier(.16, 1, .3, 1) both;
}

.core-surge-seal {
  position: relative;
  display: grid;
  place-items: center;
  gap: .45rem;
  min-width: min(420px, 84vw);
  padding: 1.3rem 1.6rem;
  border-radius: 26px;
  border: 1px solid rgba(0, 235, 255, .38);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 235, 255, .18), transparent 60%),
    rgba(0, 18, 28, .76);
  box-shadow:
    inset 0 0 24px rgba(0, 220, 255, .06),
    0 0 46px rgba(0, 220, 255, .20);
  color: #f1fdff;
  text-align: center;
  overflow: hidden;
}

.core-surge-seal::before,
.core-surge-seal::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 252, 255, .95), transparent);
  box-shadow: 0 0 16px rgba(0,220,255,.55);
}

.core-surge-seal::before { top: 28%; animation: coreSurgeScanV59 .9s ease both; }
.core-surge-seal::after { bottom: 28%; animation: coreSurgeScanV59 .9s ease .18s both; }

.core-surge-lily {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 235, 255, .32);
  background: rgba(0, 220, 255, .09);
  color: #eaffff;
  text-shadow:
    0 0 16px rgba(0, 235, 255, .9),
    0 0 36px rgba(64, 114, 255, .35);
  font-size: 1.4rem;
}

.core-surge-seal strong {
  font: 900 clamp(1.4rem, 6vw, 3rem)/1 "Segoe UI", sans-serif;
  letter-spacing: -.04em;
  text-shadow:
    0 0 18px rgba(0, 235, 255, .55),
    0 0 42px rgba(64, 114, 255, .25);
}

.core-surge-seal em {
  color: #aef8ff;
  font: 900 .78rem/1.2 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-style: normal;
}

body.core-surge-active .navbar,
body.core-surge-active .hero-art-primary,
body.core-surge-active .project-art-frame,
body.core-surge-active .archive-card {
  animation: coreSurgeMicroJitterV59 .28s steps(2, end) 4;
}

@keyframes sayonaraCoreAmbientV59 {
  0%, 100% {
    opacity: .24;
    transform: translateY(0);
  }
  50% {
    opacity: .42;
    transform: translateY(-4px);
  }
}

@keyframes coreSurgeOverlayV59 {
  0% {
    opacity: 0;
    filter: blur(12px);
  }
  12% {
    opacity: 1;
    filter: blur(0);
  }
  30% {
    opacity: .86;
  }
  70% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes coreSurgeScanV59 {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  to {
    transform: translateX(30%);
    opacity: 0;
  }
}

@keyframes coreSurgeMicroJitterV59 {
  0% { transform: translateX(0); }
  25% { transform: translateX(1px); }
  50% { transform: translateX(-1px); }
  75% { transform: translateY(1px); }
  100% { transform: translateX(0); }
}

@media (max-width: 760px) {
  .core-surge-seal {
    padding: 1.05rem 1.15rem;
  }

  .core-surge-lily {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sayonara-core-surge.show,
  body.core-surge-active .navbar,
  body.core-surge-active .hero-art-primary,
  body.core-surge-active .project-art-frame,
  body.core-surge-active .archive-card,
  html.visual-full .page-shell::after {
    animation: none !important;
  }
}


/* ======================================================
   v60 — SAYONARA CORE · Living Archive
   Curated milestone: butterfly flight 2.0, section awakening,
   active navbar signal, stronger controlled Core mode.
====================================================== */

body.core-butterfly-captured::before,
body.core-butterfly-captured::after {
  filter:
    drop-shadow(0 0 20px rgba(0, 245, 255, .92))
    drop-shadow(0 0 48px rgba(0, 110, 255, .55)) !important;
  opacity: 1 !important;
}

/* ----------------------------
   Section Awakening
----------------------------- */

.scroll-section,
.hero-section,
.content-section,
.gallery-section,
.support-section,
.secret-archive-section {
  position: relative;
}

.scroll-section .section-heading,
.content-section .section-heading,
.gallery-section .section-heading,
.support-section .section-heading,
.secret-archive-section .section-heading,
.archive-card,
.character-card,
.project-art-frame,
.hero-art-primary,
.visual-intensity-panel {
  will-change: transform, opacity, filter;
}

.scroll-section:not(.section-awakened) .section-heading,
.content-section:not(.section-awakened) .section-heading,
.gallery-section:not(.section-awakened) .section-heading,
.support-section:not(.section-awakened) .section-heading,
.secret-archive-section:not(.section-awakened) .section-heading {
  opacity: .72;
  transform: translateY(10px);
  filter: blur(1px);
}

.section-awakened .section-heading {
  animation: sectionAwakenTextV60 .82s cubic-bezier(.16, 1, .3, 1) both;
}

.section-awakened .archive-card,
.section-awakened .character-card,
.section-awakened .visual-intensity-panel {
  animation: sectionAwakenCardV60 .76s cubic-bezier(.16, 1, .3, 1) both;
}

.section-awakened .archive-card:nth-child(2),
.section-awakened .character-card:nth-child(2) { animation-delay: .08s; }
.section-awakened .archive-card:nth-child(3),
.section-awakened .character-card:nth-child(3) { animation-delay: .16s; }
.section-awakened .archive-card:nth-child(4) { animation-delay: .24s; }

.section-awakened::after {
  content: "";
  position: absolute;
  left: 10vw;
  right: 10vw;
  top: clamp(1rem, 5vw, 3rem);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(170,248,255,.36), transparent);
  opacity: 0;
  box-shadow: 0 0 16px rgba(0,220,255,.25);
  animation: sectionAwakenScanV60 .95s ease-out both;
}

#story.section-awakened .section-heading h2,
#characters.section-awakened .section-heading h2,
#secret-archive.section-awakened .section-heading h2 {
  animation: sectionTitleStabilizeV60 .92s steps(2, end) both;
}

#project.section-awakened .project-art-frame,
#gallery.section-awakened .archive-placeholder,
#support.section-awakened .visual-intensity-panel {
  animation: sectionGlowPulseV60 1.1s ease both;
}

@keyframes sectionAwakenTextV60 {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  55% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes sectionAwakenCardV60 {
  from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes sectionAwakenScanV60 {
  0% { opacity: 0; transform: scaleX(.12) translateY(12px); }
  35% { opacity: .75; }
  100% { opacity: 0; transform: scaleX(1) translateY(34px); }
}

@keyframes sectionTitleStabilizeV60 {
  0% { text-shadow: 2px 0 rgba(0,220,255,.40), -2px 0 rgba(255,0,255,.18); }
  20% { text-shadow: -2px 0 rgba(0,220,255,.32), 2px 0 rgba(255,0,255,.14); }
  42% { text-shadow: 1px 0 rgba(0,220,255,.22), -1px 0 rgba(255,0,255,.10); }
  100% { text-shadow: inherit; }
}

@keyframes sectionGlowPulseV60 {
  0% { filter: brightness(.9) saturate(.95); }
  45% { filter: brightness(1.18) saturate(1.12) drop-shadow(0 0 18px rgba(0,220,255,.16)); }
  100% { filter: none; }
}

/* ----------------------------
   Active Navbar Signal
----------------------------- */

.nav-link.is-active,
.nav-submenu-button.is-active {
  color: #f3fdff !important;
}

.nav-link.is-active .nav-svg,
.nav-submenu-button.is-active .nav-svg {
  filter:
    drop-shadow(0 0 8px rgba(0,220,255,.78))
    drop-shadow(0 0 20px rgba(64,114,255,.32)) !important;
}

.nav-link.is-active::after,
.nav-submenu-button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #9ef4ff;
  box-shadow:
    0 0 10px rgba(0,220,255,.85),
    0 0 22px rgba(64,114,255,.34);
  opacity: .95;
}

.navbar:not(.compact) .nav-link.is-active::after,
.navbar:not(.compact) .nav-submenu-button.is-active::after {
  bottom: -5px;
  width: 18px;
  height: 1px;
}

html.visual-full .nav-link.is-active .nav-svg,
html.visual-full .nav-submenu-button.is-active .nav-svg {
  animation: activeNavCorePulseV60 1.65s ease-in-out infinite;
}

@keyframes activeNavCorePulseV60 {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(0,220,255,.72))
      drop-shadow(0 0 18px rgba(64,114,255,.28));
  }
  50% {
    filter:
      drop-shadow(0 0 13px rgba(0,245,255,.95))
      drop-shadow(0 0 30px rgba(64,114,255,.46));
  }
}

/* ----------------------------
   Core micro messages
----------------------------- */

.core-micro-message {
  position: fixed;
  left: 50%;
  bottom: clamp(82px, 9vh, 110px);
  z-index: 2147483350;
  max-width: min(88vw, 440px);
  transform: translateX(-50%) translateY(14px);
  padding: .65rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(0,220,255,.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,220,255,.18), transparent 60%),
    rgba(0, 14, 22, .78);
  color: #eaffff;
  text-align: center;
  font: 900 .72rem/1 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 18px rgba(0,220,255,.045),
    0 0 22px rgba(0,220,255,.12);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.core-micro-message.show {
  animation: coreMicroMessageV60 2.1s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes coreMicroMessageV60 {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px); filter: blur(6px); }
  16%, 78% { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); filter: blur(4px); }
}

/* ----------------------------
   Sayonara Core controlled upgrade
----------------------------- */

html.visual-full .sayonara-btn:hover,
html.visual-full .footer-social-card:hover,
html.visual-full .archive-card:hover,
html.visual-full .character-card:hover {
  filter: brightness(1.12) saturate(1.08);
}

html.visual-full .hero-copy h1,
html.visual-full .section-heading h2 {
  text-shadow:
    2px 0 rgba(0,220,255,.10),
    -2px 0 rgba(255,0,255,.045),
    0 0 18px rgba(0,220,255,.06);
}

@media (max-width: 760px) {
  .core-micro-message {
    bottom: 86px;
    font-size: .64rem;
    letter-spacing: .09em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-awakened .section-heading,
  .section-awakened .archive-card,
  .section-awakened .character-card,
  .section-awakened .visual-intensity-panel,
  .section-awakened::after,
  html.visual-full .nav-link.is-active .nav-svg,
  html.visual-full .nav-submenu-button.is-active .nav-svg,
  .core-micro-message.show {
    animation: none !important;
  }
}


/* In soft/normal, don't let background core particles visually mimic stuck butterflies */
html:not(.visual-full) .page-shell::after {
  opacity: .16;
}

/* ======================================================
   v62 — Memory Butterfly Encounters
   Clean isolated system. Old butterfly classes are not used.
====================================================== */

/* Safety: old engines/classes should not render even if Safari cached something weird */
.memory-butterfly,
.memory-butterfly-layer {
  display: none !important;
}

/* ===========================================================
   v74 — MICRO-REFINEMENT TIPOGRAFICO — MEMORY ECHO
   =========================================================== */
#archive-cards:not(.section-awakened) > .section-heading,
#gallery:not(.section-awakened) > .section-heading {
  opacity: 1;
  transform: none;
  filter: none;
}

#archive-cards > .section-heading,
#gallery > .section-heading {
  will-change: auto;
}

#archive-cards > .section-heading h2,
#gallery > .section-heading h2,
#archive-cards > .section-heading > p:not(.section-kicker),
#gallery > .section-heading > p:not(.section-kicker) {
  filter: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#archive-cards > .section-heading h2,
#gallery > .section-heading h2 {
  animation: saMemoryEchoV74 14s ease-in-out infinite;
}

#archive-cards > .section-heading > p:not(.section-kicker),
#gallery > .section-heading > p:not(.section-kicker) {
  color: rgba(233, 252, 255, .82);
  animation: saMemoryEchoSubV74 14s ease-in-out infinite;
}

@keyframes saMemoryEchoV74 {
  0%, 100% {
    text-shadow: 1px 0 0 rgba(158, 244, 255, .085),
                 0 0 14px rgba(0, 220, 255, .10);
  }
  50% {
    text-shadow: -1px .5px 0 rgba(158, 244, 255, .06),
                 0 0 17px rgba(0, 220, 255, .12);
  }
}

@keyframes saMemoryEchoSubV74 {
  0%, 100% { text-shadow: .5px 0 0 rgba(158, 244, 255, .05); }
  50%      { text-shadow: -.5px 0 0 rgba(158, 244, 255, .035); }
}

html.visual-soft #archive-cards > .section-heading h2,
html.visual-soft #gallery > .section-heading h2 {
  animation: none;
  text-shadow: 1px 0 0 rgba(158, 244, 255, .06),
               0 0 12px rgba(0, 220, 255, .08);
}

html.visual-full #archive-cards > .section-heading h2,
html.visual-full #gallery > .section-heading h2 {
  text-shadow: none;
  animation: saMemoryEchoV74 11s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #archive-cards > .section-heading h2,
  #gallery > .section-heading h2,
  #archive-cards > .section-heading > p:not(.section-kicker),
  #gallery > .section-heading > p:not(.section-kicker) {
    animation: none !important;
  }

  #archive-cards > .section-heading h2,
  #gallery > .section-heading h2 {
    text-shadow: 1px 0 0 rgba(158, 244, 255, .07),
                 0 0 14px rgba(0, 220, 255, .10);
  }
}


/* ==========================================================================
   FULL-BLEED PRESENTATION + SAFE CONTENT        (20 ago 2026)

   L'errore del vecchio prototipo era mettere il safe padding su `body`:
   rientravano anche le sezioni, e accanto a loro restava body nudo -- la
   fascia scura. Qui `body` e le sezioni mantengono la larghezza fisica
   piena. L'inset limita soltanto il contenuto.

   Il meccanismo e' una proprieta' del box model, non un trucco: il
   background di un elemento e' dipinto fino alla border box, quindi anche
   nell'area di padding. Una sezione puo' restare fisicamente full-bleed
   mentre il suo testo viene tenuto lontano dalla fotocamera. Verificato
   sul DOM: ogni sezione in flusso e' gia' un box 0..viewport, `position:
   relative`, `background-clip: border-box`, e i suoi ::before sono
   `absolute; inset: 0` -- che si risolve sul PADDING box, quindi restano
   full-bleed anche loro. Nessun wrapper, nessuna patch per componente.

   Solo i due inset di sistema. Nessun optical buffer, nessun visual floor,
   nessun valore inventato, nessun riconoscimento di dispositivo: dove non
   c'e' cutout `env()` vale 0 e tutto questo blocco e' un no-op esatto.

   Il padding di design non viene sostituito ma sommato, perche' prima il
   browser rientrava il viewport E POI il design applicava il suo padding
   dentro. La somma riproduce quella composizione.
   ========================================================================== */

:root {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* L'intro non ha padding di design: il suo contenuto vive in
   .v72-opening-shell, quindi basta l'inset sulla sezione. La sezione porta
   l'atmosfera e resta piena; la shell viene spinta dentro. */
.v72-opening {
  padding-left:  var(--safe-l);
  padding-right: var(--safe-r);
}

/* Prima il valore generico, poi quelli specifici: stessa specificita', decide
   l'ordine -- lo stesso rapporto che avevano gia' fra loro. */
.scroll-section {
  padding-left:  calc(20px + var(--safe-l));
  padding-right: calc(20px + var(--safe-r));
}

.hero-manifest,
.project-intro,
.card-system-section {
  padding-left:  calc(clamp(1.2rem, 5vw, 5rem) + var(--safe-l));
  padding-right: calc(clamp(1.2rem, 5vw, 5rem) + var(--safe-r));
}

/* `.vault-footer` dichiara il proprio padding come shorthand !important:
   le due sedi vanno restituite allo stesso peso. */
.vault-footer {
  padding-left:  calc(clamp(1.2rem, 5vw, 5rem) + var(--safe-l)) !important;
  padding-right: calc(clamp(1.2rem, 5vw, 5rem) + var(--safe-r)) !important;
}

/* Il kicker della hero e' un ::before posizionato con un `left` proprio, non
   dal padding della sezione: senza questa riga resterebbe l'unico testo a
   finire sotto la fotocamera. */
/* `body.v72-home .hero-manifest::before` in v72_opening.css e' piu' specifico
   e in un foglio caricato dopo: senza pareggiare il peso questa riga perdeva
   la cascata e il kicker restava a 42px dal vetro. */
.hero-manifest::before {
  /* `body.v72-home .hero-manifest::before` in v72_opening.css ha specificita'
     (0,2,2) ed e' in un foglio caricato dopo: nessun selettore ragionevole qui
     lo supera senza inseguire le sue classi. Il peso e' la strada onesta per
     una singola dichiarazione decorativa. */
  left: calc(clamp(1.1rem, 5vw, 6rem) + var(--safe-l)) !important;
}

/* --- gli elementi fissi ------------------------------------------------
   `position: fixed` si risolve sul viewport, non su un antenato, quindi il
   padding delle sezioni non li tocca. Il margine e' la leva giusta: sottrae
   l'inset da ciascun lato lasciando intatto il valore di design che c'e'
   gia' sotto, senza doverlo riscrivere. */
#site-navbar,
.audio-status,
.giglio-hole,
.memory-butterfly-toast,
.memory-butterfly-hud {
  margin-left:  var(--safe-l);
  margin-right: var(--safe-r);
}

/* --- e cio' che deve restare al vetro ----------------------------------
   Elencato perche' non venga inset per errore da una passata futura: non
   porta informazione ne' interazione, ed e' esattamente cio' che deve
   continuare sotto la fotocamera. */
#touch-flow-canvas,
#touch-flick-canvas,
#cursor-trail,
.hex-grid-v69,
.giglio-loading,
.page-butterfly-v64-layer,
.sayonara-core-surge,
.v72-mobile-progress {
  margin-left: 0;
  margin-right: 0;
}

/* --- due conseguenze di `cover`, corrette dove nascono ------------------

   1. `.v72-opening` dichiara `width: 100%` con `box-sizing: content-box`:
      il padding si sommava invece di starci dentro, e la pagina sforava di
      esattamente due inset. Misurato: 938px su un viewport di 844.
      La border box e' la lettura giusta per un box che deve restare pieno. */
.v72-opening {
  box-sizing: border-box;
}

/* 2. La geometria mobile della navbar era agganciata a `max-width: 760px`.
      Con `cover` un iPhone 12 in landscape riporta 844 invece di 750 e
      supera quella soglia: la barra tornerebbe alla composizione larga.
      Questa regola non ridisegna nulla -- ripete gli stessi valori sotto il
      predicato gia' approvato altrove, capacita' piu' altezza e mai
      larghezza, perche' il risultato pre-cover resti identico. */
@media (orientation: landscape) and (hover: none)
   and (pointer: coarse) and (max-height: 500px) {
  .navbar.compact,
  .navbar:not(.compact) {
    left:  7px !important;
    right: 7px !important;
    transform: none !important;
  }
}

/* ===========================================================
   ABOUT SYSTEM JOURNEY                                  (v102)

   About non replica il menu: memoria, controlli, motore visivo e log di
   sviluppo sono sottosistemi distinti attraversati in sequenza.
   =========================================================== */
.about-system-stack {
  --about-line: rgba(96, 229, 255, .2);
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 5vw, 3.65rem);
  box-sizing: border-box;
  width: min(920px, 100%);
  margin: clamp(2.6rem, 6vw, 4.5rem) auto 0;
  text-align: left;
}

.about-system-stack::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: -1.25rem;
  width: 1px;
  background: linear-gradient(transparent, rgba(87, 223, 255, .32) 14%, rgba(94, 129, 255, .14) 78%, transparent);
  box-shadow: 0 0 14px rgba(55, 215, 255, .1);
  pointer-events: none;
}

.about-memory-gate,
.about-development-archive {
  position: relative;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}

.about-memory-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  min-height: 154px;
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.1rem, 3.5vw, 2rem);
  border-top: 1px solid rgba(90, 229, 255, .24);
  border-bottom: 1px solid rgba(90, 229, 255, .12);
  background:
    radial-gradient(circle at 78% 50%, rgba(56, 175, 255, .12), transparent 24%),
    linear-gradient(90deg, rgba(0, 31, 46, .32), transparent 72%);
  overflow: hidden;
}

.about-memory-gate::before,
.about-development-archive::before,
.about-interface-settings::before,
.about-system-stack > .visual-intensity-panel::after {
  content: "";
  position: absolute;
  left: -1.48rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(126, 240, 255, .58);
  border-radius: 50%;
  background: #03121d;
  box-shadow: 0 0 12px rgba(46, 221, 255, .42);
  transform: translateY(-50%);
}

.about-module-copy {
  display: grid;
  gap: .55rem;
  min-width: 0;
}

.about-module-kicker {
  margin: 0;
  color: #91efff;
  font: 900 .64rem/1.45 "Courier New", ui-monospace, monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.about-module-copy > strong {
  color: #f2fdff;
  font-size: clamp(1.22rem, 2.3vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.about-module-text {
  max-width: 58ch;
  color: rgba(213, 240, 250, .72);
  font-size: clamp(.88rem, 1.5vw, .98rem);
  line-height: 1.62;
}

.about-module-action {
  align-self: end;
  color: rgba(174, 244, 255, .88);
  font: 900 .62rem/1.3 "Courier New", ui-monospace, monospace;
  letter-spacing: .14em;
  white-space: nowrap;
}

.about-gate-signal {
  position: relative;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  justify-self: center;
  border: 1px solid rgba(104, 229, 255, .18);
  border-radius: 50%;
  box-shadow: inset 0 0 22px rgba(31, 205, 255, .06), 0 0 22px rgba(31, 205, 255, .08);
}

.about-gate-signal::before,
.about-gate-signal::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px dashed rgba(111, 232, 255, .2);
  border-radius: 50%;
}

.about-gate-signal::after {
  inset: 31px;
  border-style: solid;
  border-color: rgba(142, 119, 255, .3);
  box-shadow: 0 0 14px rgba(66, 210, 255, .2);
}

.about-gate-signal > span {
  position: relative;
  z-index: 1;
  color: rgba(161, 240, 255, .64);
  font: 900 .54rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .14em;
}

.about-memory-gate:hover,
.about-memory-gate:focus-visible {
  border-color: rgba(111, 237, 255, .48);
  background:
    radial-gradient(circle at 78% 50%, rgba(56, 175, 255, .2), transparent 27%),
    linear-gradient(90deg, rgba(0, 40, 58, .46), transparent 76%);
}

.about-memory-gate:hover .about-gate-signal,
.about-memory-gate:focus-visible .about-gate-signal {
  border-color: rgba(122, 239, 255, .44);
  box-shadow: inset 0 0 26px rgba(31, 205, 255, .1), 0 0 30px rgba(31, 205, 255, .2);
}

.about-memory-gate:focus-visible,
.about-development-archive:focus-visible {
  outline: 1px solid rgba(112, 236, 255, .75);
  outline-offset: 4px;
}

.about-interface-settings {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  width: min(790px, calc(100% - clamp(0px, 8vw, 70px)));
  box-sizing: border-box;
  padding: .95rem 1rem .95rem 1.15rem;
  border-left: 1px solid rgba(89, 225, 255, .2);
  background: linear-gradient(90deg, rgba(0, 35, 48, .24), transparent 72%);
}

.about-interface-copy > p:last-child {
  margin: .35rem 0 0;
  color: rgba(203, 235, 247, .62);
  font-size: .84rem;
  line-height: 1.5;
}

.about-interface-controls {
  display: grid;
  grid-template-columns: minmax(145px, .72fr) minmax(220px, 1.28fr);
  gap: .65rem;
  min-width: 0;
}

.about-system-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  min-height: 50px;
  box-sizing: border-box;
  padding: .48rem .62rem;
  border: 1px solid rgba(78, 216, 255, .16);
  border-radius: 12px;
  color: rgba(232, 250, 255, .88);
  background: rgba(0, 25, 36, .42);
  font: 800 .75rem/1.2 "Courier New", ui-monospace, monospace;
  text-align: left;
}

button.about-system-control {
  width: 100%;
  cursor: pointer;
}

.about-system-control:hover,
.about-system-control:focus-within,
.about-system-control:focus-visible {
  border-color: rgba(105, 230, 255, .42);
  box-shadow: inset 0 0 16px rgba(0, 220, 255, .035), 0 0 15px rgba(0, 220, 255, .07);
}

.about-system-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(99, 226, 255, .22);
  border-radius: 50%;
  color: #9ef4ff;
  font-size: .72rem;
}

.about-system-state {
  color: #9ef4ff;
  font-size: .66rem;
  letter-spacing: .08em;
}

.about-language-control select {
  width: min(145px, 100%);
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  color-scheme: dark;
  color: #e4fbff;
  border: 1px solid rgba(78, 216, 255, .22);
  border-radius: 9px;
  padding: .35rem .45rem;
  background: rgba(0, 10, 16, .74);
  font: 800 .69rem/1 "Courier New", ui-monospace, monospace;
  cursor: pointer;
}

.about-system-stack > .visual-intensity-panel {
  margin-top: 0;
}

.about-system-stack > .visual-intensity-panel::after {
  left: calc(50% - min(380px, 50%) - 1.48rem);
  z-index: 3;
}

.about-development-archive {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  width: min(820px, calc(100% - clamp(0px, 6vw, 54px)));
  justify-self: end;
  min-height: 142px;
  padding: 1.2rem clamp(1rem, 3vw, 1.65rem);
  border-right: 1px solid rgba(103, 126, 255, .24);
  border-bottom: 1px solid rgba(91, 224, 255, .15);
  background:
    linear-gradient(90deg, transparent, rgba(25, 81, 124, .09) 42%, rgba(61, 69, 150, .1)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(90, 223, 255, .025) 13px 14px);
}

.about-development-status {
  display: grid;
  justify-items: center;
  gap: .45rem;
  color: rgba(151, 229, 247, .58);
  font: 800 .48rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .12em;
}

.about-development-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #82efff;
  box-shadow: 0 0 12px rgba(65, 224, 255, .7);
}

.about-development-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin-top: .15rem;
}

.about-development-tags > span {
  padding: .22rem .4rem;
  border: 1px solid rgba(91, 215, 255, .13);
  color: rgba(158, 216, 235, .58);
  font: 800 .48rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .1em;
}

.about-development-archive:hover,
.about-development-archive:focus-visible {
  border-color: rgba(101, 225, 255, .38);
  background:
    linear-gradient(90deg, transparent, rgba(25, 81, 124, .14) 42%, rgba(61, 69, 150, .16)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(90, 223, 255, .035) 13px 14px);
}

@media (max-width: 760px) {
  .about-system-stack {
    gap: 2.35rem;
    margin-top: 2.8rem;
  }

  .about-system-stack::before,
  .about-memory-gate::before,
  .about-development-archive::before,
  .about-interface-settings::before,
  .about-system-stack > .visual-intensity-panel::after {
    display: none;
  }

  .about-memory-gate {
    grid-template-columns: minmax(0, 1fr) 82px;
    min-height: 0;
  }

  .about-gate-signal {
    width: 72px;
    height: 72px;
  }

  .about-gate-signal::before { inset: 10px; }
  .about-gate-signal::after { inset: 24px; }

  .about-memory-gate .about-module-action {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .about-interface-settings {
    grid-template-columns: 1fr;
    width: 100%;
    gap: .8rem;
  }

  .about-development-archive {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .about-system-stack {
    gap: 2rem;
    margin-top: 2.35rem;
  }

  .about-memory-gate {
    grid-template-columns: minmax(0, 1fr) 66px;
    gap: .8rem;
    padding: 1.1rem .9rem;
  }

  .about-gate-signal {
    width: 60px;
    height: 60px;
  }

  .about-gate-signal::before { inset: 8px; }
  .about-gate-signal::after { inset: 20px; }

  .about-module-copy > strong {
    font-size: 1.14rem;
  }

  .about-module-text {
    font-size: .84rem;
  }

  .about-interface-settings {
    padding: .9rem .7rem .9rem .85rem;
  }

  .about-interface-controls {
    grid-template-columns: 1fr;
  }

  .about-system-control {
    min-height: 48px;
  }

  .about-language-control select {
    min-height: 44px;
  }

  .about-development-archive {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    padding: 1rem .85rem;
  }

  .about-development-archive .about-module-action {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-memory-gate,
  .about-development-archive,
  .about-gate-signal {
    transition: none !important;
  }
}

/* --- l'arrivo dal menu About ---------------------------------------
   Un segnale breve e una volta sola, per dire "e' questo". Parte solo se
   qualcuno e' arrivato davvero da li', e con meno movimento non parte
   affatto: la voce del menu porta comunque nel punto giusto. */
.visual-intensity-panel.is-arrivo {
  animation: sa-arrivo-pannello 1.5s ease-out 1;
}

@keyframes sa-arrivo-pannello {
  0%   { box-shadow: 0 0 0 0 rgba(0, 217, 255, .5); border-color: rgba(120, 235, 255, .8); }
  55%  { box-shadow: 0 0 0 10px rgba(0, 217, 255, 0); border-color: rgba(120, 235, 255, .55); }
  100% { box-shadow: 0 0 0 0 rgba(0, 217, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .visual-intensity-panel.is-arrivo { animation: none; }
}

/* Lo stato del Visual Engine nella voce di menu: stessa misura della
   pastiglia ON/OFF del suono, che gli sta accanto. */
.visual-engine-state { font-variant-numeric: tabular-nums; }