/* =========================================================================
   CARLOFEBBRAIO.COM · stile
   - Colori e misure generali: :root
   - Card dei progetti: .pcard--becode / .pcard--reframe / .pcard--cf
   - Luce blu dal basso: .horizon
   ========================================================================= */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f5f5f4;
  --ink: #141416;
  --ink-soft: #2e2e33;
  --muted: #66666c;
  --faint: #a4a4a9;
  --surface: #fff;
  --chip: #eaeae8;
  --gutter: 20px;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --ring: 0 0 0 1px rgb(20 20 22 / .055);
  --shadow: var(--ring), 0 1px 2px rgb(20 20 22 / .05), 0 4px 12px -4px rgb(20 20 22 / .09);
  --shadow-up: var(--ring), 0 2px 4px rgb(20 20 22 / .05), 0 14px 28px -10px rgb(20 20 22 / .2);

}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html:has(.sheet[open]) { overflow: hidden; scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font: 400 16px/1.5 var(--font);
  color: var(--ink);
  background: radial-gradient(56rem 34rem at 50% -10rem, #fff, rgb(255 255 255 / 0) 72%) no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img, svg, canvas { display: block; }
h1, h2, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(64px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

/* ---------- luce blu dal basso ---------- */

/* Scende di 30vh sotto lo schermo: su iPhone copre anche la zona dietro la barra di Safari
   e il rimbalzo in fondo alla pagina. Si alza all'apertura, poi resta ferma (niente scatti). */
.horizon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -30vh;
  height: 98vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(var(--arc),
    #04072a 0%, #0a1784 15%, #1736e6 31%, #3c78ff 47%, #8db8ff 63%,
    rgb(207 224 255 / .7) 77%, rgb(245 245 244 / 0) 92%);
  --arc: ellipse 74vw 58vh at 50% calc(100% - 23vh);
  animation: horizon-rise 1.8s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}
/* un riflesso ciano sull'arco */
.horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34vw 26vh at 58% calc(100% - 26vh), rgb(51 234 247 / .35), rgb(51 234 247 / 0) 72%);
}
@keyframes horizon-rise {
  from { opacity: 0; transform: translateY(26vh); }
}

/* ---------- 1. profilo ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__name {
  margin-top: 28px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.hero__name .w { white-space: nowrap; }
.hero__name .ch { display: inline-block; }

.hero__bio {
  margin-top: 3px;
  max-width: 26em;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--muted);
  text-wrap: balance;
}
.hero__bio strong { font-weight: 500; color: var(--ink); }

/* Foto in vetro bombato: script.js la disegna in WebGL (bordo che rifrange,
   riflesso che segue il puntatore). Senza WebGL resta la versione CSS. */
.avatar {
  --s: 192px;
  --r: calc(var(--s) * .225);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: var(--r);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sx, 1), var(--sy, 1));
  transition: transform 1.1s var(--ease);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  box-shadow:
    0 2px 3px rgb(0 0 0 / .07),
    0 14px 26px -10px rgb(0 0 0 / .28),
    0 38px 64px -30px rgb(0 0 0 / .45);
}
.avatar__photo,
.avatar__gl,
.avatar__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.avatar.is-squishing { transition: none; }   /* la bolla segue la molla in script.js */
.avatar__photo { object-fit: cover; }
.avatar img,
.avatar canvas { pointer-events: none; -webkit-user-drag: none; }
.avatar__gl { opacity: 0; transition: opacity .3s; }
.avatar__glass {
  pointer-events: none;
  background: radial-gradient(100% 62% at var(--gx, 32%) var(--gy, -6%), rgb(255 255 255 / .36), rgb(255 255 255 / 0) 58%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .3),
    inset 0 2px 1px rgb(255 255 255 / .55),
    inset 0 -2px 4px rgb(0 0 0 / .3),
    inset 0 0 0 7px rgb(255 255 255 / .08);
}
.avatar.has-gl .avatar__gl { opacity: 1; }
.avatar.has-gl .avatar__photo,
.avatar.has-gl .avatar__glass { opacity: 0; }

/* ---------- 2. progetti ---------- */

.projects { margin-top: 56px; }

.projects__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 352px));
  justify-content: center;
  gap: 22px;
}
.projects__nav { display: none; }

