/* DayBow — sito di presentazione.
   Inchiostro, carta e luce: l'unico colore è la luce del cielo di adesso (più i colori delle categorie,
   che nell'app appartengono agli impegni, non al marchio). Le variabili qui sotto sono la palette "notte";
   main.js le interpola in OKLCH mentre si scorre, sezione per sezione. */

:root {
  --bg: #070b18;
  --fg: #f2f5fa;
  --accent: #cfd7ff;
  --glow: #6b5a8a;

  --ink: #05070c;
  --paper: #f2f5fa;
  --friction: #f07a62;
  --friction-text: #ffb4a3;
  --muted: color-mix(in oklch, var(--fg) 84%, var(--bg));
  --rule: color-mix(in oklch, var(--fg) 14%, var(--bg));
  --surface: color-mix(in oklch, var(--fg) 7%, var(--bg));

  /* Categorie, dall'app (arco e nastro di Oggi) */
  --cat-personale: #f07fa8;
  --cat-studio: #ffd992;
  --cat-lavoro: #6e9df7;
  --cat-ripasso: #8e7cf5;
  --cat-sport: #5bc47a;
  --cat-pasto: #e3e8f1;

  --font-title: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;

  --gutter-l: max(16px, env(safe-area-inset-left));
  --gutter-r: max(16px, env(safe-area-inset-right));
  --bar-h: calc(env(safe-area-inset-top) + 60px);
  --space: clamp(4.5rem, 3rem + 8vw, 10rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --slow: cubic-bezier(.45, 0, .2, 1);

  color-scheme: dark;
}

/* Su telefono i colori non cambiano mai sulla radice della pagina: anche un solo cambio lì obbliga il
   browser a ricalcolare lo stile di tutto, e durante lo scroll con l'inerzia si sente. Ogni sezione ha
   invece i suoi colori fissi (qui sotto), le storie li ricevono da main.js sulla loro scena a ogni passo,
   e lo sfondo passa da un colore all'altro con una dissolvenza che fa solo la scheda grafica
   (.ambient-fade). Sul computer main.js continua a sfumare i colori sulla radice. */
@media (hover: none) {
  [data-palette="notte"]       { --bg: #070b18; --accent: #cfd7ff; --glow: #6b5a8a; }
  [data-palette="aurora"]      { --bg: #111736; --accent: #d8d4ff; --glow: #b0708a; }
  [data-palette="alba"]        { --bg: #231f47; --accent: #ffd2a0; --glow: #c2607a; }
  [data-palette="mattina"]     { --bg: #15305c; --accent: #ffc98a; --glow: #3a6fae; }
  [data-palette="mezzogiorno"] { --bg: #113369; --accent: #ffe7b0; --glow: #5aa0da; }
  [data-palette="pomeriggio"]  { --bg: #172f5e; --accent: #ffd48a; --glow: #8fa9c8; }
  [data-palette="tramonto"]    { --bg: #2e1d45; --accent: #ffb36b; --glow: #c2607a; }
  [data-palette="crepuscolo"]  { --bg: #151a3c; --accent: #d8d4ff; --glow: #6b5a8a; }
}
.ambient-fade {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 1.5rem);
}
/* Finché la lingua scelta non è applicata, niente lampo di italiano (lo script inline toglie la classe dopo 1,5 s comunque). */
.i18n-wait body { visibility: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.05;
  text-wrap: balance;
}
h2 { font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.5rem); }
h3 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.25rem); }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--accent); text-underline-offset: .2em; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 6px;
}

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num, .time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: var(--gutter-l);
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--fg);
  color: var(--ink);
  border-radius: 12px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* ---------- Luce d'ambiente ---------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 55% at 50% 115%, color-mix(in oklch, var(--glow) 20%, transparent), transparent 70%);
}
.glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--glow) 20%, transparent), transparent);
  transform: translate3d(70vw, 30vh, 0) translate(-50%, -50%);
  will-change: transform;
}

/* ---------- Bottoni e link ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font: 600 1.0625rem/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s, color .3s;
}
.btn:active { transform: scale(.97); }
.btn-small { min-height: 44px; padding: 0 1.1rem; font-size: 1rem; }
.btn-wide { width: 100%; }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 30%, transparent);
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--accent) 40%, transparent);
  cursor: pointer;
}
.arrow::after { content: "\2009→"; }

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 40px -8px color-mix(in oklch, var(--accent) 55%, transparent);
  }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); }
  .link:hover { text-decoration-color: currentColor; }
}

/* Comandi, non contenuti: non si trascinano e la barra non si seleziona (main.js fa lo stesso dove serve). */
.bar a, .menu a, .footer a, .btn, .doors a, .phone img { -webkit-user-drag: none; }
.bar, .menu, .btn { -webkit-user-select: none; user-select: none; }

