/* =============================================================
   Banner animado con blobs / pétalos / ribbons / sparks / dust
   Diseño origen: Claude Design (banner.html)
   Reutilizable: aplica .banner-bg a un contenedor de sección
   y pon el contenido dentro con z-index mayor a 10.
   ============================================================= */

.banner-bg {
  --bb-terracota-deep: #5a2a1c;
  --bb-terracota:      #6e3a2a;
  --bb-terracota-warm: #8a5442;
  --bb-sage-deep:      #2a4f47;
  --bb-sage:           #476f66;
  --bb-blue-grey:      #556c7a;
  --bb-blue-soft:      #6d8391;
  --bb-bg:             #0a0908;

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--bb-bg);
  pointer-events: none; /* el banner no interfiere con clicks del contenido */
}

/* El padre de .banner-bg debe ser position:relative y isolation:isolate */
.banner-bg-host {
  position: relative;
  isolation: isolate;
}
.banner-bg-host > :not(.banner-bg) {
  position: relative;
  z-index: 1;
}

/* Si quieres que el banner responda al cursor, quita pointer-events:none
   añadiendo .banner-bg--interactive */
.banner-bg--interactive { pointer-events: auto; }

/* ——— Layer 1 · base gradient ——— */
.banner-bg__base {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 90% at 5% 50%,  #5c2416 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 50%, #264841 0%, transparent 55%),
    linear-gradient(105deg, #2a1008 0%, #4a1d10 35%, #3a2418 55%, #27443e 78%, #1e3833 100%);
}

/* ——— Layer 2 · Zonas de color ——— */
.banner-bg__zones {
  position: absolute; inset: -10%; z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(55px) saturate(.7);
}
.banner-bg__zone { position: absolute; border-radius: 50%; will-change: transform; }
.banner-bg__zone--terra {
  width: 55%; height: 140%; left: -8%; top: -20%;
  background: radial-gradient(circle at 60% 50%, var(--bb-terracota) 0%, var(--bb-terracota-deep) 30%, transparent 65%);
  animation: bb-zone-a 13s ease-in-out infinite; opacity: .6;
}
.banner-bg__zone--sage {
  width: 48%; height: 135%; right: -6%; top: -15%;
  background: radial-gradient(circle at 40% 50%, var(--bb-sage) 0%, var(--bb-sage-deep) 35%, transparent 65%);
  animation: bb-zone-b 16s ease-in-out infinite; opacity: .65;
}
.banner-bg__zone--blue {
  width: 38%; height: 110%; right: 15%; top: 0;
  background: radial-gradient(circle at 50% 50%, var(--bb-blue-soft) 0%, var(--bb-blue-grey) 40%, transparent 70%);
  animation: bb-zone-c 18s ease-in-out infinite; opacity: .42;
}
@keyframes bb-zone-a {
  0%,100% { transform: translate(0,0) scale(1); }
  25%     { transform: translate(50px,20px) scale(1.08); }
  50%     { transform: translate(30px,50px) scale(1.04); }
  75%     { transform: translate(-20px,30px) scale(.98); }
}
@keyframes bb-zone-b {
  0%,100% { transform: translate(0,0) scale(1); }
  30%     { transform: translate(-50px,40px) scale(1.1); }
  60%     { transform: translate(-20px,-40px) scale(1.05); }
  85%     { transform: translate(30px,-20px) scale(.96); }
}
@keyframes bb-zone-c {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  33%     { transform: translate(-70px,30px) scale(1.12) rotate(4deg); }
  66%     { transform: translate(40px,-20px) scale(1.05) rotate(-3deg); }
}

/* ——— Layer 3 · Pétalos ——— */
.banner-bg__petals {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; mix-blend-mode: screen;
  filter: blur(10px) saturate(.75); opacity: .55;
}
.banner-bg__petal {
  position: absolute; border-radius: 50% 50% 50% 50% / 10% 10% 90% 90%;
  will-change: transform; transform-origin: 50% 100%; opacity: .4;
}
.banner-bg__petal--t {
  width: 280px; height: 520px; left: 18%; bottom: -22%;
  background: linear-gradient(180deg, transparent, var(--bb-terracota) 45%, var(--bb-terracota-deep) 90%);
  transform: rotate(-18deg); animation: bb-petal-a 7s ease-in-out infinite;
}
.banner-bg__petal--s {
  width: 240px; height: 500px; left: 42%; bottom: -20%;
  background: linear-gradient(180deg, transparent, var(--bb-sage) 45%, var(--bb-sage-deep) 90%);
  transform: rotate(0deg); animation: bb-petal-b 8s ease-in-out infinite;
}
.banner-bg__petal--b {
  width: 260px; height: 500px; left: 60%; bottom: -22%;
  background: linear-gradient(180deg, transparent, var(--bb-blue-soft) 40%, var(--bb-blue-grey) 90%);
  transform: rotate(16deg); animation: bb-petal-c 9s ease-in-out infinite;
}
@keyframes bb-petal-a { 0%,100%{transform:rotate(-18deg) translateY(0) scale(1);} 50%{transform:rotate(-13deg) translateY(-18px) scale(1.02);} }
@keyframes bb-petal-b { 0%,100%{transform:rotate(0deg) translateY(0) scale(1);} 50%{transform:rotate(3deg) translateY(-24px) scale(1.03);} }
@keyframes bb-petal-c { 0%,100%{transform:rotate(16deg) translateY(0) scale(1);} 50%{transform:rotate(11deg) translateY(-16px) scale(1.02);} }

/* ——— Layer 4 · Aurora ribbons ——— */
.banner-bg__aurora {
  position: absolute; inset: -10%; z-index: 3;
  pointer-events: none; mix-blend-mode: screen;
  opacity: .32; filter: blur(36px) saturate(.7);
}
.banner-bg__ribbon {
  position: absolute; left: -20%; width: 140%; height: 60px;
  border-radius: 50%; will-change: transform;
}
.banner-bg__ribbon--1 {
  top: 25%;
  background: linear-gradient(90deg, transparent 0%, var(--bb-terracota-warm) 35%, var(--bb-sage) 70%, transparent 100%);
  animation: bb-ribbon-a 10s ease-in-out infinite;
}
.banner-bg__ribbon--2 {
  top: 58%; height: 40px;
  background: linear-gradient(90deg, transparent 0%, var(--bb-blue-soft) 30%, var(--bb-terracota) 65%, transparent 100%);
  animation: bb-ribbon-b 12s ease-in-out infinite reverse;
}
.banner-bg__ribbon--3 {
  top: 75%; height: 34px;
  background: linear-gradient(90deg, transparent 0%, var(--bb-sage) 40%, var(--bb-blue-grey) 75%, transparent 100%);
  animation: bb-ribbon-a 14s ease-in-out infinite; opacity: .75;
}
@keyframes bb-ribbon-a {
  0%,100% { transform: translateY(0) skewY(-2deg) scaleX(1); }
  25%     { transform: translateY(-14px) skewY(1deg) scaleX(1.03); }
  50%     { transform: translateY(-28px) skewY(2deg) scaleX(1.06); }
  75%     { transform: translateY(-10px) skewY(0deg) scaleX(1.02); }
}
@keyframes bb-ribbon-b {
  0%,100% { transform: translateY(0) skewY(3deg); }
  30%     { transform: translateY(12px) skewY(-2deg); }
  60%     { transform: translateY(20px) skewY(-3deg); }
}

/* ——— Layer 5 · Sparks ——— */
.banner-bg__sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.banner-bg__spark {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,230,200,.9);
  box-shadow: 0 0 12px rgba(255,220,180,.8);
  opacity: 0;
}
.banner-bg__spark:nth-child(1)  { top: 20%; left: 15%; animation: bb-spark 7s  ease-in-out infinite 0s; }
.banner-bg__spark:nth-child(2)  { top: 70%; left: 35%; animation: bb-spark 9s  ease-in-out infinite 1s; }
.banner-bg__spark:nth-child(3)  { top: 35%; left: 65%; animation: bb-spark 8s  ease-in-out infinite 2.5s; }
.banner-bg__spark:nth-child(4)  { top: 80%; left: 82%; animation: bb-spark 10s ease-in-out infinite 1.8s; }
.banner-bg__spark:nth-child(5)  { top: 15%; left: 88%; animation: bb-spark 11s ease-in-out infinite 3.5s; }
.banner-bg__spark:nth-child(6)  { top: 60%; left: 8%;  animation: bb-spark 9s  ease-in-out infinite 4s; width: 3px; height: 3px; }
.banner-bg__spark:nth-child(7)  { top: 40%; left: 28%; animation: bb-spark 8s  ease-in-out infinite 5.5s; width: 3px; height: 3px; }
.banner-bg__spark:nth-child(8)  { top: 25%; left: 48%; animation: bb-spark 10s ease-in-out infinite .8s; }
.banner-bg__spark:nth-child(9)  { top: 85%; left: 58%; animation: bb-spark 7.5s ease-in-out infinite 2.2s; width: 3px; height: 3px; }
.banner-bg__spark:nth-child(10) { top: 50%; left: 75%; animation: bb-spark 9.5s ease-in-out infinite 4.5s; }
.banner-bg__spark:nth-child(11) { top: 10%; left: 45%; animation: bb-spark 11s  ease-in-out infinite 6s; width: 2px; height: 2px; }
.banner-bg__spark:nth-child(12) { top: 65%; left: 92%; animation: bb-spark 8.5s ease-in-out infinite 3s; width: 3px; height: 3px; }
@keyframes bb-spark {
  0%   { opacity: 0;   transform: translate(0,0) scale(.6); }
  15%  { opacity: .9; }
  50%  { opacity: .7;  transform: translate(10px,-40px) scale(1); }
  85%  { opacity: .6; }
  100% { opacity: 0;   transform: translate(-6px,-80px) scale(.8); }
}