/* la card: ombra e inclinazione fuori, superficie e luci dentro */
.pcard {
  position: relative;
  display: block;
  aspect-ratio: 348 / 219;
  border-radius: 14px;
  container-type: inline-size;
  color: var(--card-fg, #fff);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
  box-shadow:
    0 1px 1px rgb(0 0 0 / .08),
    0 14px 26px -12px rgb(0 0 0 / .32),
    0 36px 60px -30px var(--glow, rgb(0 0 0 / .4));
  -webkit-user-select: none;
  user-select: none;
}
.pcard__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  background: var(--card-bg);
}
/* bordo smussato e lucido */
.pcard__surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgb(255 255 255 / .2) 0%, rgb(255 255 255 / 0) 34%);
  box-shadow:
    inset 0 0 0 1px var(--rim, rgb(255 255 255 / .16)),
    inset 0 1px 0 rgb(255 255 255 / .4),
    inset 0 -1px 0 rgb(0 0 0 / .2);
}

.pcard__label,
.pcard__word,
.pcard__name,
.pcard__url { position: absolute; z-index: 3; left: 6.5%; }
.pcard__label {
  top: 9%;
  font: 500 9px/1 var(--mono);
  font-size: clamp(8.5px, 2.6cqi, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--card-fg2);
}
.pcard__word {
  bottom: 20.5%;
  width: auto;
  height: clamp(15px, 5.6cqi, 28px);
}
.pcard__name {
  bottom: 20%;
  font-size: 16px;
  font-size: clamp(15px, 5.2cqi, 26px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.pcard__url {
  bottom: 9.5%;
  font: 400 10px/1 var(--mono);
  font-size: clamp(10px, 3cqi, 14px);
  color: var(--card-fg2);
}
.pcard__mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: var(--mark-r, 7%);
  width: auto;
  height: var(--mark-h, 52%);
  transform: translateY(-50%);
  filter: var(--mark-fx, drop-shadow(0 8px 16px rgb(0 0 0 / .25)));
}

/* il bagliore che attraversa la card ogni qualche secondo */
.pcard__shine {
  position: absolute;
  z-index: 4;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 60%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .06) 36%, rgb(255 255 255 / var(--shine, .42)) 50%,
    rgb(255 255 255 / .06) 64%, rgb(255 255 255 / 0) 100%);
  transform: translateX(-130%);
  animation: card-shine 7s cubic-bezier(.45, .05, .25, 1) var(--shine-delay, 1.6s) infinite;
}
@keyframes card-shine {
  0% { transform: translateX(-130%); }
  26%, 100% { transform: translateX(240%); }
}
.projects__track > li:nth-child(2) .pcard { --shine-delay: 1.95s; }
.projects__track > li:nth-child(3) .pcard { --shine-delay: 2.3s; }

/* il riflesso che segue il puntatore (solo col mouse) */
.pcard__glare { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pcard__glare {
    display: block;
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s var(--ease);
    background: radial-gradient(60% 90% at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .16), rgb(255 255 255 / 0) 70%);
  }
}

.pcard.is-tilting { transition: transform .12s linear, box-shadow .8s var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .pcard:hover {
    --ty: -5px;
    box-shadow:
      0 1px 1px rgb(0 0 0 / .08),
      0 20px 34px -14px rgb(0 0 0 / .36),
      0 50px 80px -34px var(--glow, rgb(0 0 0 / .45));
  }
  .pcard:hover .pcard__glare { opacity: 1; }
}
a.pcard:active { --ty: -1px; transition-duration: .2s; }

