/* =========================================================
   RESTOBAR DEMO — MODO RÍO ESPECTRAL
   ========================================================= */

.halloween-layer {
  display: none;
  pointer-events: none;
}

body.halloween-mode .halloween-layer {
  display: block;
}

.toast[hidden] {
  display: none;
}

/* =========================================================
   SWITCH
   ========================================================= */

body.halloween-mode .halloween-switch {
  border-color: rgba(247, 186, 135, 0.62);

  background:
    linear-gradient(
      135deg,
      #33113e,
      #19101f
    );

  box-shadow:
    0 0 20px
    rgba(168, 85, 247, 0.34);
}

body.halloween-mode .halloween-switch-status {
  color: #ffffff;

  background:
    rgba(224, 2, 120, 0.32);
}

body.halloween-mode .halloween-switch-thumb {
  transform: translateX(16px);
}

/* =========================================================
   ATMÓSFERA GLOBAL
   ========================================================= */

.halloween-global-layer {
  position: fixed;
  inset: 0;

  z-index: 40;

  overflow: hidden;

  opacity: 0.88;

  mix-blend-mode: screen;
}

.spectral-fog {
  position: absolute;

  width: 130vw;
  height: 70vh;

  border-radius: 50%;

  opacity: 0.24;

  filter: blur(90px);

  will-change: transform;
}

.spectral-fog-a {
  top: -10%;
  left: -20%;

  background:
    radial-gradient(
      circle,
      rgba(192, 132, 252, 0.72),
      rgba(126, 34, 206, 0.16) 55%,
      transparent 75%
    );

  animation:
    spectralFogDrift
    34s
    ease-in-out
    infinite;
}

.spectral-fog-b {
  right: -28%;
  bottom: -15%;

  background:
    radial-gradient(
      circle,
      rgba(224, 2, 120, 0.58),
      rgba(59, 7, 100, 0.14) 58%,
      transparent 76%
    );

  animation:
    spectralFogDriftSlow
    48s
    ease-in-out
    infinite;
}

@keyframes spectralFogDrift {
  0%,
  100% {
    transform:
      translate3d(
        -10%,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        8%,
        -2%,
        0
      );
  }
}

@keyframes spectralFogDriftSlow {
  0%,
  100% {
    transform:
      translate3d(
        5%,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        -12%,
        1.5%,
        0
      );
  }
}

/* =========================================================
   LUCES ESPECTRALES
   ========================================================= */

.spectral-wisp {
  position: absolute;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #dffcff;

  box-shadow:
    0 0 10px #67e8f9,
    0 0 24px #a855f7,
    0 0 36px
    rgba(224, 2, 120, 0.7);
}

.spectral-wisp-a {
  top: 23%;
  left: 15%;

  animation:
    willOWispFloat
    6s
    ease-in-out
    infinite;
}

.spectral-wisp-b {
  top: 53%;
  right: 15%;

  animation:
    willOWispFloat
    8.5s
    ease-in-out
    2s
    infinite;
}

.spectral-wisp-c {
  top: 76%;
  left: 42%;

  animation:
    willOWispFloat
    7.2s
    ease-in-out
    4s
    infinite;
}

@keyframes willOWispFloat {
  0%,
  100% {
    opacity: 0.2;

    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(0.9);
  }

  50% {
    opacity: 0.7;

    transform:
      translate3d(
        18px,
        -14px,
        0
      )
      scale(1.15);
  }
}

/* =========================================================
   HERO HALLOWEEN
   ========================================================= */

body.halloween-mode .hero {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(126, 34, 206, 0.2),
      transparent 34%
    ),
    radial-gradient(
      circle at 86% 74%,
      rgba(224, 2, 120, 0.13),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #111116,
      #1d1025 52%,
      #24142b
    );
}

body.halloween-mode .hero-river-lines {
  opacity: 0.36;
}

body.halloween-mode .hero-feature {
  border-color:
    rgba(168, 85, 247, 0.14);
}

