/* Khal & Silvie · Black or White · BL-03
   Capa de revisión del CEO, después de theme.css (no se toca theme.css ni core).
   Historia en polaroid B/N sin texto · ring de LD recoloreado a tinta y plata · hero: foto nueva. */

/* ── Historia · línea de apertura ──────────────────────── */
.bl-historia-lead {
  margin: calc(-1 * var(--kc-space-4)) auto var(--kc-space-6);
  max-width: 24ch;
  font-family: var(--kc-font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--bl-paper);
  text-wrap: balance;
}

/* Sin texto en la historia: los huecos vacíos no ocupan altura. */
#historia .kc-story__item > h3:empty,
#historia .kc-story__item > p:empty { display: none; }

/* El carril respira arriba: la cinta de cada polaroid asoma por encima de la tarjeta. */
.bl-garden__track { padding-top: calc(var(--kc-space-2) + 1rem); padding-bottom: calc(var(--bl-garden-h) * .36); }
/* BL-03 CEO: las flores abrazan la base de las polaroids, el jardín sube detrás de las tarjetas. */
/* Tarjetas un poco más angostas en móvil: la flecha › cabe en la franja sin pisar la foto. */
.bl-garden { --bl-card: min(68vw, 19rem); }

/* ── Historia · polaroid B/N envejecido ────────────────── */
.bl-print,
.kc-story__photo {
  padding: 10px 10px 44px;
  border-radius: 0;
  background:
    url('../../assets/page/bl-paper.webp'),
    linear-gradient(170deg, #ECE8DF 0%, #DCD6CA 100%);
  background-blend-mode: multiply, normal;
  box-shadow: 0 1px 1px rgba(10, 10, 11, 0.3), 0 12px 18px -10px rgba(0, 0, 0, 0.7);
}
/* Viñeta interior: el ::after cubre el área de la foto, no el marco. */
.bl-print::after,
.kc-story__photo::after {
  inset: 10px 10px 44px;
  border: 0;
  box-shadow: inset 0 0 26px rgba(10, 10, 11, 0.34), inset 0 0 3px rgba(10, 10, 11, 0.2);
}
/* Cinta de papel translúcida en la esquina superior izquierda. */
.bl-print::before,
.kc-story__photo::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 14px;
  width: 4.6rem;
  height: 1.45rem;
  background-color: rgba(243, 243, 240, 0.76);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .6 0 0 0 0 .56 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 2px rgba(10, 10, 11, 0.18);
  transform: rotate(-8deg);
  pointer-events: none;
}
/* Giro alterno de ±1.8° a lo largo del carril (la historia es la primera estampa). */
.bl-garden__track > .kc-story { rotate: -1.8deg; }
.bl-garden__track > .bl-print:nth-child(odd) { rotate: 1.8deg; }
.bl-garden__track > .bl-print:nth-child(even) { rotate: -1.8deg; }

/* ── Ring musical · el disco de LD, en tinta y plata ───── */
/* Se apagan los pseudo-elementos de BL-02: el disco, el halo y el press ahora viven en spans. */
.kc-ring::before,
.kc-ring::after { content: none; }
.kc-ring:active .kc-float-bg { transform: scale(0.92); }

/* Disco de cristal oscuro con filete de marfil. */
.kc-float-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.85);
  border: 1px solid rgba(243, 243, 240, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(243, 243, 240, 0.1);
  transition: border-color 400ms ease, box-shadow 400ms ease, transform 150ms ease;
}
/* Halo que respira, plata sobre tinta. */
.kc-float-glow {
  position: absolute;
  inset: -10px;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(243, 243, 240, 0.2) 0%, rgba(156, 151, 142, 0.1) 40%, transparent 70%);
  animation: kcBreath 3s ease-in-out infinite alternate;
}
/* Órbita punteada en plata. */
.kc-ring__orbit {
  inset: -8px;
  z-index: 2;
  border: 1.5px dashed rgba(236, 232, 223, 0.5);
  box-shadow: 0 0 8px rgba(243, 243, 240, 0.12);
  animation-duration: 20s;
  transition: border-color 400ms ease, box-shadow 400ms ease;
}
/* La gema: una perla ivory que orbita. */
.kc-ring__orbit::before {
  top: -4px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #D9D4C9 45%, #9C978E 100%);
  box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.5), 0 0 6px 2px rgba(243, 243, 240, 0.55), 0 0 14px 4px rgba(217, 212, 201, 0.25);
}
/* BL en Bodoni itálica, marfil. */
.kc-ring__letter {
  z-index: 3;
  padding-bottom: 6px;
  font-family: var(--kc-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--bl-paper);
  text-shadow: 0 0 10px rgba(243, 243, 240, 0.25);
  transition: color 400ms ease, text-shadow 400ms ease, transform 150ms ease;
}
.kc-ring__bars { z-index: 4; }
.kc-bar {
  background: linear-gradient(to top, #9C978E, #F3F3F0);
  box-shadow: 0 0 4px rgba(243, 243, 240, 0.4);
}
/* Pausa: todo se apaga y se detiene. */
.kc-ring[data-kc-state="paused"] .kc-float-bg { border-color: rgba(243, 243, 240, 0.16); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.kc-ring[data-kc-state="paused"] .kc-ring__orbit { border-color: rgba(236, 232, 223, 0.16); box-shadow: none; }
.kc-ring[data-kc-state="paused"] .kc-ring__orbit::before { box-shadow: none; opacity: 0.2; }
.kc-ring[data-kc-state="paused"] .kc-float-glow { animation: none; opacity: 0.12; }
.kc-ring[data-kc-state="paused"] .kc-ring__letter { color: rgba(243, 243, 240, 0.4); text-shadow: none; }
.kc-ring[data-kc-state="paused"] .kc-bar { opacity: 0.2; }
@media (hover: hover) and (pointer: fine) {
  .kc-ring:hover .kc-float-bg { border-color: rgba(243, 243, 240, 0.5); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 22px rgba(243, 243, 240, 0.12), inset 0 1px 0 rgba(243, 243, 240, 0.14); }
  .kc-ring:hover .kc-ring__orbit { border-color: rgba(236, 232, 223, 0.8); box-shadow: 0 0 14px rgba(243, 243, 240, 0.25); }
  .kc-ring:hover .kc-ring__letter { color: #FFFFFF; text-shadow: 0 0 14px rgba(243, 243, 240, 0.45); transform: scale(1.08); }
}

@keyframes kcBreath {
  from { opacity: 0.32; transform: scale(0.9); }
  to { opacity: 0.8; transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .kc-float-glow { animation: none; }
  .kc-ring:active .kc-float-bg { transform: none; }
}

/* BL-03 CEO: sin aviso de música. El nodo se queda (mountMusicToast vive en el step del engine). */
#music-toast { display: none !important; }

/* BL-03c CEO: la mayoría de las flores por enfrente de las polaroids; las de fondo siguen detrás. */
.bl-garden__ink--front { z-index: 2; pointer-events: none; } /* contorno de tinta dibujado por el canvas para conservar la lectura sobre el marfil */


/* BL-04: no blur behind the ring anywhere; it repainted on every scroll frame and the plate is already near-opaque. */
#music-control .kc-float-bg, .kc-ring::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* BL-03c móvil: sin blur detrás del ring en táctil; repintaba en cada frame del scroll. */
@media (pointer: coarse) {
  #music-control .kc-float-bg { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 10, 11, .92); }
}

/* BL-03c iOS/Android: sin destello azul al tocar en ningún elemento. */
html { -webkit-tap-highlight-color: transparent; }