/* Becode: la sfumatura ciano → blu del logo, "B" e scritta in nero */
.pcard--becode {
  --card-fg: #061826;
  --card-fg2: rgb(6 24 38 / .62);
  --glow: rgb(36 99 251 / .6);
  --rim: rgb(255 255 255 / .3);
  --shine: .5;
  --mark-h: 58%;
  --mark-r: 8%;
  --mark-fx: drop-shadow(0 10px 18px rgb(6 40 130 / .35));
  --card-bg:
    radial-gradient(120% 140% at 0% 0%, rgb(255 255 255 / .3) 0%, rgb(255 255 255 / 0) 44%),
    radial-gradient(90% 120% at 100% 100%, rgb(20 50 200 / .35) 0%, rgb(20 50 200 / 0) 60%),
    linear-gradient(135deg, #1ee8fb 0%, #2ba6fb 55%, #2463fb 100%);
}

/* Reframe: notte blu con il bagliore del logo, "R" e scritta in bianco */
.pcard--reframe {
  --card-fg: #fff;
  --card-fg2: rgb(255 255 255 / .62);
  --glow: rgb(22 99 255 / .55);
  --mark-h: 50%;
  --mark-r: 9%;
  --mark-fx: drop-shadow(0 0 24px rgb(51 234 247 / .45));
  --card-bg:
    radial-gradient(95% 130% at 110% 115%, #33eaf7 0%, #0aa6f4 22%, #1663ff 46%, rgb(22 99 255 / 0) 76%),
    radial-gradient(70% 90% at 0% 0%, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 60%),
    #07090c;
}

/* CF Communication: nero e petrolio del sito, accento ciano, logo in bianco */
.pcard--cf {
  --card-fg: #ecfaff;
  --card-fg2: rgb(233 233 233 / .6);
  --glow: rgb(0 165 254 / .45);
  --rim: rgb(0 165 254 / .38);
  --shine: .3;
  --mark-h: 54%;
  --mark-r: 8%;
  --mark-fx: drop-shadow(0 0 18px rgb(1 210 255 / .25));
  --card-bg:
    radial-gradient(80% 110% at 100% 0%, rgb(1 210 255 / .34) 0%, rgb(0 165 254 / .12) 36%, rgb(0 165 254 / 0) 62%),
    radial-gradient(70% 90% at 0% 100%, rgb(0 55 70 / .6), rgb(0 55 70 / 0) 70%),
    linear-gradient(110deg, #13252e 0%, #0b171e 55%, #121111 100%);
}

/* ---------- 3. contatti ---------- */

.connect {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* un'etichetta di vetro: resta leggibile anche sopra la luce blu */
.connect__title {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-soft);
  background: rgb(255 255 255 / .86);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 2px 8px -3px rgb(20 20 60 / .18);
}

.links {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  margin-top: 14px;
}

.row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgb(20 20 22 / .045), rgb(20 20 22 / 0) 70%);
}
.row__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12), 0 1px 2px rgb(0 0 0 / .1);
}
.row__icon svg { width: 24px; height: 24px; }
.row__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}
.row__title {
  font-size: 15px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.008em;
}
.row__sub {
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.row__chev {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease), stroke .3s;
}

@media (hover: hover) and (pointer: fine) {
  .row:hover { transform: translateY(-1px); box-shadow: var(--shadow-up); }
  .row:hover::before { opacity: 1; }
  .row:hover .row__chev { transform: translateX(2px); stroke: var(--ink); }
}
.row:active { transform: scale(.985); transition-duration: .15s; }

