/*
Theme Name: Manuel Silvestri — Tecnico Creativo
Theme URI: https://manuelsilvestri.it
Author: Manuel Silvestri
Description: Tema portfolio monopagina.
Version: 7.5.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: manu
*/

/* ═══════════════════════════════════════════════════
   v7 — Aurora CSS from index.html (single-element ::after)
   No canvas. No separate animated div. No Firefox issues.
   
   STACKING:
   html bg: var(--bg)
   .jumbo-bg         → position:fixed z:0 (base gradient)
   .jumbo-bg::after   → mix-blend-mode:difference (animated, same element)
   body::after        → noise texture z:9998
   .snap-container    → position:relative z:1 (content above aurora)
   .snap-container    → scroll-behavior:smooth (matches working v4_9)
   .page              → semi-transparent bg → aurora bleeds through
   .page.hero         → transparent bg, video is absolute inside
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #060608;
  --bg2: #0a0a12;
  --bg3: #10101c;
  --cyan: #00fff9;
  --cyan-dark: #006b68;
  --magenta: #ff00c1;
  --magenta-dark: #7a005d;
  --white: #e8e8ec;
  --white-soft: #c0c0cc;
  --gray: #808090;
  --gray-dim: #1a1a28;
  /* Aurora gradient palette (from index.html — more vivid) */
  --blue: #60a5fa;
  --teal: #5eead4;
  --purple: #e879f9;
  --jumbo-speed: 60s;
  /* Fonts */
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Source Code Pro', 'SF Mono', Consolas, monospace;
  --serif: 'Liberation Serif', 'Times New Roman', serif;
  --cursive: 'Tangerine', cursive;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 56px;
  --app-h: 100vh;
}
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img, video, svg, canvas { display: block; max-width: 100%; }

html { height: 100%; overflow: hidden; background: var(--bg); }
body {
  height: 100%; overflow: hidden;
  font-family: var(--font);
  font-size: clamp(1rem, .82rem + .62vw, 1.45rem);
  color: var(--white);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: transparent;
}
::selection { background: var(--magenta); color: var(--bg); }

/* ═══ AURORA — CSS gradients, single element + ::after ═══
   This approach works on Firefox because mix-blend-mode
   is within ONE element (not between two separate fixed divs). */
@keyframes jumbo { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
.jumbo-bg {
  --s: repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%);
  --r: repeating-linear-gradient(100deg, var(--blue) 10%, var(--purple) 15%, var(--blue) 20%, var(--teal) 25%, var(--blue) 30%);
  position: fixed; inset: 0; z-index: 0;
  background-image: var(--s), var(--r);
  background-size: 300%, 200%;
  filter: blur(10px) opacity(65%) saturate(200%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  pointer-events: none;
}
.jumbo-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--s), var(--r);
  background-size: 200%, 100%;
  animation: jumbo var(--jumbo-speed) linear infinite;
  background-attachment: fixed;
  mix-blend-mode: difference;
}

