/* =========================================================
   Barber Vico — Decoración de Halloween (estática, Fase 6)
   halloween.css
   Solo se carga en la página real de reservas y con el tema
   'halloween' activo (clase raíz .bv-halloween en <body>).
   Todo es decorativo: pointer-events:none en todas las capas.
   Sin animaciones (nada que respetar en prefers-reduced-motion).
   ========================================================= */

body.bv-halloween {
  position: relative;
}

/* ── Niebla púrpura en los bordes (capas fijas, independientes) ───────── */
.bv-hw-fog {
  position: fixed;
  left: 0;
  right: 0;
  height: 46vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}
.bv-hw-fog--top {
  top: 0;
}
.bv-hw-fog--bottom {
  bottom: 0;
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

/* ── Telarañas en la esquina superior de los contenedores principales ─── */
/* Capa decorativa detrás del contenido (z-index:-1) y recortada por el
   radio de la tarjeta (border-radius:inherit + overflow:hidden). */
.bv-hw-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.bv-hw-web {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(58px, 8vw, 104px);
  height: clamp(74px, 10.5vw, 134px);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  opacity: .92;
}

/* ── Telaraña del resumen: por encima de las píldoras de la barra ──────── */
/* Las tres píldoras del resumen tienen fondo verde opaco y ocupan toda la
   barra, así que la telaraña (que va detrás del contenido, z-index:-1) queda
   oculta en cuanto se rellenan. Para esta única capa se eleva la decoración
   por encima del contenido —como el antiguo modificador «--above»—, pero
   manteniendo el recorte (overflow:hidden heredado de .bv-hw-deco): la
   telaraña permanece en la esquina superior derecha del resumen y nunca
   desborda hacia el botón «Aceptar cita» ni hacia elementos vecinos. El
   resto de telarañas conserva su posición (detrás del contenido). */
.booking-summary-global > .bv-hw-deco {
  z-index: 1;
}

/* Tamaño de esa telaraña: al dibujarse por encima de una píldora (la tercera,
   la más estrecha de la barra) hay que reducirla para que quede en la esquina
   superior derecha sin cubrir el texto de la píldora; el recorte de la propia
   capa (overflow:hidden) la mantiene contenida en el resumen. Solo afecta a la
   telaraña del resumen: las otras siete conservan su tamaño y posición. */
@media (max-width: 1200px) {
  .booking-summary-global > .bv-hw-deco > .bv-hw-web {
    width: clamp(44px, 5vw, 84px);
    height: clamp(56px, 6.4vw, 106px);
  }
}
@media (max-width: 760px) {
  .booking-summary-global > .bv-hw-deco > .bv-hw-web {
    width: clamp(26px, 7vw, 36px);
    height: clamp(34px, 9vw, 48px);
  }
}

/* ── Bordes de tinta gótica en el borde superior (Fase 9) ─────────────── */
/* Se dibujan dentro de la capa .bv-hw-deco existente: por detrás del
   contenido (z-index:-1), recortados por el radio de la tarjeta
   (overflow:hidden + border-radius:inherit) y sin capturar eventos
   (pointer-events:none heredado de .bv-hw-deco). Las URLs son relativas a
   este CSS, por lo que se cargan desde el propio plugin. */
.bv-hw-ink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1392 / 147;                 /* proporción del borde (grande) */
  background: url('../img/halloween/ink/ink-top-large.png') no-repeat top center;
  background-size: 100% auto;
  pointer-events: none;
  /* La línea superior queda nítida y las gotas se desvanecen suavemente hacia
     abajo para no invadir el título ni el interior blanco de la tarjeta. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 36%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 36%);
}
@media (max-width: 1100px) {
  .bv-hw-ink {
    aspect-ratio: 1099 / 104;               /* variante mediana */
    background-image: url('../img/halloween/ink/ink-top-medium.png');
  }
}
@media (max-width: 760px) {
  .bv-hw-ink {
    aspect-ratio: 806 / 83;                 /* variante pequeña (móvil) */
    background-image: url('../img/halloween/ink/ink-top-small.png');
  }
}

