/* ============================================================================
 *  BASE  ·  paleta, tipografia, reset y utilidades
 * ----------------------------------------------------------------------------
 *  TODA la paleta vive en el bloque :root de aqui abajo. Cambiando esos
 *  valores cambia el sitio entero: hojas, rosas, cintas, botones e iconos.
 * ==========================================================================*/

:root {
  /* ---------------------------------------------------------------
   * PALETA  ·  sacada de la luz del olivar de las fotos
   * -------------------------------------------------------------*/

  /* Terracota — el color del ladrillo y de la tierra caliente */
  --terracota:          #b46a4c;
  --terracota-clara:    #cf8d6d;
  --terracota-oscura:   #8c4b33;
  --terracota-profunda: #6b3524;

  /* Olivo — los verdes de los arboles */
  --olivo:              #6f7b50;
  --olivo-claro:        #98a479;
  --olivo-oscuro:       #4b5537;
  --salvia:             #b8bfa1;

  /* Nude / papel — la piel del libro */
  --nude:               #e7d8c5;
  --nude-claro:         #f3e9dc;
  --crema:              #fbf6ee;
  --papel:             #faf3e8;
  --papel-sombra:       #e6d8c4;

  /* Rosas — cuatro tonos que construyen cada flor */
  --rosa-clara:         #f0cabc;
  --rosa-media:         #e3a998;
  --rosa-fuerte:        #cf8878;
  --rosa-trazo:         #ac6858;
  --rosa:               #d9a08e;   /* alias general */

  /* Follaje de los ornamentos */
  --hoja:               #8d9769;
  --hoja-clara:         #b0b88e;
  --hoja-oscura:        #5d6741;

  /* Dorado — filigranas y detalles finos */
  --dorado:             #c19a5c;
  --dorado-claro:       #e2c891;
  --dorado-oscuro:      #96733a;

  /* Tinta — los textos */
  --tinta:              #4a3a30;
  --tinta-suave:        #6f5c4e;
  --tinta-tenue:        #907c6c;

  /* Cintas / marcadores */
  --cinta-fondo:        var(--terracota);
  --cinta-borde:        var(--dorado-claro);
  --cinta-activa:       var(--terracota-oscura);

  /* ---------------------------------------------------------------
   * MEDIDAS  ·  --pw (ancho de pagina) lo fija el JS. Todo lo demas
   * se calcula a partir de el, asi el libro escala en bloque.
   * -------------------------------------------------------------*/
  --pw: 380px;
  --ph: 560px;
  /* Factor tipografico. Lo fija el JS: 1 con una sola pagina y algo menos
     con el libro abierto, donde la pagina es mas ancha en proporcion y el
     texto calculado sobre el ancho se saldria de alto. */
  --esc: 1;

  --t-xxs: calc(var(--pw) * .0255 * var(--esc));
  --t-xs:  calc(var(--pw) * .0300 * var(--esc));
  --t-sm:  calc(var(--pw) * .0350 * var(--esc));
  --t-md:  calc(var(--pw) * .0410 * var(--esc));
  --t-lg:  calc(var(--pw) * .0520 * var(--esc));
  --t-xl:  calc(var(--pw) * .0680 * var(--esc));
  --t-2xl: calc(var(--pw) * .0950 * var(--esc));
  --t-3xl: calc(var(--pw) * .1400 * var(--esc));

  --s0: calc(var(--pw) * .010);
  --s1: calc(var(--pw) * .020);
  --s2: calc(var(--pw) * .034);
  --s3: calc(var(--pw) * .054);
  --s4: calc(var(--pw) * .082);

  --radio: calc(var(--pw) * .012);

  /* Tipografia */
  --f-script: 'Great Vibes', 'Segoe Script', cursive;
  --f-libro:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Curva del volteo: arranque decidido, final suave (como el papel real) */
  /* Arranque decidido (la empujas) y caida lenta al final (el papel
     pesa y se posa). Nada de un ida y vuelta simetrico: eso se ve robotico. */
  --curva-hoja: cubic-bezier(.34, .72, .24, 1);
  --dur-hoja: 780ms;

  color-scheme: light;
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--f-libro);
  color: var(--tinta);
  background: #2b1d16;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }

/* Foco visible solo para teclado — no molesta al tocar en el movil */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
 * EL ESCENARIO  ·  la mesa sobre la que descansa el libro
 * -------------------------------------------------------------------*/
/* ---------------------------------------------------------------------
 *  LA MESA
 * ---------------------------------------------------------------------
 *  El libro tiene que estar apoyado en algo o parece flotando en el
 *  vacio. Debajo hay una mesa de nogal oscuro con una lampara calida
 *  cayendo desde arriba a la izquierda.
 *
 *  Todo son degradados: se pintan UNA vez y no vuelven a costar nada
 *  durante los volteos. Ni una imagen, ni un filtro.
 *    · vetas de la madera (rayas finas de anchos irregulares)
 *    · dos nudos, para que la veta no se vea repetida
 *    · el charco de luz calida de la lampara
 *    · una vinieta que apaga las esquinas y empuja la vista al centro
 * -------------------------------------------------------------------*/