/* Noise texture overlay — adds film grain, kills the "digital" flatness */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .03;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ SCROLL-SNAP ═══ */
.snap-container {
  position: relative; z-index: 1;
  height: var(--app-h);
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.snap-container::-webkit-scrollbar { display: none; }
/* Touch devices & small/short screens: let sections GROW to fit content and
   scroll freely (proximity snap). This prevents content clipping that happens
   with fixed-height + overflow:hidden. The snap-container stays the ONLY scroll
   container (page-inner is overflow:visible, not a nested scroller), so scroll
   never gets trapped. Desktop with tall-enough screens keeps crisp mandatory snap. */
@media (hover: none), (max-height: 760px), (max-width: 600px) {
  .snap-container { scroll-snap-type: y proximity; }
  .page { height: auto; min-height: 100dvh; }
  .page-inner { flex: 1 0 auto; overflow: visible; justify-content: center; }
}
@supports not (height: 100dvh) {
  @media (hover: none), (max-height: 760px), (max-width: 600px) {
    .page { min-height: 100vh; }
  }
}

.skip-link { position: absolute; top: -100px; left: 0; background: var(--cyan); color: var(--bg); padding: .6rem 1rem; font-family: var(--mono); font-size: .75rem; z-index: 10000; }
.skip-link:focus { top: 0; }
.screen-reader-text { border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .snap-container { scroll-snap-type: none; }
}

/* ═══ CURSOR ═══ */
@media (hover: hover) and (min-width: 769px) { body { cursor: none; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; will-change: transform; }
.cursor-dot { width: 8px; height: 8px; background: var(--white); border-radius: 50%; transition: width .15s, height .15s, background .2s; z-index: 10001; }
.cursor-ring { width: 40px; height: 40px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%; transition: width .25s var(--ease), height .25s var(--ease), border-color .2s, background .2s; }
.cursor-dot.hover { width: 4px; height: 4px; background: var(--cyan); }
.cursor-ring.hover { width: 60px; height: 60px; border-color: var(--cyan); background: rgba(0,255,249,.06); }
@media (max-width: 768px), (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ═══ PAGES ═══ */
.page {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: var(--app-h);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(6,6,8,.62);
}

/* CRITICAL: overflow:hidden (NOT auto). A nested scroll container traps
   wheel/touch events and prevents the snap container from receiving them —
   that was the "stuck at cosa faccio" bug. ONE scroll container only.
   justify-content:center centers content; generous padding-bottom clears
   the floating contact button so it never covers text. */
.page-inner {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + clamp(.8rem, 2.5vh, 1.6rem)) clamp(1rem, 5vw, 3rem) clamp(4.5rem, 9vh, 6rem);
  width: 100%;
  gap: clamp(.4rem, 1.2vh, .8rem);
}

/* ═══ NAV ═══ */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  padding: .5rem clamp(.8rem, 3vw, 2rem);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(6,6,8,.75);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.04);
  height: var(--nav-h);
}
@supports not (backdrop-filter: blur(1px)) { nav.site-nav { background: rgba(6,6,8,.96); } }
.nav-logo { display: block; opacity: .9; }
.nav-logo img { height: clamp(24px, 2vw + 16px, 36px); width: auto; }
.nav-logo:hover { opacity: 1; }
.nav-logo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.nav-right { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.8rem); }
.nav-links { display: flex; gap: clamp(.5rem, 1.5vw, 1.5rem); list-style: none; }
.nav-links a {
  font-family: var(--mono);
  font-size: clamp(.62rem, .45rem + .4vw, .92rem);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray); transition: color .3s;
  position: relative;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--cyan); transition: width .3s var(--ease); }
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }

/* Language toggle */
.lang-toggle {
  display: flex; align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px; padding: 2px;
  min-height: 30px; transition: border-color .3s;
}
.lang-toggle:hover { border-color: rgba(0,255,249,.15); }
.lang-btn {
  background: none; border: none; cursor: pointer;
  padding: 2px 7px;
  font-family: var(--mono); font-size: clamp(.48rem, .35vw + .28rem, .56rem); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray); border-radius: 16px;
  transition: all .3s var(--ease);
  display: flex; align-items: center; gap: 3px;
  position: relative; z-index: 1; min-height: 26px;
}
.lang-btn.active { color: var(--white); background: rgba(0,255,249,.1); }
.lang-flag { font-size: .75rem; line-height: 1; }

/* ═══ HERO ═══
   Video is position:ABSOLUTE inside hero. No overflow:clip needed
   (absolute+inset:0 already constrains to parent bounds).
   Hero bg is transparent so aurora + video show through. */
.page.hero {
  background: transparent;
  justify-content: center;
  align-items: center;
}
.hero-video-wrap {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; background: var(--bg);
  pointer-events: none;
}
.hero-video {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  transform: translate(-50%,-50%); object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-video.is-playing { opacity: 1; }
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(6,6,8,.4), rgba(6,6,8,.72)),
    linear-gradient(to bottom, rgba(6,6,8,.5), rgba(6,6,8,.35) 50%, rgba(6,6,8,.78));
}
.hero-inner {
  text-align: center; z-index: 2; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 1 auto; width: 100%;
  padding: 2rem clamp(1rem, 4vw, 2rem);
}
.hero-name-heading { font: inherit; margin: 0; padding: 0; border: 0; display: contents; }

