/* Khal & Silvie · BL-03 · detalles (PIEL)
   Regalos: escena decorativa, sin enlaces ni datos. Secreto: estrella que se retira al abrir el mensaje.
   Vestimenta: muestras de tela con tejido, costura y tachado fino. Carga después de theme.css: gana por orden. */

/* ── Regalos · sobre y cajas sobre tinta ───────────────── */
.bl-regalos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  height: clamp(11rem, 44vw, 13.5rem);
  max-width: 24rem;
  margin: var(--kc-space-6) auto 0;
  overflow: hidden;
}
.bl-regalos__lluvia {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.bl-regalos__lluvia i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  aspect-ratio: 3 / 2;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect x='.5' y='.5' width='29' height='19' rx='1.5' fill='%23F2EFE8' stroke='%23BFBAB0'/%3E%3Cpath d='M.8 1.2 15 11.5 29.2 1.2' fill='none' stroke='%23BFBAB0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bl-regalos__caja,
.bl-regalos__sobre { position: relative; height: auto; }
.bl-regalos__sobre {
  grid-column: 2;
  align-self: center;
  width: clamp(7.5rem, 31vw, 9.25rem);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}
.bl-regalos__caja {
  align-self: end;
  justify-self: center;
  width: clamp(4.6rem, 18.5vw, 5.8rem);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}
/* Segunda caja: algo más alta (markup) y apoyada con un giro de -4° para no parecer estampada. */
.bl-regalos__caja--der { rotate: -4deg; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .bl-regalos__lluvia i { animation: bl-regalos-cae var(--d) linear var(--t) infinite; }
  .bl-regalos__caja { transition: translate 500ms var(--kc-ease); }
  .bl-regalos__caja:active { translate: 0 -6px; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .bl-regalos__caja:hover { translate: 0 -6px; }
}
@keyframes bl-regalos-cae {
  0%   { opacity: 0; transform: translate3d(0, -30px, 0) rotate(var(--r)); }
  12%  { opacity: 0.55; }
  50%  { transform: translate3d(8px, 90px, 0) rotate(calc(var(--r) + 12deg)); }
  88%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(-6px, 220px, 0) rotate(calc(var(--r) - 8deg)); }
}

/* ── Secreto · estrella que se retira al abrir ─────────── */
.kc-secret__star {
  display: block;
  width: clamp(5.5rem, 24.5vw, 6.5rem);
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 6px 8px rgba(10, 10, 11, 0.2));
  transition: opacity 420ms var(--kc-ease), scale 420ms var(--kc-ease);
}
.kc-secret[open] .kc-secret__star { opacity: 0; scale: 0.6; }
.kc-secret[open] .kc-secret__card { animation: bl-secret-fade 700ms var(--kc-ease) both; }
@keyframes bl-secret-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes bl-star-float {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 0 -9px; rotate: 4deg; }
}
@keyframes bl-glint {
  0%, 100% { opacity: 0.25; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes bl-orbit {
  to { transform: rotate(360deg); }
}
.kc-secret__glint { transform-box: fill-box; transform-origin: center; }
.kc-secret__orbit { transform-box: view-box; transform-origin: 60px 60px; }
@media (prefers-reduced-motion: no-preference) {
  .kc-secret__star { animation: bl-star-float 5s ease-in-out infinite; }
  .kc-secret__glint { animation: bl-glint 3.4s ease-in-out infinite; }
  .kc-secret__glint--b { animation-delay: 1.7s; }
  .kc-secret__glint--c { animation-delay: 0.9s; animation-duration: 4.1s; }
  .kc-secret__orbit--a { animation: bl-orbit 22s linear -4s infinite; }
  .kc-secret__orbit--b { animation: bl-orbit 30s linear -17s infinite reverse; }
  .kc-secret__orbit--c { animation: bl-orbit 26s linear -9s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-secret__star { transition: none; }
  .kc-secret[open] .kc-secret__card { animation: none; }
}

/* Las animaciones decorativas descansan fuera de escena y durante el gate. */
#regalos:not(.bl-live) .bl-regalos__lluvia i,
#secreto:not(.bl-live) .kc-secret__star,
#secreto:not(.bl-live) .kc-secret__glint,
#secreto:not(.bl-live) .kc-secret__orbit--a,
#secreto:not(.bl-live) .kc-secret__orbit--b,
#secreto:not(.bl-live) .kc-secret__orbit--c,
body.is-gate-locked #regalos .bl-regalos__lluvia i,
body.is-gate-locked #secreto .kc-secret__star,
body.is-gate-locked #secreto .kc-secret__glint,
body.is-gate-locked #secreto .kc-secret__orbit--a,
body.is-gate-locked #secreto .kc-secret__orbit--b,
body.is-gate-locked #secreto .kc-secret__orbit--c { animation-play-state: paused; }

/* ── Vestimenta · muestras de tela ─────────────────────── */
.bl-banned { gap: clamp(1.75rem, 7vw, 3rem); }
.bl-banned__chip i {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.22), transparent 58%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--strike) 7%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--strike) 7%, transparent) 0 1px, transparent 1px 3px),
    var(--chip);
  box-shadow:
    0 0 0 0.5px rgba(10, 10, 11, 0.22),
    inset 0 2px 5px rgba(10, 10, 11, 0.32),
    inset 0 -2px 4px rgba(255, 255, 255, 0.1),
    0 1px 1px rgba(10, 10, 11, 0.2),
    0 8px 12px -6px rgba(10, 10, 11, 0.45);
}
.bl-banned__chip i::before {
  content: "";
  position: absolute;
  inset: 0.38rem;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--strike) 45%, transparent);
  pointer-events: none;
}
.bl-banned__chip i::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 999px;
  background: var(--strike);
  box-shadow: none;
  transform: rotate(-45deg);
}