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

:root {
  --halloween-orange: #995000;
  --halloween-orange-soft: #fed7aa;
  --halloween-plum: #5b2148;
  --halloween-purple: #6d28d9;
  --halloween-wine: #8b1e3f;
  --halloween-ink: #2b1a15;
  --halloween-cream: #fff8ee;
  --halloween-gold: #f59e0b;
  --halloween-glow: rgba(245, 158, 11, 0.28);
}

/* ===== TOGGLE HALLOWEEN ===== */

.halloween-toggle {
  min-width: 44px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 10px;

  border:
    1px solid
    var(--line);

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

  color:
    var(--brown-900);

  background:
    rgba(
      255,
      253,
      249,
      0.62
    );

  transition:
    transform
      var(--transition-tap)
      var(--ease-standard),
    background-color
      var(--transition-ui)
      ease,
    border-color
      var(--transition-ui)
      ease,
    box-shadow
      var(--transition-ui)
      ease;
}

.halloween-toggle:active {
  transform:
    scale(0.97);
}

.halloween-toggle[aria-pressed="true"] {
  border-color:
    rgba(
      217,
      119,
      6,
      0.30
    );

  background:
    rgba(
      254,
      215,
      170,
      0.42
    );

  box-shadow:
    0 8px 22px
    rgba(
      91,
      33,
      72,
      0.08
    );
}

.halloween-toggle-icon {
  color:
    var(--halloween-plum);

  font-size: 20px;
}

.halloween-toggle[aria-pressed="true"]
.halloween-toggle-icon {
  color:
    var(--halloween-orange);
}

.halloween-toggle-label {
  display: none;

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.04em;
}

/* ===== VISIBILIDAD DEL MODO ===== */

.halloween-seasonal {
  display: none;
}

body.halloween-active
.halloween-seasonal {
  display: block;
}

body.halloween-active
.halloween-seasonal.is-flex {
  display: flex;
}

body.halloween-active
.halloween-seasonal.is-grid {
  display: grid;
}

/* ===== CAPA AMBIENTAL ===== */

.halloween-atmosphere {
  position: fixed;

  inset: 0;

  z-index: 640;

  overflow: hidden;

  pointer-events: none;
}

/* ===== PARTÍCULAS ===== */

.halloween-spark-layer {
  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.halloween-spark {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--halloween-gold);

  box-shadow:
    0 0 10px
    rgba(
      245,
      158,
      11,
      0.82
    );

  opacity: 0;

  animation:
    halloween-spark-drift
    var(--spark-duration, 7s)
    ease-in-out
    var(--spark-delay, 0s)
    infinite;
}

.halloween-spark:nth-child(3n) {
  width: 4px;
  height: 4px;

  background:
    #fde68a;
}

.halloween-spark:nth-child(4n) {
  width: 6px;
  height: 6px;

  background:
    #fbbf24;
}

@keyframes halloween-spark-drift {
  0%,
  100% {
    opacity: 0;

    transform:
      translate3d(
        0,
        7px,
        0
      )
      scale(0.75);
  }

  18% {
    opacity: 0.52;
  }

  50% {
    opacity: 0.82;

    transform:
      translate3d(
        5px,
        -7px,
        0
      )
      scale(1.08);
  }

  82% {
    opacity: 0.34;
  }
}

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

.halloween-hero-decor {
  position: absolute;

  inset: 0;

  z-index: 4;

  overflow: hidden;

  pointer-events: none;
}

/* ===== ARAÑAS ===== */

.halloween-spider {
  position: absolute;

  top: 0;

  width: 48px;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform-origin:
    top center;

  animation:
    halloween-spider-sway
    4.8s
    ease-in-out
    infinite;
}

.halloween-spider--left {
  left:
    clamp(
      10px,
      4vw,
      62px
    );
}

.halloween-spider--right {
  right:
    clamp(
      14px,
      7vw,
      92px
    );

  width: 42px;

  animation-delay:
    -2.3s;
}

.halloween-spider__thread {
  width: 1px;
  height: 70px;

  background:
    linear-gradient(
      to bottom,
      rgba(
        198,
        146,
        100,
        0.08
      ),
      rgba(
        217,
        119,
        6,
        0.72
      )
    );
}

.halloween-spider--right
.halloween-spider__thread {
  height: 96px;
}

