.hok-blob {
  position: absolute;
  top: var(--top, auto);
  right: var(--right, auto);
  bottom: var(--bottom, auto);
  left: var(--left, auto);

  z-index: -1;
  width: var(--w, 900px);
  height: var(--h, 860px);
  pointer-events: none;
  will-change: transform, opacity, filter;

  filter: blur(var(--b, 62px)) saturate(1.25);
  opacity: var(--a, .8);
  background:
    radial-gradient(58% 62% at 38% 34%,
      rgba(255, 150, 76, .95) 0%,
      rgba(255, 158, 96, .72) 34%,
      rgba(234, 129, 164, .42) 58%,
      rgba(255, 255, 255, 0) 76%),
    radial-gradient(52% 48% at 68% 62%,
      rgba(234, 129, 164, .78) 0%,
      rgba(174, 99, 149, .34) 46%,
      rgba(255, 255, 255, 0) 74%);
  border-radius: 58% 42% 47% 53% / 44% 51% 49% 56% !important;
  animation:
    hok-drift-a 46s ease-in-out infinite,
    hok-morph-a 62s ease-in-out infinite,
    hok-breathe 37s ease-in-out infinite,
    hok-tint 29s ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) - 9s), calc(var(--d, 0s) - 4s), calc(var(--d, 0s) - 13s);
}

.hok-blob--b {
  animation-name: hok-drift-b, hok-morph-b, hok-breathe, hok-tint;
  animation-duration: 58s, 78s, 46s, 35s;
  border-radius: 43% 57% 62% 38% / 55% 41% 59% 45% !important;
}

.hok-blob--c {
  animation-name: hok-drift-c, hok-morph-a, hok-breathe, hok-tint;
  animation-duration: 62s, 84s, 50s, 41s;
  border-radius: 51% 49% 38% 62% / 47% 62% 38% 53% !important;
}

@keyframes hok-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  22%  { transform: translate3d(7%, -5%, 0) scale(1.18) rotate(4deg); }
  45%  { transform: translate3d(13%, 6%, 0) scale(.92) rotate(-6deg); }
  68%  { transform: translate3d(-4%, 11%, 0) scale(1.28) rotate(9deg); }
  85%  { transform: translate3d(-9%, 3%, 0) scale(1.02) rotate(-3deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

@keyframes hok-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.06) rotate(0deg); }
  26%  { transform: translate3d(-11%, 8%, 0) scale(.86) rotate(-8deg); }
  52%  { transform: translate3d(5%, 14%, 0) scale(1.24) rotate(6deg); }
  74%  { transform: translate3d(12%, -6%, 0) scale(1.0) rotate(11deg); }
  100% { transform: translate3d(0, 0, 0) scale(1.06) rotate(0deg); }
}

@keyframes hok-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(.94) rotate(0deg); }
  30%  { transform: translate3d(9%, 10%, 0) scale(1.34) rotate(7deg); }
  58%  { transform: translate3d(-6%, -9%, 0) scale(1.05) rotate(-11deg); }
  81%  { transform: translate3d(-16%, 4%, 0) scale(.9) rotate(3deg); }
  100% { transform: translate3d(0, 0, 0) scale(.94) rotate(0deg); }
}

@keyframes hok-morph-a {
  0%   { border-radius: 58% 42% 47% 53% / 44% 51% 49% 56% !important; }
  25%  { border-radius: 41% 59% 63% 37% / 57% 38% 62% 43% !important; }
  50%  { border-radius: 66% 34% 39% 61% / 48% 64% 36% 52% !important; }
  75%  { border-radius: 37% 63% 55% 45% / 62% 45% 55% 38% !important; }
  100% { border-radius: 58% 42% 47% 53% / 44% 51% 49% 56% !important; }
}

@keyframes hok-morph-b {
  0%   { border-radius: 43% 57% 62% 38% / 55% 41% 59% 45% !important; }
  33%  { border-radius: 61% 39% 35% 65% / 40% 60% 40% 60% !important; }
  66%  { border-radius: 34% 66% 58% 42% / 63% 47% 53% 37% !important; }
  100% { border-radius: 43% 57% 62% 38% / 55% 41% 59% 45% !important; }
}

@keyframes hok-breathe {
  0%, 100% { opacity: calc(var(--a, .8) * .85); }
  50%      { opacity: calc(var(--a, .8) * 1.15); }
}

@keyframes hok-tint {
  0%, 100% { filter: blur(var(--b, 62px)) hue-rotate(-26deg) saturate(1.15); }
  50%      { filter: blur(var(--b, 62px)) hue-rotate(26deg) saturate(1.5); }
}

.hok-reveal > * {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(18px) scale(1.03);
  transition:
    opacity .5s var(--ease-reveal) var(--hok-delay, 0ms),
    clip-path 1.1s var(--ease-reveal) var(--hok-delay, 0ms),
    transform 1.3s var(--ease-reveal) var(--hok-delay, 0ms);
  will-change: opacity, clip-path, transform;
}

