/* ============================================================
   redesign.css — home (index.html).
   Timeline a una sola columna con raíl de marcas, bloque de firma
   abajo y efectos de scroll/resaltado. Reutiliza los tokens de color
   de siempre; aquí solo se ajustan layout y radios.
   ============================================================ */

body.redesign {
  /* Esquinas de las burbujas/pills un pelín más redondeadas que el
     sitio actual (14px), sin tocar los colores/tokens de siempre. */
  --tl-radius: 18px;
  --radius-md: 9px;
  /* Líneas del raíl y números de año en reposo: gris único. En claro,
     más claro que el --tl-year de base; en oscuro, uno propio más
     oscuro (ver abajo). */
  --tl-year: #e1e1e1;
}

[data-theme="dark"] body.redesign {
  --tl-year: #2e2e2e;
}

/* "Email"/"Socials", la hora del footer, "Developed in the USA" y
   "Currently in Madrid" en modo oscuro. */
[data-theme="dark"] body.redesign .contact__trigger,
[data-theme="dark"] body.redesign .clock,
[data-theme="dark"] body.redesign .site-footer__made,
[data-theme="dark"] body.redesign .redesign-id__sub {
  color: #7d7d7d;
}

/* #about ya no vive al principio del timeline: apunta a la burbuja
   de la certificación de Project Management de Esden (ver index.html).
   Este scroll-margin-top deja sitio para el header fijo al saltar ahí
   con el enlace "About" del menú. */
#about {
  scroll-margin-top: 90px;
}

/* ------------------------------------------------------------
   Timeline: raíl de marcas a la izquierda + columna de contenido.
   Una sola columna siempre (no solo en móvil), orden cronológico
   ascendente tal como aparece en el HTML.
   ------------------------------------------------------------ */
body.redesign .timeline {
  position: relative;
  display: block;
  max-width: 680px;
  margin: 0 auto;
  padding: 210px 28px 0;
  transition: none;
}

/* Raíl: lo rellena redesign-rail.js con .tl-tick posicionadas en
   absoluto, una por cada marca (mayores = año, menores = relleno).
   Estático, sin animación de scroll: mismo color y tamaño siempre. */
.tl-rail {
  position: absolute;
  top: 0;
  left: 28px;
  width: 40px;
  height: 100%;
  pointer-events: none;
}

.tl-tick {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
}

.tl-tick__line {
  display: block;
  height: 1px;
  width: 20px;
  background: var(--tl-year);
  transition: width 0.2s var(--ease), background-color 0.2s var(--ease);
}

.tl-tick--major .tl-tick__line {
  width: 28px;
}

/* Las rayitas sueltas de los extremos (antes del primer año, después
   del último) son algo más pequeñas que las del resto del raíl; la
   más externa de cada punta es la más pequeña, la siguiente hacia
   dentro queda en un tamaño intermedio. */
.tl-tick--edge .tl-tick__line {
  width: 12px;
}
.tl-tick--edge-mid .tl-tick__line {
  width: 16px;
}

/* Efecto "ruleta": una ventana de 7 marcas seguidas se queda un poco
   más larga y más oscura que el resto mientras se hace scroll. */
.tl-tick.is-active .tl-tick__line {
  background: #b2b2b2;
}
[data-theme="dark"] .tl-tick.is-active:not(.is-highlight) .tl-tick__line {
  background: #525252;
}
.tl-tick:not(.tl-tick--major):not(.tl-tick--edge):not(.tl-tick--edge-mid).is-active
  .tl-tick__line {
  width: 26px;
}
.tl-tick--major.is-active .tl-tick__line {
  width: 34px;
}
.tl-tick--edge.is-active .tl-tick__line {
  width: 18px;
}
.tl-tick--edge-mid.is-active .tl-tick__line {
  width: 22px;
}

/* Capa de los años: números sueltos, ANCLADOS a la columna de
   contenido (no al raíl), un poco encajados sobre el borde
   superior de su primera tarjeta — "encima y hacia dentro". */
.tl-labels {
  position: absolute;
  top: 0;
  left: 66px;
  width: 0;
  height: 100%;
  pointer-events: none;
}

.tl-yearlabel {
  position: absolute;
  left: 8px;
  color: var(--tl-year);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  transform: translateY(-50%);
  transition: font-size 0.2s var(--ease), color 0.2s var(--ease);
}

/* Efecto "ruleta": el número de un año dentro de la ventana activa
   crece un poco y se oscurece, igual que su marca en el raíl. */
