/*
 * iron.cat — superficie de pelo viva
 *
 * Contrato compartido por el Brand Kit y Homepage V3. El motor WebGL añade
 * `.fur-field-surface`, el canvas y `.fur-field-ready`; cada página solo decide
 * qué textura, velo y contenido coloca encima.
 */

.fur-field-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  touch-action: pan-y pinch-zoom;
}

/* El relevo del motor CSS al lienzo WebGL, SIN tirón.

   Antes esto era `animation: none !important; transform: none !important`, y ahí
   estaba el golpe: las dos capas van a mitad de un ciclo de 14 s y 21 s, así que
   cuando llega el lienzo están en `translate(-82.88px, -2.16px) scale(1.14)`
   —medido en la intro a 1440×900— y volvían a la identidad EN UN FOTOGRAMA.
   82,9 px de desplazamiento y un 14 % de escala de golpe, sobre un elemento que
   ocupa la pantalla entera. La deriva normal es de 0,000 px por fotograma, o sea
   que ese salto era literalmente lo único que se movía de verdad.

   `animation-play-state: paused` para el ciclo pero CONSERVA el transform
   interpolado del momento: la capa se queda exactamente donde estaba. Nada salta.

   `will-change` se suelta igual: la animación ya no avanza y no hace falta
   mantener la capa promovida en el compositor. */
.fur-field-surface.fur-field-ready,
.fur-field-surface.fur-field-ready > i {
  animation-play-state: paused !important;
  will-change: auto;
}

/* El `::before` de las superficies genéricas del kit: solo pausa. */
.fur-field-surface.fur-field-ready:not(.ic-fur-live)::before {
  animation-play-state: paused !important;
  will-change: auto;
}

/* El lienzo entra fundido en vez de aparecer. Aunque las capas de debajo ya no
   salten, el cambio de composición —tres capas CSS a un solo render WebGL— se
   percibe como corte si es instantáneo. */
.fur-field-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Una ANIMACIÓN, no una transición. `brand-motion.js` inserta el `<canvas>` y
   marca la superficie como lista en el mismo fotograma, así que el elemento nace
   ya en su estado final y una transición no tiene de dónde interpolar: medido,
   entraba a opacidad 1 desde el primer frame. Una animación sí corre al
   insertarse. */