.hok-reveal.is-in > * {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
}

/*
 * El sticker se queda fuera del barrido. Es hermano de la imagen solo para
 * poder desbordarla, y el recorte le cortaba la sombra contra el borde de su
 * caja: eso era el cerco rectangular que se le veía detrás. El transform
 * tampoco se le toca, que lleva el suyo para el parallax. Entra con un
 * fundido y nada más.
 */
.hok-reveal > .hok-sticker {
  clip-path: none;
  transform: none;
  transition: opacity .7s var(--ease-reveal) var(--hok-delay, 0ms);
  will-change: opacity;
}

.hok-reveal.is-in > .hok-sticker {
  opacity: 1;
  clip-path: none;
}

/*
 * Dentro de una tarjeta enlazada el gesto lo dispara la tarjeta entera, no
 * solo la imagen: al pasar por el titular o por el botón, la foto responde
 * igual. Los valores son los mismos que el roll-over común.
 */
.hok-zoom { overflow: hidden; }
.hok-zoom .hok-ph { transition: transform .7s var(--ease-reveal), filter .7s var(--ease-reveal); }

@media (hover: hover) {
  a:hover > .hok-zoom .hok-img__el,
  a:hover > .hok-zoom .hok-ph {
    transform: scale(1.04);
    filter: saturate(1.12);
  }
}

@keyframes hok-drift-adentro {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  21%  { transform: translate3d(-8%, 5%, 0) scale(1.14) rotate(-5deg); }
  44%  { transform: translate3d(-19%, -4%, 0) scale(.93) rotate(6deg); }
  67%  { transform: translate3d(-12%, 8%, 0) scale(1.22) rotate(-8deg); }
  87%  { transform: translate3d(-5%, 2%, 0) scale(1.03) rotate(4deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

@media (max-width: 767px) {
  .hok-blob {
    /* En una pantalla estrecha una mancha de 900 px se lee como un lavado que
       lo cubre todo. Se le da un tamaño acorde al viewport y se ancla con el
       centro en el borde derecho: la masa de color queda fuera y solo entra
       su caída, que es lo que se busca. */
    --w-movil: min(var(--w), 118vw);
    width: var(--w-movil);
    height: var(--w-movil);
    right: calc(var(--w-movil) * -0.5);
    left: auto;
    animation-name: hok-drift-adentro, hok-morph-a, hok-breathe, hok-tint;
    animation-duration: 56s, 76s, 45s, 34s;
  }

  .hok-blob--b {
    animation-name: hok-drift-adentro, hok-morph-b, hok-breathe, hok-tint;
    animation-duration: 64s, 88s, 52s, 39s;
  }

  .hok-blob--c {
    animation-name: hok-drift-adentro, hok-morph-a, hok-breathe, hok-tint;
    animation-duration: 71s, 95s, 58s, 44s;
  }

  .hok-nav__bg .hok-blob {
    /* El menú es una cubierta completa: sus manchas la llenan y no siguen el
       tratamiento del fondo de página. */
    width: var(--w);
    height: var(--h);
    right: var(--right, auto);
    left: var(--left, auto);
    animation-name: hok-drift-a, hok-morph-a, hok-breathe, hok-tint;
    animation-duration: 46s, 62s, 37s, 29s;
  }

  .hok-nav__bg .hok-blob--b {
    animation-name: hok-drift-b, hok-morph-b, hok-breathe, hok-tint;
    animation-duration: 58s, 78s, 46s, 35s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hok-blob { animation: none; }

  .hok-reveal > *,
  .hok-reveal.is-in > * {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }

  .hok-img__el,
  .hok-zoom .hok-ph { transition: none; }

  .hok-sticker[data-hok-parallax] { animation: none; transform: none; }
  .hok-img:hover .hok-img__el,
  a:hover > .hok-zoom .hok-img__el,
  a:hover > .hok-zoom .hok-ph { transform: none; filter: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.hok-linea {
  display: block;
  overflow: hidden;
}

.hok-linea > span {
  display: block;
}

@keyframes hok-linea-sube {
  from { transform: translateY(108%); }
  to   { transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  .hok-linea > span {
    animation: hok-linea-sube var(--ease-reveal) both;
    animation-timeline: view();
    animation-range: entry 8% entry 78%;
    animation-delay: calc(var(--linea, 0) * -0.06s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hok-linea > span { animation: none; }
}

.hok-entra {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s var(--ease-reveal) var(--hok-delay, 0ms),
    transform .9s var(--ease-reveal) var(--hok-delay, 0ms);
  will-change: opacity, transform;
}

.hok-entra.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hok-entra,
  .hok-entra.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}