/* =========================================================
   FAROLES
   ========================================================= */

.halloween-lantern-flicker {
  animation:
    lanternFlicker
    3.2s
    ease-in-out
    infinite;
}

@keyframes lanternFlicker {
  0%,
  100% {
    opacity: 0.76;

    filter:
      drop-shadow(
        0 0 6px
        rgba(247, 186, 135, 0.8)
      )
      drop-shadow(
        0 0 14px
        rgba(224, 2, 120, 0.6)
      );
  }

  35% {
    opacity: 0.46;
  }

  70% {
    opacity: 0.96;

    filter:
      drop-shadow(
        0 0 10px
        rgba(247, 186, 135, 0.95)
      )
      drop-shadow(
        0 0 20px
        rgba(224, 2, 120, 0.8)
      );
  }
}

/* =========================================================
   BOTE FANTASMA
   ========================================================= */

body.halloween-mode .ghost-boat {
  animation:
    ghostBoatCrossing
    42s
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    )
    infinite;
}

@keyframes ghostBoatCrossing {
  0% {
    opacity: 0;

    transform:
      translate3d(
        -120px,
        0,
        0
      );
  }

  12% {
    opacity: 0.85;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        calc(100vw + 290px),
        -6px,
        0
      );
  }
}

/* =========================================================
   DECORACIÓN ANTERIOR
   ========================================================= */

.kraken-decoration {
  display: none;
}

/* =========================================================
   TIBURÓN — ZONA DE NADO
   ========================================================= */

.halloween-shark-zone {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 13px;

  z-index: 25;

  height: 72px;

  overflow: hidden;

  pointer-events: none;
}

.halloween-shark {
  position: absolute;

  left: 0;
  bottom: 8px;

  width: 100px;
  height: 50px;

  opacity: 0;

  will-change:
    transform,
    opacity;
}

/*
 * El contenedor se ocupa únicamente del recorrido.
 * La orientación se hace en .halloween-shark-body.
 */
body.halloween-mode .halloween-shark {
  animation:
    sharkPatrolPosition
    44s
    linear
    infinite;
}

.halloween-shark-body {
  position: relative;

  width: 100%;
  height: 100%;

  transform-origin: center;

  will-change: transform;
}

/*
 * IMPORTANTE:
 *
 * La silueta base de la aleta está dibujada mirando
 * hacia la IZQUIERDA.
 *
 * Por eso:
 *
 * - Cuando viaja izquierda -> derecha:
 *   scaleX(-1)
 *
 * - Cuando viaja derecha -> izquierda:
 *   scaleX(1)
 *
 * Esto corrige el problema de verla nadando "de espalda".
 */
body.halloween-mode .halloween-shark-body {
  animation:
    sharkBodyDirection
    44s
    step-end
    infinite;
}

/* =========================================================
   ALETA
   ========================================================= */

.halloween-shark-fin {
  position: absolute;

  left: 23px;
  bottom: 5px;

  width: 52px;
  height: 40px;

  overflow: hidden;
}

.halloween-shark-fin::before {
  content: "";

  position: absolute;

  left: 6px;
  bottom: -18px;

  width: 49px;
  height: 57px;

  /*
   * Forma asimétrica deliberada.
   * La punta queda orientada claramente para
   * que el flip horizontal sea perceptible.
   */
  -webkit-clip-path: polygon(
      4% 100%,
      28% 54%,
      48% 22%,
      63% 5%,
      69% 38%,
      91% 100%
    );
  clip-path:
    polygon(
      4% 100%,
      28% 54%,
      48% 22%,
      63% 5%,
      69% 38%,
      91% 100%
    );

  background:
    linear-gradient(
      110deg,
      #090a0e 0%,
      #14151c 52%,
      #292a36 100%
    );

  box-shadow:
    inset -5px 0 7px
    rgba(255, 255, 255, 0.025),
    0 0 8px
    rgba(168, 85, 247, 0.12);

  transform:
    translateY(1px);

  transform-origin:
    bottom center;
}