/* ── Murciélago estático junto al encabezado ──────────────────────────── */
.bv-hw-bat {
  position: absolute;
  top: 50%;
  right: 118px;
  width: clamp(84px, 9vw, 150px);
  height: clamp(38px, 4.1vw, 68px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* ── Adaptación a pantallas pequeñas ──────────────────────────────────── */
@media (max-width: 760px) {
  .bv-hw-fog {
    height: 30vh;
    opacity: .42;
  }
  .bv-hw-web {
    width: clamp(46px, 15vw, 74px);
    height: clamp(58px, 19vw, 92px);
  }
  .bv-hw-bat {
    top: auto;
    bottom: 2px;
    right: 8px;
    width: clamp(56px, 17vw, 84px);
    height: auto;
    aspect-ratio: 1723 / 779;
    -webkit-transform: none;
            transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Esta fase no incluye animaciones; no hay nada que desactivar. */
  .bv-hw-fog, .bv-hw-web, .bv-hw-bat { animation: none !important; }
}

/* =========================================================
   FASE 7 — Murciélagos animados
   Contenedor fijo aislado, por detrás de las tarjetas (z-index:-1) y por
   encima de la niebla (se añade después en el DOM). pointer-events:none.
   ========================================================= */
.bv-hw-bats {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bv-hw-bat-fly {
  position: absolute;
  left: 0;
  top: var(--bat-top, 30%);
  opacity: .92;
  will-change: transform;
  animation: bv-hw-fly var(--bat-dur, 28s) linear infinite;
  animation-delay: var(--bat-delay, 0s);
  /* Rellena el estado inicial DURANTE el delay: el murciélago espera fuera de
     pantalla en su punto de partida (no aparcado en el borde izquierdo).
     Así las entradas/salidas son consecuencia del recorrido, sin efecto
     interruptor ni murciélagos apilados en el margen. */
  animation-fill-mode: backwards;
}

.bv-hw-bat-bob {
  animation: bv-hw-bob var(--bat-bob, 6.5s) ease-in-out infinite;
  animation-delay: var(--bat-delay, 0s);
  animation-fill-mode: backwards;
}
.bv-hw-bat-bob--lg {
  animation-name: bv-hw-bob-lg;
}

.bv-hw-bat-anim {
  width: 200px;
  height: 136px;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-transform: scale(var(--bat-scale, .5));
          transform: scale(var(--bat-scale, .5));
  -webkit-transform-origin: center;
          transform-origin: center;
  animation: bv-hw-flap var(--bat-flap, .6s) steps(4) infinite;
  animation-delay: var(--bat-delay, 0s);
  animation-fill-mode: backwards;
}

/* Trayectoria paramétrica por murciélago:
   --bat-from-x/to-x (dirección horizontal) y --bat-from-y/to-y (deriva vertical
   suave para diagonales). El tramo 72%→100% es una pausa fuera de pantalla que
   desincroniza los recorridos. */
@keyframes bv-hw-fly {
  0%   { transform: translate(var(--bat-from-x, -70vw), var(--bat-from-y, 0)); }
  72%  { transform: translate(var(--bat-to-x, 170vw), var(--bat-to-y, 0)); }
  100% { transform: translate(var(--bat-to-x, 170vw), var(--bat-to-y, 0)); }
}
@keyframes bv-hw-bob {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}
@keyframes bv-hw-bob-lg {
  0%, 100% { transform: translateY(-18px); }
  50%      { transform: translateY(18px); }
}
@keyframes bv-hw-flap {
  from { background-position: 0 0; }
  to   { background-position: -800px 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: no se muestran los murciélagos animados. */
  .bv-hw-bats { display: none !important; }
}

/* =========================================================
   FASE 9-b — Araña de prueba caminando por el borde de Servicios
   Una sola araña, dentro de la capa .bv-hw-deco de #servicesCard (por detrás
   del contenido y recortada por la tarjeta). Patrulla el hueco blanco entre
   el borde de tinta y la lista de servicios, sin tocar título ni controles.
   Sprite de 4 poses (patas alternadas) animado con steps(4).
   ========================================================= */
.bv-hw-spider {
  position: absolute;
  top: 46px;
  left: 28%;
  --bv-spider-s: .45;
  /* El ancho del contenedor coincide con el ancho VISIBLE de la araña, para
     que anclarla por 'left' o por 'right' sea exacto (el sprite se escala con
     transform, que no altera el layout). */
  width: calc(140px * var(--bv-spider-s));
  pointer-events: none;
  will-change: left;
  /* Recorrido por el borde con pausas en los extremos (ida y vuelta). */
  animation: bv-hw-spider-walk 18s ease-in-out infinite;
}
.bv-hw-spider-anim {
  display: block;
  width: 140px;
  height: 163px;
  background: url('../img/halloween/spider-walk.png') no-repeat 0 0;
  -webkit-transform: scale(var(--bv-spider-s));
          transform: scale(var(--bv-spider-s));
  -webkit-transform-origin: top left;
          transform-origin: top left;
  animation: bv-hw-spider-legs .55s steps(4) infinite;
}

@keyframes bv-hw-spider-walk {
  0%   { left: 28%; }
  36%  { left: 74%; }
  50%  { left: 74%; }   /* pausa a la derecha */
  86%  { left: 28%; }
  100% { left: 28%; }   /* pausa a la izquierda */
}
@keyframes bv-hw-spider-legs {
  from { background-position: 0 0; }
  to   { background-position: -560px 0; }
}

/* Anchos medios (tablet/portátiles pequeños): la tarjeta es más estrecha y el
   título «SERVICIOS» (ancho ~fijo) ocupa una porción mayor, de modo que con el
   anclaje izquierdo la araña caería sobre el título. Se ancla por la DERECHA:
   queda siempre a la derecha del título y a la izquierda de la telaraña. */
@media (max-width: 1200px) {
  .bv-hw-spider {
    left: auto;
    right: 16%;
  }
  @keyframes bv-hw-spider-walk {
    0%   { right: 16%; }
    36%  { right: 32%; }
    50%  { right: 32%; }
    86%  { right: 16%; }
    100% { right: 16%; }
  }
}

@media (max-width: 760px) {
  /* En móvil la lista de servicios empieza muy arriba (apenas ~17 px por
     debajo del borde de tinta), así que la araña se coloca en la franja blanca
     estrecha entre el borde de tinta y la lista, a la derecha del título
     «SERVICIOS» y a la izquierda de la telaraña, y se reduce un poco para que
     cuerpo y patas se vean completos sin cortarse ni tapar controles. */
  .bv-hw-spider {
    top: 6px;
    left: 46%;
    right: auto;
    --bv-spider-s: .30;
    animation-duration: 15s;
  }
  @keyframes bv-hw-spider-walk {
    0%   { left: 46%; }
    36%  { left: 68%; }
    50%  { left: 68%; }
    86%  { left: 46%; }
    100% { left: 46%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin animación: la araña no se muestra. */
  .bv-hw-spider { display: none !important; }
}