/* Phase 1 — narrative digital path, accessibility and responsive refinement */
:root {
  --path-rail: clamp(132px, 15vw, 210px);
  --nav-height: 70px;
  --path-opacity: .68;
  --path-brightness: .82;
  --path-blur: 0px;
  --path-scale: 1.035;
  --path-progress: 0;
  --path-focus: .74;
  --path-gateway-strength: 0;
  --path-narrative-progress: 0;
  --path-overlay-opacity: .64;
  --content-surface-opacity: .94;
  --path-safe-zone: clamp(150px, 18vw, 280px);
  --path-safe-half: clamp(75px, 9vw, 140px);
}

html { scroll-padding-top: calc(var(--nav-height) + 18px); }
body { overflow-x: clip; }

.skip-link { z-index: 10000; }

.digital-path {
  position: fixed;
  inset: var(--nav-height) 0 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  background: #030812;
}

.digital-path::before,
.digital-path::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.digital-path::before {
  background: rgb(3 8 18 / var(--path-overlay-opacity));
  z-index: 3;
}

.digital-path::after {
  background:
    linear-gradient(180deg, rgba(2,5,11,.76) 0%, transparent 15%, transparent 80%, rgba(2,5,11,.84) 100%),
    radial-gradient(ellipse at center, transparent 0 18%, rgba(3,8,18,.14) 44%, rgba(2,5,11,.78) 100%),
    linear-gradient(110deg, transparent 0 47%, rgba(80,222,255,.055) 49.5%, transparent 52%);
  z-index: 5;
}

.digital-path-poster,
.digital-path video {
  position: absolute;
  inset: 50% auto auto 50%;
  width: auto;
  height: 100%;
  min-height: 720px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center center;
  transform: translate3d(-50%, -50%, 0) scale(var(--path-scale));
  transform-origin: 50% 42%;
  filter: saturate(.88) contrast(1.04) brightness(calc(var(--path-brightness) * var(--path-focus))) blur(var(--path-blur));
  transition: opacity .28s ease, filter .28s ease, transform .22s ease-out;
}

.digital-path-poster {
  z-index: 1;
  background: url("digital-path-poster.webp") center / cover no-repeat;
  opacity: calc(var(--path-opacity) * var(--path-focus));
}

.digital-path video {
  z-index: 2;
  opacity: 0;
}

.digital-path-text-shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg,
      rgba(2,6,13,.64) 0%,
      rgba(2,6,13,.48) 30%,
      rgba(2,6,13,.08) calc(50% - var(--path-safe-half)),
      rgba(2,6,13,.08) calc(50% + var(--path-safe-half)),
      rgba(2,6,13,.48) 70%,
      rgba(2,6,13,.64) 100%);
}

.digital-path-text-shade::before,
.digital-path-text-shade::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  opacity: calc(var(--path-gateway-strength) * .82);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.75,.2,1);
}

.digital-path-text-shade::before {
  width: clamp(210px, 27vw, 390px);
  height: min(58vh, 520px);
  border: 1px solid rgba(92,221,255,.38);
  border-radius: 46% 46% 20% 20% / 22% 22% 10% 10%;
  box-shadow: inset 0 0 42px rgba(47,107,255,.08), 0 0 34px rgba(39,216,245,.14);
  transform: translate(-50%, -50%) perspective(700px) rotateX(10deg) scale(calc(.92 + var(--path-gateway-strength) * .08));
}

.digital-path-text-shade::after {
  width: clamp(240px, 34vw, 500px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(39,216,245,.28), rgba(255,138,52,.82), rgba(39,216,245,.28), transparent);
  box-shadow: 0 0 24px rgba(255,138,52,.35), 0 0 42px rgba(39,216,245,.18);
  transform: translate(-50%, -50%) scaleX(calc(.45 + var(--path-gateway-strength) * .55));
}

body.path-video-ready .digital-path video { opacity: calc(var(--path-opacity) * var(--path-focus)); }
body.path-video-ready .digital-path-poster { opacity: 0; }
body.effects-off .digital-path { display: block; }
body.effects-off .digital-path video { display: none; }

.path-gateway {
  --gateway-strength: 0;
  --gateway-progress: 0;
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 24px));
  height: clamp(420px, 62svh, 680px);
  margin: clamp(14px, 2vh, 24px) auto;
  display: grid;
  place-items: center;
  pointer-events: none;
  perspective: 1200px;
  isolation: isolate;
  overflow: hidden;
}