.escenario {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    /* vinieta */
    radial-gradient(135% 105% at 46% 42%,
      rgba(0,0,0,0) 34%, rgba(0,0,0,.30) 68%, rgba(0,0,0,.62) 100%),
    /* charco de luz de la lampara */
    radial-gradient(95% 70% at 38% 4%,
      rgba(255,208,152,.20) 0%, rgba(255,196,140,.07) 42%, rgba(255,196,140,0) 68%),
    /* nudos de la madera */
    radial-gradient(ellipse 34% 20% at 14% 26%, rgba(126,72,40,.34), rgba(126,72,40,0) 72%),
    radial-gradient(ellipse 30% 24% at 86% 74%, rgba(74,40,20,.42), rgba(74,40,20,0) 72%),
    radial-gradient(ellipse 22% 16% at 62% 92%, rgba(126,72,40,.22), rgba(126,72,40,0) 74%),
    /* vetas. Muy flojas a proposito: la madera se tiene que INTUIR.
       Si se ven las rayas, deja de parecer madera y parece pana. */
    repeating-linear-gradient(93deg,
      rgba(0,0,0,.075)       0 1px,
      rgba(0,0,0,0)          1px 7px,
      rgba(255,214,168,.014) 7px 8px,
      rgba(0,0,0,0)          8px 19px,
      rgba(0,0,0,.045)       19px 20px,
      rgba(0,0,0,0)          20px 34px,
      rgba(255,214,168,.010) 34px 35px,
      rgba(0,0,0,0)          35px 57px),
    /* una segunda veta cruzada rompe la regularidad de la primera */
    repeating-linear-gradient(87deg,
      rgba(0,0,0,.035)       0 1px,
      rgba(0,0,0,0)          1px 29px,
      rgba(0,0,0,.02)        29px 30px,
      rgba(0,0,0,0)          30px 71px),
    linear-gradient(168deg, #4b3021 0%, #3a2416 46%, #24150c 100%);
}

/* Vinetas y textura del fondo (estatico, no cuesta nada) */
.escenario::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* opacidad normal, sin mezcla: el fondo ocupa toda la pantalla y una
     mezcla aqui obligaria a recomponerla entera en cada fotograma */
  opacity: .05;
}

/* ---------------------------------------------------------------------
 * PETALOS
 * ---------------------------------------------------------------------
 *  Cada petalo es un elemento con una animacion de transform. Eso lo
 *  anima el COMPOSITOR, en su propio hilo: el hilo principal no hace
 *  nada por fotograma y queda libre para el volteo de hoja.
 *
 *  Se anima SOLO transform. Si aqui se colara un top o un left animado,
 *  la animacion volveria al hilo principal y todo el ahorro se perderia
 *  de golpe.
 * -------------------------------------------------------------------*/
.petalos {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
/* Los pocos que se sueltan al pasar de hoja van por delante del libro */
.petalos--frente { z-index: 40; }

.petalo {
  position: absolute;
  top: -8vh;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: caer1;
  /* backface-visibility empuja al compositor a tratarlo como capa propia
     en los navegadores que aun no lo hacen solos. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.petalo--v2 { animation-name: caer2; }
.petalo--v3 { animation-name: caer3; }
.petalo--v4 { animation-name: caer4; }

/* Los sueltos caen una sola vez y desaparecen */
.petalo--suelto {
  top: 22vh;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.35,.05,.6,1);
}

/* Cuatro recorridos. Cambia el vaiven lateral y el giro para que no se
   vea que son el mismo bucle repetido. */
@keyframes caer1 {
  0%   { transform: translate3d(0,0,0)      rotate(0deg)   scaleX(1); }
  25%  { transform: translate3d(16px,28vh,0) rotate(80deg)  scaleX(.55); }
  50%  { transform: translate3d(-12px,56vh,0) rotate(170deg) scaleX(1); }
  75%  { transform: translate3d(14px,84vh,0) rotate(250deg) scaleX(.6); }
  100% { transform: translate3d(0,118vh,0)  rotate(340deg) scaleX(1); }
}
@keyframes caer2 {
  0%   { transform: translate3d(0,0,0)       rotate(20deg)  scaleX(.9); }
  30%  { transform: translate3d(-22px,34vh,0) rotate(-60deg) scaleX(.5); }
  60%  { transform: translate3d(18px,66vh,0)  rotate(-160deg) scaleX(1); }
  100% { transform: translate3d(-8px,118vh,0) rotate(-300deg) scaleX(.8); }
}
@keyframes caer3 {
  0%   { transform: translate3d(0,0,0)       rotate(0deg)   scaleX(.7); }
  40%  { transform: translate3d(26px,44vh,0)  rotate(120deg) scaleX(1); }
  70%  { transform: translate3d(-16px,78vh,0) rotate(210deg) scaleX(.45); }
  100% { transform: translate3d(6px,118vh,0)  rotate(300deg) scaleX(.9); }
}
@keyframes caer4 {
  0%   { transform: translate3d(0,0,0)       rotate(-10deg) scaleX(1); }
  35%  { transform: translate3d(-18px,38vh,0) rotate(70deg)  scaleX(.5); }
  65%  { transform: translate3d(20px,72vh,0)  rotate(150deg) scaleX(.95); }
  100% { transform: translate3d(-4px,118vh,0) rotate(260deg) scaleX(.6); }
}

/* Pestaña oculta: se congelan sin gastar nada */
.petalos-quietos .petalo { animation-play-state: paused; }

/* Movimiento reducido: quedan tres, quietos y repartidos */
.sin-petalos .petalo { animation: none; }
.sin-petalos .petalo:nth-child(1) { top: 18vh; }
.sin-petalos .petalo:nth-child(2) { top: 46vh; }
.sin-petalos .petalo:nth-child(3) { top: 72vh; }

/* ---------------------------------------------------------------------
 * TIPOGRAFIA DEL LIBRO
 * -------------------------------------------------------------------*/
.script {
  font-family: var(--f-script);
  font-weight: 400;
  line-height: 1.05;
  color: var(--terracota-oscura);
}

.versal {
  font-family: var(--f-libro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: var(--t-xs);
  color: var(--tinta-tenue);
  margin: 0;
}

.titulo {
  font-family: var(--f-script);
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--terracota-oscura);
  margin: 0;
  font-weight: 400;
}

.subtitulo {
  font-family: var(--f-libro);
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: .04em;
  color: var(--olivo-oscuro);
  margin: 0;
}

.parrafo {
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--tinta-suave);
  margin: 0;
}

