/* Kalmo TV's website. The values are the brand's tokens (ktv-app: design/charte/tokens.json), with
   its rules: one dark theme, warm blacks and browns, a light that is never pure white, terracotta
   in small touches only, and slow, soft motion where only the veilleuse moves on its own (apart
   from the line under the logo). The home page is one screen; the legal pages scroll. */

@font-face {
  font-family: Unbounded;
  src: url(/fonts/Unbounded-Variable-latin.woff2) format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: Figtree;
  src: url(/fonts/Figtree-Variable-latin.woff2) format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --salle: #14100E;
  --salle-haute: #1F1915;
  --fauteuil: #2C2420;
  --ligne: #3A302A;
  --terracotta: #E2714E;
  --lumiere: #F5EDE4;
  --lumiere-douce: #BBAC9E;
  --lumiere-faible: #968779;
  --font-titre: Unbounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-texte: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --courbe-douce: cubic-bezier(0.22, 1, 0.36, 1);
  --courbe-sortie: cubic-bezier(0.4, 0, 1, 1);
  --duree-focus: 200ms;
  --duree-fondu: 240ms;
  --duree-veilleuse: 2400ms;
  /* The veilleuse lights up once the logo is there, then breathes. */
  --allumage: 600ms;
  --respiration: calc(var(--allumage) + 1400ms);
  color-scheme: dark;
}

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

html { background: var(--salle); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--salle);
  color: var(--lumiere);
  font: 400 16px/1.5 var(--font-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

a:focus-visible {
  outline: 2px solid var(--lumiere);
  outline-offset: 4px;
  border-radius: 4px;
}

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

/* ---------- The home screen ---------- */

body.is-home {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* One screen, no scroll, as long as everything fits; a very short window scrolls instead of cutting. */
@media (min-height: 460px) {
  html:has(body.is-home) { overflow: hidden; }
  body.is-home { height: 100vh; height: 100dvh; overflow: hidden; }
}

/* The light the veilleuse throws into the room. site.js centres it on the veilleuse (--vx, --vy);
   until then, or without JavaScript, it sits about where the veilleuse is. It covers the page
   exactly, so it can never make it wider. */
body.is-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle 75vmax at var(--vx, calc(50% + 0.2756 * min(520px, 74vw, 72vh))) var(--vy, 40%),
    #E2714E21,
    #E2714E0d 38%,
    #E2714E00 100%
  );
  pointer-events: none;
  animation:
    allume-lueur 1800ms var(--courbe-douce) var(--allumage) both,
    respire-lueur calc(var(--duree-veilleuse) / 2) ease-in-out var(--respiration) infinite alternate;
}

/* A dark room: the edges sink a little further into the dark. */
body.is-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, #0000004d 100%);
  pointer-events: none;
}

.home, .foot { position: relative; z-index: 1; }

.home {
  display: grid;
  place-items: center;
  min-height: 0;
}

.stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4.6vh, 48px);
  text-align: center;
}

.logo {
  margin: 0;
  width: min(520px, 74vw, 72vh);
  line-height: 0;
  animation: monte 1100ms var(--courbe-douce) 120ms both;
}

.logo-svg { display: block; width: 100%; height: auto; overflow: visible; }

.halo, .coeur {
  transform-box: fill-box;
  transform-origin: center;
}

/* As in the app's Veilleuse: the glow swells by 15 % and brightens, the core by 6 %. */
.halo {
  animation:
    allume-halo 1400ms var(--courbe-douce) var(--allumage) both,
    respire-halo calc(var(--duree-veilleuse) / 2) ease-in-out var(--respiration) infinite alternate;
}
.coeur {
  animation:
    allume-coeur 1400ms var(--courbe-douce) var(--allumage) both,
    respire-coeur calc(var(--duree-veilleuse) / 2) ease-in-out var(--respiration) infinite alternate;
}

/* The line under the logo, one sentence at a time (site.js). */
.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: min(21em, 100%);
  color: var(--lumiere-douce);
  font: 500 clamp(18px, 0.85rem + 1.15vw, 30px) / 1.38 var(--font-titre);
  letter-spacing: -0.01em;
  text-wrap: balance;
  animation: apparait 900ms var(--courbe-douce) 1000ms both;
}
.tagline.is-live { animation: none; }
.lit { color: var(--lumiere); }

.phrase { display: block; }

