/* JUDE Studio — intro animata e menu (pagina iniziale).
   Usa token, font e la composizione della scritta JUDE da style.css. */

.home { min-height: 100vh; min-height: 100svh; }

/* Senza JS: niente intro, solo il menu */
html:not(.js) .stage, html:not(.js) .skip { display: none; }

/* ---------- PALCO ---------- */
.stage {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
}
.stage > * { position: absolute; inset: 0; }
.stage [hidden] { display: none; }
.stage .intro { height: auto; }
.intro__scroll { cursor: pointer; background: none; padding: 0; }
.is-started .intro { pointer-events: none; }

/* ---------- FRASI ---------- */
.phrase {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0 var(--gutter);
  text-align: center;
  font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(30px, 5.2vw, 92px); line-height: 1.04; letter-spacing: -0.01em;
  text-wrap: balance;
}
.phrase > span { display: block; max-width: 16ch; }
.phrase em { font-style: normal; color: var(--petrolio); }
.phrase.is-long { font-size: clamp(26px, 3.8vw, 64px); }
.phrase.is-long > span { max-width: 22ch; }
.phrase.is-mirror { font-size: clamp(24px, 3.3vw, 58px); }
.phrase.is-mirror > span { max-width: 9ch; }
.phrase .mirror { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.phrase .mirror path { fill: none; stroke: var(--grafite); stroke-linecap: round; stroke-linejoin: round; }
.phrase.is-small {
  font-size: clamp(22px, 2.6vw, 42px); font-weight: 500;
  font-stretch: 100%; font-variation-settings: "wdth" 100; letter-spacing: 0;
}
.phrase.is-huge { font-size: clamp(72px, 17vw, 300px); line-height: 0.9; }
.phrase.is-word { font-size: clamp(48px, 11vw, 200px); }
.phrase.is-big { font-size: clamp(40px, 7.2vw, 128px); line-height: 1; }
.phrase.is-big > span { max-width: 13ch; }

/* Impatto: parole che arrivano di colpo */
.phrase.is-impact { font-size: clamp(46px, 9vw, 168px); line-height: 0.95; }
.phrase.is-impact > span { max-width: 11ch; }
.phrase .wd { display: inline-block; }

/* Lettura: le lettere si accendono a tempo di lettura, con una sottolineatura che cresce */
.phrase.is-read > span { max-width: 18ch; }
.phrase .w { white-space: nowrap; }
.phrase .ch {
  color: rgba(57, 58, 55, 0.22);
  transition: color 0.45s ease-out;
  text-decoration-line: underline; text-decoration-color: transparent;
  text-decoration-thickness: 0.07em; text-underline-offset: 0.16em;
}
.phrase .ch.is-lit { color: var(--grafite); text-decoration-color: var(--accent, var(--verde)); }
.phrase .ch.is-hot { color: var(--accent, var(--verde)); transition-duration: 0.12s; }

/* JUDE ripetuto tre volte */
.phrase.is-triple > span { display: flex; flex-direction: column; align-items: center; gap: 0.06em; max-width: none; }
.phrase.is-triple i { font-style: normal; display: block; font-size: clamp(56px, 11vw, 190px); line-height: 0.92; }


/* ---------- KIT DI MOVIMENTO ---------- */
.stage { transition: background-color 0.18s, color 0.18s; color: var(--grafite); }
.stage.is-dark { background: #262725; color: var(--carta); }
.stage.is-dark .phrase em { color: var(--verde); }
.stage.is-dark .phrase .ch { color: rgba(238, 233, 222, 0.18); }
.stage.is-dark .phrase .ch.is-lit { color: var(--carta); }
.stage.is-dark .phrase .ch.is-hot { color: var(--accent, var(--verde)); }
.stage.is-dark ~ .skip { background: rgba(38, 39, 37, 0.6); color: var(--carta); border-color: rgba(238, 233, 222, 0.25); }

.streaks { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.streaks path, .wipe path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; display: none; }
.wipe.is-on { display: block; }

.progress {
  position: fixed; left: 0; bottom: 0; z-index: 5; width: 100%; height: 4px;
  background: var(--verde); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
  opacity: 0;
}
.is-started .progress { opacity: 1; }
.progress.is-done { opacity: 0; }

.phrase.is-slam > span { position: relative; }
.phrase .count {
  position: absolute; top: -0.05em; right: -0.55em;
  font-size: 0.22em; line-height: 1; color: var(--verde);
}
.phrase.is-scramble > span { white-space: nowrap; max-width: none; }

/* ---------- LOGHI AI ---------- */
.logos {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-content: center; justify-items: center;
  gap: clamp(28px, 6vh, 72px) clamp(36px, 6vw, 110px);
  padding: 0 calc(var(--gutter) + 20px);
}
.logo {
  font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
  font-size: clamp(30px, 5vw, 88px); line-height: 1;
  color: var(--grafite);
}
.logo > span { display: inline-block; }
/* Ansia: un tremolio leggero e nervoso, diverso per ogni logo */
.logo.is-anxious > span { animation: anxious var(--d, 0.36s) linear infinite; animation-delay: var(--o, 0s); }
@keyframes anxious {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(-1.6px, 0.8px) rotate(-0.7deg); }
  30%  { transform: translate(1.4px, -1px) rotate(0.5deg); }
  45%  { transform: translate(-0.8px, 1.4px) rotate(0.2deg); }
  60%  { transform: translate(1.8px, 0.4px) rotate(-0.5deg); }
  75%  { transform: translate(-1.2px, -1.2px) rotate(0.6deg); }
  90%  { transform: translate(0.6px, 1px) rotate(-0.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (max-width: 700px) {
  .logos { grid-template-columns: repeat(2, auto); }
  .logo { font-size: clamp(26px, 8vw, 40px); }
}
.fx { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fx path, .branch__lines path, .lines-scene path {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- LINEE + PAROLE ---------- */
.lines-scene { display: grid; place-items: center; padding: clamp(24px, 4vh, 56px) clamp(16px, 4vw, 72px) clamp(90px, 16vh, 150px); }
.lines-scene[hidden] { display: none; }
.lines-scene__art { width: 100%; max-height: 80svh; overflow: visible; transform-origin: 90% 92%; }
.lines-scene .draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.lines-scene .word { opacity: 0; transform-box: fill-box; transform-origin: left center;
  font-size: 138px; font-stretch: 100%; font-variation-settings: "wdth" 100; font-weight: 900; letter-spacing: -0.03em; }

/* ---------- RAMIFICAZIONI (valori e menu) ---------- */
.branch {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(72px, 16vh, 180px) var(--gutter) clamp(40px, 8vh, 96px);
}
.branch__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.branch__head {
  position: relative; margin: 0; text-align: center;
  font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(28px, 4.4vw, 76px); line-height: 1.05; text-wrap: balance;
}
.branch__items {
  position: relative; list-style: none; padding: 0;
  margin: var(--drop, 180px) 0 0; width: 100%; max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px);
  text-align: center;
}
.values .branch__items li {
  font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 46px); line-height: 1.12; text-wrap: balance;
}

/* ---------- MENU ---------- */
.menu {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
}
.js .menu { visibility: hidden; }
.js .menu.is-on { visibility: visible; }
.menu__mark { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; }
.menu__logo { width: clamp(84px, 8.4vw, 150px); height: auto; overflow: visible; }
.menu__word { font-size: clamp(22px, 2.2vw, 36px); line-height: 1; }
.menu .branch__items li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.menu__item {
  text-decoration: none;
  font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800;
  font-size: clamp(24px, 3.1vw, 58px); line-height: 1; text-transform: uppercase;
  transition: color 0.3s;
}
.menu__item:not(.is-soon):hover, .menu__item:not(.is-soon):focus-visible { color: var(--c); }
.menu__item.is-soon { cursor: default; opacity: 0.55; }
.menu__tag {
  text-transform: uppercase; letter-spacing: 0.32em; font-weight: 500;
  font-size: clamp(10px, 0.8vw, 14px);
  padding: 0.6em 1.2em; border-radius: 999px; border: 1px solid var(--rule);
}
.menu li:has(.menu__item:not(.is-soon)) .menu__tag { background: var(--grafite); color: var(--carta); border-color: var(--grafite); }
.menu__replay {
  margin-top: auto; padding-top: 48px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.32em; text-decoration: none; opacity: 0.7;
}
.menu__replay:hover, .menu__replay:focus-visible { opacity: 1; }

/* ---------- SKIP ---------- */
.skip {
  position: fixed; right: var(--gutter); bottom: clamp(16px, 3.5vh, 36px); z-index: 5;
  font: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--grafite); background: rgba(238, 233, 222, 0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 1em 1.8em; cursor: pointer;
  transition: background-color 0.3s, color 0.3s, opacity 0.4s;
}
.skip:hover, .skip:focus-visible { background: var(--grafite); color: var(--carta); }
.skip.is-off { opacity: 0; pointer-events: none; }

/* ---------- MOBILE ---------- */
@media (max-width: 700px) {
  .branch { align-items: stretch; }
  .branch__items { grid-template-columns: minmax(0, 1fr); text-align: left; gap: 36px; padding-left: var(--indent, 0px); }
  .menu .branch__items li { align-items: flex-start; }
  .branch__head { align-self: center; }
  .skip { left: 50%; right: auto; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .skip { display: none; }
}