/* The After-the-Tutorial Manual: console scura, ambra = errore, ciano = fixed.
   Mono = la voce della macchina. Serif = la voce di Bea. */

:root {
  --ink: #0d1a19;        /* console verde-petrolio */
  --ink-2: #132423;      /* finestra del log */
  --rule: #23393a;
  --paper: #e9e3d4;      /* testo caldo, color carta */
  --dim: #7d9290;
  --amber: #f2a93b;
  --cyan: #56d8e4;

  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  --wrap: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
  position: relative;
  z-index: 1;
}

/* campo anti-bot: fuori schermo, le persone non lo vedono */
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px; height: 1px;
  opacity: 0;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- striscia test mode (sparisce quando il modulo è collegato) ---------- */
.test-banner {
  position: sticky; top: 0; z-index: 10;
  padding: .55rem 1.25rem;
  background: var(--amber);
  color: var(--ink);
  font: 500 .75rem/1.4 var(--mono);
  text-align: center;
}

/* ---------- log che scorre dietro la pagina ---------- */
/* Solo nella fascia a destra della colonna dei testi: parte 3rem dopo
   il bordo dei contenuti e sfuma verso sinistra, quindi non passa mai
   dietro titoli, moduli o footer. */
.console-bg {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  left: calc(50% + var(--wrap) / 2 + 3rem);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 7rem);
}
.console-bg pre {
  margin: 0;
  padding: 0 2rem 0 0;
  font: 300 .72rem/2 var(--mono);
  color: var(--dim);
  opacity: .14;
  white-space: pre;
  will-change: transform;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 5rem 4rem;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-video, .hero-fallback, .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-video { object-fit: cover; }
.hero-fallback {
  background:
    radial-gradient(60rem 30rem at 85% 15%, rgba(86, 216, 228, .10), transparent 60%),
    radial-gradient(50rem 30rem at 10% 90%, rgba(242, 169, 59, .08), transparent 60%);
  animation: drift 24s ease-in-out infinite alternate;
}
.hero-video:not([hidden]) ~ .hero-fallback { display: none; }
.hero-overlay { background: linear-gradient(180deg, rgba(13,26,25,.2) 0%, rgba(13,26,25,.65) 100%); }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

.hero-inner { z-index: 1; }

.prompt {
  margin: 0 0 2.5rem;
  font: 400 .85rem/1.5 var(--mono);
  color: var(--dim);
}
.prompt-sign { color: var(--cyan); margin-right: .6em; }
.prompt-cmd { color: var(--paper); }
.cursor {
  display: inline-block;
  width: .55em; height: 1.1em;
  margin-left: .15em;
  vertical-align: -.2em;
  background: var(--cyan);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

h1 {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 13ch;
}

.lede {
  margin: 0 0 2.5rem;
  max-width: 34em;
  font-size: clamp(1.125rem, 2.2vw, 1.3rem);
  color: color-mix(in srgb, var(--paper) 82%, var(--ink));
}

/* ---------- modulo email ---------- */
.notify {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  max-width: 34rem;
}
.notify input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .95rem 1rem;
  font: 400 .9rem/1.2 var(--mono);
  color: var(--paper);
  background: rgba(13, 26, 25, .7);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.notify input::placeholder { color: var(--dim); }
.notify input:focus { outline: none; border-color: var(--cyan); }
.notify button {
  flex: 0 0 auto;
  padding: .95rem 1.25rem;
  font: 500 .85rem/1.2 var(--mono);
  color: var(--ink);
  background: var(--cyan);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.notify button:hover { background: color-mix(in srgb, var(--cyan) 85%, white); }
.notify button:disabled { opacity: .6; cursor: progress; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.form-msg {
  flex-basis: 100%;
  margin: .2rem 0 0;
  min-height: 1.4em;
  font: 400 .8rem/1.5 var(--mono);
}
.privacy {
  flex-basis: 100%;
  margin: 0;
  font: 400 .72rem/1.5 var(--mono);
  color: var(--dim);
}
.form-msg.ok { color: var(--cyan); }
.form-msg.bad { color: var(--amber); }

/* ---------- il numero ---------- */
.stat { padding-block: 7rem 5rem; }
.stat-num {
  margin: 0;
  font: 300 clamp(4rem, 15vw, 8.5rem)/1 var(--mono);
  letter-spacing: -.04em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.stat-num .of { color: var(--dim); }
.stat-text {
  margin: .75rem 0 .5rem;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.25;
}
.stat-source {
  margin: 0;
  font: 400 .75rem/1.5 var(--mono);
  color: var(--dim);
}

/* ---------- il log: errore ambra → fixed ciano ---------- */
.log { padding-block: 3rem 6rem; }
.log-window {
  background: color-mix(in srgb, var(--ink-2) 92%, transparent);
  border: 1px solid var(--rule);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.log-title {
  margin: 0;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font: 400 .72rem/1.4 var(--mono);
  color: var(--dim);
}
.log-list {
  list-style: none;
  margin: 0;
  padding: 1.1rem 1.1rem 1.4rem;
  font-family: var(--mono);
  font-size: clamp(.78rem, 1.9vw, .92rem);
  line-height: 1.6;
}
.entry { padding-block: 1.1rem; }
.entry + .entry { border-top: 1px dashed var(--rule); }
.entry p { margin: 0; display: flex; gap: .7em; }
.mark { flex: 0 0 auto; }

.err { color: var(--amber); transition: color .6s ease; }
.fix {
  color: var(--cyan);
  margin-top: .35rem !important;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s steps(28, end);
}
.entry.is-fixed .err { color: color-mix(in srgb, var(--amber) 45%, var(--ink)); }
.entry.is-fixed .fix { clip-path: inset(0 0 0 0); }

/* ---------- autrice ---------- */
.author { padding-block: 2rem 5rem; }
.author p {
  margin: 0;
  max-width: 30em;
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  line-height: 1.4;
  text-wrap: balance;
}

/* ---------- prezzo + secondo modulo ---------- */
.closing { padding-block: 3rem 7rem; }
.price {
  margin: 0 0 1.5rem;
  font: 400 1rem/1.4 var(--mono);
  color: var(--paper);
}

/* ---------- footer ---------- */
footer {
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--rule);
}
footer p {
  margin: 0;
  font: 400 .72rem/1.5 var(--mono);
  color: var(--dim);
}

/* fascia destra troppo stretta: niente scritte di sfondo */
@media (max-width: 1150px) {
  .console-bg { display: none; }
}

/* ---------- telefono ---------- */
@media (max-width: 640px) {
  .hero { padding-block: 3.5rem 3rem; }
  .prompt { margin-bottom: 1.75rem; }
  .notify button { flex: 1 1 100%; }
  .stat { padding-block: 5rem 3.5rem; }
  .log-list { padding-inline: .85rem; }
  /* sul telefono niente video: basta il poster, si risparmiano dati */
  .hero-video { display: none; }
}

/* ---------- riduci movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-fallback, .cursor { animation: none; }
  .fix { clip-path: none; transition: none; }
  .err { transition: none; }
  .hero-video { display: none; }
}