/* ========================================================================== 
   IRON.CAT · RESIZE MOTION
   --------------------------------------------------------------------------
   Una cápsula de marca crece con el scroll y solo después entrega el foco a
   la pantalla de producto. El motor publica tres relojes independientes:

     --ic-resize-expand-progress  · geometría de la cápsula
     --ic-resize-screen-progress  · aparición de la pantalla
     --ic-resize-detail-progress  · cromo y detalles posteriores

   Sin JavaScript queda visible el estado final: es una mejora progresiva.
   ========================================================================== */

:root {
  --ic-resize-clip-top-start: 46.5%;
  --ic-resize-clip-inline-start: 29%;
  --ic-resize-clip-bottom-start: 46.5%;
  --ic-resize-radius-start: 999px;
  --ic-resize-radius: 16px;
  --ic-resize-scroll-distance: 1.4;
}

[data-resize-motion] {
  --ic-resize-progress: 1;
  --ic-resize-expand-progress: 1;
  --ic-resize-screen-progress: 1;
  --ic-resize-detail-progress: 1;
  --ic-resize-raw-progress: 1;
  --ic-resize-clip-top: 0%;
  --ic-resize-clip-right: 0%;
  --ic-resize-clip-bottom: 0%;
  --ic-resize-clip-left: 0%;
  --ic-resize-clip-radius: var(--ic-resize-radius);
  --ic-resize-settle-y: 0px;
  --ic-resize-settle-scale: 1;
  --ic-resize-logo-scale: 1;
  --ic-resize-screen-scale: 1;
  --ic-resize-screen-y: 0px;
  --ic-resize-screen-clip: 0%;
}

[data-resize-motion-target] {
  clip-path: inset(0 round var(--ic-resize-radius));
}

.ic-resize-motion-ready [data-resize-motion-target] {
  clip-path: inset(
    var(--ic-resize-clip-top)
    var(--ic-resize-clip-right)
    var(--ic-resize-clip-bottom)
    var(--ic-resize-clip-left)
    round var(--ic-resize-clip-radius)
  );
}

[data-resize-motion-screen] {
  opacity: var(--ic-resize-screen-progress, 1);
  clip-path: inset(0 0 var(--ic-resize-screen-clip, 0%) 0 round var(--ic-resize-radius));
  transform: translate3d(0, var(--ic-resize-screen-y, 0px), 0)
    scale(var(--ic-resize-screen-scale, 1));
  transform-origin: 50% 50%;
}

[data-resize-motion-logo] {
  opacity: calc(1 - var(--ic-resize-screen-progress, 1));
  transform: scale(var(--ic-resize-logo-scale, 1));
  transform-origin: 50% 50%;
}

[data-resize-motion-settle] {
  transform: translate3d(0, var(--ic-resize-settle-y), 0)
    scale(var(--ic-resize-settle-scale));
  transform-origin: 50% 50%;
}

[data-resize-motion-enter] {
  opacity: var(--ic-resize-enter-progress, 1);
  transform: translate3d(0, var(--ic-resize-enter-y, 0px), 0);
}

[data-resize-motion-opacity] {
  opacity: var(--ic-resize-enter-progress, 1);
}

.ic-resize-motion-ready [data-resize-state="active"] [data-resize-motion-target] {
  will-change: clip-path;
}

.ic-resize-motion-ready [data-resize-state="active"] :is(
  [data-resize-motion-screen],
  [data-resize-motion-logo],
  [data-resize-motion-settle],
  [data-resize-motion-enter],
  [data-resize-motion-opacity]
) {
  will-change: transform, opacity, clip-path;
}

@media (prefers-reduced-motion: reduce) {
  [data-resize-motion],
  [data-resize-motion] * {
    --ic-resize-progress: 1 !important;
    --ic-resize-expand-progress: 1 !important;
    --ic-resize-screen-progress: 1 !important;
    --ic-resize-detail-progress: 1 !important;
    --ic-resize-raw-progress: 1 !important;
    --ic-resize-clip-top: 0% !important;
    --ic-resize-clip-right: 0% !important;
    --ic-resize-clip-bottom: 0% !important;
    --ic-resize-clip-left: 0% !important;
    --ic-resize-clip-radius: var(--ic-resize-radius) !important;
    --ic-resize-settle-y: 0px !important;
    --ic-resize-settle-scale: 1 !important;
    --ic-resize-logo-scale: 1 !important;
    --ic-resize-screen-scale: 1 !important;
    --ic-resize-screen-y: 0px !important;
    --ic-resize-screen-clip: 0% !important;
    --ic-resize-enter-progress: 1 !important;
    --ic-resize-enter-y: 0px !important;
  }

  [data-resize-motion-target] {
    clip-path: inset(0 round var(--ic-resize-radius)) !important;
    will-change: auto !important;
  }

  [data-resize-motion-screen] {
    opacity: 1 !important;
    clip-path: inset(0 round var(--ic-resize-radius)) !important;
  }

  [data-resize-motion-logo] { opacity: 0 !important; }

  [data-resize-motion-screen],
  [data-resize-motion-logo],
  [data-resize-motion-settle],
  [data-resize-motion-enter],
  [data-resize-motion-opacity] {
    transform: none !important;
    will-change: auto !important;
  }
}