:root {
  --text: #dadada;
  --background: #080808;
  --video-loading-background: #000000;
  --safari-chrome-background: #000000;
}

html.seamless-edges {
  --video-loading-background: #1c1d1f;
  --safari-chrome-background: #1c1d1f;

  background-color: #1c1d1f;
}

html.seamless-edges body,
html.seamless-edges .landing,
html.seamless-edges .ink-background {
  background-color: #1c1d1f;
}

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--safari-chrome-background);
}

html {
  color-scheme: dark;
}

body {
  font-family: "IBM Plex Mono", monospace;
  color: var(--text);
}

/* =========================================================
   PÁGINA
   ========================================================= */

.landing {
  position: relative;
  width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--safari-chrome-background);
  isolation: isolate;
}

/* =========================================================
   VIDEO ÚNICO: SAFARI + IPAD + TELÉFONOS
   ========================================================= */

.video-background {
  position: absolute;
  inset: 0;
  z-index: 0;

  display: none;
  overflow: hidden;

  background: var(--video-loading-background);
}

.background-video {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  border: 0;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.18s ease;
}

html.use-video .video-background {
  display: block;
}

html.use-video .landing {
  background: var(--video-loading-background);
}

html.use-video.video-playing .background-video {
  opacity: 1;
}

/*
  Esto es lo crucial:
  Safari no debe montar ni renderizar el canvas de la animación.
*/
html.use-video .ink-canvas {
  display: none !important;
}

/*
  El MP4 ya contiene el destello y la viñeta.
*/
html.use-video .landing::before {
  background: transparent;
}


/*
  En teléfonos e iPad, el fondo se funde suavemente hacia el color de
  la interfaz del navegador en los extremos. Safari de Mac no recibe
  este degradado.
*/
html.use-video.seamless-edges .video-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      var(--safari-chrome-background) 0,
      rgba(28, 29, 31, 0.88) 22px,
      rgba(28, 29, 31, 0.35) 58px,
      transparent 96px,
      transparent calc(100% - 132px),
      rgba(28, 29, 31, 0.35) calc(100% - 82px),
      rgba(28, 29, 31, 0.9) calc(100% - 28px),
      var(--safari-chrome-background) 100%
    );
}

/* =========================================================
   NUEVA ANIMACIÓN EN VIVO: COMPUTADORA NO-SAFARI
   (canvas WebGL con shader de "tinta en movimiento",
   mucho más liviano que los filtros SVG animados anteriores)
   ========================================================= */

.ink-background {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;
  pointer-events: none;

  background: var(--video-loading-background);
}

.ink-background::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;

  /*
    Los extremos son completamente sólidos. La transparencia empieza
    únicamente después de la zona que se une con la interfaz del navegador.
  */
  background:
    linear-gradient(
      to bottom,
      var(--safari-chrome-background) 0,
      rgba(28, 29, 31, 0.88) 22px,
      rgba(28, 29, 31, 0.35) 58px,
      transparent 96px,
      transparent calc(100% - 132px),
      rgba(28, 29, 31, 0.35) calc(100% - 82px),
      rgba(28, 29, 31, 0.9) calc(100% - 28px),
      var(--safari-chrome-background) 100%
    );

  display: none;
}

html.seamless-edges .ink-background::after {
  display: block;
}

.ink-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  display: none;
  pointer-events: none;

  /*
    El canvas permanece oculto hasta que el primer frame está listo.
    Después aparece con un fade-in de 2.5 segundos.
  */
  opacity: 0;
  transition: opacity 2.5s ease;
}

html.use-live-animation .ink-canvas {
  display: block;
}

html.use-live-animation.ink-ready .ink-canvas {
  opacity: 1;
}

/*
  Mientras carga el shader (imagen + compilación), se ve el color base
  sólido en vez de la imagen estática sin animar (para no mostrar un
  "flash" feo del fondo quieto antes de que arranque la tinta).
*/
html.use-live-animation .landing {
  background-color: var(--video-loading-background);
}

/*
  Respaldo real: SOLO si el canvas termina fallando de verdad (WebGL no
  disponible, la imagen no pudo decodificarse por ningún método, etc.)
  mostramos la imagen estática en vez de quedarnos en gris para siempre.
*/
html.use-live-animation.ink-fallback .landing {
  background-image: url("assets/background-new.webp");
  background-size: cover;
  background-position: center;
}

/* Viñeta */
.landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0, 0, 0, 0.08) 100%
    );
}

/*
  En teléfonos e iPad el fundido debe terminar en #1c1d1f exacto.
  La viñeta se desactiva únicamente en esas versiones móviles.
*/
html.seamless-edges .landing::before {
  background: transparent;
}

/* Grid final */
.landing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 0V24M0 12H24' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");

  background-repeat: repeat;
  background-size: 14px 14px;
  background-position: center center;
}


html.seamless-edges .landing::after {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.35) 42px,
      #000 96px,
      #000 calc(100% - 132px),
      rgba(0, 0, 0, 0.35) calc(100% - 58px),
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.35) 42px,
      #000 96px,
      #000 calc(100% - 132px),
      rgba(0, 0, 0, 0.35) calc(100% - 58px),
      transparent 100%
    );
}

/* =========================================================
   TEXTO
   ========================================================= */

.content {
  position: relative;
  z-index: 5;

  width: 322px;
  min-height: 82px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: var(--text);
}

h1 {
  margin: 0 0 5px;

  font-size: 38.4px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: 0;

  white-space: nowrap;
}

.contact-link {
  display: block;

  color: var(--text);
  text-decoration: none;

  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
}

.contact-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

/* =========================================================
   TELÉFONO
   ========================================================= */

@media (max-width: 720px) {
  .landing {
    min-height: 100vh;
    min-height: 100svh;

    padding:
      max(24px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
  }

  .background-video {
    object-fit: cover;
    object-position: center center;
  }

  .content {
    width: 100%;
    max-width: 300px;
    min-height: auto;
  }

  h1 {
    font-size: clamp(26px, 8vw, 34px);
    white-space: nowrap;
  }

  .contact-link {
    font-size: 11px;
  }
}

/*
  prefers-reduced-motion se maneja directamente en el JavaScript del
  canvas: si el usuario lo activa, se dibuja un solo frame estático
  en vez de animar el shader.
*/
/* Fade-in de la landing cuando la navegación viene desde la página 404. */
html.from-404 body {
  opacity: 0;
  transition: opacity 650ms ease;
}

html.from-404.landing-visible body {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.from-404 body {
    opacity: 1;
    transition: none;
  }
}