.halloween-spider svg {
  width: 100%;
  height: auto;

  filter:
    drop-shadow(
      0 4px 5px
      rgba(
        43,
        26,
        21,
        0.18
      )
    );
}

/* ===== MURCIÉLAGO ===== */

.halloween-bat {
  position: absolute;

  top: 22px;
  right: 10px;

  width: 36px;
  height: 24px;

  color:
    var(--halloween-ink);

  opacity: 0.72;

  animation:
    halloween-bat-flap
    2.6s
    ease-in-out
    infinite;
}

.halloween-bat svg {
  width: 100%;
  height: 100%;
}

/* ===== BADGE HERO ===== */

.halloween-hero-badge {
  position: absolute;

  top: 12px;
  left: 50%;

  z-index: 5;

  max-width:
    calc(
      100% -
      130px
    );

  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    6px 10px;

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

  color:
    var(--halloween-plum);

  background:
    rgba(
      255,
      250,
      243,
      0.84
    );

  box-shadow:
    0 8px 20px
    rgba(
      51,
      33,
      23,
      0.08
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size: 0.64rem;
  font-weight: 800;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  white-space: nowrap;

  transform:
    translateX(-50%);
}

.halloween-hero-badge::before {
  content: "🎃";
}

@keyframes halloween-spider-sway {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-4deg);
  }

  50% {
    transform:
      translateY(12px)
      rotate(5deg);
  }
}

@keyframes halloween-bat-flap {
  0%,
  100% {
    transform:
      translateY(0)
      scaleY(1);
  }

  50% {
    transform:
      translateY(-4px)
      scaleY(0.72);
  }
}

/* ===== FANTASMAS VIAJEROS ===== */

.halloween-spirit {
  --ghost-opacity: 0;
  --ghost-blur: 3px;

  position: absolute;

  width: 112px;
  height: 126px;

  display: block;

  padding: 0;

  border: 0;
  border-radius: 0;

  color: inherit;

  background: transparent;

  box-shadow: none;

  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;

  pointer-events: auto;

  touch-action: manipulation;

  cursor: pointer;
}

.halloween-spirit::before {
  position: absolute;

  inset: -40px;

  content: "";

  background: transparent;

  pointer-events: none;
}

/* ===== CONTENEDOR GENERAL ===== */

.halloween-spirit__bob {
  width: 100%;
  height: 100%;

  filter:
    drop-shadow(
      0 8px 12px
      rgba(
        43,
        26,
        21,
        0.12
      )
    );

  transform-origin: center;

  animation:
    halloween-spirit-bob
    3.7s
    ease-in-out
    infinite;

  will-change:
    transform;
}

/* ===== SÓLO EL FANTASMA ===== */

.halloween-ghost-visual {
  opacity:
    var(--ghost-opacity);

  filter:
    blur(
      var(--ghost-blur)
    );

  transform-box:
    fill-box;

  transform-origin:
    center;

  transition:
    opacity 260ms ease,
    filter 260ms ease;

}

/* ===== PRODUCTO SIEMPRE VISIBLE ===== */

.halloween-spirit-item {
  opacity: 1;

  filter: none;

  transform-box:
    fill-box;

  transform-origin:
    center;
}

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

.halloween-spirit:hover {
  --ghost-opacity: 1;
  --ghost-blur: 0px;
}

.halloween-spirit:focus-visible {
  --ghost-opacity: 1;
  --ghost-blur: 0px;

  outline:
    2px solid
    rgba(
      217,
      119,
      6,
      0.55
    );

  outline-offset:
    4px;

  border-radius:
    50%;
}

/* ===== ESTADO ASUSTADO ===== */

.halloween-spirit.is-scared {
  --ghost-opacity: 1;
  --ghost-blur: 0px;
}

.halloween-spirit.is-scared
.halloween-ghost-visual {
  opacity: 1;

  filter:
    blur(0)
    drop-shadow(
      0 0 10px
      rgba(
        245,
        158,
        11,
        0.30
      )
    );

  animation:
    halloween-ghost-shiver
    170ms
    linear
    8;
}

/* ===== RUTAS ===== */

.halloween-spirit--cake {
  top: 14vh;
  left: -120px;

  animation:
    halloween-flight-left-right
    34s
    ease-in-out
    infinite;
}