/* ---------- Barra in alto ---------- */

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--bar-h);
  padding: calc(env(safe-area-inset-top) + .5rem) var(--gutter-r) .5rem var(--gutter-l);
  /* Fondo quasi pieno: la sfocatura "vetro" costringe il browser a ricalcolare tutto quello che passa
     sotto la barra a ogni fotogramma, e su telefono si sente. Resta solo dove c'è un mouse. */
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--fg) 8%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .bar {
    background: color-mix(in oklch, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--fg);
  font: 500 1.35rem/1 var(--font-title);
  letter-spacing: -.018em;
  text-decoration: none;
}
.brand-mark { width: 1.6em; height: 1.6em; color: #fff4de; flex: none; }
.bar-nav { display: none; }
.bar .btn-small { display: none; }

/* IT / EN: piccolo, sempre raggiungibile */
.lang {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 18%, transparent);
}
.lang button {
  min-width: 44px;
  min-height: 40px;
  padding: 0 .55rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 .8125rem/1 var(--font-num);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lang button[aria-pressed="true"] {
  background: color-mix(in oklch, var(--fg) 14%, transparent);
  color: var(--fg);
}

/* Menu su telefono */
.menu-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn line { transition: transform .35s var(--ease), opacity .2s; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: var(--bar-h) 0 auto 0;
  z-index: 49;
  max-height: calc(100dvh - var(--bar-h));
  overflow-y: auto;
  padding: .5rem var(--gutter-r) calc(1.5rem + env(safe-area-inset-bottom)) var(--gutter-l);
  background: color-mix(in oklch, var(--bg) 92%, var(--ink));
  border-bottom: 1px solid var(--rule);
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li + li { border-top: 1px solid var(--rule); }
.menu a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 60px;
  color: var(--fg);
  font: 500 1.6rem/1.1 var(--font-title);
  letter-spacing: -.018em;
  text-decoration: none;
}
.menu a[aria-current="page"] { color: var(--accent); }
.menu .btn { margin-top: 1rem; }

/* ---------- Hero (home): cielo sopra, inchiostro sotto l'orizzonte ----------
   La scena resta ferma mentre si scorre: sull'arco passa la giornata dalle 11 alle 21, poi la pagina riparte. */

.hero { position: relative; min-height: 100vh; min-height: 100svh; }
.js .hero { height: 200vh; height: 200svh; }   /* 100 per la scena + 100 per la giornata (11–21) */
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* svh e non dvh: quando la barra di Safari si allarga e si restringe la scena non cambia altezza,
     quindi niente nuova impaginazione e niente cielo ridisegnato da zero durante lo scroll. */
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--ink);
}
.hero-sky {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0a1233 0%, #1b2352 38%, #3a3a70 72%, #6b5a8a 100%);
  border-bottom: 1px solid rgb(242 245 250 / .18);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-now {
  position: absolute;
  left: 50%;
  bottom: clamp(.9rem, 2.5vh, 1.6rem);
  max-width: calc(100% - 2 * var(--gutter-l) - 7rem);
  padding: .5rem .95rem;
  border-radius: 999px;
  background: rgb(5 7 12 / .62);   /* senza sfocatura: sopra un cielo che si ridisegna a ogni scroll costerebbe troppo */
  color: var(--paper);
  font: 500 .875rem/1.25 var(--font-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
}
.hero-now b { color: var(--accent); font-weight: 600; }
/* Su telefono l'arco lascia vuota la parte alta del cielo: la riga "Adesso" sta lì, lontana dall'ora sul sole. */
@media (max-width: 767px) {
  .hero-now {
    top: calc(var(--bar-h) + 1rem);
    bottom: auto;
    max-width: calc(100% - 2 * var(--gutter-l));
    font-size: .8125rem;
  }
}
.hero-ground {
  padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  padding-bottom: calc(clamp(1.75rem, 1rem + 3vw, 4rem) + env(safe-area-inset-bottom));
  background: var(--ink);
}
.hero h1 { display: grid; gap: .35rem; }
/* Anche l'altezza conta: su uno schermo basso il nome non deve schiacciare il cielo. */
.wordmark { font-size: min(clamp(3.25rem, 1.8rem + 8vw, 8.5rem), 14vh); line-height: .9; }
.claim { font-size: min(clamp(1.45rem, 1rem + 2.4vw, 3rem), 5.2vh); color: var(--fg); }
.lead {
  max-width: 36ch;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.35rem);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.note { margin-top: 1.25rem; color: var(--muted); font-size: .875rem; }

/* ---------- Testata delle pagine interne ---------- */

.page-head {
  padding-top: calc(var(--bar-h) + clamp(3.5rem, 2rem + 8vw, 9rem));
  padding-bottom: clamp(2.5rem, 2rem + 4vw, 6rem);
}
.page-head .time { display: block; margin-bottom: 1rem; color: var(--accent); font-size: 1.125rem; font-weight: 600; }
.page-head h1 { font-size: clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem); max-width: 14ch; }
.page-head p { max-width: 40ch; margin-top: 1.5rem; color: var(--muted); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }

/* ---------- Un'affermazione sola ---------- */

.statement { padding-block: var(--space); }
.statement h2 { max-width: 16ch; }
.statement .big {
  max-width: 30ch;
  margin-top: 1.5rem;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.35;
}
.statement .muted { max-width: 44ch; margin-top: 1.5rem; }

/* ---------- Telefono: cornice in CSS; la Dynamic Island è già nello schermo esportato da Figma ---------- */

.phone {
  --w: min(72vw, 300px);
  position: relative;
  flex: none;
  width: var(--w);
  margin: 0;
  padding: calc(var(--w) * .032);
  border-radius: calc(var(--w) * .16);
  background: linear-gradient(150deg, #3b3f4a, #121419 38%, #1b1e24 70%, #34373f);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .14),
    0 0 0 1px rgb(0 0 0 / .6),
    0 40px 70px -30px rgb(0 0 0 / .75);
  translate: 0 var(--shift, 0px);
}
/* Con il mouse: l'alone colorato attorno al telefono e il parallax, su un livello suo così spostarlo
   non ridipinge le ombre. Su telefono niente parallax (main.js) e niente alone: costano più di quanto danno. */
@media (hover: hover) and (pointer: fine) {
  .phone {
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / .14),
      0 0 0 1px rgb(0 0 0 / .6),
      0 50px 90px -30px rgb(0 0 0 / .75),
      0 0 140px -20px color-mix(in oklch, var(--glow) 45%, transparent);
  }
  .phone[data-parallax] { will-change: translate; }
}
.screen {
  position: relative;
  aspect-ratio: 1206 / 2622;
  overflow: hidden;
  border-radius: calc(var(--w) * .13);
  background: var(--ink);
}
.screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Più schermate nello stesso telefono: una alla volta, in dissolvenza */
.screen img + img,
.js .screen[data-stack] img { opacity: 0; transition: opacity .7s var(--slow); }
.js .screen[data-stack] img.is-on,
.screen:not([data-stack]) img:first-child { opacity: 1; }

/* ---------- Storie a scena ferma (Esperienza e home) ----------
   La sezione è alta; la scena dentro resta ferma e cambia stato mentre si scorre.
   Il testo di ogni passo sta nella scena e si alterna in dissolvenza. */

.story { position: relative; }
.js .story { height: calc(var(--steps, 3) * 100svh); }
.story-stage {
  display: grid;
  gap: 2rem;
  padding-block: var(--space);
}
.js .story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;   /* come l'hero: altezza stabile anche quando la barra di Safari cambia */
  padding-top: calc(var(--bar-h) + 1rem);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "text" "ribbon" "phone";
  gap: 1rem;
  overflow: hidden;
}
.story-spacers { position: absolute; inset: 0; pointer-events: none; display: grid; }

