/* ===================================================================
   NICO — 31 días, 31 canciones
   Sobre digital de un álbum. Portada real (iris) + carta + QR.
   Paleta CLARA: papel cálido, tinta marrón, dorado del iris como acento.
   =================================================================== */

:root {
  /* superficies (papel cálido) */
  --bg:          #f3ede1;
  --bg-1:        #efe8da;
  --bg-2:        #e8dfcd;   /* panel de la contraportada */
  --iris-green:  #4f5a41;   /* verde oliva del iris: fondo del hero y acento de texto */
  --hero-bg:     var(--iris-green);

  /* tinta */
  --ink:         #2c2721;
  --ink-dim:     #6d6454;
  --ink-faint:   #9c9483;

  /* acento dorado (ajustado para leer sobre claro) */
  --gold:        #987631;
  --gold-soft:   #a9812f;
  --gold-line:   #bda876;   /* filetes/hairlines cálidos */

  /* texto sobre la fotografía del hero (siempre claro) */
  --hero-ink:      #f6f1e6;
  --hero-ink-dim:  #e2dacb;

  --line:        rgba(44, 39, 33, 0.12);
  --line-mid:    rgba(44, 39, 33, 0.22);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 32rem;
  --gutter: clamp(1.25rem, 6vw, 5rem);   /* margen lateral común a todo */
}

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

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* sin fundido propio: cada elemento tiene su entrada, para que se note */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

::selection { background: var(--gold-line); color: var(--ink); }

/* ---------- tipografía utilitaria ---------- */

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
}
.eyebrow {
  font-size: 0.66rem;
  color: var(--iris-green);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- grano global (textura de papel, muy sutil) ---------- */

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- selector de idioma ---------- */

.lang-toggle {
  position: fixed;
  top: max(0.9rem, env(safe-area-inset-top));
  right: max(0.9rem, env(safe-area-inset-right));
  z-index: 350;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid rgba(246, 241, 230, 0.28);
  border-radius: 999px;
  background: rgba(20, 18, 14, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lang-toggle__btn {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: rgba(246, 241, 230, 0.5);
  transition: color 0.25s var(--ease);
}
.lang-toggle__btn.is-active { color: #f6f1e6; }
.lang-toggle__btn:hover, .lang-toggle__btn:focus-visible { color: #f6f1e6; outline: none; }

.lang-toggle__sep {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(246, 241, 230, 0.3);
}

/* ---------- barra de progreso de scroll (discreta) ---------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-line), var(--gold-soft));
  z-index: 300;
  will-change: transform;
}

/* ---------- revelado al hacer scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.line-draw {
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
.line-draw.is-visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; filter: none; transition: opacity 0.4s linear; }
  .line-draw { transform: none; transition: none; }
}

/* ===================================================================
   01 — HERO: fotografía real del iris que se funde con el papel
   =================================================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background:
    url('../assets/hero-pattern.svg') repeat;
  background-color: var(--hero-bg);
  background-size: 240px 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

/* la foto se muestra a su proporción original, centrada, como una lámina */
.hero__figure {
  position: relative;
  margin: 0;
  line-height: 0;
  max-width: min(100%, 27rem);
  max-height: calc(100svh - 2 * var(--gutter));
  border: 1px solid rgba(44, 39, 33, 0.10);
  box-shadow: 0 30px 70px -44px rgba(60, 48, 26, 0.6);
  will-change: transform;
}
.hero__img {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 2 * var(--gutter));
  width: auto;
  height: auto;
  filter: saturate(0.94) brightness(0.95) contrast(1.02);
  opacity: 0;
  animation:
    hero-in 2.1s var(--ease) 0.1s forwards,
    ken-burns 24s ease-in-out 2.2s infinite alternate;
}
@keyframes hero-in {
  from { opacity: 0; transform: scale(1.16); filter: saturate(0.94) brightness(0.95) contrast(1.02) blur(10px); }
  to   { opacity: 1; transform: scale(1);    filter: saturate(0.94) brightness(0.95) contrast(1.02) blur(0); }
}
@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}

.hero__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* velo superior para el rótulo */
    linear-gradient(to bottom, rgba(24,20,14,0.34) 0%, rgba(24,20,14,0) 18%),
    /* foco suave sobre el iris, para que NICO se lea con contraste */
    radial-gradient(ellipse 66% 54% at 50% 44%, rgba(24,20,14,0) 40%, rgba(24,20,14,0.22) 100%);
}

.hero__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7% 7% 6%;
  text-align: center;
  line-height: normal;
  overflow: hidden;   /* red de seguridad: nunca se sale del marco de la foto */
  /* el rótulo se calibra sobre el ancho REAL de la lámina (container query),
     no sobre el del viewport: en horizontal la altura manda y la foto
     (vertical) se vuelve mucho más estrecha que el viewport. El tamaño de
     .hero__frame no es intrínseco (position:absolute; inset:0), así que
     puede ser container sin colapsar. */
  container-type: inline-size;
}

.hero__eyebrow {
  font-size: clamp(0.6rem, 4.6cqw, 0.8rem);
  color: var(--hero-ink-dim);
  opacity: 0;
  animation: eyebrow-in 1.5s var(--ease) 0.8s forwards;
}
@keyframes eyebrow-in {
  from { opacity: 0; letter-spacing: 0.9em; text-indent: 0.9em; transform: translateY(8px); }
  to   { opacity: 1; letter-spacing: 0.44em; text-indent: 0.44em; transform: translateY(0); }
}

.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2.6vw, 1.2rem);
  margin: auto 0;   /* centrado en el espacio restante bajo el rótulo superior */
}
.hero__title {
  margin: 0;
  display: flex;              /* fila centrada de verdad: nunca se descentra */
  justify-content: center;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 24cqw, 5.2rem);
  line-height: 1;
  color: var(--hero-ink);
  text-shadow: 0 2px 30px rgba(20, 16, 10, 0.35);
  white-space: nowrap;
}
/* NICO se revela letra a letra (ver js/main.js); el tracking se hace con
   margin, no con letter-spacing, para que el espaciado sea simétrico. */
