/* =========================================================
   COMPONENTES
   ========================================================= */

/* ---------------------------------------------------------
   1 · Loading / intro
   Coreografía calcada de brunosuraski.com: las letras suben
   una a una, el marco se descubre de abajo arriba y las fotos
   van rotando dentro. Luego todo se va en el orden inverso.
   Los tiempos y las curvas están en js/main.js (INTRO).
--------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
}

.loader__mark {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Marco fijo en el centro: las fotos se apilan y sólo se ve la primera.
   La rotación mueve la última al principio, como en el referente. */
.loader__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(250px, 30vw);
  height: min(300px, 36vh);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.loader__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.loader__frame img:first-child { opacity: 1; }

/* El nombre va pegado al margen inferior, a todo el ancho */
.loader__name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 4px 8px 0;
  font-size: var(--t-loader);
  font-weight: var(--w-bold);
  /* El interlineado deja justo el hueco que necesita la "g" para no
     cortarse contra el borde inferior */
  line-height: 1.14;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--fg);
  white-space: nowrap;
}
.loader__letter {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

/* Respuesta al clic: sin esto la interfaz no parece estar escuchando */
.nav a,
.hero__link,
.work__link,
.footer__up,
.footer__copy,
.footer__row a {
  transition: transform var(--dur-press) var(--ease-out);
}
.nav a:active,
.hero__link:active,
.footer__up:active,
.footer__copy:active,
.footer__row a:active { transform: scale(0.97); }
/* En los nombres grandes el gesto tiene que ser mucho más contenido */
.work__link:active { transform: scale(0.99); }

/* ---------------------------------------------------------
   2 · Cursor
   En reposo es un punto. Sobre cualquier cosa con la que se
   pueda interactuar sale al lado una pastilla de color con una
   palabra dentro, copiada de flerdesign.com: 80x36 de mínimo,
   radio 30, texto de 18px en semibold blanco, y colgada 17px a
   la derecha y 14px por debajo del puntero, que es su desfase
   exacto. Ellos usan su azul; aquí va el naranja de la casa.

   El punto sigue en difference para que se lea sobre cualquier
   fondo, pero en una capa aparte. En la misma que la pastilla, el
   blend le daría la vuelta a su color, que es justo lo que no
   puede cambiar: el mensaje es de color a propósito.
--------------------------------------------------------- */
/* El punto va en SU PROPIA capa, hermana de la pastilla y no dentro
   de ella. mix-blend-mode mezcla con el fondo del grupo al que
   pertenece, y una capa fija con z-index ya es un grupo: metido
   dentro del cursor, el punto se mezclaba contra el vacío de su
   propio contenedor y salía blanco siempre, sobre cualquier fondo.
   Suelto, su fondo es la página, que es contra lo que tiene que
   invertirse. Las dos capas las mueve el mismo transform. */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 249;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot__ball {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: width var(--dur-med) var(--ease-out),
              height var(--dur-med) var(--ease-out);
}
.cursor-dot.is-on .cursor-dot__ball { width: 5px; height: 5px; }

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 250;
  pointer-events: none;
  will-change: transform;
}