/* =========================================================
   ESTELA
   ========================================================= */

.halloween-shark-ripple {
  position: absolute;

  left: 1px;
  right: 1px;
  bottom: 1px;

  height: 8px;

  border-radius: 50%;

  border-top:
    1px solid
    rgba(247, 186, 135, 0.4);

  opacity: 0.55;
}

.halloween-shark-ripple::before,
.halloween-shark-ripple::after {
  content: "";

  position: absolute;

  top: 2px;

  height: 4px;

  border-radius: 50%;

  border-top:
    1px solid
    rgba(224, 2, 120, 0.3);
}

.halloween-shark-ripple::before {
  left: -14px;

  width: 42px;
}

.halloween-shark-ripple::after {
  right: -13px;

  width: 40px;
}

/* =========================================================
   TIBURÓN — RECORRIDO
   44 segundos: movimiento más tranquilo.
   ========================================================= */

@keyframes sharkPatrolPosition {
  /* -------------------------
     IZQUIERDA -> DERECHA
     ------------------------- */

  0% {
    opacity: 0;

    transform:
      translate3d(
        -140px,
        2px,
        0
      );
  }

  4% {
    opacity: 0.76;
  }

  15% {
    transform:
      translate3d(
        17vw,
        -1px,
        0
      );
  }

  28% {
    transform:
      translate3d(
        43vw,
        2px,
        0
      );
  }

  41% {
    transform:
      translate3d(
        72vw,
        -1px,
        0
      );
  }

  48% {
    opacity: 0.76;

    transform:
      translate3d(
        calc(100vw + 125px),
        2px,
        0
      );
  }

  49.9% {
    opacity: 0;

    transform:
      translate3d(
        calc(100vw + 140px),
        2px,
        0
      );
  }

  /* -------------------------
     GIRO FUERA DE PANTALLA
     ------------------------- */

  50% {
    opacity: 0;

    transform:
      translate3d(
        calc(100vw + 140px),
        2px,
        0
      );
  }

  /* -------------------------
     DERECHA -> IZQUIERDA
     ------------------------- */

  54% {
    opacity: 0.76;
  }

  65% {
    transform:
      translate3d(
        76vw,
        -1px,
        0
      );
  }

  78% {
    transform:
      translate3d(
        48vw,
        2px,
        0
      );
  }

  91% {
    transform:
      translate3d(
        18vw,
        -1px,
        0
      );
  }

  98% {
    opacity: 0.76;

    transform:
      translate3d(
        -105px,
        2px,
        0
      );
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        -140px,
        2px,
        0
      );
  }
}

/*
 * Dirección corregida.
 *
 * La forma base apunta hacia izquierda.
 * Al ir hacia derecha la espejamos.
 */
@keyframes sharkBodyDirection {
  0%,
  49.99% {
    transform: scaleX(-1);
  }

  50%,
  100% {
    transform: scaleX(1);
  }
}

/* =========================================================
   MOVIMIENTO SUAVE DE LA ALETA
   ========================================================= */

body.halloween-mode
.halloween-shark-fin::before {
  animation:
    sharkFinBob
    5.4s
    ease-in-out
    infinite;
}

@keyframes sharkFinBob {
  0%,
  100% {
    transform:
      translateY(1px)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-2px)
      rotate(1.5deg);
  }
}

/* =========================================================
   AMBIENTE POR SECCIONES
   ========================================================= */

body.halloween-mode .specialties-section,
body.halloween-mode .gallery-section,
body.halloween-mode .location-section,
body.halloween-mode .contact-section {
  background-image:
    radial-gradient(
      circle at 10% 20%,
      rgba(168, 85, 247, 0.06),
      transparent 24%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(224, 2, 120, 0.05),
      transparent 26%
    );
}

body.halloween-mode .specialty-featured,
body.halloween-mode .specialty-card,
body.halloween-mode .spotlight-card,
body.halloween-mode .contact-panel,
body.halloween-mode .contact-info-panel {
  border-color:
    rgba(168, 85, 247, 0.2);
}