.story-text { grid-area: text; display: grid; align-content: start; }
.js .story-text > * { grid-area: 1 / 1; }
.story-step { max-width: 34rem; }
.js .story-step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--slow), transform .9s var(--ease);
  pointer-events: none;
}
.js .story-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.story-step .time { display: block; margin-bottom: .5rem; color: var(--accent); font-size: 1rem; font-weight: 600; }
.story-step h2, .story-step h3 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); }
.story-step p { margin-top: .85rem; color: var(--muted); max-width: 40ch; }
.story-step p.strong { color: var(--fg); }
.choices { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.choices .btn { min-height: 44px; padding: 0 1.15rem; font-size: 1rem; }
.choices .btn[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }
.choices .btn-ghost[aria-pressed="true"] {
  background: color-mix(in oklch, var(--fg) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--fg);
}
.result { margin-top: 1rem; min-height: 1.6em; color: var(--fg); }

.story-visual { grid-area: phone; display: grid; place-items: center; min-height: 0; }
.js .story-visual .phone { --w: min(60vw, calc((100svh - var(--reserve, 360px)) * .476)); }
.story > .story-stage > .ribbon-wrap { grid-area: ribbon; }

/* ---------- Il nastro: la giornata in orizzontale, sul cielo di quel giorno (come nell'app) ---------- */

.ribbon-wrap { position: relative; padding-top: var(--cloud, 0px); }
.ribbon {
  --h: clamp(40px, 5.5vw, 58px);
  position: relative;
  height: var(--h);
  border-radius: 999px;
  background: var(--ribbon-sky, linear-gradient(90deg, #18213f, #6b5a8a 10%, #8fa9c8 30%, #8fa9c8 70%, #c2607a 82%, #18213f));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 0 0 100vmax rgb(5 7 12 / .22);
  container-type: inline-size;
}
.cap, .trip, .gap, .overlap {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: calc(var(--a) * 100%);
  width: calc((var(--b) - var(--a)) * 100%);
  border-radius: 999px;
}
.cap {
  display: grid;
  place-items: center;
  background: var(--c);
  transition: transform 1.1s var(--ease), opacity .6s var(--slow), background-color .4s;
}
.cap .ic { font-size: calc(var(--h) * .34); line-height: 1; filter: saturate(.9); }
@container (max-width: 560px) { .cap[data-short] .ic { display: none; } }
/* Le cose del Cassetto e le proposte di DayBow: tratteggiate, finché non diventano impegni */
.cap.drawer {
  background: rgb(5 7 12 / .35) repeating-linear-gradient(90deg, color-mix(in oklch, var(--c) 40%, transparent) 0 6px, transparent 6px 11px);
  box-shadow: inset 0 0 0 2px var(--c);
}
.cat-personale { --c: var(--cat-personale); }
.cat-studio { --c: var(--cat-studio); }
.cat-lavoro { --c: var(--cat-lavoro); }
.cat-ripasso { --c: var(--cat-ripasso); }
.cat-sport { --c: var(--cat-sport); }
.cat-pasto { --c: var(--cat-pasto); }

/* Spostamenti: una linea corallo sottile fra un impegno e l'altro, come sul nastro dell'app */
.trip {
  top: calc(50% - 1.5px);
  bottom: auto;
  height: 3px;
  background: var(--friction);
  transform-origin: left center;
  transition: transform 1s var(--ease), opacity .5s;
}
.gap {
  top: 10%;
  bottom: 10%;
  box-shadow: inset 0 0 0 1.5px rgb(242 245 250 / .85);
  background: rgb(242 245 250 / .1);
  opacity: 0;
  transition: opacity .8s var(--slow);
}
.overlap {
  top: 6%;
  bottom: 6%;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, var(--friction) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1.5px var(--friction);
  opacity: 0;
  transition: opacity .6s var(--slow);
}
.tag {
  position: absolute;
  top: calc(100% + .55rem);
  left: calc(var(--x) * 100%);
  transform: translateX(-50%);
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgb(5 7 12 / .55);
  color: var(--paper);
  font: 600 .75rem/1.3 var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .6s var(--slow), transform .9s var(--ease);
}
.tag.up { top: auto; bottom: calc(100% + .55rem); }
.tag.warn { background: var(--friction); color: var(--ink); }
.axis {
  position: relative;
  height: 1.4rem;
  margin-top: 2.6rem;
  color: var(--muted);
  font: 500 .75rem/1 var(--font-num);
  font-variant-numeric: tabular-nums;
}
.axis span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); }
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }

/* ---------- Esperienza, momento 1: la giornata si mette in ordine ---------- */

.story-order .ribbon-wrap { --cloud: clamp(110px, 17vh, 170px); }
/* Prima di DayBow: le cose sparse sopra il nastro, un po' storte, una sull'altra */
.js .story-order .cap { transform: translate(var(--cx), var(--cy)) rotate(var(--r)); }
.story-order.at-1 .cap:not(.drawer) { transform: none; }
.js .story-order .trip { transform: scaleX(0); }
.story-order.at-2 .trip { transform: none; }
.story-order.at-2 .tag.trip-tag { opacity: 1; }
.story-order.at-3 .gap { opacity: 1; }
.story-order.at-3 .tag.gap-tag { opacity: 1; }
.story-order.at-3 .cap.drawer { opacity: .4; }
.story-order.at-4 .cap.drawer { opacity: 0; }
.story-order.at-4 .cap[data-id="passeggiata"] { transform: none; opacity: 1; }
.story-order.at-4 .gap[data-id="free-sera"] { opacity: .45; }
.story-order.at-4[data-choice="accept"] .cap[data-id="passeggiata"] { background: var(--c); box-shadow: none; }
.story-order.at-4[data-choice="skip"] .cap[data-id="passeggiata"] { opacity: 0; transform: translateY(-40px); }
.story-order[data-choice="accept"] .tag.gap-tag .v1,
.story-order:not([data-choice="accept"]) .tag.gap-tag .v2 { display: none; }

