/* Anteprime live dei progetti e del team: regole estratte da style.css
   (generate da uno script, non a mano). Solo i selettori il cui soggetto e'
   un pezzo di anteprima: castello, console, mare/telefono, Tek, finestre del team. */
/* Variabili che style.css teneva sui contenitori delle card: qui stanno sui
   contenitori nuovi, con gli stessi nomi, cosi' le regole estratte sotto
   funzionano senza essere toccate. */
:root { --font-codice: 'Space Mono', ui-monospace, monospace; }
.vetrina-salvatore {
  --castle-wall-top: #f5b055; --castle-wall-base: #a85820;
  --castle-rock-high: #996e54; --castle-rock-mid: #6b4a33; --castle-rock-deep: #462c1d;
  --castle-ramp-glow: #ffd685;
}
.card-sorso-wrapper {
  --water-top: #0A7A8F; --water-mid: #0A5F7C; --water-deep: #073F5B;
  --water-grad: linear-gradient(180deg, #0A7A8F 0%, #0A5F7C 50%, #073F5B 100%);
  --onda-a: #0A7A8F; --onda-bc: #0B7690; --onda-accent: rgba(123, 240, 255, .34);
  --abisso: #041D27; --fondo: #02171F; --schiuma: #EAFBFF; --ink: #04303D;
  --mist: #9FCBD8; --mist-soft: rgba(159, 203, 216, .78); --glow: #7BF0FF; --glow-rgb: 123, 240, 255;
  --card-bg: rgba(11, 42, 52, .91); --card-border: rgba(123, 240, 255, .18); --card-hover-border: rgba(123, 240, 255, .40);
}
#tek-card { --tek-chiaro: #DCEAF5; --tek-scafo: #6E93B4; --tek-scuro: #123F6A; --tek-caldo: #E8862E; --tek-luce: #7FE3F5; }
.team-griglia { --dev-uscita: cubic-bezier(.16, 1, .3, 1); }
.console-loot, .console-loot *:not(.console-titolo),
.dev-sadm .dev-finestra, .dev-sadm .dev-finestra * { font-family: var(--font-codice); }
.dot-live{width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);}
@keyframes radar-gira{from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }}
.chassis-castello{position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1410 0%, #0c0907 100%);
  border: 1px solid rgba(182, 73, 38, 0.35);
  box-shadow: 0 24px 54px rgba(42, 32, 26, 0.28), inset 0 0 0 1px rgba(245, 176, 85, 0.15);
  display: flex;
  flex-direction: column;}
.castello-barra{display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(26, 20, 17, 0.96);
  border-bottom: 1px solid rgba(182, 73, 38, 0.25);
  font-family: var(--font-mono);
  font-size: 11px;}