/* =========================================================
   PESCADOR ESPECTRAL
   ========================================================= */

.phantom-fisherman-container {
  position: fixed;

  inset: 0;

  z-index: 9999;

  overflow: hidden;
}

.phantom-fisherman-patrol {
  position: absolute;

  top: 0;
  left: 0;

  width: 260px;
  height: 260px;

  opacity: 1;

  pointer-events: none;

  transition:
    opacity
    1250ms
    ease,
    filter
    1000ms
    ease;
}

/*
 * Movimiento lento.
 * 68 segundos por recorrido completo.
 */
body.halloween-mode
.phantom-fisherman-patrol {
  animation:
    riverFishermanDrift
    68s
    cubic-bezier(
      0.45,
      0,
      0.55,
      1
    )
    infinite;

  will-change:
    transform,
    opacity;
}

.phantom-fisherman-float {
  position: relative;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

body.halloween-mode
.phantom-fisherman-float {
  animation:
    fishermanFloatingGently
    6.2s
    ease-in-out
    infinite;
}

.phantom-fisherman-flip {
  width: 100%;
  height: 100%;

  pointer-events: none;

  transform-origin:
    center center;
}

body.halloween-mode
.phantom-fisherman-flip {
  animation:
    riverFishermanFlip
    68s
    step-end
    infinite;
}

/* =========================================================
   RECORRIDO DEL PESCADOR
   Mantiene al personaje alejado de la onda del Hero
   donde navega el bote.
   ========================================================= */

@keyframes riverFishermanDrift {
  0% {
    opacity: 0;

    transform:
      translate3d(
        -190px,
        17vh,
        0
      );
  }

  6% {
    opacity: 0.9;
  }

  22% {
    transform:
      translate3d(
        23vw,
        12vh,
        0
      )
      rotate(-1deg);
  }

  40% {
    transform:
      translate3d(
        56vw,
        24vh,
        0
      )
      rotate(2deg);
  }

  49% {
    opacity: 0.88;

    transform:
      translate3d(
        calc(100vw + 130px),
        16vh,
        0
      );
  }

  50% {
    opacity: 0;

    transform:
      translate3d(
        calc(100vw + 130px),
        16vh,
        0
      );
  }

  55% {
    opacity: 0.9;
  }

  69% {
    transform:
      translate3d(
        68vw,
        29vh,
        0
      )
      rotate(-2deg);
  }

  84% {
    transform:
      translate3d(
        33vw,
        17vh,
        0
      )
      rotate(1deg);
  }

  96% {
    opacity: 0.84;

    transform:
      translate3d(
        -145px,
        26vh,
        0
      );
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        -190px,
        17vh,
        0
      );
  }
}

@keyframes riverFishermanFlip {
  0%,
  49.99% {
    transform: scaleX(1);
  }

  50%,
  100% {
    transform: scaleX(-1);
  }
}

@keyframes fishermanFloatingGently {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-9px)
      rotate(1.2deg);
  }
}

/* =========================================================
   DESAPARICIÓN ESPECTRAL
   ========================================================= */

body.halloween-mode
.phantom-fisherman-patrol.ghost-lantern-dimming
.ghost-lantern-flame {
  opacity: 0.24;

  transform: scale(0.82);

  filter:
    drop-shadow(
      0 0 3px
      rgba(103, 232, 249, 0.24)
    );
}

body.halloween-mode
.phantom-fisherman-patrol.ghost-lantern-off
.ghost-lantern-flame {
  opacity: 0;

  transform: scale(0.7);

  filter: none;
}

body.halloween-mode
.phantom-fisherman-patrol.ghost-disappearing {
  opacity: 0.12;

  filter:
    blur(2px)
    brightness(0.5);
}

body.halloween-mode
.phantom-fisherman-patrol.ghost-hidden {
  opacity: 0;

  filter:
    blur(5px)
    brightness(0.2);

  pointer-events: none;
}

