/* Gate → hero: la foto nace en corazón desde la puerta ya dibujada. */
:root { --kc-gate-duration: 2.2s; }

body.bl-corazon-active #gate[data-gate-state="opening"] {
  opacity: 1;
  transition: none;
}
body.bl-corazon-active #hero { z-index: 102; }
body.bl-corazon-active #hero .kc-hero__photo,
body.bl-corazon-done #hero .kc-hero__photo {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
body.bl-corazon-active:not(.bl-corazon-done) #hero .kc-hero__photo img {
  opacity: 1;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  -webkit-mask-image: var(--bl-corazon-mask);
  mask-image: var(--bl-corazon-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--bl-corazon-size, 0px 0px);
  mask-size: var(--bl-corazon-size, 0px 0px);
  -webkit-mask-position: var(--bl-corazon-position, 50% 52%);
  mask-position: var(--bl-corazon-position, 50% 52%);
}
body.bl-corazon-active:not(.bl-corazon-done) #hero .kc-container > :not(.kc-hero__photo) {
  opacity: 0;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
body.bl-corazon-done #hero .kc-hero__photo img {
  opacity: 1;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}
body.bl-corazon-done #hero .kc-container > :not(.kc-hero__photo) {
  opacity: 1;
  animation: none !important;
  transform: none !important;
  transition: opacity 500ms ease-out;
}
body.bl-corazon-active #hero::before,
body.bl-corazon-done #hero::before { opacity: 0; visibility: hidden; animation: none !important; }

/* Unsupported masks and reduced motion use a straight 400 ms crossfade. */
body.bl-corazon-fallback #gate[data-gate-state="opening"] {
  opacity: 0;
  transition: opacity 400ms ease-out;
}
body.bl-corazon-fallback #hero {
  z-index: 102;
  opacity: 0;
  transition: opacity 400ms ease-out;
}
body.bl-corazon-fallback.bl-corazon-fade-in #hero { opacity: 1; }
body.bl-corazon-fallback #hero::before { opacity: 0; visibility: hidden; animation: none !important; }
body.bl-corazon-fallback #hero .kc-hero__photo img,
body.bl-corazon-fallback #hero .kc-container > :not(.kc-hero__photo) {
  animation: none !important;
  transform: none !important;
}
.bl-corazon-fallback-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 104 !important;
  opacity: 1;
  pointer-events: none !important;
  transition: opacity 400ms ease-out;
}
body.bl-corazon-fade-in .bl-corazon-fallback-gate { opacity: 0; }

.bl-corazon-canvas {
  position: fixed;
  inset: 0;
  z-index: 103;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.bl-corazon-fallback #hero,
  .bl-corazon-fallback-gate { transition-duration: 400ms; }
}