.cursor__pill {
  position: absolute;
  top: 14px;
  left: 17px;
  display: grid;
  place-items: center;
  min-width: 80px;
  height: 36px;
  padding-inline: 18px;
  border-radius: 30px;
  background: var(--orange);
  color: #fff;
  font-size: 18px;
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  /* Crece desde la esquina por la que cuelga, no desde su centro:
     así parece salir del puntero y no aparecer al lado */
  transform: scale(0.85);
  transform-origin: 0 50%;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
/* Pegado al borde derecho no cabe, así que se pasa al otro lado.
   Sin esto, apuntar al email de la nav la deja fuera de pantalla. */
.cursor.is-flip .cursor__pill {
  left: auto;
  right: 17px;
  transform-origin: 100% 50%;
}

.cursor.is-on .cursor__pill { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------------
   3 · Nav (Figma 700:30968)
   Tres columnas: sitio a la izquierda, menú centrado y
   contacto a la derecha.

   Va en mix-blend-mode: difference, que es lo que le permite
   cruzar el fondo claro, la tarjeta de proyectos y el footer
   negro sin cambiar de color a mano. Por eso la jerarquía del
   Figma (#222221 contra #7e7e7e) no se escribe en color sino
   en opacidad: un color fijo se invertiría con el resto y
   dejaría de significar lo mismo. Blanco al 100% sobre el
   fondo de la página sale #090a0c; al 52%, #7b7b7b.
--------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  padding: 34px var(--pad) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  mix-blend-mode: difference;
  color: #fff;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav.is-hidden { transform: translateY(-160%); opacity: 0; }

/* Las tres columnas van con el marcado de tres bloques (lugar ·
   menú · contacto), que es el de la home y el de Dots; los case
   studies con la nav antigua de dos bloques no lo tienen y siguen
   como estaban */
.nav:has(.nav__menu) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.nav__links {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3.2vw, 48px);
}
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); }
}
/* La nav va en difference: el label pinta blanco y se invierte */
.nav .label { color: #fff; }

/* Menú centrado */
.nav__menu {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(24px, 3vw, 46px);
  font-size: var(--t-nav);
  letter-spacing: -0.02em;
}
.nav__mark { font-weight: var(--w-bold); }

/* Las dos columnas de servicio: más pequeñas y en segundo plano */
.nav__meta {
  font-size: var(--t-meta);
  letter-spacing: -0.02em;
  opacity: 0.52;
}
.nav__place { text-transform: uppercase; }
.nav__contact {
  display: flex;
  justify-content: flex-end;
  gap: clamp(16px, 2vw, 31px);
}

@media (max-width: 860px) {
  .nav { padding-top: 20px; }
  .nav:has(.nav__menu) { grid-template-columns: 1fr auto; }
  .nav__mail,
  .nav__place { display: none; }
}
@media (max-width: 560px) {
  .nav:has(.nav__menu) { grid-template-columns: 1fr; }
  .nav__contact { display: none; }
  .nav__menu { justify-content: flex-start; }
}

/* ---------------------------------------------------------
   4 · Hero
--------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  /* 40px entre la frase y "Actualmente en", sobre el frame de 1512 */
  gap: clamp(24px, 2.65vw, 40px);
  /* 210px del borde superior */
  padding: clamp(120px, 13.9vw, 210px) var(--col-x) 0;
}
.hero__copy {
  font-size: var(--t-hero);
  font-weight: var(--w-book);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: min(821px, 100%);
}

/* Los tres iconos son parte de la frase.
   Cada SVG viene del Figma con el sangrado de su efecto incluido,
   así que la caja del archivo es ~1,3 veces la del icono. Se pinta
   a ese tamaño (la sangre es transparente) y el hueco que deja a
   los lados es justo el aire que el icono tiene en el diseño: por
   eso no llevan margen. El alto va en auto para que la proporción
   la marquen los atributos width/height del propio archivo. */
/* Un icono suelto al final de una línea, con su palabra en la
   siguiente, no se lee como parte de la frase: van juntos o saltan
   juntos. Es lo que hace que la frase rompa por donde rompe en el
   Figma sin escribir el salto a mano. */
.hero__pair { white-space: nowrap; }

.hero__icon {
  display: inline-block;
  height: auto;
  vertical-align: -0.31em;
}
.hero__icon--art   { width: 1.174em; }   /* 52,83px sobre 45 */
.hero__icon--code  { width: 1.356em; }   /* 61,04px sobre 45 */
.hero__icon--craft { width: 1.15em;  }   /* 51,75px sobre 45 */

.hero__now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* Al partirse en dos líneas, el hueco entre palabras no puede
     convertirse también en el hueco entre líneas */
  column-gap: 0.7em;
  row-gap: 0.15em;
  font-size: var(--t-now);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.hero__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.53em;
  color: var(--green);
}
@media (hover: hover) and (pointer: fine) {
  .hero__link:hover span:last-child { text-decoration: underline; }
}

/* Indicador "online": punto con halo. Va en em para que crezca
   con el texto al que acompaña (9,13px de halo 4,26 sobre 27,37). */
.status {
  position: relative;
  width: 0.334em; height: 0.334em;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0.156em rgba(61, 113, 30, 0.2);
  flex: none;
  align-self: center;
}
@media (prefers-reduced-motion: no-preference) {
  .status::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--green);
    animation: ping 2.4s var(--ease-io) infinite;
  }
}
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---------------------------------------------------------
   5 · Selected work (Figma 707:31017)
   Una sola tarjeta que mide un viewport menos el margen. Los
   nombres van centrados dentro y, al apuntar uno, su imagen
   llena la tarjeta.

   En reposo la tarjeta es el gris del Figma: hace falta que
   haya algo debajo, porque lo que entra en el hover no es un
   fondo de sección sino una imagen recortada a este marco.
--------------------------------------------------------- */
.work {
  position: relative;
  margin: var(--work-y) var(--col-x);
  min-height: calc(100svh - 2 * var(--work-y));
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vw, 90px) var(--gutter);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--slab);
}

/* Imagen del proyecto apuntado. Recortada a la tarjeta, no al
   viewport: la tarjeta ya mide una pantalla. */
.work__screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
/* La escala de partida la escribe el JS: 0.94 cuando la imagen entra
   desde nada o se va del todo, y 1 al saltar de un proyecto a otro
   (ahí sólo hay fundido, sin movimiento). */