/* icone */
.ic-cal {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.ic-cal__wd {
  flex: none;
  height: 11px;
  background: #f2433a;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  line-height: 11px;
  letter-spacing: .08em;
  text-align: center;
}
.ic-cal__day {
  flex: 1;
  display: grid;
  place-items: center;
  padding-bottom: 1px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.ic-wa { background: linear-gradient(180deg, #5cf27c, #1ebe55); }
.ic-wa svg { width: 22px; height: 22px; fill: #fff; }
.ic-mail { background: linear-gradient(180deg, #4ea6ff, #0f6fee); }
.ic-img img { width: 100%; height: 100%; object-fit: cover; }
.ic-cf { background: #121111; }
.ic-cf img { width: 62%; height: auto; }

/* social */
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.social {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.social svg { width: 17px; height: 17px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .social:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
}
.social:active { transform: scale(.92); transition-duration: .15s; }

/* il footer sta sempre sopra la parte scura della luce */
.foot {
  padding: 72px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 13px;
  color: rgb(255 255 255 / .82);
  text-shadow: 0 1px 8px rgb(5 10 46 / .4);
}

/* ---------- schede progetto ---------- */

.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* quasi opaco: il testo della scheda è leggibile da subito, anche prima che arrivi la sfocatura */
.sheet::backdrop {
  background: rgb(245 245 244 / .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.sheet__inner {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: calc(64px + env(safe-area-inset-top)) var(--gutter) calc(56px + env(safe-area-inset-bottom));
}
.sheet__inner:focus { outline: none; }
.sheet__close {
  position: fixed;
  z-index: 2;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgb(32 32 35 / .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .25), 0 4px 12px -2px rgb(0 0 0 / .2);
  transition: transform .25s var(--ease), background .25s;
}
.sheet__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.sheet__close:hover { background: rgb(32 32 35 / .72); }
.sheet__close:active { transform: scale(.9); }

.sheet .pcard { border-radius: 20px; }
.sheet .pcard__shine { --shine-delay: .7s; }
.sheet__body {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}
.sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12), 0 1px 2px rgb(0 0 0 / .1);
}
img.logo { object-fit: cover; }
.logo--cf { background: #121111; }
.logo--cf img { width: 62%; height: auto; }
.sheet__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.sheet__site {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: var(--muted);
  transition: color .2s;
}
.sheet__site svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sheet__site:hover { color: var(--ink); }
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tags li {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--chip);
  font-size: 13px;
  line-height: 1.4;
  color: #3d3d42;
}
.sheet__text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.sheet .row { margin-top: 4px; }

/* aperture e chiusure */
.sheet[open]::backdrop { animation: fade-in .16s ease-out backwards; }
.sheet[open] .sheet__close { animation: fade-in .4s .1s var(--ease) backwards; }
/* senza View Transitions la card entra da sola; con le View Transitions arriva dalla griglia */
.sheet.pop[open] .pcard--lg { animation: pop-in .6s var(--ease) backwards; }
.sheet[open] .sheet__body > * { animation: rise-in .7s var(--ease) backwards; }
.sheet[open] .sheet__body > :nth-child(1) { animation-delay: .06s; }
.sheet[open] .sheet__body > :nth-child(2) { animation-delay: .1s; }
.sheet[open] .sheet__body > :nth-child(3) { animation-delay: .14s; }
.sheet[open] .sheet__body > :nth-child(4) { animation-delay: .18s; }
.sheet.is-closing,
.sheet.is-closing::backdrop { animation: fade-out .22s var(--ease) forwards; }

/* la card si trasforma nella scheda (browser con View Transitions) */
::view-transition-group(project) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }

/* ---------- entrata della pagina ---------- */

@keyframes enter {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes enter-pop {
  from { opacity: 0; transform: scale(.94); filter: blur(18px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fade-in  { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in  { from { opacity: 0; transform: translateY(18px); } }
@keyframes pop-in   { from { opacity: 0; transform: scale(.94) translateY(12px); } }

.js .enter,
.js .hero__name:not(.is-split),
.js .hero__name .ch {
  animation: enter 1s var(--ease) backwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}
.js .hero__name:not(.is-split) { --d: 200; }
.js .enter--pop { animation-name: enter-pop; animation-duration: 1.3s; }

/* ---------- carosello dei progetti (telefono e tablet in verticale) ---------- */

@media (max-width: 899px) {
  .projects__viewport { margin-inline: calc(var(--gutter) * -1); }
  /* il carosello taglia ciò che esce dai bordi: spazio sotto per l'ombra */
  .projects__track {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding: 8px var(--gutter) 48px;
    scrollbar-width: none;
  }
  .projects__track::-webkit-scrollbar { display: none; }
  .projects__track > li { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
  .projects__track .pcard {
    box-shadow:
      0 1px 1px rgb(0 0 0 / .08),
      0 8px 16px -8px rgb(0 0 0 / .3),
      0 22px 32px -18px var(--glow, rgb(0 0 0 / .35));
  }

  .projects__nav { display: flex; gap: 8px; margin-top: -28px; }
  .navbtn {
    width: 34px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--chip);
    transition: transform .25s var(--ease), opacity .25s;
  }
  .navbtn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .navbtn:disabled { opacity: .35; cursor: default; }
  .navbtn:not(:disabled):active { transform: scale(.9); }
}

/* ---------- telefono ---------- */

@media (max-width: 639px) {
  :root { --gutter: 16px; }
  .page { padding-top: calc(44px + env(safe-area-inset-top)); }
  .avatar { --s: 136px; }
  .hero__name { margin-top: 24px; }
  .hero__name, .hero__bio { font-size: 17px; }
  .projects { margin-top: 36px; }
  .connect { margin-top: 44px; }
  .horizon { height: 90vh; --arc: ellipse 118vw 50vh at 50% calc(100% - 25vh); }
}

/* ---------- chi preferisce meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .pcard__shine { display: none; }
}