/* ---------- Esperienza, momento 2: la giornata cambia ---------- */

.story-change .trip { transform: none; }
.story-change .tag { opacity: 1; }
.story-change .tag.late, .story-change .tag.early, .story-change .tag.moved { opacity: 0; }
.story-change.at-1 [data-id="t2"] { transform: scaleX(1.2128); }          /* 47 → 57 minuti */
.story-change.at-1 .overlap { opacity: 1; }
.story-change.at-1 .tag.late { opacity: 1; }
.story-change.at-1 .tag.on-time { opacity: 0; }
.story-change[data-choice="leave"] [data-id="t2"] { transform: translateX(-17.02%); }  /* 8 minuti prima */
.story-change[data-choice="move"] [data-id="milestone"] { transform: translateX(12.5%); } /* 15 minuti dopo */
.story-change[data-choice] .overlap,
.story-change[data-choice] .tag.late { opacity: 0; }
.story-change[data-choice="leave"] .tag.early,
.story-change[data-choice="move"] .tag.moved { opacity: 1; }
.story-change.at-3 .ribbon-wrap { opacity: .35; transition: opacity .8s var(--slow); }

/* ---------- Varchi verso le altre pagine: tipografia, non schede ---------- */

.doors { padding-block: var(--space); }
.doors h2 { max-width: 14ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.doors ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.doors li { border-bottom: 1px solid var(--rule); }
.doors a {
  display: grid;
  gap: .25rem;
  padding-block: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  color: var(--fg);
  text-decoration: none;
}
.doors .door-title { font: 500 clamp(1.75rem, 1.2rem + 2vw, 3rem)/1.05 var(--font-title); letter-spacing: -.018em; }
.doors .door-title::after { content: "\2009→"; color: var(--accent); display: inline-block; transition: transform .4s var(--ease); }
.doors .door-text { color: var(--muted); max-width: 46ch; }
@media (hover: hover) {
  .doors a:hover .door-title::after { transform: translateX(.3em); }
}

/* ---------- Invito finale ---------- */

.invite { padding-block: var(--space); text-align: center; }
.invite h2 { max-width: 16ch; margin-inline: auto; }
.invite p { max-width: 36ch; margin: 1.25rem auto 0; color: var(--muted); }
.invite .actions { justify-content: center; }

/* ---------- Funzioni: storie, non schede ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding-block: calc(var(--space) * .6);
}
.feature-text { max-width: 32rem; }
.feature .time { display: block; margin-bottom: .75rem; color: var(--accent); font-size: 1.125rem; font-weight: 600; }
.feature h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); margin-bottom: 1.25rem; }
.feature-text > p { color: var(--muted); }
.story-facts { margin: 1.75rem 0 0; display: grid; gap: 0; }
.story-facts div { display: grid; gap: .1rem; padding-block: .85rem; border-top: 1px solid var(--rule); }
.story-facts dt { color: var(--accent); font-size: .9375rem; font-weight: 600; }
.story-facts dd { margin: 0; }
.feature-visual { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.feature-visual .phone { z-index: 1; }
.feature-visual .phone + .phone { margin-left: calc(var(--w) * -.34); margin-bottom: calc(var(--w) * .22); }
/* Due telefoni insieme devono stare nella larghezza anche su un telefono: 58 + 46 − 16 = 88vw */
@media (max-width: 767px) {
  .feature-visual .phone:has(+ .phone) { --w: 58vw; }
  .feature-visual .phone + .phone { --w: 46vw; }
}
.feature-visual .phone.back { z-index: 0; filter: brightness(.8); }

.also { padding-block: calc(var(--space) * .6) var(--space); }
.also h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin-bottom: 1.5rem; }
.also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.also li { padding-block: .9rem; border-top: 1px solid var(--rule); color: var(--muted); }
.also li b { color: var(--fg); font-weight: 600; }

