/* Hero photo — portrait, enmarcado dentro del header */
.hero-crossfade {
  position: relative;
  width: clamp(200px, 50%, 340px);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--hero-radius, 0);
  box-shadow: var(--hero-shadow, 0 8px 32px rgba(0, 0, 0, 0.16));
}

/* Marco decorativo sobre la foto */
.hero-crossfade::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--hero-radius, 0);
  pointer-events: none;
  z-index: 5;
}

.hero-crossfade__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.hero-crossfade__layer--a {
  animation: crossfade-a 10s ease-in-out infinite;
  z-index: 1;
}

.hero-crossfade__layer--b {
  animation: crossfade-b 10s ease-in-out infinite;
  z-index: 2;
}

@keyframes crossfade-a {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes crossfade-b {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-crossfade__layer--a,
  .hero-crossfade__layer--b { animation: none; }
  .hero-crossfade__layer--a { opacity: 1; z-index: 2; }
  .hero-crossfade__layer--b { opacity: 0; z-index: 1; }
}

/* Ajustes por tema */
body.theme-natural-border .hero-crossfade {
  box-shadow: 0 6px 28px rgba(146, 133, 118, 0.25);
}

body.theme-midnight .hero-crossfade {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

body.theme-midnight .hero-crossfade::after {
  border-color: rgba(255, 255, 255, 0.2);
}

body.theme-brushstroke-photo .hero-crossfade {
  width: clamp(200px, 65%, 420px);
  aspect-ratio: 4 / 3;
  mask-image: radial-gradient(ellipse 96% 94% at 50% 48%, #000 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 96% 94% at 50% 48%, #000 58%, transparent 100%);
}

@media (max-width: 599px) {
  .hero-crossfade {
    width: clamp(180px, 72%, 300px);
  }
}