.glitch-wrap { position: relative; display: inline-block; line-height: 1; }
.glitch-first { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 5vw + 1.4rem, 7rem); letter-spacing: .02em; color: var(--white); display: inline-block; position: relative; cursor: pointer; }
.glitch-last { font-family: var(--cursive); font-weight: 400; font-size: clamp(3.4rem, 7vw + 2rem, 10rem); color: var(--white); display: block; margin-top: -.15em; position: relative; cursor: pointer; }
.glitch-first::before,.glitch-first::after,.glitch-last::before,.glitch-last::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-visible .glitch-first::before { left: .3%; text-shadow: -2px 0 var(--magenta); animation: gx 4s infinite linear alternate-reverse, gop 5s infinite steps(2), gs1 6s infinite linear; }
  .hero-visible .glitch-first::after  { left: -.3%; text-shadow: 2px 0 var(--cyan); animation: gx 3.5s infinite linear alternate, gop 4.5s infinite steps(3), gs2 5.5s infinite linear reverse; }
  .hero-visible .glitch-last::before  { left: .2%; text-shadow: -2px 0 var(--magenta); animation: gx 5.5s infinite linear alternate, gop 6s infinite steps(3), gs1 7s infinite linear; }
  .hero-visible .glitch-last::after   { left: -.2%; text-shadow: 2px 0 var(--cyan); animation: gx 4.8s infinite linear alternate-reverse, gop 5.2s infinite steps(2), gs2 6.5s infinite linear reverse; }
}
@keyframes gx{0%,100%{transform:translateX(0)}3%{transform:translateX(2px)}9%{transform:translateX(-3px)}15%{transform:translateX(5px)}30%{transform:translateX(-6px)}55%{transform:translateX(-8px)}75%{transform:translateX(-5px)}}
@keyframes gop{0%,100%{opacity:.8}3%,10%,23%,38%,55%,68%,83%,98%{opacity:.3}}
@keyframes gs1{0%{clip-path:polygon(0 12%,100% 2%,100% 55%,0 45%)}33%{clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%)}66%{clip-path:polygon(0 90%,100% 90%,100% 95%,0 95%)}100%{clip-path:polygon(0 33%,100% 43%,100% 68%,0 58%)}}
@keyframes gs2{0%{clip-path:polygon(0 25%,100% 15%,100% 85%,0 75%)}50%{clip-path:polygon(0 85%,100% 75%,100% 95%,0 85%)}100%{clip-path:polygon(0 35%,100% 45%,100% 55%,0 45%)}}

.hero-role {
  font-family: var(--mono);
  font-size: clamp(.7rem, .4rem + .55vw, 1.1rem);
  color: var(--white-soft); letter-spacing: .15em; text-transform: uppercase;
  margin: 1.2rem 0 .8rem;
  opacity: 0; animation: fadeIn .8s .3s forwards;
}
.tw-wrap { display: flex; align-items: baseline; justify-content: center; gap: .4em; min-height: 2em; opacity: 0; animation: fadeIn .8s .6s forwards; max-width: 90vw; margin: 0 auto; }
.tw-static { font-size: clamp(.95rem, .55rem + 1.5vw, 1.85rem); color: var(--white-soft); white-space: nowrap; }
.tw-dynamic { display: inline-flex; align-items: baseline; min-width: 14ch; }
.tw-text { font-weight: 600; font-size: clamp(.95rem, .55rem + 1.5vw, 1.85rem); color: var(--cyan); white-space: nowrap; }
.tw-cursor { font-family: var(--mono); font-size: clamp(.95rem, .55rem + 1.5vw, 1.85rem); color: var(--cyan); animation: blink .6s infinite; margin-left: 2px; }
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-cta { margin-top: 1.2rem; opacity: 0; animation: fadeIn .8s 1s forwards; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn { font-family: var(--mono); font-size: clamp(.72rem, .45rem + .5vw, 1rem); letter-spacing: .04em; text-transform: uppercase; padding: .65rem 1.6rem; border-radius: 4px; transition: all .3s var(--ease); cursor: pointer; border: 1px solid transparent; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--white); color: var(--bg); border-color: var(--white); }
.btn-primary:hover { background: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.25); }
.btn-ghost:hover { border-color: var(--white); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.scroll-arrow { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); opacity: 0; animation: fadeIn 1s 1.8s forwards; z-index: 2; cursor: pointer; background: none; border: none; padding: 12px; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; color: inherit; }
.scroll-arrow::before,.scroll-arrow::after { content: ''; display: block; width: 10px; height: 10px; transform: rotate(45deg); border-bottom: 2px solid var(--gray); border-right: 2px solid var(--gray); }
.scroll-arrow::before { animation: ab1 2.6s cubic-bezier(.77,0,.175,1) infinite; }
.scroll-arrow::after  { animation: ab2 2.6s cubic-bezier(.77,0,.175,1) infinite; }
@keyframes ab1{50%,100%{transform:rotate(45deg) translate(70%,70%)}}
@keyframes ab2{50%{transform:rotate(45deg) translate(110%,110%);opacity:0}51%{transform:rotate(45deg) translate(-130%,-130%)}100%{transform:rotate(45deg) translate(-70%,-70%);opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#glitch-msg { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--mono); font-size: .85rem; color: var(--magenta); opacity: 0; z-index: 999; pointer-events: none; transition: opacity .3s; text-shadow: 0 0 20px var(--magenta); }
#glitch-msg.show { opacity: 1; }

/* ═══ SECTION HEADINGS ═══ */
.s-head { font-weight: 700; font-size: clamp(1.6rem, 1rem + 2.8vw, 3.8rem); letter-spacing: -.02em; line-height: 1.15; text-align: center; width: 100%; }
.s-sub { font-family: var(--mono); font-size: clamp(.74rem, .5rem + .55vw, 1.05rem); letter-spacing: .05em; color: var(--white-soft); margin-top: .3rem; line-height: 1.65; max-width: min(600px, 90%); font-weight: 300; text-align: center; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══ SEGNALI ═══ */
.signal-wrap { width: 100%; max-width: 780px; display: flex; flex-direction: column; align-items: center; gap: clamp(.4rem, 1.2vh, .7rem); }
.signal-diamond { width: 100%; display: grid; grid-template-areas: ". top ." "left . right" ". bottom ."; grid-template-columns: 1fr 1fr 1fr; gap: clamp(.3rem, .8vw, .6rem); justify-items: center; align-items: start; }
.svc { background: rgba(18,18,30,.5); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: clamp(.4rem, 1vh, .65rem) clamp(.5rem, 1vw, .85rem); position: relative; overflow: hidden; transition: border-color .4s, transform .3s; width: 100%; max-width: 220px; }
.svc:hover { border-color: rgba(0,255,249,.25); transform: translateY(-3px); }
.svc-gradient { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,255,249,.08) 0%,transparent 0%); transition: background .5s; pointer-events: none; border-radius: 10px; }
.svc:hover .svc-gradient { background: radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,255,249,.12) 60%,transparent 100%); }
.svc-header { display: flex; align-items: center; gap: .3rem; margin-bottom: .1rem; position: relative; z-index: 1; }
.svc-icon { font-size: clamp(.95rem, .6rem + .7vw, 1.4rem); }
.svc-label { font-weight: 600; font-size: clamp(.8rem, .55rem + .6vw, 1.15rem); position: relative; z-index: 1; }
.svc-desc { font-weight: 300; font-size: clamp(.7rem, .5rem + .45vw, .95rem); color: var(--white-soft); line-height: 1.55; position: relative; z-index: 1; }
.svc[data-signal="sistemi"]  { grid-area: top; }
.svc[data-signal="luci"]     { grid-area: left; }
.svc[data-signal="visual"]   { grid-area: right; }
.svc[data-signal="strutture"]{ grid-area: bottom; }