.hero__title .letter-in {
  display: inline-block;
  margin-right: 0.2em;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  animation: letter-in 0.85s var(--ease) forwards;
  animation-delay: calc(1.1s + var(--i, 0) * 0.05s);
}
.hero__title .letter-in:last-child { margin-right: 0; }
@keyframes letter-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero__dates {
  font-size: clamp(0.62rem, 5.6cqw, 0.9rem);
  color: var(--hero-ink-dim);
  text-shadow: 0 1px 16px rgba(20, 16, 10, 0.4);
  opacity: 0;
  animation: dates-in 1.5s var(--ease) 1.6s forwards;
}
@keyframes dates-in {
  from { opacity: 0; letter-spacing: 0.85em; text-indent: 0.85em; transform: translateY(8px); }
  to   { opacity: 1; letter-spacing: 0.42em; text-indent: 0.42em; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img {
    animation: none; opacity: 1; transform: none;
    filter: saturate(0.94) brightness(0.95) contrast(1.02);
  }
  .hero__eyebrow, .hero__dates, .hero__title .letter-in {
    animation: none; opacity: 1; transform: none; filter: none; letter-spacing: inherit;
  }
  .hero__eyebrow { letter-spacing: 0.44em; }
  .hero__dates { letter-spacing: 0.42em; }
}

/* ===================================================================
   02 — CARTA
   =================================================================== */

.letter {
  background: var(--bg);
  padding: 16vh var(--gutter) 14vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4rem;
}

.letter__eyebrow { margin-bottom: 0.4rem; }

.letter__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
/* palabra a palabra al entrar en pantalla (ver js/main.js) */
.letter__headline .word-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition: opacity 0.75s var(--ease), transform 0.85s var(--ease), filter 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.letter__headline.is-visible .word-in {
  opacity: 1; transform: translateY(0); filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .letter__headline .word-in { transition: opacity 0.3s linear; transform: none; filter: none; }
}

.letter__sub {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--iris-green);
  max-width: 22rem;
  line-height: 2;
}

.letter__rule {
  width: 3.2rem;
  height: 1px;
  background: var(--iris-green);
  margin: 1.2rem 0;
}

/* párrafos: bloque de carta, alineado a la izquierda para intimidad */
.letter__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: var(--measure);
  text-align: left;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.12rem, 4.4vw, 1.28rem);
  line-height: 1.72;
  color: #3a352b;
}
.letter__body em {
  font-style: italic;
  color: var(--ink);
}

.letter__close {
  margin-top: 3vh;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.letter__close p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
}