.halloween-spirit--muffin {
  top: 46vh;
  right: -120px;

  animation:
    halloween-flight-right-left
    39s
    ease-in-out
    -8s
    infinite;
}

.halloween-spirit--coffee {
  bottom:
    calc(
      var(--mobile-nav-height) +
      env(safe-area-inset-bottom) +
      34px
    );

  left: -120px;

  animation:
    halloween-flight-left-right-low
    43s
    ease-in-out
    -16s
    infinite;
}

/* ===== SVG ===== */

.halloween-spirit svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}

.halloween-ghost-body {
  fill:
    rgba(
      255,
      253,
      249,
      0.97
    );
}

.halloween-ghost-highlight {
  fill:
    rgba(
      255,
      255,
      255,
      0.74
    );
}

.halloween-ghost-cheek {
  fill:
    rgba(
      225,
      188,
      146,
      0.78
    );
}

.halloween-ghost-eye,
.halloween-ghost-mouth {
  fill:
    var(--halloween-ink);
}

/* ===== CARAS ===== */

.halloween-face-friendly,
.halloween-face-scared,
.halloween-sweat {
  transform-box:
    fill-box;

  transform-origin:
    center;

  transition:
    opacity
      180ms
      ease,
    transform
      200ms
      var(--ease-standard);
}

.halloween-face-friendly {
  opacity: 1;

  transform:
    scale(1);
}

.halloween-face-scared,
.halloween-sweat {
  opacity: 0;

  transform:
    scale(0.8);
}

.halloween-spirit.is-scared
.halloween-face-friendly {
  opacity: 0;

  transform:
    scale(0.82);
}

.halloween-spirit.is-scared
.halloween-face-scared,
.halloween-spirit.is-scared
.halloween-sweat {
  opacity: 1;

  transform:
    scale(1);
}

.halloween-spirit.is-scared
.halloween-sweat {
  animation:
    halloween-sweat-drop
    900ms
    ease-in-out
    2;
}

/* ===== MENSAJE ===== */

.halloween-spirit__speech {
  position: absolute;

  top: -18px;
  left: 50%;

  z-index: 2;

  width: max-content;

  max-width: 190px;

  padding:
    6px 9px;

  border: 0;

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

  color:
    var(--halloween-plum);

  background:
    rgba(
      255,
      250,
      243,
      0.94
    );

  box-shadow:
    0 8px 22px
    rgba(
      43,
      26,
      21,
      0.10
    );

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-size: 0.64rem;
  font-weight: 800;

  line-height: 1.25;

  text-align: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translate(
      -50%,
      6px
    )
    scale(0.88);

  transition:
    opacity
      180ms
      ease,
    visibility
      180ms
      ease,
    transform
      200ms
      var(--ease-standard);
}

.halloween-spirit.is-scared
.halloween-spirit__speech {
  opacity: 1;

  visibility: visible;

  transform:
    translate(
      -50%,
      0
    )
    scale(1);
}

/* ===== FLOTACIÓN ===== */

@keyframes halloween-spirit-bob {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-8px)
      rotate(1deg);
  }
}

/* ===== TEMBLOR DEL FANTASMA ===== */

@keyframes halloween-ghost-shiver {
  0%,
  100% {
    transform:
      translate(
        0,
        0
      )
      rotate(0);
  }

  25% {
    transform:
      translate(
        -2px,
        1px
      )
      rotate(-2deg);
  }

  50% {
    transform:
      translate(
        2px,
        -1px
      )
      rotate(2deg);
  }

  75% {
    transform:
      translate(
        -1px,
        -1px
      )
      rotate(-1deg);
  }
}

/* ===== GOTITAS ===== */

@keyframes halloween-sweat-drop {
  0% {
    opacity: 0.9;

    transform:
      translateY(0);
  }

  80% {
    opacity: 0.9;

    transform:
      translateY(7px);
  }

  100% {
    opacity: 0;

    transform:
      translateY(11px);
  }
}

/* ===== RUTAS DE VUELO ===== */

@keyframes halloween-flight-left-right {
  0%,
  4% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  26% {
    transform:
      translate3d(
        28vw,
        -12px,
        0
      );
  }

  52% {
    transform:
      translate3d(
        57vw,
        14px,
        0
      );
  }

  78% {
    transform:
      translate3d(
        82vw,
        -8px,
        0
      );
  }

  100% {
    transform:
      translate3d(
        calc(
          100vw +
          180px
        ),
        4px,
        0
      );
  }
}

