/* projects.css — stile della scena dei progetti (usato da projects.html e dalla home animata) */
  * { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #0a0a0a;
    --paper: #fafaf7;
    --fg: #f4f4f0;
    --muted: #a3a39d;
    --line: #232323;
    --accent: #fdd63e;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --card-w: clamp(130px, 13vw, 230px);   /* ricalcolata da projects.js sulla misura dello stage */
    --fs: 1.5;                              /* ingrandimento della card in primo piano all'apertura */
  }

  html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
  }

  body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 26px clamp(22px, 4vw, 56px) 26px;
    opacity: 1;
  }

  /* ───────── Topbar ───────── */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .topbar .left { display: flex; align-items: center; gap: 10px; }
  .back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--muted); text-decoration: none;
    padding: 4px 8px; border-radius: 3px;
    transition: background 120ms, color 120ms;
  }
  .back:hover { color: var(--fg); background: #1c1c1c; }
  .topbar .right .me { color: var(--muted); text-decoration: none; transition: color 120ms; }
  .topbar .right .me:hover { color: var(--fg); }
  .back .glyph { font-family: var(--sans); font-size: 12px; line-height: 1; }
  .crumb { color: var(--muted); }
  .crumb .sep { margin: 0 8px; opacity: 0.5; }
  .crumb .here { color: var(--fg); }
  .topbar .right { display: flex; align-items: center; gap: 18px; }

  /* ───────── Heading ───────── */
  .heading {
    margin-top: clamp(14px, 2vw, 22px);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .heading h1 {
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.018em;
  }
  .heading .hint {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .heading .hint .touch { display: none; color: inherit; text-decoration: none; transition: color 160ms; }
  .heading .hint .touch:hover, .heading .hint .touch:active { color: var(--fg); }
  @media (hover: none) and (pointer: coarse) {
    .heading .hint .kb { display: none; }
    .heading .hint .touch { display: inline; }
  }

  /* ───────── Scala di card in diagonale ─────────
     Le card stanno su una diagonale (in basso a sinistra → in alto a destra),
     tutte ruotate in 3D; lo scorrimento è continuo (rotella, trackpad, trascinamento)
     e a fine gesto la card più vicina al centro si aggancia. */
  .stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    touch-action: none;
    cursor: grab;
  }
  .stage.dragging { cursor: grabbing; }
  .stage.dragging .paper, .stage.dragging .paper-link { cursor: grabbing; }

  .carousel {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .paper {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card-w);
    aspect-ratio: 3 / 4;
    margin-left: calc(var(--card-w) / -2);
    margin-top: calc(var(--card-w) * 4 / 3 / -2);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    outline: none;
    backface-visibility: hidden;
    will-change: transform;
  }

  /* --tx/--ty cambiano a ogni frame: inherits:false evita il ricalcolo dello stile su tutti i discendenti della card */
  @property --tx { syntax: '<length>'; inherits: false; initial-value: 0px; }
  @property --ty { syntax: '<length>'; inherits: false; initial-value: 0px; }

  /* Posizione sulla diagonale: projects.js aggiorna --tx/--ty a ogni frame
     (niente transition sul transform, lo scorrimento è già interpolato in JS). */
  .paper {
    --tx: 0px;
    --ty: 0px;
    --rotY: -34deg;
    --pp: 760px;            /* prospettiva propria della card: più bassa = 3D più marcato */
    --scale: 1;
    --z: 0px;
    transform:
      translate3d(var(--tx), var(--ty), var(--z))
      perspective(var(--pp))
      rotateY(var(--rotY))
      scale(var(--scale));
  }

  /* Ombra della card attiva e oscuramento di quelle laterali su pseudo-elementi:
     si animano solo con opacity (niente repaint di box-shadow/filter a ogni scorrimento). */
  .paper-link::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04),
      0 8px 18px rgba(0,0,0,0.5),
      0 36px 70px -16px rgba(0,0,0,0.85);
    opacity: 0; transition: opacity 200ms ease-out;
  }
  .paper.active .paper-link::before { opacity: 1; }
  .paper.tcg-spin .paper-link::before, .paper.focused .paper-link::before, .paper.opening .paper-link::before { opacity: 0; transition: none; }
  .paper-link::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 5; pointer-events: none;
    background: #000; opacity: 0; transition: opacity 200ms ease-out;
  }
  .paper:not(.active) .paper-link::after { opacity: .38; }
  /* le card si alzano al passaggio del mouse solo dove esiste un vero hover (non su touch) */
  @media (hover: hover) and (pointer: fine) {
    .paper:not(.hidden):hover .paper-link { transform: translateY(-10px); }
    .paper:not(.hidden):hover .paper-link::after { opacity: 0; }
    .stage.dragging .paper:hover .paper-link { transform: none; }
  }

  .paper.hidden { opacity: 0; pointer-events: none; }
  .paper.tcg-spin, .paper.focused, .paper.opening { transform-origin: 50% 50%; }


  /* ───── Focus mode: card transported in front ───── */
  .focus-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0; visibility: hidden;
    transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 480ms;
    z-index: 40;
  }
  body.focusing .focus-overlay {
    opacity: 1; visibility: visible;
    transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.defocusing .focus-overlay { transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; }

  /* Keep the stage (and the focused card) ABOVE the dark overlay */
  body.focusing .stage,
  body.defocusing .stage { z-index: 50; }

  body.focusing .paper:not(.focused):not(.tcg-spin):not(.smash):not(.opening):not(.diving),
  body.focusing .heading,
  body.focusing .topbar,
  body.focusing .strip {
    filter: blur(5px) brightness(0.6);
    transition: filter 300ms ease;
    pointer-events: none;
  }
  .paper, .heading, .topbar, .strip { transition: filter 300ms ease; }
  .paper-link { transition: transform 220ms cubic-bezier(.23,1,.32,1); }

  @keyframes slideFromL { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
  @keyframes slideFromR { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes carouselIn { from { opacity: 0; } to { opacity: 1; } }

  .topbar .left,
  .heading h1,
  .heading .hint,
  .strip .now { animation: slideFromL 400ms cubic-bezier(.23,1,.32,1) both; }
  .topbar .right,
  .strip .progress { animation: slideFromR 400ms cubic-bezier(.23,1,.32,1) both; }
  .strip .counter { animation: riseIn 400ms cubic-bezier(.23,1,.32,1) both; }
  .stage .carousel { animation: carouselIn 300ms cubic-bezier(.23,1,.32,1) both; }

  .topbar .left { animation-delay: 120ms; }
  .topbar .right { animation-delay: 180ms; }
  .heading h1 { animation-delay: 240ms; }
  .heading .hint { animation-delay: 300ms; }
  .strip .now { animation-delay: 360ms; }
  .strip .counter { animation-delay: 420ms; }
  .strip .progress { animation-delay: 480ms; }
  .stage .carousel { animation-delay: 100ms; }

  @media (prefers-reduced-motion: reduce) {
    .topbar .left, .topbar .right, .heading h1, .heading .hint,
    .strip .now, .strip .counter, .strip .progress,
    .stage .carousel { animation: none; }
  }

  /* TCG-style entry: the card spins on its axis, rises, and lands in front.
     Multi-keyframe arc with per-segment easing for a fluid, floaty feel. */
  @keyframes tcgIn {
    0%   { transform: translate3d(0, 0, 0) perspective(var(--pp)) rotateY(var(--rotY)) scale(1);
           animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.5); }
    45%  { transform: translate3d(0, -8vh, 140px) perspective(var(--pp)) rotateY(195deg) scale(calc((1 + var(--fs)) / 2));
           animation-timing-function: cubic-bezier(0.25, 0.4, 0.3, 1); }
    82%  { transform: translate3d(0, -4.6vh, 332px) perspective(var(--pp)) rotateY(350deg) scale(calc(var(--fs) * 1.012));
           animation-timing-function: cubic-bezier(0.35, 0, 0.3, 1); }
    100% { transform: translate3d(0, -4vh, 340px) perspective(var(--pp)) rotateY(360deg) scale(var(--fs)); }
  }
  .paper.tcg-spin {
    z-index: 200 !important;
    cursor: default;
    backface-visibility: visible;
    animation: tcgIn 920ms both;
  }
  .paper.tcg-spin .paper-link, .paper.focused .paper-link {
    box-shadow:
      0 40px 80px rgba(0,0,0,0.8),
      0 10px 24px rgba(0,0,0,0.5);
  }
  /* Holo shine sweeping across the cover as it lands */
  @keyframes holoShine {
    from { transform: translateX(-130%) skewX(-18deg); }
    to   { transform: translateX(130%)  skewX(-18deg); }
  }
  .paper.tcg-spin .cover::after,
  .paper.focused .cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.45) 50%, transparent 62%);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
  }
  .paper.tcg-spin .cover::after { animation: holoShine 700ms cubic-bezier(0.3, 0, 0.3, 1) 560ms forwards; }

  .paper.focused {
    z-index: 200 !important;
    cursor: default;
    transition:
      transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1);
    transform:
      translate3d(0, -4vh, 340px)
      perspective(var(--pp))
      rotateY(0deg)
      scale(var(--fs)) !important;
  }
  .paper.focused .paper-link, .paper.tcg-spin .paper-link, .paper.opening .paper-link { filter: none; transform: none; }
  body.defocusing .paper.focused {
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Opening animation */
  .paper.opening {
    transform:
      translate3d(0, -20px, 80px)
      perspective(var(--pp))
      rotateY(0deg)
      scale(1.06) !important;
  }
  .paper.opening .paper-link {
    box-shadow:
      0 60px 100px -20px rgba(0,0,0,0.32),
      0 14px 30px rgba(0,0,0,0.12);
  }

  /* Paper inner */
  .paper .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .paper .cover.soon { display: flex; align-items: center; justify-content: center; }
  .paper .cover.soon img { position: static; width: 46%; height: auto; opacity: .5; filter: grayscale(1); }
  .paper .cover {
    flex: 1 1 auto;
    background: #f1f1ee;
    background-image: repeating-linear-gradient(
      135deg,
      #ececea 0px, #ececea 1px,
      #f5f5f2 1px, #f5f5f2 14px
    );
    position: relative;
    overflow: hidden;
    border-radius: inherit;
  }
  .paper .index {
    position: absolute;
    top: 13px; left: 13px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: #0a0a0a;
    background: rgba(255,255,255,0.92);
    padding: 3px 7px;
    z-index: 2;
  }
  /* Titolo e anno stanno nella barra in basso (.now), non sotto la foto */
  .paper .caption { display: none; }

  /* ───────── Tacche di avanzamento (in basso al centro, come un righello) ───────── */
  .ticks { display: flex; gap: 2px; height: 10px; align-items: stretch; }
  .ticks i { width: 1px; background: #3a3a38; }
  .ticks i.on { background: var(--fg); }

  /* ───────── Barra in basso: progetto attivo + logo + apri ───────── */
  .strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    margin-top: 14px;
  }
  .strip .now { justify-self: start; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .strip .counter { justify-self: center; }
  .strip .progress { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .now-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
  .now-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .progress-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  @media (hover: none) and (pointer: coarse) { .progress-label { display: none; } }
  .now-idx, .now-meta {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .now-title { font-weight: 500; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.015em; line-height: 1.1; }
  .paper:has(> .paper-link:focus-visible) { outline: 2px solid var(--fg); outline-offset: 7px; }
  .paper-link {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    position: relative;
    background: transparent;
    border-radius: 14px;
    padding: 0;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.03),
      0 2px 6px rgba(0,0,0,0.5),
      0 14px 28px -10px rgba(0,0,0,0.7);
    transform-origin: 50% 100%;
    color: #0a0a0a; text-decoration: none; outline: none; cursor: pointer;
    -webkit-user-drag: none;
  }
  .paper img { -webkit-user-drag: none; }

  /* ───── Il logo Gheb cade sulla card e la schiaccia (click su "Apri →") ───── */
  .drop-obj {
    position: absolute; left: 50%; bottom: 0; width: 78%; height: auto;
    transform: translate(-50%, -140vh);
    z-index: 6; pointer-events: none;
    filter: drop-shadow(0 18px 16px rgba(0,0,0,.35));
  }
  .paper.smash .drop-obj { animation: logoDrop 680ms both; }
  @keyframes logoDrop {
    0%   { transform: translate(-50%, -140vh) rotate(-200deg); animation-timing-function: cubic-bezier(.55, 0, 1, .55); }
    58%  { transform: translate(-50%, 0) rotate(0deg) scaleY(1); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
    66%  { transform: translate(-50%, 4%) rotate(0deg) scaleX(1.08) scaleY(.88); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
    80%  { transform: translate(-50%, -9%) rotate(-4deg) scaleY(1.02); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
    100% { transform: translate(-50%, 0) rotate(0deg); }
  }
  .paper.smash .drop-obj { transform-origin: 50% 100%; }
  .paper[data-href="resiliens.html"] .drop-obj { width: 72%; }
  .paper[data-href="giro-ditalia.html"] .drop-obj { width: 88%; }
  /* la card diventa una frittella (impatto a ~395ms) */
  .paper.smash .paper-link { animation: squash 170ms 395ms cubic-bezier(.2, .9, .3, 1) both; }
  @keyframes squash {
    0%   { transform: scaleX(1) scaleY(1); }
    55%  { transform: scaleX(1.42) scaleY(.08); }
    100% { transform: scaleX(1.34) scaleY(.1); }
  }
  /* sbuffo di polvere alla base */
  .puff {
    position: absolute; left: 50%; bottom: -8px; width: 30px; height: 30px; margin-left: -15px;
    border-radius: 50%; background: #3a3a36; opacity: 0; z-index: 4; pointer-events: none;
  }
  .paper.smash .puff { animation: puff 560ms 395ms cubic-bezier(.2, .7, .3, 1) forwards; } /* forwards: invisibile fino all impatto */
  @keyframes puff {
    0%   { transform: translate(0, 0) scale(.3); opacity: .95; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.7); opacity: 0; }
  }
  /* scossa dello schermo */
  body.shake { animation: shake 340ms 395ms linear both; }
  @keyframes shake {
    0%, 100% { transform: none; }
    15% { transform: translate(-6px, 5px); }
    35% { transform: translate(6px, -4px); }
    55% { transform: translate(-4px, 3px); }
    75% { transform: translate(3px, -2px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .paper.smash .drop-obj, .paper.smash .paper-link, .paper.smash .puff, body.shake { animation: none; }
  }
  .counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 70px;
  }
  .counter-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .counter img { height: 84px; width: auto; display: block; object-fit: contain; position: relative; z-index: 30; cursor: pointer; }
  /* Easter egg: clic sul logo -> schizza via di scatto lasciando la polvere, poi rientra */
  .counter { position: relative; }
  .counter img.dash { animation: dashAway 560ms cubic-bezier(.7, -.3, .95, .55) both; }
  @keyframes dashAway {
    0%   { transform: translateX(0) scaleX(1); }
    22%  { transform: translateX(-14px) scaleX(.82) scaleY(1.08); }   /* caricamento */
    40%  { transform: translateX(10vw) scaleX(1.7) scaleY(.85); }     /* scatto, allungato */
    100% { transform: translateX(95vw) scaleX(1.9) scaleY(.8); opacity: .6; }
  }
  .counter img.dash-back { animation: dashBack 520ms cubic-bezier(.1, .7, .25, 1) both; }
  @keyframes dashBack {
    0%   { transform: translateX(-95vw) scaleX(1.9) scaleY(.8); opacity: .6; }
    70%  { transform: translateX(10px) scaleX(.85) scaleY(1.1); opacity: 1; }
    100% { transform: translateX(0) scaleX(1) scaleY(1); }
  }
  .counter .puff { bottom: 22px; background: #6f6f69; z-index: 20; }
  .counter .puff.go { animation: puff 620ms cubic-bezier(.2, .7, .3, 1) both; }
  @media (prefers-reduced-motion: reduce) { .counter img.dash, .counter img.dash-back, .counter .puff.go { animation: none; } }

  /* Telefono: titolo e "Apri" sulla stessa riga, logo sotto */
  @media (max-width: 520px) {
    /* "body" davanti: site.css (caricato dopo) ha regole mobile per .strip */
    body .strip { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 10px; align-items: center; }
    body .strip .now { grid-column: 1; grid-row: 1; }
    body .strip .progress { grid-column: 1; grid-row: 2; justify-self: start; align-items: flex-start; }
    body .strip .counter { grid-column: 2; grid-row: 1 / 3; justify-self: end; }
    .now-title { font-size: 16px; }
  }

  /* ───────── Stile "arco": tutta l'interfaccia in linea con le card arrotondate ─────────
     Fondo nero con un alone morbido dietro la fila, tag e controlli a pillola, "Coming soon" scuro.
     (blocco unico: per tornare indietro basta toglierlo) */
  .back { border-radius: 999px; padding: 5px 12px; }
  .back:hover { background: rgba(255,255,255,.08); }
  .heading h1 { font-weight: 600; letter-spacing: -0.025em; }
  .paper-link { border-radius: 18px; }
  .paper .cover { background: #17171a; }
  .paper .index {
    top: 14px; left: 14px;
    color: #fff; background: rgba(12,12,14,.5);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding: 4px 9px;
  }
  .paper .cover.soon {
    background: radial-gradient(circle at 50% 40%, #26262b, #121214 70%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .paper .cover.soon img { opacity: .6; }
  .strip {
    border-top: 0;
    padding: 14px 18px;
    margin-top: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  }
  .now-title { font-weight: 600; font-size: clamp(18px, 1.8vw, 24px); }
  .ticks i { border-radius: 1px; }

  /* ───────── Vortice: sfondo con profondità ─────────
     Un disco a spirale inclinato in prospettiva dietro le card: gira piano da solo
     e segue lo scorrimento (projects.js ruota .v-drive). Solo transform, nessun filtro. */
  html { background: #050507; }
  body { background: transparent; }
  .vortex { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .7; perspective: 1000px; perspective-origin: 50% 44%; }
  .v-plane { position: absolute; left: 50%; top: 46%; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; transform: rotateX(66deg); transform-style: preserve-3d; }
  .v-drive, .v-spin, .v-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .v-drive { will-change: transform; }
  .v-spin { animation: vortexSpin 140s linear infinite; }
  @keyframes vortexSpin { to { transform: rotate(-360deg); } }
  .v-core { position: absolute; left: 50%; top: 46%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; background: radial-gradient(circle, rgba(253,214,62,.13), rgba(253,214,62,0) 66%); }
  @media (prefers-reduced-motion: reduce) { .v-spin { animation: none; } }

  /* ───────── Testata moderna: barra a pillola in vetro + titolo grande ───────── */
  .topbar {
    padding: 7px 7px 7px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 12px 32px -14px rgba(0,0,0,.7);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg);
  }
  .topbar .back { background: rgba(255,255,255,.08); padding: 8px 15px 8px 12px; color: var(--fg); font-weight: 500; }
  .topbar .back:hover { background: rgba(255,255,255,.15); }
  .topbar .crumb { color: var(--muted); }
  .topbar .crumb .here { font-weight: 600; color: var(--fg); }
  .topbar .crumb .sep { opacity: .35; }
  .topbar .right { gap: 12px; }
  .topbar .right .me { font-weight: 500; }
  .topbar #clock { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--fg); }
  .topbar .tb-logo { margin: 0; padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: 50%; background: #0a0a0a; box-shadow: 0 0 0 1px rgba(253,214,62,.55), 0 0 18px -4px rgba(253,214,62,.5); }
  .topbar .tb-logo img { height: 22px; }
  .heading { margin-top: clamp(22px, 3.4vw, 40px); align-items: center; }
  .heading h1 { font-size: clamp(30px, 4vw, 54px); font-weight: 650; letter-spacing: -0.035em; line-height: 1; }
  /* il rimando a Instagram compare solo su touch: lì diventa una pillola */
  @media (hover: none) and (pointer: coarse) { .heading .hint { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } }
  @media (max-width: 520px) { .heading h1 { font-size: 30px; } }

/* ───── Apertura: UN solo movimento continuo (percorso curvo calcolato in projects.js, funzione dive()):
   la card sale e viene avanti, poi senza fermarsi prende il largo a sinistra, torna verso lo schermo,
   gli passa davanti enorme e lascia dietro di sé la pagina del progetto (uscita finale in site.css).
   Solo transform: va sul processore grafico, quindi resta fluido. ───── */
.paper.launching { z-index: 200 !important; cursor: default; backface-visibility: visible; }
.paper.launching .paper-link::before { opacity: 0; transition: none; }
.paper.launching .paper-link::after { opacity: 0; }
/* durante il lancio: il resto dell'interfaccia sfuma (solo opacity) e il vortice si apre */
body.launch .heading, body.launch .topbar, body.launch .strip, body.launch .paper:not(.launching) { filter: none; transition: opacity 260ms ease-out; opacity: 0 !important; pointer-events: none; }
body.launch .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.launch .stage { z-index: 50; }
body.launch .focus-overlay { opacity: .85; visibility: visible; transition: opacity 400ms ease-out; }
body.launch .v-spin { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .paper.launching { animation-duration: 1ms; } }

/* ───── Ultima card: invito a scrivermi (al posto di "Coming soon") ───── */
.paper .cover.cta { display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--card-w) * .085); text-align: left;
  background: radial-gradient(circle at 18% 12%, rgba(253, 214, 62, .3), rgba(253, 214, 62, 0) 58%), linear-gradient(165deg, #1d1d20, #0c0c0e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.paper .cover.cta .cta-k { margin-top: calc(var(--card-w) * .1); font-family: var(--mono); font-size: calc(var(--card-w) * .05); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.paper .cover.cta .cta-t { font-family: var(--sans); font-weight: 650; font-size: calc(var(--card-w) * .112); line-height: 1.06; letter-spacing: -.035em; color: var(--fg); }
.paper .cover.cta .cta-go { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--card-w) * .05); padding: calc(var(--card-w) * .03) calc(var(--card-w) * .03) calc(var(--card-w) * .03) calc(var(--card-w) * .06); border-radius: 999px; background: var(--accent); color: #0a0a0a; font-family: var(--sans); font-weight: 600; font-size: calc(var(--card-w) * .062); letter-spacing: -.01em; }
.paper .cover.cta .cta-go i { width: calc(var(--card-w) * .1); height: calc(var(--card-w) * .1); border-radius: 50%; background: #0a0a0a; color: var(--accent); display: grid; place-items: center; font-style: normal; font-size: calc(var(--card-w) * .06); }

.now-idx { white-space: nowrap; }