.parrafo + .parrafo { margin-top: var(--s2); }

.destacado {
  font-family: var(--f-libro);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--terracota-oscura);
}

/* ---------------------------------------------------------------------
 * ICONOS Y ORNAMENTOS
 * -------------------------------------------------------------------*/
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: middle;
}

.orn--rosa { display: block; }

/* La guirnalda es una imagen data:URI que js/svg.js deja en --img-guirnalda.
   El aspect-ratio reproduce su viewBox (260 x 64), asi no hace falta
   conocer su alto ni provocar saltos de maquetacion al cargar. */
.guirnalda {
  display: block;
  width: 100%;
  max-width: calc(var(--pw) * .78);
  aspect-ratio: 260 / 64;
  background-image: var(--img-guirnalda);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.filigrana { width: 72%; height: auto; margin-inline: auto; display: block; }
.rombo     { width: 46%; height: auto; margin-inline: auto; display: block; }

/* ---------------------------------------------------------------------
 * UTILIDADES
 * -------------------------------------------------------------------*/
.centro { text-align: center; }

/* Los emojis de los textos heredan cuerpos enormes cuando caen dentro de
   un titulo caligrafico. Se les baja el tamaño y se les da su propia
   familia para que salgan a color en cualquier sistema. */
.emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: .58em;
  line-height: 1;
  vertical-align: .08em;
}

/* ---------------------------------------------------------------------
 * PREFERENCIA DE MOVIMIENTO REDUCIDO
 * -------------------------------------------------------------------
 *  Se apagan los recorridos largos. El volteo pasa a ser un fundido
 *  (lo resuelve libro.css) y los petalos se detienen (lo resuelve
 *  petalos.js leyendo la misma media query).
 * -------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .18s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
 * MODO LIGERO
 * ---------------------------------------------------------------------
 *  Lo pone js/ligero.js cuando mide que el equipo va justo. La regla al
 *  escribir aqui es una sola: SOLO adornos. Si al quitar algo el libro
 *  se ve distinto de un vistazo, no va en esta lista.
 *
 *  Se quedan intactos el papel, el borde rasgado, las rosas, la
 *  tipografia, los colores, el grano y el volteo en 3D. Lo que cae son
 *  cuatro capas que solo existen para el brillo del detalle y que en un
 *  equipo flojo cuestan mas que todo lo demas junto.
 * -------------------------------------------------------------------*/

/* 1. Los petalos. Es con diferencia lo mas caro que hay. */
.modo-ligero .petalos { display: none; }

/* 2. La sombra proyectada de la hebra del papel. Es un drop-shadow sobre
      una silueta recortada: el navegador tiene que recalcular la sombra
      del contorno rasgado entero mientras la hoja gira. Se sustituye por
      una sombra plana bajo el pliegue, que cuesta cero. */
.modo-ligero .hoja__fibra { filter: none; }

/* 3. La banda de luz que recorre la hoja al voltear. Es una capa mas del
      tamaño de la hoja componiendose encima durante todo el giro. */
.modo-ligero .hoja__brillo { display: none; }

/* 4. Los desenfoques de fondo. backdrop-filter obliga a copiar y desenfocar
      lo que hay detras en cada fotograma; en moviles antiguos es de lo
      peor que se puede pedir. El velo oscuro se queda, solo se va el
      desenfoque. */
.modo-ligero .final__fondo,
.modo-ligero .visor__cerrar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.modo-ligero .visor__cerrar { background: rgba(40,24,16,.62); }