/* MidiForge — midiforge.app
   Un seul écran, centré, noir. Le rendu passe derrière, fondu en haut et en bas.
   Titre en Instrument Serif italique, texte en Barlow, logotype en Cinzel.
   Polices servies depuis ce dépôt : aucune requête vers un tiers. */

@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-300-latin.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --black: #000;
  --copper: #c88958;
  --copper-bright: #eba66c;

  --heading: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --mark: "Cinzel", Georgia, serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));

  scrollbar-color: #262626 var(--black);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

::selection { background: rgba(235, 166, 108, 0.3); color: #fff; }
:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 4px; }

body {
  margin: 0;
  background: var(--black);
  color: #fff;
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  caret-color: #fff;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
h1 { margin: 0; }
p { margin: 0; }

/* ---------- verre liquide ---------- */

.glass {
  background: rgba(255, 255, 255, 0.045);
  background-blend-mode: luminosity;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: none;
  box-shadow:
    4px 4px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

/* Le filet lumineux : un dégradé masqué en anneau, vif aux extrémités, éteint au milieu. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(255, 255, 255, 0.5) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- la page ---------- */

.page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(2rem, 6vh, 4rem) var(--gutter-r) clamp(1.5rem, 4vh, 2.5rem) var(--gutter);
  text-align: center;
}

/* Le rendu reste à sa forme : plein cadre sur téléphone, bande centrée au-delà. */
.film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: min(100%, 540px);
  height: 100%;
  margin-inline: auto;
  object-fit: cover;
  /* On vise le haut du rendu : les notes restent en vue, le clavier descend
     sous le texte, dans le fondu du bas. */
  object-position: 50% 22%;
}

/* Fondus noirs, pour que la bande se fonde dans le noir de la page. */
.fade {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.fade.veil { inset: 0; background: rgba(0, 0, 0, 0.48); }
.fade.top { top: 0; left: 0; right: 0; height: 30svh; background: linear-gradient(to bottom, #000 12%, transparent); }
.fade.bottom {
  bottom: 0; left: 0; right: 0; height: 58svh;
  background: linear-gradient(
    to top,
    #000 30%,
    rgba(0, 0, 0, 0.95) 55%,
    rgba(0, 0, 0, 0.5) 76%,
    transparent
  );
}
.fade.sides { display: none; }

.content {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}

.wordmark {
  font-family: var(--mark);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: clamp(0.78rem, 3.2vw, 0.95rem);
  color: rgba(255, 255, 255, 0.85);
}

.wordmark b { font-weight: 700; color: var(--copper); }

h1 {
  font-family: var(--heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 13ch;
  text-wrap: balance;
}

.lead {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 300;
  font-size: 0.95rem;
  max-width: 34ch;
}

/* ---------- inscription ---------- */

.signup { display: grid; gap: 1rem; justify-items: center; width: 100%; }

.field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(30rem, 100%);
}

/* flex-basis auto : avec `flex: 1` seul, l'enveloppe tombait à zéro de large. */
.field .glass { flex: 1 1 auto; min-width: 0; border-radius: 999px; }

.field input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.9rem 1.4rem;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.field input:focus { outline: none; }
.field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.field .glass:focus-within { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.3); }

/* Piège à robots : hors écran, hors clavier. `.field .pot` doit l'emporter sur
   `.field input` ci-dessus, qui remettrait le champ dans le flux et rognerait
   la moitié de la pilule. */
.pot, .field .pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
}

button.go {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.9rem 1.4rem;
  border: 0;
  border-radius: 999px;
  color: #000;
  background: #fff;
  cursor: pointer;
  transition: background-color 250ms var(--ease), transform 180ms var(--ease);
}

button.go svg { width: 16px; height: 16px; }
button.go:hover { background: rgba(255, 255, 255, 0.88); }
button.go:active { transform: translateY(1px); }
button.go[disabled] { background: rgba(255, 255, 255, 0.45); cursor: progress; }

.fine {
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  max-width: 36ch;
}

.fine.error { color: #ff9f8f; }

.done {
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem 1.6rem;
  border-radius: 20px;
  width: min(30rem, 100%);
}

.done strong { font-family: var(--heading); font-style: italic; font-weight: 400; font-size: 1.5rem; color: #fff; }
.done span { font-size: 0.85rem; font-weight: 300; color: rgba(255, 255, 255, 0.6); }

/* ---------- barre de pied ---------- */

.bar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
}

.bar nav { display: flex; gap: 1.5rem; }
.bar a { color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 250ms var(--ease); }
.bar a:hover { color: rgba(255, 255, 255, 0.7); }

/* ---------- grands écrans ---------- */

@media (min-width: 768px) {
  .bar { flex-direction: row; justify-content: space-between; }

  /* Bande plus large : le cadrage coupe dans le rendu, le clavier descend sous
     le texte au lieu de passer derrière. */
  .film { width: min(100%, 720px); }

  /* Le noir mord 130 de chaque côté, sinon on voit le rectangle. */
  .fade.sides {
    display: block;
    inset: 0;
    background:
      linear-gradient(to right, #000 0%, transparent calc(50% - 230px)),
      linear-gradient(to left, #000 0%, transparent calc(50% - 230px));
  }

  .fade.top { height: 26vh; }
  .fade.bottom { height: 48vh; }
}

/* ---------- pages de texte ---------- */

.prose {
  max-width: 40rem;
  margin-inline: auto;
  padding: 4rem var(--gutter-r) 4rem var(--gutter);
  display: grid;
  gap: 1.1rem;
  text-align: left;
}

.prose h1 { font-size: clamp(2rem, 7vw, 3rem); max-width: none; line-height: 0.95; }
.prose h2 { margin: 1.75rem 0 0; font-family: var(--body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-bright); }
.prose p, .prose li { color: rgba(255, 255, 255, 0.6); font-size: 0.92rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.prose a { color: rgba(255, 255, 255, 0.85); text-underline-offset: 4px; }
.prose a:hover { color: var(--copper-bright); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}