/* ---------- Filosofia: la pagina più quieta ---------- */

.quiet-line {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.quiet-line svg { position: absolute; left: 50%; bottom: 0; width: min(140vw, 1500px); height: auto; transform: translateX(-50%); color: var(--accent); }
.quiet-line path { fill: none; stroke: rgb(242 245 250 / .22); stroke-width: 1.5; stroke-dasharray: 2 9; }
.quiet-line circle { fill: #fff4de; }
.quiet {
  display: grid;
  align-content: center;
  min-height: 92vh;
  min-height: 92svh;
  padding-block: var(--space);
}
.quiet h1, .quiet h2 { font-size: clamp(2.25rem, 1.2rem + 4.6vw, 5.5rem); max-width: 15ch; line-height: 1.04; }
.quiet p { max-width: 34ch; margin-top: 1.5rem; color: var(--muted); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }
.quiet.end { text-align: center; }
.quiet.end h2, .quiet.end p { margin-inline: auto; }
.quiet.end .actions { justify-content: center; }

/* Pagina di conferma dell'iscrizione */
.confirm-page h1 { margin-inline: auto; }
.confirm-page h1:focus { outline: none; }
.confirm-page .actions { margin-top: 2rem; }
.confirm-page .confirm { padding-block: 0; }
.confirm-page .confirm-status { margin-top: 1rem; font-size: 1rem; }
.confirm-page .resend-form { width: min(100%, 26rem); margin: 2rem auto 0; text-align: left; }
.confirm-page .resend-form .error { margin: 0; font-size: .9375rem; }

/* ---------- Esperienza: la sera, quieta ---------- */

.evening { padding-block: var(--space) calc(var(--space) * 1.4); }
.evening-grid { display: grid; gap: clamp(3rem, 2rem + 4vw, 7rem); align-items: center; }
.evening .phone { --w: min(56vw, 240px); justify-self: center; }
.evening-lines { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); max-width: 34rem; }
.evening-lines .time { color: var(--accent); font-weight: 600; }
.evening-lines h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); }
.evening-lines p { color: var(--muted); }
.evening-final { padding-top: var(--space); text-align: center; }
.evening-final p { font: 500 clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem)/1.15 var(--font-title); letter-spacing: -.018em; max-width: 18ch; margin-inline: auto; }

/* ---------- Join DayBow ---------- */

.join {
  display: grid;
  gap: 3rem;
  padding-top: calc(var(--bar-h) + clamp(3rem, 2rem + 6vw, 7rem));
  padding-bottom: var(--space);
}
.join-intro .time { display: block; margin-bottom: 1rem; color: var(--accent); font-size: 1.125rem; font-weight: 600; }
.join-intro h1 { font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem); margin-bottom: .5rem; }
.join-intro .sub { font: 500 clamp(1.35rem, 1rem + 1.4vw, 2rem)/1.2 var(--font-title); letter-spacing: -.018em; }
.join-intro > p:not(.sub):not(.time) { max-width: 38ch; margin-top: 1.25rem; color: var(--muted); }
.join-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; counter-reset: s; }
.join-steps li {
  position: relative;
  padding: .8rem 0 .8rem 2.25rem;
  border-top: 1px solid var(--rule);
  counter-increment: s;
}
.join-steps li::before { content: counter(s); position: absolute; left: 0; color: var(--accent); font: 600 1rem/1.55 var(--font-num); }

.join-box {
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: 28px;
  background: color-mix(in oklch, var(--bg) 70%, var(--ink));
}
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field legend { font-weight: 500; }
.field legend { padding: 0; margin-bottom: .5rem; }
.optional { color: var(--muted); font-weight: 400; }