/* ═══ PORTFOLIO ═══ */
.port-section { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: clamp(.7rem, 1.8vh, 1.2rem); }
.port-carousel-wrap { position: relative; width: 100%; }
.port-viewport { position: relative; }

/* Frecce di navigazione — visibili solo con JS e su dispositivi con puntatore */
.port-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: rgba(10,10,18,.74); border: 1px solid var(--gray-dim); color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; font-size: 1.4rem; line-height: 1; transition: opacity .25s, border-color .25s, color .25s, background .25s; }
.js .port-nav { display: flex; }
.port-nav:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,255,249,.06); }
.port-nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.port-nav.prev { left: 4px; } .port-nav.next { right: 4px; }
.port-nav[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none) { .js .port-nav { display: none; } }

.port-carousel { display: flex; gap: clamp(.9rem, 1.6vw, 1.5rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: .25rem; padding: .5rem .25rem 1rem; -webkit-mask: linear-gradient(90deg, #000 0%, #000 96%, transparent 100%); mask: linear-gradient(90deg, #000 0%, #000 96%, transparent 100%); scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; touch-action: pan-x; }
.port-carousel::-webkit-scrollbar { display: none; }
.js .port-carousel { cursor: grab; }
.js .port-carousel.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }

.port-card { scroll-snap-align: start; flex: 0 0 auto; width: clamp(248px, 24vw, 306px); height: clamp(312px, 42vh, 388px); background: var(--bg2); border: 1px solid var(--gray-dim); border-radius: 14px; overflow: hidden; cursor: pointer; position: relative; isolation: isolate; transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.port-card:hover, .port-card:focus-visible { transform: translateY(-6px); border-color: rgba(0,255,249,.35); box-shadow: 0 26px 60px -30px rgba(0,255,249,.28), 0 12px 32px -14px rgba(0,0,0,.65); outline: none; }
.port-thumb { position: absolute; inset: 0; overflow: hidden; }
.port-thumb-bg { position: absolute; inset: -12px; background-size: cover; background-position: center; transition: filter .5s var(--ease), transform .7s var(--ease); filter: saturate(1.05); }
.port-card:hover .port-thumb-bg, .port-card:focus-visible .port-thumb-bg { transform: scale(1.06); filter: saturate(1.18) brightness(.62); }
.port-thumb-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,8,.94) 4%, rgba(6,6,8,.5) 38%, rgba(6,6,8,.06) 72%, transparent); transition: background .45s var(--ease); }
.port-card:hover .port-thumb-ov, .port-card:focus-visible .port-thumb-ov { background: linear-gradient(to top, rgba(6,6,8,.97) 20%, rgba(6,6,8,.72) 56%, rgba(6,6,8,.2) 86%, transparent); }