.word {
  display: inline-block;
  opacity: 0;
  translate: 0 0.28em;
  transition:
    opacity 800ms var(--courbe-douce),
    translate 800ms var(--courbe-douce);
  transition-delay: calc(var(--i) * 55ms);
}
.phrase.is-in .word { opacity: 1; translate: 0 0; }
.phrase.is-out .word {
  opacity: 0;
  translate: 0 -0.12em;
  transition-duration: 420ms;
  transition-timing-function: var(--courbe-sortie);
  transition-delay: calc(var(--i) * 16ms);
}

/* Measuring every sentence once, out of sight, keeps the logo still when the next one is longer. */
.tagline-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  inset: auto;
  animation: none;
}

.badge {
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--fauteuil);
  color: var(--lumiere-douce);
  font: 700 12px/16px var(--font-texte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: monte 900ms var(--courbe-douce) 1400ms both;
}

/* ---------- Footer, on every page ---------- */

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--lumiere-faible);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.is-home .foot { animation: apparait 900ms var(--courbe-douce) 1700ms both; }

.foot-notice { margin: 0; max-width: 46em; text-wrap: balance; }

/* Two groups, the legal pages and the studio with the other language, each wrapping as a block. */
.foot-links, .foot-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
}
/* On the narrowest phones, the four legal links go two by two rather than three and one. */
@media (max-width: 380px) {
  .foot-group:first-child { max-width: 17em; }
}
.foot-links a {
  color: var(--lumiere-douce);
  text-decoration: none;
  transition: color var(--duree-focus) var(--courbe-douce);
}
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--lumiere); }
.foot-studio { font-weight: 700; }

/* ---------- Legal pages ---------- */

.is-doc .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 24px 8px;
}
.top-logo { display: block; line-height: 0; }
.top-logo img { width: 122px; height: auto; }
.top-lang {
  color: var(--lumiere-douce);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duree-focus) var(--courbe-douce);
}
.top-lang:hover { color: var(--lumiere); }

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  animation: monte 700ms var(--courbe-douce) both;
}
.doc h1 {
  margin: 32px 0 8px;
  font: 600 clamp(28px, 1.2rem + 2.4vw, 40px) / 1.2 var(--font-titre);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.doc h1 + p { margin: 0 0 40px; color: var(--lumiere-faible); font-size: 14px; }
.doc h1 + p em { font-style: normal; }
.doc h2 {
  margin: 44px 0 12px;
  font: 600 20px/28px var(--font-titre);
  text-wrap: balance;
}
.doc p, .doc li {
  max-width: 65ch;
  color: var(--lumiere-douce);
  font-size: 17px;
  line-height: 1.65;
}
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 1.25em; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--terracotta); }
.doc strong { color: var(--lumiere); font-weight: 600; }
.doc em { font-style: italic; }
.doc a {
  color: var(--lumiere);
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.doc code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--fauteuil);
  color: var(--lumiere);
  font: 500 0.88em/1 ui-monospace, "SF Mono", Menlo, monospace;
}
.is-doc .foot {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ligne);
}

/* ---------- 404 ---------- */

.logo-small { width: min(244px, 60vw); animation: none; }
.logo-small img { width: 100%; height: auto; }
.lost {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font: 600 clamp(22px, 1rem + 1.6vw, 28px) / 1.3 var(--font-titre);
  letter-spacing: -0.01em;
}
.lost span { color: var(--lumiere-douce); font-size: 0.72em; }
.lost-body { margin: 0; color: var(--lumiere-douce); line-height: 1.8; }
.lost-body a { color: var(--lumiere); text-decoration-color: var(--terracotta); text-underline-offset: 3px; }

/* ---------- Motion ---------- */

@keyframes monte { from { opacity: 0; translate: 0 8px; } }
@keyframes apparait { from { opacity: 0; } }

@keyframes allume-halo { from { opacity: 0; transform: scale(0.4); } to { opacity: 0.7; transform: scale(1); } }
@keyframes respire-halo { from { opacity: 0.7; transform: scale(1); } to { opacity: 1; transform: scale(1.15); } }
@keyframes allume-coeur { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes respire-coeur { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes allume-lueur { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes respire-lueur { from { opacity: 0.7; } to { opacity: 1; } }

/* Fewer animations asked: nothing moves on its own, sentences change with a short fade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .word, .phrase.is-out .word {
    translate: none;
    transition: opacity var(--duree-fondu) linear;
    transition-delay: 0s;
  }
}