.work__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(var(--from, 1));
  transition: opacity var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.work__shot.is-on {
  opacity: 1;
  transform: scale(1);
  transition-duration: var(--dur-slow);
}
/* Al saltar de un proyecto a otro, la que sale NO se desvanece: se queda
   opaca debajo mientras la nueva se funde encima. Si las dos se cruzaran
   a media opacidad se vería el gris de la tarjeta entre medias. */
.work__shot.is-under {
  opacity: 1;
  transform: scale(1);
  transition: none;
}
.work__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Velo para que el nombre y el label sigan siendo legibles */
.work__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.work__list {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  gap: clamp(36px, 4.4vw, 66px);
}

.work__item { text-align: center; }
.work__link {
  display: block;
  padding-block: 0.1em;
}
.work__name,
.work__tag {
  display: block;
  font-size: var(--t-project);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: color var(--dur-med) linear, transform var(--dur-med) var(--ease-out);
}
.work__name { font-weight: var(--w-bold); }
.work__tag  { font-weight: var(--w-book); }
/* El scroll mueve esta capa; el hover mueve la de fuera. Separadas para
   que no se pisen el transform. */
.work__shift {
  display: block;
  will-change: transform;
}

/* Sobre la imagen, el texto pasa a blanco */
.work.is-hovering .work__name,
.work.is-hovering .work__tag { color: rgba(255, 255, 255, 0.35); }
.work__item.is-active .work__name,
.work__item.is-active .work__tag { color: #fff; }

@media (max-width: 640px) {
  /* En móvil no hay hover: la imagen no puede secuestrar la pantalla */
  .work__screen { display: none; }
}

/* ---------------------------------------------------------
   6 · About (Figma 707:31032 y 707:31031)
   Dos tarjetas a la par: el texto en la amarilla y el juego
   en la negra.
--------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-inline: var(--col-x);
  padding-top: clamp(0px, 1vw, 14px);
  /* 188px hasta el footer */
  padding-bottom: clamp(80px, 12.4vw, 188px);
}

.about__card {
  position: relative;
  border-radius: var(--radius);
  /* 673px de alto sobre el frame de 1512 */
  min-height: clamp(400px, 44.5vw, 673px);
  padding: clamp(28px, 3.22vw, 49px);
}

/* --- La amarilla: label arriba, titular y texto abajo --- */
.about__card--note {
  background: var(--yellow);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}
.about__label {
  font-size: var(--t-nav);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.about__foot {
  display: grid;
  gap: clamp(16px, 1.55vw, 23px);
}
.about__title {
  font-size: var(--t-about);
  /* 365px sobre una tarjeta de 585: el titular va a dos líneas a
     propósito, y esa segunda línea es la que sostiene la mancha */
  max-width: min(365px, 76%);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}
.about__accent { color: var(--orange); }
.about__body {
  font-size: var(--t-body);
  line-height: 1.4;
}
/* El Figma deja una línea en blanco entre los dos párrafos */
.about__body p + p { margin-top: 1.4em; }

/* --- La negra: el rastro dentro y la marca debajo --- */
.about__card--dark {
  background: var(--ink-bg);
  overflow: hidden;
}
.about__mark {
  position: absolute;
  left: 13.56%;
  bottom: 10.43%;
  width: 24.61%;
  height: auto;
  z-index: 0;
}

/* Rastro de cards (referencia: flerdesign.com/studio)
   Valores sacados de su componente:
     entra  opacity 0 -> 1 · scale 0.5 -> 1 · blur 10px -> 0
     sale   opacity -> 0  · scale -> 0.5   · blur -> 10px  + rotateX 45°
   Su transición es un muelle (stiffness 500, damping 60, mass 1),
   ajustado en --ease-spring y --dur-trail: ver base.css, donde está
   la cuenta.
   Aquí el rastro vive dentro de la tarjeta negra, no en toda la
   sección: el marco es parte del juego. */
.trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 700px;
}
.trail__img {
  --tilt: 0deg;
  position: absolute;
  width: clamp(80px, 9.3vw, 140px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  filter: blur(10px);
  transform: translate(-50%, -50%) rotate(var(--tilt)) scale(0.5);
  will-change: transform, opacity, filter;
  transition: opacity var(--dur-trail) var(--ease-spring),
              filter var(--dur-trail) var(--ease-spring),
              transform var(--dur-trail) var(--ease-spring);
}
.trail__img.is-on {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) rotate(var(--tilt)) scale(1);
}
/* Al irse encoge otra vez y cae hacia atrás */
.trail__img.is-off {
  opacity: 0;
  filter: blur(10px);
  transform: translate(-50%, -50%) rotate(var(--tilt)) rotateX(45deg) scale(0.5);
}

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__card { min-height: 0; }
  .about__card--note { gap: var(--space-4); }
  .about__card--dark { min-height: 62vw; }
}