.castello-barra-sx{display: flex;
  align-items: center;
  gap: 8px;
  color: #e8dfd5;}
.castello-barra-sx i{color: #f5b055;
  font-size: 12px;}
.castello-barra-dx{display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
  font-size: 10.5px;
  font-weight: 700;}
.castello-stage-card{position: relative;
  height: 290px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 10px 0;
  overflow: hidden;
  background: 
    radial-gradient(circle at 65% 25%, rgba(245, 176, 85, 0.22) 0%, rgba(182, 73, 38, 0.1) 45%, transparent 70%),
    linear-gradient(180deg, #1c1511 0%, #100c0a 100%);}
.castello-stage-card svg.hero-castle{width: 100%;
  height: 100%;
  max-height: 280px;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}
.card-progetto-grande.vetrina-salvatore:hover .castello-stage-card svg.hero-castle{transform: scale(1.02);}
.castello-telemetria-box{padding: 11px 16px;
  background: rgba(20, 15, 13, 0.95);
  border-top: 1px solid rgba(182, 73, 38, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;}
.castello-telemetria-sx{color: #c4b5a5;}
.castello-telemetria-sx b{color: #f5b055;}
.castello-telemetria-dx{color: #2589bd;
  font-weight: 700;}
.console-loot{position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0A0C10;
  border: 1px solid #21262D;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  font-family: var(--font-mono);}
.console-barra{position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  background: #0F1117;
  border-bottom: 1px solid #21262D;}
.console-semafori{display: flex;
  gap: 7px;}
.console-semafori span{width: 11px;
  height: 11px;
  border-radius: 50%;}
.console-semafori span:nth-child(1){background: #F85149;}
.console-semafori span:nth-child(2){background: #D29922;}
.console-semafori span:nth-child(3){background: #3FB950;}
.console-titolo{position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;}
.console-corpo{padding: 16px 14px;
  font-size: 11.5px;
  line-height: 1.85;
  color: #c9d1d9;}
.riga-log,
.console-drop,
.console-stato{animation: log-scrive 9s linear infinite;
  animation-delay: var(--ritardo, 0s);
  opacity: 0;}
.log-commento{color: #64748b;}
.log-ok{color: #3fb950;}
.riga-log em{font-style: normal; font-weight: 700; color: #ff8c5a;}
.riga-log i{color: #94a3b8; font-style: normal;}
.console-drop{margin: 12px 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255, 107, 43, 0.06);
  border: 1px solid rgba(255, 107, 43, 0.28);}
.drop-testa{display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;}
.drop-etichetta{font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ff8c5a;}
.drop-quando{font-size: 10px;
  color: #64748b;}
.drop-titolo{font-weight: 700;
  font-size: 12px;
  color: #f1f5f9;
  margin-bottom: 4px;}
.drop-prezzi{display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11.5px;
  padding-bottom: 9px;
  border-bottom: 1px solid #21262D;}
.drop-prezzi b{color: #ff8c5a; font-weight: 700;}
.drop-prezzi s{color: #64748b; margin-left: 4px;}
.drop-mercato{flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #ff8c5a;
  border: 1px solid rgba(255, 140, 90, 0.4);
  border-radius: 4px;
  padding: 2px 7px;}
.drop-notifica{margin-top: 8px;
  font-size: 11px;
  color: #38bdf8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
.console-stato{display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #3fb950;
  line-height: 1.5;
  margin-top: 8px;}
.console-ping{width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #3fb950;
  box-shadow: 0 0 8px #3fb950;
  animation: pulsa 2s infinite ease-in-out;}
.console-cursore{width: 7px;
  height: 13px;
  flex-shrink: 0;
  background: #ff8c5a;
  animation: lampeggia 1s steps(2) infinite;}
@keyframes lampeggia{0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }}
.card-sorso-wrapper .mare{position: absolute;
  left: -6%;
  right: -6%;
  width: 112%;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  height: 104%;
  will-change: transform;
  transform: translate3d(0, 76%, 0);
  contain: strict;}
.card-sorso-wrapper .onda-viva{position: absolute; left: 0; top: 0; width: 100%; height: 150px;
  display: block; pointer-events: none; z-index: 2; overflow: visible;}
.card-sorso-wrapper .onda-viva .cima{stop-color: var(--onda-a); stop-opacity: .95;}
.card-sorso-wrapper .onda-viva .fondo{stop-color: var(--onda-a); stop-opacity: 0;}
.card-sorso-wrapper .onda-viva .polpa{fill: url(#sfuma-onda-viva);}
.card-sorso-wrapper .onda-viva .cresta{fill: none;
  stroke: var(--onda-accent, rgba(123, 240, 255, .6));
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: .6;}
.card-sorso-wrapper .scena-canvas{position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;}
.card-sorso-wrapper .mare .respiro{position: absolute;
  inset: 0;
  animation: respira 11s ease-in-out infinite;}
@keyframes respira{0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); }}
.card-sorso-wrapper .mare .corpo{position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 22px;
  overflow: hidden;
  background: var(--water-grad) top / 100% 100% no-repeat;
  background-color: var(--water-deep);}
.card-sorso-wrapper .onda{position: absolute;
  left: 0;
  bottom: calc(100% - 24px);
  width: 200%;
  height: 26px;}
.card-sorso-wrapper .onda svg{display: block; width: 50%; height: 26px; float: left;}
.card-sorso-wrapper .onda.a path{fill: var(--onda-a);}
.card-sorso-wrapper .onda.b path,
.card-sorso-wrapper .onda.c path{fill: var(--onda-bc);}
.card-sorso-wrapper .onda.a{animation: scorri 14s linear infinite, dondola 5.5s ease-in-out infinite; opacity: .7;}
.card-sorso-wrapper .onda.b{animation: scorri 21s linear infinite reverse, dondola 7.5s ease-in-out -2s infinite; opacity: .45; bottom: calc(100% - 32px);}
.card-sorso-wrapper .onda.c{animation: scorri 30s linear infinite, dondola 9.5s ease-in-out -4s infinite; opacity: .28; bottom: calc(100% - 40px);}
@keyframes scorri{from { transform: translateX(0); } to { transform: translateX(-50%); }}
@keyframes dondola{0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; }}
@media (prefers-reduced-motion: reduce){
.card-sorso-wrapper .mare{transform: translate3d(0, 34%, 0); transition: none;}
.card-sorso-wrapper .mare .respiro{animation: none;}
.card-sorso-wrapper .onda{animation: none !important;}
}
.mock-telefono{position: relative;
  z-index: 1;
  width: 292px;
  max-width: 100%;
  padding: 11px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2A303C 0%, #12151D 45%, #262C37 100%);
  box-shadow: 0 32px 68px rgba(0, 0, 0, 0.66), inset 0 0 0 1px var(--card-border);
  transform-style: preserve-3d;
  
  transform: perspective(800px) rotateY(var(--tilt-y, 0deg)) rotateX(var(--tilt-x, 0deg)) scale(calc(var(--tel-scala, 1) * var(--tilt-s, 1)));
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, border-color .45s;}
.mock-telefono:hover{box-shadow: 0 40px 80px rgba(0,0,0,.75), inset 0 0 0 1px var(--card-hover-border);}
.tel-schermo{position: relative;
  height: 530px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--abisso) 0%, var(--fondo) 100%);
  transition: background .45s ease;}
.tel-schermo::before{content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 21px;
  background: #0A0C11;
  border-radius: 0 0 13px 13px;
  z-index: 5;}
.tel-acqua{position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--livello, 0%);
  background: var(--water-grad);
  transition: height 0.95s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
  z-index: 1;}
.tel-onda{position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  display: block;
  width: 200%;
  height: 22px;}
.tel-onda path{fill: var(--onda-a); transition: fill .45s ease;}
.onda-1{animation: onda-scorri 7s linear infinite;}
.onda-2{height: 18px;
  opacity: 0.65;
  animation: onda-scorri 4.4s linear infinite reverse;}
.onda-2 path{fill: var(--onda-accent); transition: fill .45s ease;}
@keyframes onda-scorri{from { transform: translateX(0); }
  to   { transform: translateX(-50%); }}
.tel-ui{position: relative;
  z-index: 2;
  height: 100%;
  padding: 36px 18px 20px;
  display: flex;
  flex-direction: column;
  color: var(--schiuma);
  transition: color .35s ease;}
.tel-top{display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;}
.tel-marchio{font-size: 13px; font-weight: 800; letter-spacing: 2.5px; color: var(--schiuma); transition: color .35s ease;}
.tel-data{font-size: 11px; color: var(--mist-soft); margin-top: 3px; transition: color .35s ease;}
.tel-goccia{width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
  color: var(--glow);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: color .35s ease, background .35s ease, border-color .35s ease;}
.tel-numerone{margin-top: 24px; display: flex; align-items: baseline; gap: 6px;}
.tel-numerone b{font-size: 52px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--schiuma);
  transition: color .35s ease;}
.tel-numerone span{font-size: 16px; font-weight: 600; color: var(--mist-soft); transition: color .35s ease;}
.tel-conta{font-size: 13px; color: var(--mist); margin-top: 8px; transition: color .35s ease;}
.tel-bicchieri{display: flex; gap: 5px; margin-top: 22px;}
.tel-bicchieri span{width: 14px;
  height: 18px;
  border-radius: 2px 2px 5px 5px;
  border: 1.5px solid var(--card-border);
  background: rgba(0,0,0,0.12);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;}
.tel-bicchieri span.pieno{background: linear-gradient(180deg, var(--glow), var(--onda-a));
  border-color: var(--glow);
  box-shadow: 0 0 8px var(--glow);}
.tel-obiettivo{margin-top: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mist-soft);
  transition: color .35s ease;}
.tel-pulsantone{margin-top: auto;
  background: var(--schiuma);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 750;
  text-align: center;
  padding: 13.5px;
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.35s ease, color 0.35s ease;}
.tel-pulsantone:hover{transform: scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,0.32);}
.tel-pulsantone.premuto{animation: tel-premi 0.45s ease;}
@keyframes tel-premi{50% { transform: scale(0.955); box-shadow: 0 4px 12px var(--glow); }}
.tel-scorciatoie{display: flex; gap: 7px; margin-top: 11px;}
.tel-scorciatoie span{flex: 1;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--schiuma);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  padding: 6.5px 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;}
.tel-scorciatoie span:hover{background: var(--card-hover-border);
  border-color: var(--glow);
  color: var(--schiuma);}
@keyframes stack-cresce{from { transform: scaleX(0); }
  to   { transform: scaleX(1); }}
@keyframes log-scrive{0%       { opacity: 0; clip-path: inset(0 100% 0 0); }
  1%       { opacity: 1; }
  7%       { clip-path: inset(0 0 0 0); }
  90%      { opacity: 1; clip-path: inset(0 0 0 0); }
  97%,100% { opacity: 0; clip-path: inset(0 0 0 0); }}
@keyframes pulsa{0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }}
@keyframes acqua-respiro{0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }}
@keyframes bolla-sale{0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  12%  { opacity: 0.85; }
  50%  { transform: translate(7px, calc(var(--h) * -0.5)) scale(1); }
  86%  { opacity: 0.5; }
  100% { transform: translate(-4px, calc(var(--h) * -1)) scale(1.08); opacity: 0; }}
@keyframes tel-premi{50% { transform: scale(0.955); box-shadow: 0 4px 12px rgba(123, 240, 255, 0.35); }}
.fondo-blueprint{position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg, #0a1e38 0%, #0F2D52 50%, #0d2447 100%);}
.blueprint-grid{position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;}
.blueprint-glow{position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,134,46,0.08) 0%, rgba(127,227,245,0.06) 40%, transparent 70%);
  pointer-events: none;}
.alone-tek{position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,134,46,0.12) 0%, rgba(127,227,245,0.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;}
.tek-mascot-wrap{position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  cursor: pointer;
  transition: filter 0.3s ease;}
.tek-mascot-wrap:hover{filter: drop-shadow(0 0 22px rgba(232, 134, 46, 0.40)) drop-shadow(0 0 8px rgba(127,227,245,0.25));}
.tek-svg{width: 210px;
  height: auto;
  max-width: 100%;
  overflow: visible;}
.tek-svg .tek-tutto,
.tek-svg .tek-testa{transform-box: view-box; transform-origin: 50% 100%;}
.tek-tutto{animation: tek-galleggia 3.6s ease-in-out infinite;}
@keyframes tek-galleggia{0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }}
.tek-ombra{fill: var(--tek-scuro);
  transform-box: fill-box;
  transform-origin: center;
  animation: tek-ombra-respira 3.6s ease-in-out infinite;}
@keyframes tek-ombra-respira{0%, 100% { transform: scaleX(1);   opacity: .16; }
  50%      { transform: scaleX(.93); opacity: .10; }}
.tek-ingranaggio-denti{transform-box: fill-box;
  transform-origin: center;
  animation: tek-gira 9s linear infinite;}
@keyframes tek-gira{to { transform: rotate(360deg); }}
.tek-nucleo{animation: tek-nucleo-pulsa 2.4s ease-in-out infinite;}
@keyframes tek-nucleo-pulsa{0%, 100% { opacity: .45; } 50% { opacity: 1; }}
.tek-spia{transform-box: fill-box;
  transform-origin: center;
  animation: tek-spia-pulsa 2s ease-in-out infinite;}
@keyframes tek-spia-pulsa{0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); }}
.tek-onda{fill: none;
  stroke: var(--tek-luce);
  stroke-width: 5;
  stroke-linecap: round;
  animation: tek-onda-va 2.6s ease-in-out infinite;}
.tek-onda:nth-child(2){animation-delay: .24s;}
.tek-onda:nth-child(3){animation-delay: .10s;}
.tek-onda:nth-child(4){animation-delay: .34s;}
@keyframes tek-onda-va{0%, 100% { opacity: .18; } 45% { opacity: .95; }}
.tek-occhio{transform-box: fill-box;
  transform-origin: center;
  animation: tek-batte 5.4s ease-in-out infinite;}
@keyframes tek-batte{0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }}
.tek-braccio-saluto{transform-box: fill-box; transform-origin: 2% 8%;}
.tek-mascot-wrap.saluta .tek-braccio-saluto{animation: tek-saluto 2.1s cubic-bezier(.34, 1.25, .5, 1);}
@keyframes tek-saluto{0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-118deg); }
  30%  { transform: rotate(-109deg); }
  40%  { transform: rotate(-118deg); }
  50%  { transform: rotate(-113deg); }
  68%  { transform: rotate(-118deg); }
  100% { transform: rotate(0deg); }}
.tek-mascot-wrap.saluta .tek-testa{animation: tek-testa-saluta 2.1s ease-in-out;}
@keyframes tek-testa-saluta{0%, 100%  { transform: rotate(0deg); }
  22%, 68%  { transform: rotate(-5deg); }}
.tek-mascot-wrap.saluta .tek-onda{animation-duration: .9s;}
.tek-mascot-wrap.saluta .tek-nucleo{animation-duration: .7s;}
.tek-mascot-wrap.saluta .tek-bocca{animation: tek-sorride 2.1s ease-in-out;}
@keyframes tek-sorride{0%, 100% { stroke-width: 4.5; }
  30%, 70% { stroke-width: 6; }}
@media (prefers-reduced-motion: reduce){
.tek-tutto,
.tek-ombra,
.tek-ingranaggio-denti,
.tek-nucleo,
.tek-spia,
.tek-onda,
.tek-occhio{animation: none !important;}
.tek-mascot-wrap.saluta .tek-braccio-saluto,
.tek-mascot-wrap.saluta .tek-testa,
.tek-mascot-wrap.saluta .tek-bocca{animation: none !important;}
}
.tek-bubble{opacity: 0;
  transition: opacity 0.25s ease;}
.tek-bubble.visible{opacity: 1;}
.tek-hint-label{font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(127, 227, 245, 0.5);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  transition: opacity 0.3s ease;}
.tek-mascot-wrap:hover .tek-hint-label{opacity: 0;}
.tel-onda,
.hc-person,
.hc-climbers,
.hc-zigzag-ramp,
.tek-antenna-ball,
.tek-svg{will-change: transform;}
.tek-bubble,
.alone-visual{will-change: opacity;}
@media (max-width: 768px){
.hc-person{animation: none;}
.tek-svg{width: 160px; animation: none;}
}
@media (prefers-reduced-motion: reduce){
.tek-antenna-ball,
.tek-svg,
.tel-onda{animation: none !important;
    transition: none !important;}
.tek-bubble.visible{opacity: 1;}
}
@media print{
.fondo-blueprint,
.alone-visual,
.mock-telefono,
.tek-hint-label,
.blueprint-grid,
.console-loot{display: none !important;}
.tek-mascot-wrap{display: block !important; width: 80px; float: right; margin-left: 12px;}
.tek-bubble{opacity: 1 !important;}
}
@keyframes circuit-flow{from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -60; }}
@keyframes circuit-pulse{0%, 100% { opacity: 0.3; r: var(--r, 5px); }
  50%       { opacity: 1.0; r: calc(var(--r, 5px) * 1.5); }}
.alone-tek{position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;}
.tek-mascot-wrap{position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  cursor: pointer;
  
  transition: filter 0.3s ease;}
.tek-mascot-wrap:hover{filter: drop-shadow(0 0 18px rgba(6, 182, 212, 0.45));}
.tek-svg{width: 190px;
  height: auto;
  max-width: 100%;
  overflow: visible;}
.tek-bubble{opacity: 0;
  transition: opacity 0.25s ease;}
.tek-bubble.visible{opacity: 1;}
.tek-eye-l,
.tek-eye-r{animation: tek-blink 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;}
.tek-eye-r{animation-delay: 0.1s;}
@keyframes tek-blink{0%, 90%, 100% { scaleY: 1; }
  95%           { transform: scaleY(0.1); }}
.tek-antenna-ball{animation: tek-antenna-glow 2s ease-in-out infinite;
  will-change: opacity;}
@keyframes tek-antenna-glow{0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; filter: drop-shadow(0 0 4px #06b6d4); }}
.tek-hint-label{font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(6, 182, 212, 0.55);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  transition: opacity 0.3s ease;}
.tek-mascot-wrap:hover .tek-hint-label{opacity: 0;}
.tel-onda,
.hc-person,
.hc-climbers,
.hc-zigzag-ramp,
.tek-antenna-ball{will-change: transform;}
.tek-bubble,
.alone-visual{will-change: opacity;}
@media (max-width: 768px){
.hc-person{animation: none;}
.tek-svg{width: 140px;}
}
@media (prefers-reduced-motion: reduce){
.tek-antenna-ball,
.tek-eye-l,
.tek-eye-r,
.tel-onda{animation: none !important;
    transition: none !important;}
.tek-bubble.visible{opacity: 1;}
}
@media print{
.alone-visual,
.mock-telefono,
.tek-mascot-wrap .tek-hint-label,
.console-loot{display: none !important;}
.tek-mascot-wrap{display: block !important;
    width: 80px;
    float: right;
    margin-left: 12px;}
.tek-bubble{opacity: 1 !important;}
.tek-hint-label{display: none !important;}
}
.sorso-in-breve{display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
  border-radius: 18px;
  border: 1px solid rgba(123, 240, 255, 0.16);
  background: rgba(2, 22, 28, 0.55);}
.sorso-in-breve .riga{display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #EAFBFF;}
.sorso-in-breve .riga > i{flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 15px;
  color: #7BF0FF;}
.sorso-in-breve .riga-plus{flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 217, 138, 0.22);
  color: rgba(255, 255, 255, 0.72);}
.sorso-in-breve .riga-plus > span:not(.plus-bollino){flex: 1 1 200px;
  min-width: 0;}
.sorso-in-breve .plus-link{margin: 0 0 0 auto;}
@keyframes lampo{to { left: 150%; }}
.sfiato{position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 55;
  background: radial-gradient(circle at 32% 27%, #EAFBFF, #7BF0FF 60%, transparent);
  animation: sfiata 1.25s ease-out forwards;}
.sfiato.oro{background: radial-gradient(circle at 32% 27%, #FFF3D6, #FFB74D 60%, transparent);}
@keyframes sfiata{0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: translate(var(--dx, 0), -86px) scale(1.15); opacity: 0; }}
@media (prefers-reduced-motion: reduce){
.sfiato{display: none;}
}
.plus-bollino{position: relative;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #3A2400;
  background: linear-gradient(90deg, #FFB74D, #FFD98A);
  border-radius: 7px;
  padding: 3px 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);}
.plus-link{display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: #FFD98A;
  transition: gap 0.25s ease, color 0.25s ease;}
.plus-link i{font-size: 10px;}
.plus-link:hover{color: #FFE7B4; gap: 10px;}
.luccichio-oro::after{content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 150%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.001) 5%,
    rgba(255,255,255,.002) 10%,
    rgba(255,255,255,.003) 15%,
    rgba(255,255,255,.004) 20%,
    rgba(255,255,255,.010) 25%,
    rgba(255,255,255,.016) 30%,
    rgba(255,255,255,.027) 35%,
    rgba(255,255,255,.057) 40%,
    rgba(255,255,255,.124) 45%,
    rgba(255,255,255,.256) 50%,
    rgba(255,255,255,.124) 55%,
    rgba(255,255,255,.057) 60%,
    rgba(255,255,255,.027) 65%,
    rgba(255,255,255,.016) 70%,
    rgba(255,255,255,.010) 75%,
    rgba(255,255,255,.004) 80%,
    rgba(255,255,255,.003) 85%,
    rgba(255,255,255,.002) 90%,
    rgba(255,255,255,.001) 95%,
    rgba(255,255,255,0) 100%);
  animation: luccichio-oro 5.2s linear infinite;
  will-change: transform;}
@keyframes luccichio-oro{from { transform: translateX(-56.67%); }
  to   { transform: translateX(56.67%); }}
@media (prefers-reduced-motion: reduce){
.luccichio-oro::after{animation: none; opacity: 0;}
}
.hc-person{transform-box: fill-box;
  transform-origin: center bottom;}
.hc-person.p1{animation: hc-sale-basso 12s linear infinite;}
.hc-person.p2{animation: hc-sale-basso 12s linear infinite; animation-delay: -3s;}
.hc-person.p3{animation: hc-sale-medio 14s linear infinite; animation-delay: -7s;}
.hc-person.p4{animation: hc-sale-alto  15s linear infinite; animation-delay: -11s;}
@keyframes hc-sale-basso{0%   { transform: translate(0, 0);          opacity: 0; }
  7%   { opacity: 1; }
  25%  { transform: translate(19px, -6.5px);  opacity: 1; }
  50%  { transform: translate(38px, -10px);   opacity: 1; }
  75%  { transform: translate(57px, -16.5px); opacity: 1; }
  93%  { opacity: 1; }
  100% { transform: translate(76px, -20px);   opacity: 0; }}
@keyframes hc-sale-medio{0%   { transform: translate(0, 0);          opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translate(17px, -5.5px);  opacity: 1; }
  50%  { transform: translate(34px, -9px);    opacity: 1; }
  75%  { transform: translate(51px, -14.5px); opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate(68px, -18px);   opacity: 0; }}
@keyframes hc-sale-alto{0%   { transform: translate(0, 0);         opacity: 0; }
  9%   { opacity: 1; }
  25%  { transform: translate(14px, -4.5px); opacity: 1; }
  50%  { transform: translate(28px, -7px);   opacity: 1; }
  75%  { transform: translate(42px, -12px);  opacity: 1; }
  91%  { opacity: 1; }
  100% { transform: translate(56px, -15px);  opacity: 0; }}
.hc-slit{animation: hc-finestra 6.4s ease-in-out infinite;}
.hc-slit:nth-of-type(2){animation-delay: -2.1s;}
.hc-slit:nth-of-type(3){animation-delay: -4.3s;}
@keyframes hc-finestra{0%, 62%, 100% { fill: #000; opacity: .65; }
  22%, 40%      { fill: var(--castle-ramp-glow, #ffd685); opacity: .95; }}
.hc-gate{animation: hc-portone 9s ease-in-out infinite;}
@keyframes hc-portone{0%, 100% { opacity: .75; }
  50%      { opacity: .55; }}
.hc-ramp-edge{animation: hc-strada 4.2s ease-in-out infinite;}
.hc-ramp-edge:nth-of-type(2){animation-delay: -1.4s;}
.hc-ramp-edge:nth-of-type(3){animation-delay: -2.8s;}
@keyframes hc-strada{0%, 100% { opacity: .45; }
  45%      { opacity: 1; }}
.hc-rock-crevices{animation: hc-roccia 11s ease-in-out infinite;}
@keyframes hc-roccia{0%, 100% { opacity: .85; }
  50%      { opacity: 1; }}
.hc-upper-palace{transform-box: fill-box;
  transform-origin: center bottom;
  animation: hc-rocca 7.5s ease-in-out infinite;}
@keyframes hc-rocca{0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }}
.card-progetto-grande.vetrina-salvatore:hover .hc-person{animation-duration: 7s;}
.card-progetto-grande.vetrina-salvatore:hover .hc-ramp-edge{animation-duration: 2.4s;}
.card-progetto-grande.vetrina-salvatore:hover .hc-slit{animation-duration: 3.6s;}
@media (prefers-reduced-motion: reduce){
.hc-person,
.hc-slit,
.hc-gate,
.hc-ramp-edge,
.hc-rock-crevices,
.hc-upper-palace{animation: none !important;}
}
@media (max-width: 768px){
.hc-person,
.hc-rock-crevices,
.hc-upper-palace{animation: none;}
.hc-slit{animation-duration: 9s;}
}
.hc-person.p5{animation: hc-sale-alto 13s linear infinite; animation-delay: -5s;}
.hc-person.p6{animation: hc-sale-alto 13s linear infinite; animation-delay: -9.5s;}
.hc-person.p7{animation: hc-arrivato 2.6s ease-in-out infinite;}
@keyframes hc-arrivato{0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-2.5px) rotate(-3deg); }
  60%      { transform: translateY(-1px) rotate(2.5deg); }}
.card-progetto-grande.vetrina-salvatore:hover .hc-person.p7{animation-duration: 1.3s;}
@media (max-width: 768px){
.hc-person.p5,
.hc-person.p6,
.hc-person.p7{animation: none;}
}
.plus-link,
.tel-pulsantone,
.tel-scorciatoie span{transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .25s ease, background .3s ease,
              color .25s ease, border-color .25s ease;}
.plus-link:active,
.tel-scorciatoie span:active{transform: scale(.96);}
.plus-link i{transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);}
.plus-link:hover i.fa-arrow-right{transform: translateX(3px);}
.plus-link:focus-visible,
.tel-pulsantone:focus-visible{outline: 2px solid var(--accent-emerald, #10B981);
  outline-offset: 3px;
  border-radius: inherit;}
@media (prefers-reduced-motion: reduce){
.plus-link,
.tel-pulsantone,
.tel-scorciatoie span{transition: none;}
.plus-link:active,
.tel-scorciatoie span:active{transform: none;}
.plus-link i{transition: none;}
}
@keyframes sale-piano{from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }}
@keyframes riga-si-disegna{to { transform: scaleX(1); }}
@keyframes parola-sale{to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }}
@keyframes alone-va{from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(70px, 50px, 0); }}
@keyframes punto-vivo{0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  60%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }}
.system-statusbar .dot-live{animation: punto-vivo 2.4s ease-out infinite;}
@media (prefers-reduced-motion: reduce){
.system-statusbar .dot-live{animation: none !important;}
}
@media (max-width: 768px){
.sorso-in-breve{padding: 12px 14px; gap: 9px;}
.sorso-in-breve .riga{font-size: 12.5px;}
.castello-stage-card{height: 210px;}
.castello-barra,
.castello-telemetria-box{flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px; font-size: 10.5px;}
.console-titolo{position: static; transform: none; margin-left: 10px; overflow: hidden; text-overflow: ellipsis;}
.console-barra{display: flex; align-items: center;}
.card-sorso-wrapper .mock-telefono{--tel-scala: 0.8;
    transform-origin: top center;
    margin-bottom: -110px;}
.card-sorso-wrapper .mock-telefono:hover{box-shadow: 0 32px 68px rgba(0, 0, 0, 0.66), inset 0 0 0 1px var(--card-border);}
.card-sorso-wrapper .alone-visual{width: 240px; height: 240px;}
.blueprint-glow{width: 240px; height: 240px;}
.alone-tek{width: 220px; height: 220px;}
.tek-hint-label{display: none;}
}
@media (max-width: 400px){
.card-sorso-wrapper .mock-telefono{--tel-scala: 0.72; margin-bottom: -154px;}
.castello-stage-card{height: 180px;}
.tel-scorciatoie span{font-size: 11px;}
}
@media (hover: none){
.tek-mascot-wrap:hover{filter: none;}
.mock-telefono:hover{box-shadow: 0 32px 68px rgba(0, 0, 0, 0.66), inset 0 0 0 1px var(--card-border);}
}
.card-sorso-wrapper .mare .respiro,
.card-sorso-wrapper .scena-canvas,
.fondo-blueprint,
.blueprint-grid{top: 0; right: 0; bottom: 0; left: 0;}
.df-scena{position: absolute;
  inset: 0;
  transition: transform .9s var(--dev-uscita);}
.dev-card:hover .df-scena{transform: scale(1.035);}
.df-barra{position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #1A1A1A;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #8A8A8A;}
.df-barra i{width: 8px; height: 8px; border-radius: 50%; background: #FF5F57;}
.df-barra i:nth-child(2){background: #FEBC2E;}
.df-barra i:nth-child(3){background: #28C840;}
.df-barra span{position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;}
.df-term{position: absolute;
  top: 30px; bottom: 36px; left: 0; right: 0;
  padding: 10px 14px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: #D4D4D4;}
.df-term p{margin: 0;}
.df-term .df-benvenuto{color: #9A9A9A; margin-bottom: 2px;}
.df-riga b{color: #3B73ED; font-weight: 700;}
.df-cmd{color: #FAFAFA;}
.df-out{color: #8A8A8A;}
.df-cursore{display: inline-block;
  width: 6px; height: 12px;
  margin-left: 1px;
  vertical-align: -2px;
  background: #3B73ED;
  animation: df-lampeggia 1s steps(1) infinite;}
@keyframes df-lampeggia{50% { opacity: 0; }}
.df-chips{position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  display: flex;
  gap: 5px;
  overflow: hidden;}
.df-chip{flex: none;
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #9A9A9A;
  transition: color .25s ease, border-color .25s ease, background .25s ease;}
.df-chip.acceso{color: #fff; border-color: #3B73ED; background: rgba(59, 115, 237, .2);}
.dk-carta{display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  color: #ECE6DC;}
.dk-carta p{margin: 0;}
.dk-nome{font-size: 1.85rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em;}
.dk-carta .dk-frase{margin-top: 10px; font-size: .9rem; line-height: 1.5; color: #ECE6DC;}
.dk-frase mark{color: inherit;
  padding: 0 2px;
  margin: 0 -2px;
  background: linear-gradient(rgba(232, 151, 106, .34), rgba(232, 151, 106, .34)) no-repeat 0 90% / 0% 45%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: dk-evidenzia 7s var(--dev-uscita) infinite;}
@keyframes dk-evidenzia{0%, 10%   { background-size: 0% 45%; background-position: 0 90%; }
  28%, 76%  { background-size: 100% 45%; background-position: 0 90%; }
  77%       { background-size: 100% 45%; background-position: 100% 90%; }
  94%, 100% { background-size: 0% 45%; background-position: 100% 90%; }}
.dk-carta .dk-meta{margin-top: 12px; font-size: .7rem; font-style: italic; color: #B1A797;}
.dk-link{margin-top: 12px;
  align-self: flex-start;
  font-size: .78rem;
  color: #E8976A;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;}
.dg-aurora{position: absolute; inset: 0; overflow: hidden;}
.dg-aurora i{position: absolute; border-radius: 50%;}
.dg-aurora i:nth-child(1){width: 90%; height: 150%; right: -38%; top: -45%;
  background: radial-gradient(closest-side, rgba(106, 108, 246, .62), rgba(106, 108, 246, 0));
  animation: dg-deriva-a 13s ease-in-out infinite alternate;}
.dg-aurora i:nth-child(2){width: 55%; height: 80%; right: -6%; top: -30%;
  background: radial-gradient(closest-side, rgba(255, 106, 61, .26), rgba(255, 106, 61, 0));
  animation: dg-deriva-b 17s ease-in-out infinite alternate;}
.dg-aurora i:nth-child(3){width: 70%; height: 90%; left: 10%; bottom: -60%;
  background: radial-gradient(closest-side, rgba(191, 210, 255, .16), rgba(191, 210, 255, 0));
  animation: dg-deriva-c 19s ease-in-out infinite alternate;}
@keyframes dg-deriva-a{to { transform: translate(-22%, 14%) scale(1.12); }}
@keyframes dg-deriva-b{to { transform: translate(-40%, 30%) scale(.9); }}
@keyframes dg-deriva-c{to { transform: translate(24%, -16%) scale(1.15); }}
.dg-hero{position: absolute;
  left: 22px; right: 22px; bottom: 22px;}
.dg-hero p{margin: 0;}
.dg-nome{display: flex;
  flex-direction: column;
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 3.35rem;
  line-height: .86;
  text-transform: uppercase;
  color: #E4EBFF;}
.dg-nome span{display: block;}
.dg-hero .dg-sotto{margin-top: 12px;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #BFD2FF;}
.dg-sotto b{color: #fff; font-weight: 800;}
@keyframes dev-entra{from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }}
.team-griglia.dev-attesa .dev-gr.vista .dg-nome span{animation: dg-sale 1.1s var(--dev-uscita) backwards;
  animation-delay: calc(var(--i, 0) * 120ms + 280ms);}
.team-griglia.dev-attesa .dev-gr.vista .dg-nome span + span{animation-delay: calc(var(--i, 0) * 120ms + 400ms);}
@keyframes dg-sale{from { opacity: 0; transform: translateY(60%); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); }}
@media (max-width: 700px){
.dg-nome{font-size: 3.1rem;}
}
@media (hover: none){
.dev-card:hover .df-scena{transform: none;}
}
@media (prefers-reduced-motion: reduce){
.df-scena{transition: none;}
.dev-card:hover .df-scena{transform: none;}
.team-griglia .dev-card.vista .dg-nome span{animation: none !important;}
.dk-frase mark{background-size: 100% 45%;}
}
.card-sorso-wrapper .sorso-in-breve{background: rgba(2, 22, 28, .82);}
.castello-barra-sx span,
.castello-barra-dx span,
.castello-telemetria-dx span,
.castello-telemetria-sx b{white-space: nowrap;}
.vetrina-visual > .alone-visual{position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;}
.vetrina-visual > .mock-telefono,
.vetrina-visual > .tek-mascot-wrap{z-index: 1;}
.riga-log,
.console-drop,
.console-stato{animation: none; opacity: 1;}
.riga-log{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.console-corpo.gira{animation: console-giro 9s linear both;}
.console-corpo.gira .riga-log,
.console-corpo.gira .console-drop,
.console-corpo.gira .console-stato{opacity: 0;
  animation: log-entra .6s linear forwards;
  animation-delay: var(--ritardo, 0s);}
@keyframes log-entra{from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }}
@keyframes console-giro{0%, 91%   { opacity: 1; }
  97%, 100% { opacity: 0; }}
@media (max-width: 600px){
.console-corpo{font-size: 10.5px;}
.castello-telemetria-box{justify-content: space-between;}
}
@media (prefers-reduced-motion: reduce){
.console-corpo.gira,
.console-corpo.gira > *{animation: none; opacity: 1;}
}
@keyframes voce-entra{from { opacity: 0; transform: translateY(-4px); }}
.console-loot,
.console-loot *:not(.console-titolo){font-family: var(--font-codice);}