body.halloween-mode
.phantom-fisherman-patrol.ghost-returning {
  opacity: 0.42;

  filter:
    blur(1.8px)
    brightness(0.68);
}

body.halloween-mode
.phantom-fisherman-patrol.ghost-restored {
  opacity: 1;

  filter: none;
}

.ghost-lantern-flame {
  transform-box: fill-box;
  transform-origin: center;

  transition:
    opacity
    800ms
    ease,
    filter
    800ms
    ease,
    transform
    800ms
    ease;
}

body.halloween-mode
.phantom-fisherman-patrol.ghost-returning
.ghost-lantern-flame {
  opacity: 0.38;

  transform: scale(0.78);

  filter:
    drop-shadow(
      0 0 4px
      rgba(103, 232, 249, 0.45)
    )
    drop-shadow(
      0 0 7px
      rgba(224, 2, 120, 0.3)
    );
}

body.halloween-mode
.phantom-fisherman-patrol.ghost-restored
.ghost-lantern-flame {
  opacity: 1;

  transform: scale(1);
}

/* =========================================================
   RIG INTERACTIVO
   ========================================================= */

.ghost-interactive-rig {
  width: 250px;
  height: 250px;

  display: block;

  padding: 0;

  border: 0;

  background: transparent;

  filter:
    drop-shadow(
      0 0 16px
      rgba(224, 2, 120, 0.4)
    )
    drop-shadow(
      0 0 24px
      rgba(103, 232, 249, 0.45)
    );

  pointer-events: auto;

  transition:
    transform
    400ms
    cubic-bezier(
      0.34,
      1.56,
      0.64,
      1
    ),
    filter
    400ms
    ease;
}

.ghost-interactive-rig svg {
  width: 100%;
  height: 100%;

  pointer-events: none;
}

.ghost-eye-glow {
  filter:
    drop-shadow(
      0 0 5px
      #22d3ee
    );
}

.ghost-lantern-flame {
  filter:
    drop-shadow(
      0 0 6px
      #67e8f9
    )
    drop-shadow(
      0 0 10px
      #e00278
    );
}

.ghost-interactive-rig.is-shivering {
  animation:
    ghostShiverEffect
    650ms
    cubic-bezier(
      0.36,
      0.07,
      0.19,
      0.97
    );
}

@keyframes ghostShiverEffect {
  0%,
  100% {
    transform:
      scale(1.08)
      translate3d(
        0,
        0,
        0
      )
      rotate(0deg);
  }

  20% {
    transform:
      scale(1.15)
      translate3d(
        -6px,
        -4px,
        0
      )
      rotate(-4deg);
  }

  40% {
    transform:
      scale(1.12)
      translate3d(
        6px,
        -6px,
        0
      )
      rotate(5deg);
  }

  60% {
    transform:
      scale(1.14)
      translate3d(
        -4px,
        -2px,
        0
      )
      rotate(-3deg);
  }

  80% {
    transform:
      scale(1.1)
      translate3d(
        3px,
        -1px,
        0
      )
      rotate(2deg);
  }
}

/* =========================================================
   DIÁLOGO DEL PESCADOR
   ========================================================= */

.ghost-speech-bubble {
  position: absolute;

  top: -45px;
  left: 10px;

  z-index: 20;

  min-width: 165px;

  padding: 8px 14px;

  border:
    1.5px solid
    rgba(224, 2, 120, 0.82);

  border-radius:
    var(--radius-pill);

  color: #ffb1c8;

  background:
    rgba(14, 15, 20, 0.96);

  box-shadow:
    0 0 22px
    rgba(224, 2, 120, 0.55),
    0 0 30px
    rgba(103, 232, 249, 0.34);

  font-family:
    var(--font-heading);

  font-size: 0.66rem;
  font-weight: 700;

  letter-spacing: 0.04em;

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(8px)
    scale(0.92);

  pointer-events: none;

  transition:
    opacity
    400ms
    ease,
    transform
    400ms
    cubic-bezier(
      0.34,
      1.56,
      0.64,
      1
    ),
    visibility
    400ms
    ease;
}