.tl-yearlabel.is-active {
  font-size: calc(var(--fs-body) + 1.3px);
  color: #b2b2b2;
}
[data-theme="dark"] .tl-yearlabel.is-active:not(.is-highlight) {
  color: #525252;
}

/* Resaltado al abrir el popup de una burbuja: mismo crecimiento que
   la ruleta pero en azul, y siempre gana si además coincide con la
   ventana gris de la ruleta (va después en el CSS a propósito).
   Solo en tablet/escritorio: en móvil este efecto no se aplica (las
   clases is-highlight las sigue poniendo el JS, pero aquí no pintan
   nada por debajo de 641px). */
@media (min-width: 641px) {
  .tl-tick.is-highlight .tl-tick__line {
    background: #0768eb;
  }
  .tl-tick:not(.tl-tick--major):not(.tl-tick--edge):not(.tl-tick--edge-mid).is-highlight
    .tl-tick__line {
    width: 26px;
  }
  .tl-tick--major.is-highlight .tl-tick__line {
    width: 34px;
  }
  .tl-tick--edge.is-highlight .tl-tick__line {
    width: 18px;
  }
  .tl-tick--edge-mid.is-highlight .tl-tick__line {
    width: 22px;
  }

  .tl-yearlabel.is-highlight {
    font-size: calc(var(--fs-body) + 1.3px);
    color: #0768eb;
  }
}

body.redesign .tl-content {
  display: flex;
  flex-direction: column;
  gap: 52px;
  margin-left: 66px;
}

.tl-yeargroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.redesign .tl-content .bubble,
body.redesign .tl-content .pill {
  width: 100%;
  margin: 0;
  flex: none;
  min-height: 0;
}

body.redesign .tl-content .award {
  margin: 0;
  align-self: flex-start;
}

/* ------------------------------------------------------------
   Aparición al hacer scroll: cada burbuja/píldora/award entra con
   un fade + desplazamiento corto la primera vez que se cruza con el
   viewport (reveal.js). Sin IntersectionObserver, o si JS no llega
   a cargar, el elemento se queda tal cual (visible) porque la clase
   .reveal solo la añade el propio script.
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   Retrato ASCII: ya no es la animación de fotogramas (a este
   tamaño tan pequeño no se apreciaba y solo iba mal); se deja fijo
   en el frame 19, uno por tema, con el barrido de luz de siempre
   pasando por encima en bucle.
   ------------------------------------------------------------ */
body.redesign .redesign-id__ascii.ascii {
  width: 44px;
  aspect-ratio: 1140.8 / 1340;
  margin: 0;
  flex: none;
  /* La caja ya queda centrada con el texto por flexbox, pero la
     máscara del retrato deja el contenido visible un poco más
     arriba dentro de su propia caja; se compensa bajándolo un poco.
     scaleY lo achata un pelín (se veía demasiado alto/estrecho a
     este tamaño). */
  transform: translateY(4px) scaleY(0.92);
}

.redesign-id__ascii .ascii__frame {
  opacity: 1; /* estático: sin el fundido cruzado entre fotogramas */
}

.redesign-id__ascii .ascii__frame--dark {
  display: none;
}
[data-theme="dark"] .redesign-id__ascii .ascii__frame--light {
  display: none;
}
[data-theme="dark"] .redesign-id__ascii .ascii__frame--dark {
  display: block;
}

/* Barrido de luz continuo por encima del retrato, igual que el que
   recorre la firma al final de un artículo. Solo en tema claro: en
   oscuro (fondo ya oscuro, retrato oscuro) se veía raro y se quita. */
[data-theme="dark"] .redesign-id__ascii::after {
  display: none;
}

.redesign-id__ascii::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.45) 45%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.45) 55%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: ascii-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ascii-shine {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .redesign-id__ascii::after {
    animation: none;
    background-image: none;
  }
}

/* ------------------------------------------------------------
   Bloque de firma: avatar + nombre a la izquierda, Email/Socials
   a la derecha. Vive entre el timeline y el footer. El nombre va
   a la escala de un titular (como el "Ignacio Manzano" del hero
   original), bastante más grande que el texto de las burbujas.
   ------------------------------------------------------------ */
.redesign-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 680px;
  margin: 110px auto 0;
  padding: 0 28px;
}

.redesign-id__who {
  display: flex;
  align-items: center;
  gap: 14px;
}