/* Mirino ad angoli — stesso linguaggio delle pagine progetto */
.port-tick { position: absolute; width: 13px; height: 13px; border: 1.5px solid rgba(0,255,249,.6); z-index: 4; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.port-card:hover .port-tick, .port-card:focus-visible .port-tick { opacity: 1; }
.port-tick.tl { top: 11px; left: 11px; border-right: 0; border-bottom: 0; }
.port-tick.tr { top: 11px; right: 11px; border-left: 0; border-bottom: 0; }
.port-tick.bl { bottom: 11px; left: 11px; border-right: 0; border-top: 0; }
.port-tick.br { bottom: 11px; right: 11px; border-left: 0; border-top: 0; }

.port-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(.85rem, 1.4vw, 1.15rem) clamp(.95rem, 1.5vw, 1.2rem); z-index: 3; display: flex; flex-direction: column; gap: .45rem; }
.port-type { font-family: var(--mono); font-size: clamp(.6rem, .45rem + .3vw, .73rem); letter-spacing: .16em; text-transform: uppercase; color: #ff44d0; }
.port-title { font-weight: 700; font-size: clamp(1.02rem, .7rem + .7vw, 1.34rem); line-height: 1.18; letter-spacing: -.01em; color: #fff; }
.wip { font-family: var(--mono); font-size: .55rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; background: var(--magenta); color: var(--bg); padding: .08rem .28rem; border-radius: 3px; margin-left: .35rem; vertical-align: middle; }
.port-body-reveal { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: max-height .5s var(--ease), opacity .4s ease, transform .45s var(--ease); display: flex; flex-direction: column; gap: .55rem; }
.port-card:hover .port-body-reveal, .port-card:focus-visible .port-body-reveal { max-height: 240px; opacity: 1; transform: none; }
.port-desc { font-weight: 300; font-size: clamp(.78rem, .55rem + .4vw, .96rem); color: var(--white-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.port-hint { display: inline-flex; align-items: center; gap: .5em; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.port-arr { transition: transform .3s var(--ease); }
.port-card:hover .port-arr, .port-card:focus-visible .port-arr { transform: translateX(4px); }
.port-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.ptag { font-family: var(--mono); font-size: clamp(.62rem, .45rem + .35vw, .82rem); letter-spacing: .05em; text-transform: uppercase; padding: .12rem .35rem; border-radius: 3px; background: rgba(0,255,249,.08); color: var(--cyan); border: 1px solid rgba(0,255,249,.12); }
.port-body .port-tags { display: none; }

/* Barra di avanzamento dello scorrimento (solo con JS) */
.port-progress { position: relative; height: 2px; border-radius: 2px; background: var(--gray-dim); margin: 0 .25rem; overflow: hidden; display: none; }
.js .port-progress { display: block; }
.port-progress-bar { position: absolute; left: 0; top: 0; height: 100%; width: 8%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); border-radius: 2px; transition: width .12s linear, transform .12s linear; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .port-carousel { scroll-behavior: auto; } }

/* ═══ MODALS ═══ */
body.modal-open { overflow: hidden !important; }
body.modal-open .snap-container { overflow: hidden !important; scroll-snap-type: none; }
.project-modal { position: fixed; inset: 0; z-index: 500; background: var(--bg); overflow-y: auto; padding: 4.5rem clamp(1rem, 4vw, 2.5rem) 3rem; opacity: 0; pointer-events: none; transition: opacity .35s; }
.project-modal.open { opacity: 1; pointer-events: auto; }
.modal-gradient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.modal-gradient-bg .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .2; transform: translateZ(0); }
.modal-gradient-bg .blob:nth-child(1) { width: 45vw; height: 45vw; background: radial-gradient(circle,var(--magenta-dark),transparent 70%); top: -10%; left: -10%; }
.modal-gradient-bg .blob:nth-child(2) { width: 40vw; height: 40vw; background: radial-gradient(circle,var(--cyan-dark),transparent 70%); bottom: -10%; right: -10%; }
.modal-gradient-bg .blob:nth-child(3) { width: 30vw; height: 30vw; background: radial-gradient(circle,#3d2b00,transparent 70%); top: 40%; left: 50%; transform: translate(-50%,-50%); }
.modal-close { position: fixed; top: 1rem; right: 1.2rem; z-index: 501; background: rgba(12,12,20,.8); border: 1px solid rgba(255,255,255,.1); color: var(--white); font-family: var(--mono); font-size: .7rem; padding: .5rem 1rem; border-radius: 5px; cursor: pointer; transition: border-color .3s, color .3s; min-height: 44px; display: flex; align-items: center; }
.modal-close:hover { border-color: var(--cyan); color: var(--cyan); }
.modal-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.modal-inner .modal-eyebrow { font-family: var(--mono); font-size: clamp(.58rem, .3vw + .35rem, .68rem); letter-spacing: .15em; text-transform: uppercase; color: var(--magenta); margin-bottom: .7rem; }
.modal-inner h2 { font-weight: 700; font-size: clamp(1.5rem, 1rem + 2vw, 3rem); margin-bottom: .5rem; line-height: 1.15; }
.modal-meta { font-family: var(--mono); font-size: clamp(.63rem, .3vw + .4rem, .76rem); color: var(--gray); margin-bottom: .8rem; font-style: italic; }
.modal-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.2rem; }
.modal-inner p { font-weight: 300; font-size: clamp(.95rem, .65rem + .6vw, 1.3rem); line-height: 1.75; color: var(--white-soft); margin-bottom: 1rem; }
.modal-content a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.modal-content a:hover { color: var(--white); }
.modal-role { border-top: 1px solid var(--gray-dim); padding-top: .8rem; margin-top: 1.2rem; font-family: var(--mono); font-size: clamp(.68rem, .3vw + .4rem, .8rem); color: var(--white-soft); line-height: 1.7; }
.modal-role strong { color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; font-size: clamp(.55rem, .2vw + .34rem, .64rem); font-weight: 600; display: block; margin-bottom: .3rem; }
.media-ph { width: 100%; aspect-ratio: 16/9; background: rgba(18,18,30,.6); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .75rem; color: var(--gray); margin-bottom: 1rem; border: 1px solid var(--gray-dim); overflow: hidden; }
.media-ph img, .media-ph video { width: 100%; height: 100%; object-fit: cover; }

/* ═══ CHI SONO ═══ */
.about-wrap { max-width: min(720px, 92%); width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.about-pic { width: clamp(58px, 7vw + .5rem, 96px); height: clamp(58px, 7vw + .5rem, 96px); border-radius: 50%; overflow: hidden; border: 2px solid var(--gray-dim); flex-shrink: 0; }
.about-pic img { width: 100%; height: 100%; object-fit: cover; }
.about-text { width: 100%; }
.about-text p { font-weight: 300; font-size: clamp(.85rem, .6rem + .6vw, 1.25rem); line-height: 1.65; color: var(--white-soft); margin-bottom: .4rem; }
.scroller-sec { margin: .3rem 0; width: 100%; }
.scroller { overflow: hidden; -webkit-mask: linear-gradient(90deg,transparent,white 10%,white 90%,transparent); mask: linear-gradient(90deg,transparent,white 10%,white 90%,transparent); }
.scroller + .scroller { margin-top: .25rem; }
.scroller-in { display: flex; gap: .5rem; width: max-content; animation: stag 50s var(--dir, normal) linear infinite; }
.scroller:nth-child(2) .scroller-in { animation-duration: 42s; --dir: reverse; }
@keyframes stag { to { transform: translateX(calc(-50% - .25rem)); } }
.stag { font-family: var(--mono); font-size: clamp(.54rem, .3vw + .3rem, .63rem); color: var(--white); background: rgba(128,128,128,.08); padding: .2rem .45rem; border-radius: 5px; white-space: nowrap; transition: color .3s; }
.stag:hover { color: var(--cyan); }
.stag .h { color: var(--gray); margin-right: .06rem; }

/* ═══ CONTACT ═══ */
.contact-trigger { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300; background: var(--magenta); color: var(--white); font-family: var(--mono); font-size: clamp(.58rem, .3vw + .35rem, .68rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .7rem 1.3rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); cursor: pointer; transition: background .3s, transform .3s; min-height: 44px; }
.contact-trigger:hover { background: #ff33d1; transform: translateY(-2px); }
.contact-trigger:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.contact-panel { position: fixed; bottom: 0; right: 0; z-index: 400; width: 400px; max-width: 100vw; height: var(--app-h); background: var(--bg2); border-left: 1px solid var(--gray-dim); transform: translateX(100%); transition: transform .5s var(--ease); display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom,0); }
.contact-panel.open { transform: translateX(0); }
.cp-header { padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray-dim); flex-shrink: 0; }
.cp-header h3 { font-weight: 600; font-size: 1.05rem; }
.cp-close { background: none; border: 1px solid var(--gray-dim); color: var(--white); font-family: var(--mono); font-size: .62rem; padding: .3rem .6rem; border-radius: 4px; cursor: pointer; transition: border-color .3s; min-height: 44px; display: flex; align-items: center; }
.cp-close:hover { border-color: var(--cyan); }
.cp-body { padding: 1rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.cp-tabs { display: flex; margin-bottom: .7rem; border-bottom: 1px solid var(--gray-dim); flex-shrink: 0; }
.cp-tab { flex: 1; padding: .5rem .3rem; text-align: center; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gray); background: none; border: none; cursor: pointer; transition: color .3s; border-bottom: 2px solid transparent; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.cp-tab.active { color: var(--white); border-bottom-color: var(--cyan); }
.cp-tab:hover { color: var(--white); }
.cp-shared-fields { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; flex-shrink: 0; }
.cp-input { background: var(--bg3); border: 1px solid var(--gray-dim); border-radius: 6px; padding: .55rem .7rem; color: var(--white); font-family: var(--font); font-size: .85rem; outline: none; transition: border-color .3s; width: 100%; }
.cp-input:focus { border-color: var(--cyan); }
.cp-input::placeholder { color: var(--gray); }
textarea.cp-input { resize: vertical; min-height: 70px; }
.cp-tab-content { flex: 1; min-height: 0; }
.cp-view { display: none; flex-direction: column; gap: .5rem; }
.cp-view.active { display: flex; }
.cp-send { background: var(--white); color: var(--bg); border: none; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding: .6rem; border-radius: 6px; cursor: pointer; transition: background .3s; width: 100%; margin-top: auto; min-height: 44px; }
.cp-send:hover { background: var(--cyan); }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.cal-month { font-weight: 600; font-size: .95rem; text-align: center; color: var(--white); }
.cal-arrow { background: none; border: 1px solid var(--gray-dim); color: var(--white-soft); font-size: .85rem; padding: .35rem .55rem; border-radius: 6px; cursor: pointer; font-family: var(--mono); transition: border-color .2s; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.cal-arrow:hover { border-color: var(--cyan); }
.cal-arrow:disabled { opacity: .2; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; }
.cal-day-label { font-family: var(--mono); font-size: .6rem; color: var(--white-soft); padding: .3rem 0; text-transform: uppercase; }
.cal-day { padding: .35rem .15rem; border-radius: 6px; font-size: .8rem; cursor: pointer; transition: background .2s; min-height: 36px; display: flex; align-items: center; justify-content: center; color: var(--gray); border: 1px solid transparent; }
.cal-day:hover { background: rgba(0,255,249,.08); }
.cal-day.empty { pointer-events: none; }
.cal-day.available { color: var(--white); background: var(--bg3); border-color: var(--gray-dim); font-weight: 500; }
.cal-day.available:hover { border-color: var(--cyan); background: rgba(0,255,249,.1); }
.cal-day.unavailable { color: var(--gray); opacity: .3; pointer-events: none; }
.cal-day.selected { background: var(--cyan); color: var(--bg); border-color: var(--cyan); font-weight: 600; }
.cal-slots h4 { font-family: var(--mono); font-size: .65rem; color: var(--white-soft); text-transform: uppercase; margin: .5rem 0 .3rem; }
.slot-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.slot { font-family: var(--mono); font-size: .75rem; padding: .4rem .65rem; border-radius: 6px; background: var(--bg3); border: 1px solid var(--gray-dim); color: var(--white); cursor: pointer; transition: border-color .2s; min-height: 40px; display: flex; align-items: center; }
.slot:hover { border-color: var(--cyan); }
.slot.selected { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.cal-confirm { margin-top: .5rem; width: 100%; padding: .6rem; background: var(--white); color: var(--bg); border: none; border-radius: 6px; font-family: var(--mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background .3s; min-height: 44px; }
.cal-confirm:hover { background: var(--cyan); }
.cal-loading { font-family: var(--mono); font-size: .6rem; color: var(--gray); text-align: center; padding: .4rem; }
.cp-direct { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--gray-dim); }
.cp-social { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.cp-social-link { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--gray-dim); background: var(--bg3); color: var(--white-soft); display: flex; align-items: center; justify-content: center; transition: color .25s, border-color .25s, transform .25s, background .25s; }
.cp-social-link svg { width: 18px; height: 18px; }
.cp-social-link:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(0,255,249,.06); transform: translateY(-2px); }
.cp-social-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ═══ FOOTER ═══ */
.site-footer { width: 100%; border-top: 1px solid var(--gray-dim); padding: .6rem clamp(1rem, 3vw, 1.5rem) 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; flex-shrink: 0; padding-right: clamp(8rem, 16vw, 11rem); }
.site-footer p { font-family: var(--mono); font-size: .55rem; color: var(--gray); }
.site-footer .social { display: flex; gap: .8rem; }
.site-footer .social a { font-family: var(--mono); font-size: .55rem; color: var(--gray); text-transform: uppercase; transition: color .2s; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer .social a:hover { color: var(--cyan); }

/* ═══ RESPONSIVE ═══ */

/* ── 1024px: tablet landscape / small laptop ── */
@media (max-width: 1024px) {
  .page-inner { gap: clamp(.3rem, .9vh, .65rem); }
}

/* ── 768px: tablet portrait ── */
@media (max-width: 768px) {
  .nav-links a     { font-size: .55rem; letter-spacing: .03em; }
  .nav-logo img    { height: 24px; }
  .lang-btn        { padding: 2px 5px; font-size: .48rem; }
  .lang-flag       { font-size: .65rem; }
  .signal-diamond  { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
  .svc             { max-width: 100%; width: 100%; }
  .port-card       { width: clamp(240px, 76vw, 300px); height: clamp(300px, 58vh, 380px); }
  .contact-panel   { width: 100%; }
  .contact-trigger { bottom: 1.2rem; right: 1rem; }
  .page-inner {
    padding-left: clamp(.8rem, 3.5vw, 2rem);
    padding-right: clamp(.8rem, 3.5vw, 2rem);
    padding-bottom: clamp(4rem, 7vh, 5.5rem);
  }
}

/* ── 600px: phone landscape / narrow tablet ── */
@media (max-width: 600px) {
  .nav-links a  { font-size: .5rem; letter-spacing: .02em; }
  .nav-links    { gap: .3rem; }
  .nav-right    { gap: .4rem; }
  .s-head       { font-size: clamp(1.4rem, 7vw, 2.2rem); }
  .s-sub        { max-width: 90%; font-size: clamp(.68rem, 3.5vw, .95rem); }
  .port-card    { width: clamp(220px, 72vw, 282px); height: clamp(280px, 52vh, 360px); }
}

/* ── 480px: phone portrait ── */
@media (max-width: 480px) {
  .glitch-first  { font-size: clamp(1.8rem, 10vw, 2.8rem); }
  .glitch-last   { font-size: clamp(2.5rem, 14vw, 4.5rem); }
  .hero-cta      { flex-direction: column; align-items: center; gap: .6rem; }
  .hero-cta .btn { width: 100%; max-width: 240px; text-align: center; }
  .tw-dynamic    { min-width: 12ch; }
  .tw-static, .tw-text, .tw-cursor { font-size: clamp(.78rem, 4vw, 1rem); }
  .s-head        { font-size: clamp(1.3rem, 7.5vw, 1.9rem); }
  .page-inner    { gap: .2rem; }
  .site-footer   {
    flex-direction: column; gap: .25rem;
    padding-right: clamp(5.5rem, 10vw, 7rem);
    align-items: flex-start;
  }
}

/* ── 380px: very small phone ── */
@media (max-width: 380px) {
  /* Hide nav links — keep logo + lang only */
  .nav-links           { display: none; }
  /* Stack typewriter vertically to prevent horizontal overflow */
  .tw-wrap             { flex-direction: column; align-items: center; gap: .15em; min-height: auto; }
  .tw-static           { white-space: normal; text-align: center; font-size: clamp(.72rem, 4vw, .88rem); }
  .tw-text, .tw-cursor { font-size: clamp(.72rem, 4vw, .88rem); }
  .tw-dynamic          { min-width: 8ch; justify-content: center; }
  .port-card           { width: clamp(220px, 82vw, 280px); height: clamp(290px, 60vh, 360px); }
  .port-nav            { width: 40px; height: 40px; }
  .site-footer         { padding-right: clamp(4rem, 8vw, 6rem); }
}

/* ── height: short screens ── */
@media (max-height: 600px) {
  .hero-role  { margin: .4rem 0 .3rem; }
  .hero-cta   { margin-top: .5rem; }
  .scroll-arrow { bottom: .5rem; }
}
/* Landscape mobile: compress hero vertically */
@media (max-height: 480px) and (orientation: landscape) {
  .glitch-first { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .glitch-last  { font-size: clamp(1.9rem, 8vw, 3rem); }
  .hero-role    { display: none; }
  .tw-wrap      { display: none; }
  .hero-cta     { margin-top: .4rem; gap: .4rem; }
}

/* ── touch: always show card details (no hover state) ── */
@media (hover: none) {
  .port-body-reveal { max-height: 240px; opacity: 1; transform: none; }
  .port-tick        { opacity: .55; }
}

/* ── large: widescreen ── */
@media (min-width: 1700px) {
  .port-card { width: clamp(300px, 18vw, 340px); height: clamp(380px, 40vh, 426px); }
}
@media (min-width: 1600px) { :root { --nav-h: 64px; } }

/* ═══ ADMIN BAR ═══ */
.admin-bar .site-nav { top: 32px; }
.admin-bar .snap-container { height: calc(var(--app-h) - 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .site-nav { top: 46px; }
  .admin-bar .snap-container { height: calc(var(--app-h) - 46px); }
}