.path-gateway::before,
.path-gateway::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.path-gateway::before {
  inset: 0;
  background:
    linear-gradient(180deg, #030812 0%, rgba(3,8,18,.72) 11%, transparent 35% 65%, rgba(3,8,18,.76) 89%, #030812 100%),
    radial-gradient(ellipse at 50% 50%, rgba(28,122,193,.05), transparent 50%);
  opacity: calc(.88 - var(--gateway-strength) * .56);
}

.path-gateway::after {
  left: 50%;
  top: 50%;
  width: min(74vw, 920px);
  height: min(56vh, 540px);
  border: 1px solid rgba(102,225,255,.16);
  border-radius: 48% 48% 18% 18% / 20% 20% 8% 8%;
  box-shadow: inset 0 0 80px rgba(47,107,255,.045), 0 0 70px rgba(39,216,245,.08);
  opacity: calc(var(--gateway-strength) * .88);
  transform: translate(-50%, -50%) scale(calc(.72 + var(--gateway-strength) * .28));
}

.path-gateway-stage {
  position: absolute;
  inset: 6% 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: perspective(1200px) translateZ(calc(-90px + var(--gateway-strength) * 90px));
}

.path-gateway-horizon {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(70vw, 850px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(39,216,245,.32), rgba(255,138,52,.94), rgba(39,216,245,.32), transparent);
  box-shadow: 0 0 24px rgba(255,138,52,.42), 0 0 62px rgba(39,216,245,.22);
  opacity: calc(.12 + var(--gateway-strength) * .88);
  transform: translate(-50%, -50%) scaleX(calc(.24 + var(--gateway-strength) * .76));
}

.path-gateway-rail {
  position: absolute;
  left: 50%;
  bottom: -13%;
  width: clamp(260px, 46vw, 660px);
  height: 70%;
  border-inline: 1px solid rgba(77,209,255,.18);
  background:
    linear-gradient(90deg, transparent 4%, rgba(39,216,245,.08) 24%, rgba(255,138,52,.18) 50%, rgba(39,216,245,.08) 76%, transparent 96%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(133,230,255,.16) 24px 25px);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  opacity: calc(.16 + var(--gateway-strength) * .84);
  transform-origin: 50% 100%;
  transform: translateX(-50%) perspective(700px) rotateX(61deg) scaleX(calc(.58 + var(--gateway-strength) * .42)) translateY(calc((.5 - var(--gateway-progress)) * 32px));
  box-shadow: 0 0 calc(20px + var(--gateway-strength) * 48px) rgba(39,216,245,.14);
}

.path-gateway-node {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(200,243,255,.86);
  border-radius: 50%;
  background: #ff7a18;
  box-shadow: 0 0 0 10px rgba(39,216,245,.055), 0 0 calc(18px + var(--gateway-strength) * 32px) rgba(255,122,24,.78);
  transform: translate(-50%, -50%) scale(calc(.7 + var(--gateway-strength) * .62));
}

.path-gateway-chapter {
  position: absolute;
  left: 50%;
  top: 64%;
  display: grid;
  gap: 7px;
  width: min(88vw, 640px);
  text-align: center;
  opacity: clamp(0, calc(var(--gateway-strength) * 1.9 - .64), 1);
  transform: translate3d(-50%, calc(26px - var(--gateway-strength) * 26px), 34px) scale(calc(.94 + var(--gateway-strength) * .06));
  text-shadow: 0 2px 18px rgba(0,0,0,.9);
}

.path-gateway-chapter span {
  color: #8deaff;
  font: 750 clamp(.68rem, .9vw, .8rem)/1.2 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.path-gateway-chapter strong {
  color: #fff;
  font: 760 clamp(1.15rem, 2vw, 1.75rem)/1.12 var(--font-display);
  letter-spacing: -.015em;
}

.hero,
main > section { --journey-enter: 1; --journey-exit: 0; }

body:not(.effects-off) .hero {
  opacity: clamp(.78, calc(1 - var(--journey-exit) * .22), 1);
  transform: perspective(1400px) translate3d(0, calc(var(--journey-exit) * -18px), calc(var(--journey-exit) * -90px)) scale(calc(1 - var(--journey-exit) * .018));
  transform-origin: 50% 70%;
}

body:not(.effects-off) main > section > .container {
  opacity: clamp(.68, calc(.68 + var(--journey-enter) * .32 - var(--journey-exit) * .20), 1);
  transform: perspective(1400px)
    translate3d(0, calc(var(--section-depth) + 28px - var(--journey-enter) * 28px - var(--journey-exit) * 16px), calc(-72px + var(--journey-enter) * 72px - var(--journey-exit) * 90px))
    scale(calc(.968 + var(--journey-enter) * .032 - var(--journey-exit) * .018));
  transform-origin: 50% 18%;
  transition: transform .12s linear, opacity .12s linear;
}

body.effects-off .path-gateway {
  height: 72px;
  margin-block: 0;
  opacity: .34;
}
body.effects-off .path-gateway-chapter,
body.effects-off .path-gateway::after { display: none; }

nav:not(.section-indicator) { z-index: 120; }
.nav-inner { position: relative; }
.brand-mark { width: 36px; height: 36px; object-fit: contain; }

.mobile-menu-toggle {
  display: none;
  min-width: 48px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(113,199,255,.22);
  border-radius: 12px;
  color: var(--text);
  background: rgba(8,16,30,.92);
  font: 700 .82rem/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mobile-menu {
  display: none;
  border-top: 1px solid rgba(113,199,255,.12);
  background: rgba(5,11,24,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.mobile-menu[hidden] { display: none !important; }
.mobile-menu-inner { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; padding: 14px 0 18px; }
.mobile-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  text-decoration: none;
  border: 1px solid rgba(113,199,255,.12);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
}
.mobile-menu a[aria-current="location"] { color: #fff; border-color: rgba(255,138,52,.45); background: rgba(255,138,52,.08); }

.section-indicator a { min-width: 44px; min-height: 44px; }

.card,
.hero-card,
.contact-panel,
.notice {
  background: linear-gradient(145deg,
    rgb(8 15 28 / var(--content-surface-opacity)),
    rgb(10 19 34 / var(--content-surface-opacity)));
  backdrop-filter: blur(8px);
}

body:not(.effects-off) .tilt-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

body.boot-settled:not(.effects-off) .hero-card.tilt-card {
  animation: none;
  transform: perspective(1150px) translate3d(0, var(--scroll-lift), var(--scroll-z)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

body:not(.effects-off) .tilt-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 58px rgba(0,0,0,.32),
    0 0 34px rgba(39,216,245,.09),
    -10px 12px 30px rgba(47,107,255,.06);
}

.section-heading { position: relative; isolation: isolate; }
.section-heading::before {
  content: "";
  position: absolute;
  inset: -22px -18px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 38% 50%, rgba(3,8,18,.80), rgba(3,8,18,.52) 52%, transparent 78%);
  filter: blur(4px);
}

.icon[aria-hidden="true"] { user-select: none; }

.status-heading { margin-bottom: 30px; }
.status-heading h2 { margin-top: 7px; }

.path-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(184,230,255,.86);
  border-radius: 50%;
  background: #07111f;
  box-shadow: 0 0 0 7px rgba(39,216,245,.05), 0 0 18px rgba(39,216,245,.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (min-width: 1001px) {
  #profilo .grid-2,
  #formazione .grid-2,
  #disponibilita .grid-2 {
    grid-template-columns: minmax(0,1fr) var(--path-rail) minmax(0,1fr);
  }
  #profilo .grid-2 > :first-child,
  #formazione .grid-2 > :first-child,
  #disponibilita .grid-2 > :first-child { grid-column: 1; }
  #profilo .grid-2 > :last-child,
  #formazione .grid-2 > :last-child,
  #disponibilita .grid-2 > :last-child { grid-column: 3; }

  #competenze .grid-3 {
    grid-template-columns: minmax(0,1fr) var(--path-rail) minmax(0,1fr);
    align-items: start;
  }
  #competenze .grid-3 > :nth-child(1) { grid-column: 1; }
  #competenze .grid-3 > :nth-child(2) { grid-column: 3; }
  #competenze .grid-3 > :nth-child(3) { grid-column: 1; }

  #progetto .container > .card { width: calc((100% - var(--path-rail)) / 2); margin-left: auto; }
  #progetto .container > .card .grid-2 { grid-template-columns: 1fr; }
  #esperienze .container > .card { width: calc((100% - var(--path-rail)) / 2); }

  main > section > .container { position: relative; }
  main > section > .container::after {
    left: 50%;
    right: auto;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(171,225,255,.7);
    border-radius: 50%;
    background: #07111f;
    box-shadow: 0 0 0 7px rgba(39,216,245,.035), 0 0 15px rgba(39,216,245,.2);
    transform: translate(-50%, -50%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .tilt-card:hover,
  .magnetic:hover { will-change: transform; }
}

@media (max-width: 1000px) {
  :root {
    --path-opacity: .52;
    --path-brightness: .62;
    --path-blur: .45px;
    --path-scale: 1.08;
    --path-focus: .78;
    --path-overlay-opacity: .68;
    --content-surface-opacity: .96;
    --path-safe-zone: 116px;
    --path-safe-half: 58px;
  }
  body.effects-off .digital-path video { display: none !important; }
  .digital-path-text-shade {
    background: linear-gradient(90deg, rgba(2,6,13,.46), rgba(2,6,13,.16) 50%, rgba(2,6,13,.46));
  }
  .digital-path-text-shade::before { width: min(74vw, 330px); height: min(52vh, 440px); }
  .path-gateway { height: clamp(370px, 56svh, 540px); margin-block: 8px; }
  .path-gateway-stage { inset: 4% 0; }
  .path-gateway-rail { width: min(82vw, 440px); height: 66%; }
  .path-gateway-horizon { width: min(90vw, 620px); }
  .path-gateway-chapter { top: 66%; width: min(88vw, 520px); }
  body:not(.effects-off) .hero {
    opacity: clamp(.86, calc(1 - var(--journey-exit) * .14), 1);
    transform: translate3d(0, calc(var(--journey-exit) * -10px), 0) scale(calc(1 - var(--journey-exit) * .01));
  }
  body:not(.effects-off) main > section > .container {
    opacity: clamp(.82, calc(.82 + var(--journey-enter) * .18 - var(--journey-exit) * .12), 1);
    transform: translate3d(0, calc(20px - var(--journey-enter) * 20px - var(--journey-exit) * 8px), 0)
      scale(calc(.985 + var(--journey-enter) * .015 - var(--journey-exit) * .008));
  }
}

@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .mobile-menu { display: block; }
  .section-indicator { display: none; }
  .effects-toggle { position: fixed; top: calc(var(--nav-height) + 12px); right: 12px; bottom: auto; min-height: 44px; }
  .hero { padding-top: 48px; }
  .card, .hero-card, .contact-panel, .notice { backdrop-filter: blur(5px); }
}

@media (max-width: 520px) {
  .mobile-menu-inner { grid-template-columns: 1fr; max-height: calc(100vh - var(--nav-height)); overflow-y: auto; }
  .brand span { font-size: .92rem; }
  :root { --path-opacity: .44; --path-brightness: .60; --content-surface-opacity: .97; }
  .path-gateway { height: clamp(360px, 56svh, 500px); width: calc(100% - 12px); }
  .path-gateway-chapter strong { font-size: clamp(1.05rem, 5vw, 1.35rem); }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-override) {
    --path-opacity: .56;
    --path-brightness: .74;
    --path-blur: .15px;
    --path-scale: 1.035;
    --path-focus: .90;
    --content-surface-opacity: .96;
  }
  body:not(.motion-override) .digital-path video { display: none !important; }
  body:not(.motion-override) .digital-path-poster { opacity: calc(var(--path-opacity) * var(--path-focus)) !important; transition: none !important; }
  body:not(.motion-override) .tilt-card,
  body:not(.motion-override) .magnetic,
  body:not(.motion-override) main > section > .container { transform: none !important; transition: none !important; }
  body:not(.motion-override) .path-gateway { height: 72px; margin-block: 0; }
  body:not(.motion-override) .path-gateway-chapter,
  body:not(.motion-override) .path-gateway::after { display: none; }
  body.motion-override .digital-path video { display: block !important; }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  body:not(.motion-override) {
    --path-opacity: .22;
    --path-brightness: .60;
    --path-blur: .4px;
    --path-scale: 1.08;
    --path-focus: .78;
    --content-surface-opacity: .97;
  }
}

@media print {
  .digital-path, .path-gateway, .mobile-menu-toggle, .mobile-menu { display: none !important; }
}