/* ============================================
   IRIA · BASE · Variables, reset, tipografia
   ============================================ */

:root {
  /* Paleta principal */
  --cream: #F4E9D8;
  --cream-2: #FBF6EC;
  /* Mostres de vídeo / assets (evita halos en mòbil) */
  --welcome-world-plate: #F4E9D8;
  /* Fons del tancament: ha de ser EXACTAMENT el color que el navegador pinta al
     vídeo, o s'hi veu una ratlla horitzontal allà on comença.

     ⚠️ Dues coses que fan errar el tret:
     1. NO mostreig el fitxer de vídeo. El navegador el descodifica amb una
        matriu de color diferent i el pinta amb un altre to.
     2. NO mostreig la captura a prop de les vores del telèfon ni amb
        deviceScaleFactor > 1: el bisell fosc i el reescalat falsegen la
        mitjana i donen correccions que no són.
     Mesura bona: captura a escala 1 amb perfil sRGB, un tros ben endins del
     telèfon i per damunt d'on comença la IRIA. Script: scratchpad/calib.js. */
  --closing-bg: #f8e8d1;

  /* Mòbil · marges després d’amagar status-bar simulada */
  --pad-inline: max(20px, calc(env(safe-area-inset-left, 0px) + 16px));
  --pad-inline-end: max(20px, calc(env(safe-area-inset-right, 0px) + 16px));
  --pad-top-ui: max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
  --pad-bottom-ui: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  --paper: #FFF9EE;
  --ink: #1E1E1E;
  --muted: #6F665A;
  --rust: #B5523A;
  --rust-dark: #8F3C2A;
  --rust-light: #C45D43;
  --red-soft: #C65A5A;
  --mustard: #E3A857;
  --green: #2F4F4F;
  --green-soft: #DDE9DE;
  --line: #2A2119;
  --divider: rgba(42, 33, 25, 0.12);
  --glass-top: rgba(255, 249, 238, 0.62);
  --glass-bottom: rgba(255, 249, 238, 0.42);

  /* Sombres */
  --shadow-lg: 0 22px 60px rgba(30, 30, 30, .18);
  --shadow-md: 0 10px 24px rgba(30, 30, 30, .12);
  --shadow-sm: 3px 3px 0 rgba(30, 30, 30, .10);
  --shadow-card: 4px 4px 0 rgba(30, 30, 30, .12);

  /* Radius */
  --r-xl: 36px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 14px;

  /* Animation timings */
  --ease-out: cubic-bezier(.25, .8, .25, 1);
  --ease-in: cubic-bezier(.55, 0, .55, .2);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 600ms;
}

/* El clip de tancament en castellà té un cream una mica diferent del català;
   ajustem el fons de tancament (pantalla + capçalera + fons del vídeo) perquè
   el vídeo hi encaixi sense vora visible. */
:root[data-iria-lang="es"] {
  --closing-bg: #f6e3ca;
}

/* Fase de repòs. El bucle es codifica a part i el seu cream no és el del clip
   que parla, així que el fons del prototip s'hi ha d'acomodar mentre dura. Un
   sol valor per als dos idiomes, perquè el bucle és el mateix fitxer (el
   fotograma final del clip català). Guanya sobre :root[data-iria-lang="es"]
   perquè porta un id i això mana. */
#screen-18.is-idle-phase {
  --closing-bg: #f9e7cd;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(181, 82, 58, .18), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(47, 79, 79, .16), transparent 28%),
    linear-gradient(180deg, #F9F2E7 0%, #F4E9D8 42%, #EFE1CC 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* Utility classes */
.fr { font-family: 'Fraunces', Georgia, serif; }
.bn { font-family: 'Bebas Neue', sans-serif; }
.uppercase { text-transform: uppercase; }
.text-rust { color: var(--rust); }
.text-green { color: var(--green); }
.text-muted { color: var(--muted); }

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-radius: 4px;
}

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