/* ============================================================
   Vitrina Klein — capa «Vitrina encendida» (efectos en reposo).
   Se encola solo si el ajuste está activo: desactivarla en
   Ajustes → Vitrina Klein devuelve la versión sobria.
   ============================================================ */

/* 1) Montaje escalonado: el catálogo se ensambla al cargar */
@keyframes kv-rise{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: none; }
}
.kshop__card{ animation: kv-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.kshop__card:nth-child(1){ animation-delay: .05s; }
.kshop__card:nth-child(2){ animation-delay: .11s; }
.kshop__card:nth-child(3){ animation-delay: .17s; }
.kshop__card:nth-child(4){ animation-delay: .23s; }
.kshop__card:nth-child(5){ animation-delay: .29s; }
.kshop__card:nth-child(6){ animation-delay: .35s; }
.kshop__card:nth-child(7){ animation-delay: .41s; }
.kshop__card:nth-child(8){ animation-delay: .47s; }
.kshop__card:nth-child(9){ animation-delay: .53s; }
.kshop__card:nth-child(10){ animation-delay: .59s; }
.kshop__card:nth-child(11){ animation-delay: .65s; }
.kshop__card:nth-child(12){ animation-delay: .71s; }

/* 2) Luz de estudio: ciclorama + peana de sombra + aliento rosa.
   Cuerpo y profundidad sin ninguna textura sobre la foto. */
.kshop__media{
  background:
    /* aliento rosa retroiluminando el producto (la oferta lo sube) */
    radial-gradient(46% 40% at 50% 46%, rgba(255,61,143,var(--kv-aliento,.07)) 0%, rgba(255,61,143,0) 100%),
    /* peana: sombra elíptica bajo el producto */
    radial-gradient(42% 7% at 50% 84%, rgba(20,22,26,.11) 0%, rgba(20,22,26,0) 72%),
    /* ciclorama: foco superior y suelo que se curva */
    radial-gradient(90% 80% at 50% 30%, #ffffff 0%, var(--ks-ph) 78%, #eae7e1 100%);
}
/* El placeholder deja ver la luz del escenario (conserva su hexágono) */
.kshop__ph{ background: transparent; }

/* 3) Menú con energía en reposo: hexágonos rosa tenue y línea que respira */
.kcat__mark{
  background: var(--kc-accent-hi);
  opacity: .40;
}
.kcat::before{
  content: "";
  position: absolute;
  left: 0;
  top: 68px;            /* arranca bajo el buscador */
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--kc-accent) 0%, var(--kc-accent-hi) 100%);
  opacity: .12;
  animation: kv-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kv-breathe{
  0%, 100%{ opacity: .09; }
  50%     { opacity: .20; }
}

/* 4) La oferta, siempre encendida: la marca es luz, no línea.
   Nada de anillos en el canto — un halo rosa difuso bajo la tarjeta
   (como apoyada en cristal iluminado) y el aliento del escenario más
   presente. El badge OFERTA ya nombra la promoción. */
.kshop__card:has(.kshop__badge--sale){
  --kv-aliento: .13;
  box-shadow:
    0 2px 10px rgba(20,22,26,.05),
    0 10px 36px -14px rgba(255,61,143,.45);
}
/* :has() pesa más que .kshop__card:hover: sin esta variante la oferta
   se quedaría sin sombra de elevación al pasar el ratón. */
.kshop__card:has(.kshop__badge--sale):hover{
  box-shadow:
    0 14px 34px -12px rgba(20,22,26,.16),
    0 14px 44px -14px rgba(255,61,143,.50);
}

/* 5) Luz de contorno: una luz lenta y diluida recorre el borde de UNA
   tarjeta visible (vuelta en 6s) y pasa a la siguiente. La enciende el
   orquestador del JS con la clase .kv-lit. */
@property --kva{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.kshop__card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ks-radius);
  padding: 2px;
  background: conic-gradient(from var(--kva),
    transparent 0deg,
    transparent 290deg,
    rgba(255,122,178,0) 300deg,
    rgba(255,122,178,.60) 338deg,
    rgba(255,150,195,0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  filter:
    drop-shadow(0 0 8px rgba(255,122,178,.60))
    drop-shadow(0 0 22px rgba(255,122,178,.40));
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.kshop__card.kv-lit::before{
  animation: kv-lap 6s linear;
}
@keyframes kv-lap{
  0%   { opacity: 0; --kva: 0deg; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; --kva: 360deg; }
}

/* ---------- Movimiento reducido: la capa entera se apaga ---------- */
@media (prefers-reduced-motion: reduce){
  .kshop__card,
  .kshop__card::before,
  .kcat::before{
    animation: none;
  }
  .kshop__card{ opacity: 1; transform: none; }
  .kshop__card::before{ display: none; }
}