/* ——— Dust ——— */
.banner-bg__dust { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.banner-bg__mote {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,220,190,.55);
  box-shadow: 0 0 8px rgba(255,210,170,.6);
  opacity: 0;
}
.banner-bg__mote:nth-child(1) { top: 30%; animation: bb-mote 22s linear infinite 0s; }
.banner-bg__mote:nth-child(2) { top: 55%; animation: bb-mote 28s linear infinite 6s; }
.banner-bg__mote:nth-child(3) { top: 72%; animation: bb-mote 26s linear infinite 12s; width: 2px; height: 2px; }
.banner-bg__mote:nth-child(4) { top: 18%; animation: bb-mote 30s linear infinite 18s; }
@keyframes bb-mote {
  0%   { left: -5%; opacity: 0; transform: translateY(0); }
  10%  { opacity: .7; }
  50%  { transform: translateY(-20px); }
  90%  { opacity: .5; }
  100% { left: 105%; opacity: 0; transform: translateY(10px); }
}

/* ——— Layer 6 · Cursor spotlight (requiere JS) ——— */
.banner-bg__cursor-light {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(
    circle 360px at var(--bb-mx, 50%) var(--bb-my, 50%),
    rgba(255,225,195,.4) 0%,
    rgba(214,137,102,.18) 30%,
    transparent 65%
  );
  mix-blend-mode: screen;
  opacity: var(--bb-cursor-opacity, 0);
  transition: opacity .6s ease;
}
.banner-bg__cursor-ring {
  position: absolute; z-index: 6;
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid rgba(255,230,200,.45);
  pointer-events: none;
  left: var(--bb-mx, 50%); top: var(--bb-my, 50%);
  transform: translate(-50%, -50%);
  opacity: var(--bb-cursor-opacity, 0);
  transition: opacity .6s ease;
  mix-blend-mode: screen;
}

/* ——— Grain + vignette ——— */
.banner-bg__grain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.banner-bg__vignette {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14) 0%, transparent 20%, transparent 80%, rgba(0,0,0,.18) 100%);
}

/* ——— Ripple on click (generado por JS) ——— */
.banner-bg__ripple {
  position: absolute; z-index: 6;
  width: 20px; height: 20px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,225,195,.6), transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  mix-blend-mode: screen;
  animation: bb-ripple 1.6s ease-out forwards;
}
@keyframes bb-ripple {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(22); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-bg__zone,
  .banner-bg__petal,
  .banner-bg__ribbon,
  .banner-bg__spark,
  .banner-bg__mote { animation: none !important; }
}