.ghost-speech-bubble::after {
  content: "";

  position: absolute;

  left: 32px;
  bottom: -6px;

  width: 10px;
  height: 10px;

  border-right:
    1.5px solid
    rgba(224, 2, 120, 0.82);

  border-bottom:
    1.5px solid
    rgba(224, 2, 120, 0.82);

  background:
    rgba(14, 15, 20, 0.96);

  transform: rotate(45deg);
}

.ghost-speech-light {
  width: 8px;
  height: 8px;

  display: inline-block;

  margin-right: 7px;

  border-radius: 50%;

  background: #67e8f9;

  box-shadow:
    0 0 10px #67e8f9,
    0 0 16px #e00278;
}

.ghost-speech-bubble.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}

/* =========================================================
   HOVER
   ========================================================= */

@media
  (hover: hover)
  and
  (pointer: fine) {

  .ghost-interactive-rig:hover {
    filter:
      drop-shadow(
        0 0 25px
        rgba(224, 2, 120, 0.85)
      )
      drop-shadow(
        0 0 35px
        rgba(103, 232, 249, 0.8)
      )
      hue-rotate(-20deg);

    transform:
      scale(1.08)
      rotate(3deg);
  }

  .ghost-interactive-rig:hover
  .ghost-eye-glow {
    fill: #ff1493;

    filter:
      drop-shadow(
        0 0 12px
        #ff0055
      )
      drop-shadow(
        0 0 18px
        #ffffff
      );
  }

  .ghost-interactive-rig:hover
  .ghost-eye-core {
    fill: #050508;
  }

  .ghost-interactive-rig:hover
  .ghost-eye-pupil {
    opacity: 0;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .spectral-fog {
    opacity: 0.16;
  }

  .halloween-shark-zone {
    bottom: 9px;

    height: 58px;
  }

  .halloween-shark {
    width: 78px;
    height: 42px;
  }

  .halloween-shark-fin {
    left: 17px;

    width: 42px;
    height: 33px;
  }

  .halloween-shark-fin::before {
    width: 40px;
    height: 47px;
  }

  .phantom-fisherman-patrol {
    width: 190px;
    height: 190px;
  }

  .ghost-interactive-rig {
    width: 185px;
    height: 185px;
  }

  .ghost-speech-bubble {
    top: -25px;

    min-width: 145px;

    font-size: 0.59rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .spectral-fog,
  .spectral-wisp,
  .ghost-boat,
  .halloween-shark,
  .halloween-shark-body,
  .halloween-shark-fin::before,
  .phantom-fisherman-patrol,
  .phantom-fisherman-float,
  .phantom-fisherman-flip,
  .halloween-lantern-flicker {
    animation: none;
  }

  body.halloween-mode
  .halloween-shark {
    left: 65%;

    opacity: 0.7;

    transform: none;
  }

  body.halloween-mode
  .halloween-shark-body {
    transform: scaleX(-1);
  }

  body.halloween-mode
  .phantom-fisherman-patrol {
    top: 18vh;
    right: 18px;
    left: auto;

    opacity: 0.72;

    transform: none;
  }

  body.halloween-mode
  .ghost-boat {
    right: 30px;
    left: auto;

    opacity: 0.65;

    transform: none;
  }

  body.halloween-mode
  .phantom-fisherman-patrol.ghost-hidden {
    opacity: 0;
  }
}
/* ===== AISLAMIENTO Y MOVIMIENTO ===== */
body:not(.halloween-mode) .halloween-layer { display: none; }
@media (prefers-reduced-motion: reduce) {
 body.halloween-mode .halloween-layer *, body.halloween-mode .halloween-layer *::before, body.halloween-mode .halloween-layer *::after { animation: none; transition: none; }
}