.form input[type="email"],
.form input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 1px solid color-mix(in oklch, var(--fg) 22%, transparent);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: max(16px, 1.0625rem);
  transition: border-color .2s;
}
.form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.form input[aria-invalid="true"] { border-color: var(--friction); }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 .5rem;
  border: 1px solid color-mix(in oklch, var(--fg) 22%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.segmented input { margin: 0; accent-color: var(--accent); }
.segmented label:has(:checked) {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 16%, transparent);
}
.segmented label:has(:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }
.segmented input:focus-visible { outline: none; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 44px;
  padding-block: .25rem;
  font-weight: 400 !important;
  font-size: 1rem;
  cursor: pointer;
}
.check input { flex: none; width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--accent); }
.error { color: var(--friction-text); font-size: .9375rem; }
.form-note { color: var(--muted); font-size: .875rem; text-align: center; }

.confirm { text-align: center; padding-block: 1rem; }
.confirm-mark { width: 88px; height: 88px; margin: 0 auto 1rem; color: #fff4de; display: block; }
.confirm h2 { margin-bottom: 1rem; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.confirm h2:focus { outline: none; }
.confirm p { color: var(--muted); max-width: 34ch; margin-inline: auto; }
.confirm strong { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.confirm [data-again] { margin-top: 1rem; }
.confirm-help { margin-top: 1.5rem; font-size: .9375rem; }
.confirm-help .link { display: inline; min-height: 0; padding: .6rem .25rem; }
.confirm-status { min-height: 1.5em; margin-top: .5rem; font-size: .9375rem; }
.confirm-status:empty { margin-top: 0; }
/* Il campo trappola dei bot: fuori dallo schermo (non display:none, che alcuni bot riconoscono). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.confirm:not([hidden]) .confirm-mark path { stroke-dasharray: 1; animation: draw 1.4s var(--ease) both; }
.confirm:not([hidden]) .confirm-mark circle { transform-origin: 15.3px 12.1px; animation: rise .8s .9s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* ---------- Dettagli e domande ---------- */

.faq { display: grid; gap: 3rem; padding-block: var(--space); }
.faq h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.facts { margin: 2rem 0 0; }
.facts div { display: grid; gap: .15rem; padding-block: 1rem; border-top: 1px solid var(--rule); }
.facts dt { color: var(--muted); font-size: .9375rem; }
.facts dd { margin: 0; }

.faq-list details { border-top: 1px solid var(--rule); }
.faq-list details:last-child { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-block: .75rem;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--accent);
  transition: transform .35s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 1.5rem; color: var(--muted); max-width: 60ch; }
@media (hover: hover) {
  .faq-list summary:hover { color: var(--accent); }
}

/* ---------- Footer ---------- */

.footer {
  display: grid;
  gap: 1.5rem;
  padding-top: 3rem;
  padding-bottom: calc(3rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 500 1.35rem/1 var(--font-title);
}
.footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.footer nav a:hover { color: var(--fg); }
.footer-base { display: grid; gap: .35rem; }
.footer-base p + p { margin-top: 0; }

/* ---------- CTA fissa su telefono ---------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 1.5rem var(--gutter-r) calc(12px + env(safe-area-inset-bottom)) var(--gutter-l);
  /* Fondo pieno in basso: Safari colora la sua barra con quello che trova lì, e deve essere il cielo, non il bottone. */
  background: linear-gradient(transparent, var(--bg) 55%);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s .45s;
}
.dock.is-shown { transform: none; visibility: visible; transition: transform .45s var(--ease); }

/* ---------- Comparsa allo scroll (solo con JS) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform 1.2s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.slow { transition-duration: 1.8s, 2.2s; transform: translateY(16px); }

/* ---------- 768: tablet verticale ---------- */

@media (min-width: 768px) {
  .wrap {
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }
  .bar { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); gap: .75rem; }
  .bar-nav { display: flex; gap: .1rem; }
  .bar-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .8rem;
    color: var(--muted);
    text-decoration: none;
    border-radius: 999px;
    transition: color .2s;
  }
  .bar-nav a[aria-current="page"] { color: var(--fg); }
  .bar .btn-small { display: inline-flex; }
  .menu-btn, .menu { display: none !important; }

  .feature { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2.5rem, 6vw, 8rem); }
  .feature:nth-of-type(even) { grid-template-columns: auto minmax(0, 1fr); }
  .feature:nth-of-type(even) .feature-text { order: 2; }
  .feature .phone { --w: 270px; }
  .feature .feature-visual .phone + .phone { --w: 230px; }

  .evening-grid { grid-template-columns: auto minmax(0, 1fr); }
}