.fur-field-ready > .fur-field-canvas {
  animation: fur-field-fade-in 760ms var(--ic-ease-soft, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* FUNDIDO CRUZADO, no apilado.
   El lienzo entraba ENCIMA de un composite CSS que seguía opaco, así que
   durante casi un segundo se veían dos versiones distintas del mismo pelaje
   superpuestas —el `::before` va enmascarado, escalado y derivando, el lienzo
   no— y eso es lo que se percibía como un parpadeo raro. Las capas CSS se
   retiran al mismo ritmo al que entra el lienzo, así que en todo momento hay
   una sola imagen de pelo en pantalla.

   La textura base del elemento se queda: es la misma imagen sin máscara ni
   deriva, o sea la más parecida a lo que pinta el lienzo, y hace de suelo si el
   contexto WebGL se pierde. */
/* Dos animaciones a la vez sobre el mismo pseudo-elemento, cada una con su
   estado: el ciclo de deriva queda PAUSADO —conservando su transform, que es lo
   que evita el salto— y encima corre el fundido de salida.

   Hace falta la lista de dos porque `animation-play-state` es una sola
   propiedad para todas las animaciones del elemento: con un `paused` global,
   el propio fundido se quedaba congelado en su primer fotograma y el `::before`
   no bajaba nunca de 0,82. Medido. */
.ic-fur-live.fur-field-ready::before {
  animation-name: ic-fur-primary-flow, fur-field-layer-out;
  animation-duration: 14s, 760ms;
  animation-timing-function: linear, var(--ic-ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
  animation-iteration-count: infinite, 1;
  animation-delay: -7s, 0s;
  animation-fill-mode: none, forwards;
  animation-play-state: paused, running;
  will-change: auto;
}

@keyframes fur-field-layer-out {
  from { opacity: 0.82; }
  to { opacity: 0; }
}

@keyframes fur-field-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fur-field-surface > span,
.fur-field-surface > p,
.fur-field-surface > dl,
.fur-field-surface > img,
.fur-field-surface > figcaption {
  position: relative;
  z-index: 2;
}

/* Fallback CSS compartido. Se ve mientras WebGL carga o cuando el navegador no
   puede crear el campo; Brand y Home usan exactamente las mismas dos capas y
   el mismo ciclo continuo, variando solo las texturas mediante modificadores. */
.ic-fur-live {
  --ic-fur-base: url("assets/iron-cat/textures/fur-golden-illustrated.webp");
  --ic-fur-layer: url("assets/iron-cat/textures/fur-taupe-illustrated.webp");
  --ic-fur-veil: linear-gradient(180deg, rgb(7 10 10 / 0.28), transparent 60%, rgb(7 10 10 / 0.18));
  background: var(--ic-fur-base) center / cover;
  color: var(--ic-color-cream);
  isolation: isolate;
}

.ic-fur-live::before,
.ic-fur-live > i {
  position: absolute;
  z-index: -2;
  content: "";
  -webkit-mask-image: linear-gradient(110deg, transparent 2%, rgb(0 0 0 / 0.08) 14%, rgb(0 0 0 / 0.72) 34%, #000 47% 57%, rgb(0 0 0 / 0.72) 71%, rgb(0 0 0 / 0.08) 87%, transparent 98%);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 118% 132%;
  mask-image: linear-gradient(110deg, transparent 2%, rgb(0 0 0 / 0.08) 14%, rgb(0 0 0 / 0.72) 34%, #000 47% 57%, rgb(0 0 0 / 0.72) 71%, rgb(0 0 0 / 0.08) 87%, transparent 98%);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 118% 132%;
  filter: brightness(1.055) contrast(1.035);
  will-change: transform;
}

.ic-fur-live::before {
  inset: -7%;
  background: var(--ic-fur-base) center / cover;
  opacity: 0.82;
  animation: ic-fur-primary-flow 14s linear -7s infinite;
}

.ic-fur-live > i {
  z-index: -1;
  inset: -12%;
  background: var(--ic-fur-layer) center / cover;
  opacity: 0.55;
  animation: ic-fur-secondary-flow 21s linear -13s infinite reverse;
}

.ic-fur-live::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--ic-fur-veil);
  content: "";
}

.ic-fur-live--graphite {
  --ic-fur-base: url("assets/iron-cat/textures/fur-graphite-illustrated.webp");
  --ic-fur-layer: url("assets/iron-cat/textures/fur-taupe-illustrated.webp");
}

.ic-fur-live--golden {
  --ic-fur-base: url("assets/iron-cat/textures/fur-golden-illustrated.webp");
  --ic-fur-layer: url("assets/iron-cat/textures/fur-taupe-illustrated.webp");
}

.ic-fur-live--taupe {
  --ic-fur-base: url("assets/iron-cat/textures/fur-taupe-illustrated.webp");
  --ic-fur-layer: url("assets/iron-cat/textures/fur-golden-illustrated.webp");
}

.ic-fur-live--sand {
  --ic-fur-base: url("assets/iron-cat/textures/fur-sand-illustrated.webp");
  --ic-fur-layer: url("assets/iron-cat/textures/fur-taupe-illustrated.webp");
}

@keyframes ic-fur-primary-flow {
  0%, 100% { transform: translate3d(5.2%, 0, 0) scale(1.14) rotate(0.36deg); }
  12.5% { transform: translate3d(3.68%, 2.12%, 0) scale(1.14) rotate(0.12deg); }
  25% { transform: translate3d(0, 3%, 0) scale(1.14) rotate(-0.18deg); }
  37.5% { transform: translate3d(-3.68%, 2.12%, 0) scale(1.14) rotate(-0.38deg); }
  50% { transform: translate3d(-5.2%, 0, 0) scale(1.14) rotate(-0.36deg); }
  62.5% { transform: translate3d(-3.68%, -2.12%, 0) scale(1.14) rotate(-0.12deg); }
  75% { transform: translate3d(0, -3%, 0) scale(1.14) rotate(0.18deg); }
  87.5% { transform: translate3d(3.68%, -2.12%, 0) scale(1.14) rotate(0.38deg); }
}

@keyframes ic-fur-secondary-flow {
  0%, 100% { transform: translate3d(-6%, 0, 0) scale(1.15) rotate(-0.4deg); }
  12.5% { transform: translate3d(-4.24%, -2.4%, 0) scale(1.15) rotate(-0.13deg); }
  25% { transform: translate3d(0, -3.4%, 0) scale(1.15) rotate(0.2deg); }
  37.5% { transform: translate3d(4.24%, -2.4%, 0) scale(1.15) rotate(0.42deg); }
  50% { transform: translate3d(6%, 0, 0) scale(1.15) rotate(0.4deg); }
  62.5% { transform: translate3d(4.24%, 2.4%, 0) scale(1.15) rotate(0.13deg); }
  75% { transform: translate3d(0, 3.4%, 0) scale(1.15) rotate(-0.2deg); }
  87.5% { transform: translate3d(-4.24%, 2.4%, 0) scale(1.15) rotate(-0.42deg); }
}

.fur-pet-cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: none;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  filter: drop-shadow(0 3px 5px rgb(var(--ic-petrol-950-rgb) / 0.08));
  pointer-events: none;
  transition: opacity 180ms var(--ic-ease-soft);
  will-change: transform;
}

.fur-pet-cursor > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 84% 75%;
  transition: transform 180ms var(--ic-ease-soft);
}

.fur-pet-cursor.is-visible { opacity: 0.46; }
.fur-pet-cursor.is-pressing > img { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .fur-pet-cursor { display: block; }
  .fur-field-surface { cursor: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fur-field-surface { cursor: auto; }
  .fur-field-canvas { display: none !important; }

  .ic-fur-live::before,
  .ic-fur-live > i { animation: none !important; }

  .fur-pet-cursor,
  .fur-pet-cursor > img {
    display: none !important;
    animation: none !important;
    transition: none !important;
  }
}