.letter__sign {
  margin-top: 3.5vh;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 6.5vw, 2rem);
  color: var(--iris-green);
}

/* ===================================================================
   03 — QR: contraportada del sobre
   =================================================================== */

.sleeve {
  background: url('../assets/sleeve-pattern.svg') repeat;
  background-color: var(--bg-2);
  background-size: 240px 240px;
  padding: 16vh var(--gutter) 18vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.2rem;
  position: relative;
}
.sleeve::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(72%, 34rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 90, 65, 0.4), transparent);
  transform: translateX(-50%) scaleX(0);
  transition: transform 1.1s var(--ease);
}
.sleeve.in-view::before { transform: translateX(-50%) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .sleeve::before { transition: none; transform: translateX(-50%) scaleX(1); }
}

.sleeve__eyebrow { margin-bottom: 0.2rem; }

.sleeve__plate {
  --pad: 1.1rem;
  --rx: 0deg;
  --ry: 0deg;
  display: block;
  padding: var(--pad);
  background: #ffffff;
  box-shadow: 0 20px 50px -28px rgba(60, 48, 26, 0.5);
  border: 1px solid rgba(44, 39, 33, 0.06);
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
  font: inherit;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease), box-shadow 0.45s var(--ease);
}
/* revelado: entra con un leve giro y escala, además del blur/fade base */
.sleeve__plate.reveal { transform: translateY(22px) scale(0.9) rotate(-3deg); }
.sleeve__plate.reveal.is-visible { transform: translateY(0) scale(1) rotate(0deg); }

.sleeve__plate:hover,
.sleeve__plate:focus-visible {
  transform: perspective(700px) translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 0 30px 60px -30px rgba(60, 48, 26, 0.6);
  outline: none;
}
.sleeve__plate:focus-visible {
  box-shadow: 0 0 0 2px var(--gold), 0 30px 60px -30px rgba(60, 48, 26, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .sleeve__plate { transition: box-shadow 0.3s linear; }
  .sleeve__plate:hover, .sleeve__plate:focus-visible { transform: none; }
  .sleeve__plate.reveal { transform: none; }
}
.sleeve__plate img {
  width: clamp(160px, 52vw, 220px);
  height: auto;
  display: block;
  image-rendering: pixelated; /* QR nítido al escalar */
}

.sleeve__caption {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--iris-green);
  line-height: 2;
  max-width: 18rem;
}

.sleeve__stamp {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--iris-green);
}

/* ===================================================================
   desktop
   =================================================================== */

@media (min-width: 760px) {
  .letter { padding: 20vh var(--gutter) 16vh; gap: 2.8rem; }
  .letter__body { font-size: 1.32rem; }
}

@media (min-width: 1024px) {
  .letter__body { line-height: 1.8; }
}

/* ===================================================================
   popup — elegir dónde escuchar
   =================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 14, 0.42);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }

.modal__panel {
  position: relative;
  width: min(100%, 22rem);
  background: var(--bg);
  border: 1px solid rgba(44, 39, 33, 0.1);
  box-shadow: 0 40px 90px -30px rgba(40, 30, 16, 0.5);
  padding: 2.6rem 1.9rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.modal.is-open .modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  appearance: none;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.modal__close:hover,
.modal__close:focus-visible { color: var(--ink); outline: none; }

.modal__eyebrow { margin: 0; }

.modal__question {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink);
}

.modal__options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

.modal__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--line-mid);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
              opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: 0s;
}
.modal.is-open .modal__option {
  opacity: 1;
  transform: translateY(0);
}
.modal.is-open .modal__option:nth-child(1) { transition-delay: 0.12s; }
.modal.is-open .modal__option:nth-child(2) { transition-delay: 0.2s; }
.modal__option:hover,
.modal__option:focus-visible {
  border-color: var(--gold);
  background: rgba(151, 118, 49, 0.06);
  transform: translateX(2px);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .modal__option { opacity: 1; transform: none; transition: border-color 0.3s linear, background 0.3s linear; }
  .modal__option:hover, .modal__option:focus-visible { transform: none; }
}
.modal__option-arrow {
  color: var(--gold);
  transition: transform 0.3s var(--ease);
}
.modal__option:hover .modal__option-arrow,
.modal__option:focus-visible .modal__option-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__panel { transition: opacity 0.2s linear; }
  .modal__panel { transform: none; }
}