/* Storie a scena ferma: testo e nastro a sinistra, telefono a destra, da tablet in su
   e in ogni finestra più larga che alta. */
@media (min-width: 768px), (orientation: landscape) {
  .js .story-stage {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "text phone" "ribbon phone";
    column-gap: clamp(1.5rem, 5vw, 6rem);
    align-items: center;
    padding-top: calc(var(--bar-h) + 2rem);
    padding-bottom: 2.5rem;
  }
  .js .story-text { align-self: center; }
  .js .story-visual .phone { --w: min(300px, 34vw, calc((100svh - var(--bar-h) - 5rem) * .476)); }
}

/* La CTA fissa serve solo su telefono, anche in orizzontale. */
@media (min-width: 768px) and (min-height: 501px) {
  .dock { display: none; }
}

@media (hover: hover) and (min-width: 768px) {
  .bar-nav a:hover { color: var(--fg); }
}

/* ---------- 1024: tablet orizzontale e laptop ---------- */

@media (min-width: 1024px) {
  .hero-ground .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: end;
  }
  .hero h1 { grid-row: 1 / span 3; align-self: end; }
  .hero-ground .wrap > :not(h1) { grid-column: 2; }
  .lead { margin-top: 0; }

  .js .story-visual .phone { --w: min(320px, calc((100svh - var(--bar-h) - 5rem) * .476)); }
  .feature .phone { --w: 310px; }
  .feature .feature-visual .phone + .phone { --w: 260px; }
  .feature { padding-block: calc(var(--space) * .7); }

  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6rem; }
  .join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6rem; align-items: start; }
  .join-box { margin-top: 2.5rem; }
}

/* ---------- 1440: desktop grande ---------- */

@media (min-width: 1440px) {
  .wrap { max-width: 1320px; }
  .feature .phone { --w: 330px; }
}

/* ---------- Telefono in orizzontale e schermi bassi ---------- */

@media (orientation: landscape) and (max-height: 500px) {
  .feature { grid-template-columns: minmax(0, 1fr) auto; }
  .feature:nth-of-type(even) { grid-template-columns: auto minmax(0, 1fr); }
  .feature .phone { --w: min(30vw, 220px); }
  .feature .feature-visual .phone + .phone { --w: min(24vw, 180px); }
  .js .story-stage {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "text phone" "ribbon phone";
    column-gap: 1.5rem;
    align-items: center;
  }
  .js .story-visual .phone { --w: min(30vw, calc((100svh - var(--bar-h) - 2rem) * .476)); }
  .story-step p { font-size: .9375rem; margin-top: .5rem; }
  .story-step h2, .story-step h3 { font-size: 1.5rem; }
  .story-order .ribbon-wrap { --cloud: 70px; }
  .axis { margin-top: 2rem; }
}

@media (max-height: 780px) {
  .hero .note { display: none; }
}

/* Schermi bassi (telefono in orizzontale, zoom forte): nell'hero restano il cielo, il nome e i bottoni. */
@media (max-height: 500px) {
  .hero-ground { padding-top: .9rem; padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
  .hero .wordmark { font-size: 2.5rem; }
  .hero .claim { font-size: 1.15rem; }
  .hero .lead, .hero .note, .hero-now { display: none; }
  .hero .actions { margin-top: .75rem; }
}

/* Telefono in verticale: nelle storie con il nastro la cornice non ci sta insieme a testo e nastro.
   Resta la versione semplice: il testo in alto e il nastro, più grande, al centro della scena.
   Le schermate vere si vedono nella home e in Funzioni. */
@media (max-width: 767px) and (orientation: portrait) {
  .js .story-ribbon .story-visual { display: none; }
  .js .story-ribbon .story-stage { grid-template-rows: auto minmax(0, 1fr); align-content: start; }
  .js .story-ribbon .ribbon-wrap { align-self: center; }
  .story-ribbon .ribbon { --h: 48px; }
}
/* Telefoni molto bassi: anche nella home il telefono lascia il posto al testo. */
@media (max-width: 767px) and (max-height: 600px) {
  .js .story-plain .story-visual { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .phone { translate: none; }
  .btn, .dock, .faq-list summary::after, .cap, .trip, .gap, .tag, .overlap, .story-step, .screen img, .menu-btn line { transition: none !important; }
  .confirm:not([hidden]) .confirm-mark path,
  .confirm:not([hidden]) .confirm-mark circle { animation: none; }
}