@keyframes halloween-flight-right-left {
  0%,
  4% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  30% {
    transform:
      translate3d(
        -30vw,
        16px,
        0
      );
  }

  56% {
    transform:
      translate3d(
        -58vw,
        -10px,
        0
      );
  }

  82% {
    transform:
      translate3d(
        -84vw,
        12px,
        0
      );
  }

  100% {
    transform:
      translate3d(
        calc(
          -100vw -
          180px
        ),
        -5px,
        0
      );
  }
}

@keyframes halloween-flight-left-right-low {
  0%,
  5% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  38% {
    transform:
      translate3d(
        36vw,
        11px,
        0
      );
  }

  66% {
    transform:
      translate3d(
        67vw,
        -14px,
        0
      );
  }

  100% {
    transform:
      translate3d(
        calc(
          100vw +
          180px
        ),
        7px,
        0
      );
  }
}

/* ===== DECORACIONES POR SECCIÓN ===== */

.halloween-section-decoration {
  position: absolute;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 6px;

  color:
    var(--halloween-plum);

  pointer-events: none;
}

.halloween-section-decoration svg {
  display: block;

  width: 42px;
  height: 42px;

  overflow: visible;

  filter:
    drop-shadow(
      0 4px 7px
      rgba(
        43,
        26,
        21,
        0.10
      )
    );
}

.halloween-section-decoration--about {
  right: 14px;
  bottom: 14px;
}

.halloween-section-decoration--menu {
  top: 14px;
  right: 16px;
}

.halloween-section-decoration--cafe {
  top: 15px;
  left: 16px;
}

.halloween-section-decoration--team {
  top: 16px;
  right: 18px;
}

.halloween-section-decoration--gallery {
  top: 16px;
  right: 18px;
}

.halloween-section-decoration--reviews {
  left: 16px;
  bottom: 16px;
}

.halloween-section-decoration--contact {
  right: 16px;
  bottom: 18px;
}

.halloween-mini-ghost {
  animation:
    halloween-mini-float
    4s
    ease-in-out
    infinite;
}

.halloween-mini-bat {
  animation:
    halloween-bat-flap
    2.8s
    ease-in-out
    infinite;
}

.halloween-candle-flame {
  transform-box:
    fill-box;

  transform-origin:
    center bottom;

  animation:
    halloween-candle-flicker
    1.8s
    ease-in-out
    infinite;
}