.redesign-id__name {
  color: var(--text-strong);
  font-size: 1.125rem; /* 18px */
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.redesign-id__sub {
  margin-top: 3px;
  color: var(--tl-subtitle);
  font-size: var(--fs-tl);
}

.redesign-id__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Los popovers de Email/Socials cuelgan de este bloque, no de cada
   botón por separado: así los dos se abren siempre alineados al
   mismo borde derecho (el de "Socials"), sin que Email se salga por
   la derecha ni Socials cambie de sitio. Se abren hacia arriba
   igual que antes. */
.redesign-id__links .contact__item {
  position: static;
}

/* Más específico que la regla móvil de components.css
   (.contact__item:first-child .popover { left: 0; ... }), que si no
   ganaría en pantallas estrechas y el popup de Email se pegaría a la
   izquierda en vez de alinearse a la derecha con Socials. */
.redesign-id__links .contact__item .popover,
.redesign-id__links .contact__item:first-child .popover,
.redesign-id__links .contact__item:last-child .popover {
  left: auto;
  right: 0;
  transform: translate(0, 6px) scale(0.96);
}

.redesign-id__links .contact__item .popover[data-open="true"],
.redesign-id__links .contact__item:first-child .popover[data-open="true"],
.redesign-id__links .contact__item:last-child .popover[data-open="true"] {
  transform: translate(0, 0) scale(1);
}

@media (max-width: 640px) {
  body.redesign .timeline {
    padding: 140px 16px 0;
  }
  .tl-rail {
    left: 16px;
  }
  .tl-labels {
    left: 52px;
  }
  body.redesign .tl-content {
    margin-left: 52px;
  }
  /* Los textos en mayúsculas (Instagram, Selected by the PR Dept.)
     son largos: un pelín más pequeños para que quepan en una sola
     línea con las tarjetas ya más anchas. */
  body.redesign .tl-content .award {
    font-size: 10.5px;
    gap: 6px;
  }
  .redesign-id {
    margin-top: 72px;
  }
}

/* Mucho más aire entre el bloque de "Ignacio Manzano" y el footer
   (bandera / hora / visitas) que en el resto del sitio. */
body.redesign .site-footer {
  padding-top: 340px;
}

/* ------------------------------------------------------------
   Modales: mismo look "liquid glass", esquinas un poco menos
   redondeadas que en el sitio actual (22px → 16px).
   ------------------------------------------------------------ */
body.redesign .modal__card {
  border-radius: 16px;
}

/* El navegador dibuja un recuadro de foco al abrir el modal (el foco
   salta al botón de cerrar para el teclado); aquí se quita solo el
   indicador visual. */
body.redesign .modal__close:focus {
  outline: none;
}

/* Mismo recuadro negro de foco aparece en la burbuja/pill/award que
   sea el objetivo de un enlace #ancla (p. ej. #about) o que se
   navegue con teclado, porque ui.js les da tabindex para que Enter/
   Espacio abran su popup. Se quita el indicador visual aquí también. */
body.redesign .bubble:focus,
body.redesign .pill:focus,
body.redesign .award:focus {
  outline: none;
}
@media (max-width: 640px) {
  body.redesign .modal__card {
    border-radius: 16px 16px 0 0;
  }
}

/* ------------------------------------------------------------
   Popovers (Email / Socials): el contenido entra con el mismo
   efecto escalonado (fade + slide) que los enlaces del menú "+".
   ------------------------------------------------------------ */
body.redesign .popover__item,
body.redesign .popover__logo {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    color 0.2s var(--ease);
}

body.redesign .popover[data-open="true"] .popover__item,
body.redesign .popover[data-open="true"] .popover__logo {
  opacity: 1;
  transform: translateY(0);
}

/* De derecha a izquierda: la palabra más a la derecha aparece
   primero (nth-last-child(1) = la última, la de más a la derecha). */
body.redesign .popover[data-open="true"] .popover__item:nth-last-child(1),
body.redesign .popover[data-open="true"] .popover__logo:nth-last-child(1) {
  transition-delay: 0.06s;
}
body.redesign .popover[data-open="true"] .popover__item:nth-last-child(2),
body.redesign .popover[data-open="true"] .popover__logo:nth-last-child(2) {
  transition-delay: 0.12s;
}
body.redesign .popover[data-open="true"] .popover__item:nth-last-child(3),
body.redesign .popover[data-open="true"] .popover__logo:nth-last-child(3) {
  transition-delay: 0.18s;
}