/* ---------------------------------------------------------
   7 · Footer que se desvela (referencia: brunosuraski.com)
   El footer está fijo al fondo, por detrás de todo. El contenido
   va por encima con fondo opaco y un hueco abajo de su misma
   altura: al llegar al final del scroll, el contenido se retira
   y lo deja a la vista. No hace falta JS para eso.
--------------------------------------------------------- */
.page {
  position: relative;
  z-index: 1;
  background: var(--bg);
  margin-bottom: var(--footer-h);
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-h);
  z-index: 0;
  background: var(--ink-bg);
  color: var(--ink-fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3) var(--pad) var(--space-4);
}
.footer .label { color: var(--ink-fg); }
.footer__top { display: flex; justify-content: flex-end; }
.footer__up {
  display: grid;
  place-items: center;
  width: 44px; height: 54px;
}
.footer__up img { width: 26px; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .footer__up:hover img { animation: nudge var(--dur-slow) var(--ease-out); }
}
@keyframes nudge {
  50% { transform: translateY(-8px); }
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(20px, 4vw, 64px);
}
.footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer__copy {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
}
.footer__copy img { width: 17px; height: 17px; }
.footer__year { margin-left: auto; }

/* --- Pie de la home --- */
/* La hora es la que se alinea con Home, About me y la firma; el sitio
   se queda justo encima. Por eso el bloque es sólo la hora y el sitio
   va colgado por fuera: la fila alinea por la línea de base del
   primer renglón de cada hijo, así que un bloque de dos líneas dejaría
   la hora por debajo de todo lo demás. */
.footer__place {
  position: relative;
  font-size: var(--t-nav);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
/* Un renglón por encima, sin ocupar sitio en la fila */
.footer__place span {
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: nowrap;
}

.footer__links {
  display: flex;
  gap: clamp(24px, 3.4vw, 52px);
  margin-left: clamp(0px, 6vw, 92px);
  font-size: var(--t-nav);
  letter-spacing: -0.02em;
}
.footer__links a { position: relative; }
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover::after { transform: scaleX(1); }
}
.footer__sign {
  margin-left: auto;
  font-size: var(--t-nav);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   8 · Cierre dentro del footer (referencia: riseatseven.com)
   Su receta, sin GSAP: la línea cruza de derecha a izquierda y
   cada carácter se asienta girando, escalonado, con easing
   back.inOut(4). Aquí el avance no lo manda el scroll de una
   sección sino cuánto footer se ha destapado ya, que es el
   mismo gesto: la frase termina de entrar justo cuando el
   footer acaba de aparecer entero. Los valores van en
   js/main.js (RISE).
--------------------------------------------------------- */
/* La frase se queda donde la pone el Figma, arriba del footer, pero
   no llega ahí quieta: el footer se destapa de abajo arriba, así que
   su borde superior es lo ÚLTIMO en aparecer y una frase clavada ahí
   no asoma hasta los últimos 75px de scroll, con la ola entera
   pasando escondida detrás de .page.
   Así que la frase no vive en un punto fijo: sale de debajo del canto
   del contenido y sube pegada a él hasta su sitio, donde se para. El
   recorrido a la vista pasa de 75px a ~385. Lo mueve js/main.js. */
.footer__thanks {
  /* La línea entra desde fuera de la página, así que el marco
     tiene que llegar a los dos bordes */
  margin-inline: calc(-1 * var(--pad));
  margin-top: clamp(8px, 2.8vw, 42px);
  will-change: transform;
  /* Recorta a los lados, que es de lo que se trata, pero deja que las
     letras suban por encima de la caja sin cortarse: el vaivén saca
     media letra fuera del renglón. Donde no haya clip, hidden recorta
     y la ola se ve igual, sólo que a ras. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 1em;
}
.thanks__line {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--t-thanks);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bg);
  will-change: transform;
}
.thanks__char {
  display: inline-block;
  will-change: transform;
}

@media (max-width: 860px) {
  .footer__links { margin-left: 0; }
}
@media (max-width: 640px) {
  .footer__row { gap: 12px 24px; }
  .footer__year,
  .footer__sign { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Menos movimiento no es cero animación: las opacidades y los colores
     ayudan a entender qué ha cambiado, así que se quedan. Lo que se va
     es el desplazamiento. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, filter !important;
    transition-duration: var(--dur-fast) !important;
  }
  .reveal { opacity: 1; transform: none; }
  .loader { display: none; }
  .work__shift { transform: none !important; }
  .work__screen { display: none; }
  .trail { display: none; }
  /* Sin scroll que la mueva, la frase se queda puesta y legible */
  .thanks__line { transform: none !important; }
  .thanks__char { transform: none !important; }
}