@keyframes halloween-mini-float {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

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

@keyframes halloween-candle-flicker {
  0%,
  100% {
    opacity: 0.88;

    transform:
      scale(1)
      rotate(-2deg);
  }

  50% {
    opacity: 1;

    transform:
      scale(
        1.12,
        0.9
      )
      rotate(2deg);
  }
}

/* ===== MICRODETALLES ===== */

body.halloween-active
.hero-photo-tag::after {
  content:
    " · Noche Encantada";
}

body.halloween-active
.about-dessert-stamp {
  box-shadow:
    var(--shadow-small),
    0 0 0 5px
    rgba(
      245,
      158,
      11,
      0.05
    );
}

body.halloween-active
.category-tab.is-active {
  box-shadow:
    0 8px 22px
    rgba(
      91,
      33,
      72,
      0.10
    );
}

body.halloween-active
.site-footer {
  background:
    radial-gradient(
      circle at 84% 16%,
      rgba(
        217,
        119,
        6,
        0.08
      ),
      transparent 22%
    ),
    var(--brown-950);
}

/* ===== TABLET ===== */

@media (min-width: 768px) {
  .halloween-toggle-label {
    display: inline;
  }

  .halloween-toggle {
    padding-inline: 12px;
  }

  .halloween-spirit {
    width: 124px;
    height: 138px;
  }

  .halloween-hero-badge {
    top: 18px;

    font-size: 0.68rem;
  }

  .halloween-section-decoration svg {
    width: 48px;
    height: 48px;
  }
}

/* ===== DESKTOP ===== */

@media (min-width: 1024px) {
  .halloween-atmosphere {
    z-index: 700;
  }

  .halloween-spirit {
    width: 136px;
    height: 150px;
  }

  .halloween-spirit--coffee {
    bottom: 26px;
  }

  .halloween-section-decoration--about {
    right: 3%;
    bottom: 9%;
  }

  .halloween-section-decoration--menu {
    top: 4%;
    right: 3%;
  }

  .halloween-section-decoration--cafe {
    top: 6%;
    left: 3%;
  }

  .halloween-section-decoration--gallery,
  .halloween-section-decoration--team {
    top: 7%;
    right: 3%;
  }

  .halloween-section-decoration--reviews {
    left: 3%;
    bottom: 7%;
  }

  .halloween-section-decoration--contact {
    right: 3%;
    bottom: 7%;
  }
}

/* ===== MÓVIL / TOUCH ===== */

@media (max-width: 767px) {
  .halloween-toggle {
    width: 44px;

    padding: 0;
  }

  .halloween-spider--right,
  .halloween-bat {
    opacity: 0.54;
  }

  .halloween-hero-badge {
    top: 9px;

    max-width:
      calc(
        100% -
        112px
      );

    overflow: hidden;

    text-overflow: ellipsis;
  }

  .halloween-spirit {
    width: 88px;
    height: 100px;
  }

  .halloween-spirit--cake {
    top: 18vh;
  }

  .halloween-spirit--muffin {
    top: 52vh;
  }

  .halloween-spirit__speech {
    top: -22px;

    max-width: 150px;

    font-size: 0.58rem;
  }

  .halloween-section-decoration {
    opacity: 0.72;
  }

  .halloween-section-decoration svg {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 479px) {
  .halloween-spirit--coffee {
    display: none;
  }

  .halloween-spider--right {
    display: none;
  }

  .halloween-section-decoration--reviews,
  .halloween-section-decoration--contact {
    opacity: 0.56;
  }
}

@media (max-width: 390px) {
  .halloween-hero-badge {
    left: auto;
    right: 10px;

    max-width: 170px;

    transform: none;
  }

  .halloween-spider--left {
    left: 8px;
  }

  .halloween-spirit {
    width: 80px;
    height: 92px;
  }
}

/* ===== POINTER FINO ===== */

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

  .halloween-toggle:hover {
    border-color:
      rgba(
        217,
        119,
        6,
        0.30
      );

    background:
      rgba(
        254,
        215,
        170,
        0.34
      );
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .halloween-spark,
  .halloween-spider,
  .halloween-bat,
  .halloween-spirit,
  .halloween-spirit__bob,
  .halloween-spirit.is-scared
  .halloween-ghost-visual,
  .halloween-sweat,
  .halloween-mini-ghost,
  .halloween-mini-bat,
  .halloween-candle-flame {
    animation: none;
  }

  .halloween-spirit--cake {
    top: 16vh;
    left: 12px;
  }

  .halloween-spirit--muffin {
    top: 48vh;
    right: 12px;
  }

  .halloween-spirit--coffee {
    left: 14px;
  }

  .halloween-ghost-visual {
    transition:
      opacity 120ms ease,
      filter 120ms ease;
  }
}
/* ===== FOCO Y MOVIMIENTO REDUCIDO ===== */

.halloween-spirit:focus-visible .halloween-ghost-visual {
  opacity: 1;
  filter: none;
}

.halloween-spirit:focus-visible {
  outline: 3px solid var(--halloween-plum);
}

@media (prefers-reduced-motion: reduce) {
  .halloween-seasonal,
  .halloween-seasonal *,
  .halloween-seasonal *::before,
  .halloween-seasonal *::after,
  .halloween-toggle {
    animation: none;
    transition: none;
  }
}

/* ===== HALLOWEEN SIN MOVIMIENTO ===== */

@media (prefers-reduced-motion: reduce) {
  .halloween-spirit__bob,
  .halloween-ghost-visual {
    will-change: auto;
  }
}

/* ===== CONTRASTE DEL SISTEMA ===== */

@media (forced-colors: active) {
  .halloween-toggle {
    border: 1px solid ButtonText;
  }

  .halloween-toggle:focus-visible,
  .halloween-spirit:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ===== AISLAMIENTO DEL MODO ===== */

body:not(.halloween-active) .halloween-seasonal,
body:not(.halloween-active) #halloween-overlay-root,
body .halloween-seasonal[hidden] {
  display: none;
}