/* —— Misery's Madame — companion lantern cursor —— */
/* Desktop only; JS adds .mm-lantern-active when enabled */

html.mm-lantern-active,
html.mm-lantern-active body,
html.mm-lantern-active a,
html.mm-lantern-active button,
html.mm-lantern-active label,
html.mm-lantern-active select,
html.mm-lantern-active [role="button"] {
  cursor: none !important;
}

html.mm-lantern-active input,
html.mm-lantern-active textarea {
  cursor: text !important;
}

/* Root follows the mouse (position set via transform in JS) */
.mm-lantern-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  will-change: transform;
}

.mm-lantern-root.is-ready {
  opacity: 1;
}

.mm-lantern-root.is-hidden {
  opacity: 0;
}

/* Inner shell — sway + page effects live here */
.mm-lantern-shell {
  position: absolute;
  width: 36px;
  height: 44px;
  margin-left: -18px;
  margin-top: -38px; /* hang just above the hot-spot */
  transform-origin: 50% 100%;
  transition:
    filter 0.45s ease,
    transform 0.55s ease;
  will-change: transform, filter;
}

/* Soft amber pool beneath the lantern */
.mm-lantern-pool {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 52px;
  height: 22px;
  margin-left: -26px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 190, 90, 0.28) 0%,
    rgba(255, 150, 50, 0.12) 42%,
    transparent 72%
  );
  filter: blur(3px);
  opacity: 0.75;
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.5s ease;
  transform: scale(1);
}

/* Outer glow ~30–40px */
.mm-lantern-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 110, 0.38) 0%,
    rgba(255, 160, 60, 0.16) 35%,
    rgba(255, 140, 40, 0.06) 55%,
    transparent 70%
  );
  opacity: 0.9;
  transition: opacity 0.4s ease, transform 0.45s ease, filter 0.5s ease;
  transform: scale(1);
  will-change: transform, opacity;
}

/* Brass lantern SVG container */
.mm-lantern-body {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.mm-lantern-body svg {
  display: block;
  width: 36px;
  height: 44px;
  overflow: visible;
}

/* Live flame layer (CSS, over glass) */
.mm-lantern-flame {
  position: absolute;
  left: 50%;
  top: 15px;
  width: 8px;
  height: 12px;
  margin-left: -4px;
  transform-origin: 50% 100%;
  pointer-events: none;
}

.mm-lantern-flame::before,
.mm-lantern-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateX(-50%);
}

.mm-lantern-flame::before {
  width: 7px;
  height: 11px;
  background: radial-gradient(ellipse at 50% 70%, #fff6c8 0%, #ffc04a 35%, #ff8a1a 70%, transparent 100%);
  box-shadow: 0 0 6px rgba(255, 180, 60, 0.7);
  animation: mmFlameFlicker 0.85s ease-in-out infinite;
}

.mm-lantern-flame::after {
  width: 3.5px;
  height: 6px;
  bottom: 2px;
  background: radial-gradient(ellipse at 50% 80%, #fffef0 0%, #ffe08a 60%, transparent 100%);
  opacity: 0.9;
  animation: mmFlameCore 0.7s ease-in-out infinite;
}

@keyframes mmFlameFlicker {
  0%, 100% { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.92; }
  20% { transform: translateX(calc(-50% - 0.4px)) scaleY(1.08) scaleX(0.94); opacity: 1; }
  45% { transform: translateX(calc(-50% + 0.5px)) scaleY(0.94) scaleX(1.04); opacity: 0.88; }
  70% { transform: translateX(calc(-50% - 0.2px)) scaleY(1.06) scaleX(0.97); opacity: 0.98; }
}

@keyframes mmFlameCore {
  0%, 100% { transform: translateX(-50%) scaleY(1); opacity: 0.85; }
  50% { transform: translateX(-50%) scaleY(1.12); opacity: 1; }
}

/* Slight carry-sway while moving (driven by class from JS) */
.mm-lantern-shell.is-moving {
  animation: mmLanternSway 1.8s ease-in-out infinite;
}

.mm-lantern-shell.is-idle {
  animation: none;
  transition: transform 1.4s ease;
}

@keyframes mmLanternSway {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}

/* —— Hover / page states —— */
.mm-lantern-root.is-button .mm-lantern-glow {
  opacity: 1;
  transform: scale(1.2);
  filter: brightness(1.2);
}

.mm-lantern-root.is-button .mm-lantern-pool {
  opacity: 0.95;
  transform: scale(1.15);
}

.mm-lantern-root.is-button .mm-lantern-flame::before {
  height: 13.5px;
  animation-duration: 0.7s;
}

.mm-lantern-root.is-nav .mm-lantern-glow {
  background: radial-gradient(
    circle,
    rgba(255, 210, 130, 0.42) 0%,
    rgba(255, 170, 70, 0.18) 35%,
    rgba(255, 150, 50, 0.07) 55%,
    transparent 70%
  );
  transform: scale(1.08);
}

/* Lean toward nav link (set --mm-lean from JS) */
.mm-lantern-root.is-nav .mm-lantern-shell {
  transform: rotate(var(--mm-lean, 0deg));
  transition: transform 0.35s ease;
}

.mm-lantern-root.is-nav .mm-lantern-shell.is-moving {
  animation: none;
}

/* Madame page — richer warmth */
.mm-lantern-root.page-madame .mm-lantern-glow,
.mm-lantern-root.is-madame-warm .mm-lantern-glow {
  background: radial-gradient(
    circle,
    rgba(255, 195, 120, 0.48) 0%,
    rgba(255, 150, 70, 0.22) 38%,
    rgba(200, 100, 255, 0.06) 58%,
    transparent 72%
  );
  filter: brightness(1.08);
}

.mm-lantern-root.is-madame-warm .mm-lantern-glow {
  transform: scale(1.18);
  transition: transform 0.8s ease, filter 0.8s ease, background 0.8s ease;
}

/* Gallery sparkle on glass */
.mm-lantern-sparkle {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 10px;
  height: 14px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    transparent 30%,
    rgba(255, 255, 255, 0.85) 48%,
    transparent 62%
  );
  border-radius: 2px;
  mix-blend-mode: screen;
}

.mm-lantern-root.is-sparkle .mm-lantern-sparkle {
  animation: mmGlassSparkle 0.9s ease-out forwards;
}

@keyframes mmGlassSparkle {
  0% { opacity: 0; transform: translateX(-4px) scaleY(0.6); }
  35% { opacity: 0.95; }
  100% { opacity: 0; transform: translateX(8px) scaleY(1.1); }
}

/* Crow-event flame reaction */
.mm-lantern-root.is-crow-flicker .mm-lantern-flame::before {
  animation: mmFlameCrow 0.2s ease-in-out 5;
}

.mm-lantern-root.is-crow-flicker .mm-lantern-glow {
  opacity: 0.55;
  transform: scale(0.88);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes mmFlameCrow {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50% { transform: translateX(calc(-50% + 1px)) scaleY(0.75) scaleX(1.15); }
}

/* Idle — calmer flame */
.mm-lantern-root.is-idle .mm-lantern-flame::before {
  animation-duration: 1.35s;
}

.mm-lantern-root.is-idle .mm-lantern-flame::after {
  animation-duration: 1.2s;
}

.mm-lantern-root.is-idle .mm-lantern-shell {
  transform: rotate(0deg);
}

/* Farewell message beside lantern */
.mm-lantern-farewell {
  position: absolute;
  left: 40px;
  top: 6px;
  white-space: nowrap;
  font-family: 'Great Vibes', 'Segoe Script', 'Brush Script MT', cursive;
  font-size: 1.15rem;
  color: #ffe8c8;
  text-shadow:
    0 0 10px rgba(255, 190, 100, 0.35),
    0 0 18px rgba(120, 60, 180, 0.25);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 1.4s ease, transform 1.4s ease;
  pointer-events: none;
}

.mm-lantern-root.is-farewell .mm-lantern-farewell {
  opacity: 0.92;
  transform: translateX(0);
}

.mm-lantern-root.is-farewell .mm-lantern-glow {
  opacity: 1;
  transform: scale(1.22);
  filter: brightness(1.15);
}

/* —— Floating particles (appended near lantern or on body) —— */
.mm-fx-ember,
.mm-fx-firefly,
.mm-fx-feather,
.mm-fx-crow,
.mm-fx-idle-fly {
  position: fixed;
  pointer-events: none;
  z-index: 2147482999;
  will-change: transform, opacity;
}

.mm-fx-ember {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffc060;
  box-shadow: 0 0 6px rgba(255, 180, 60, 0.85), 0 0 12px rgba(255, 120, 30, 0.4);
  animation: mmEmberRise 2.8s ease-out forwards;
}

@keyframes mmEmberRise {
  0% { opacity: 0.9; transform: translate(0, 0) scale(1); }
  70% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(var(--mm-ex, 8px), -48px) scale(0.35); }
}

.mm-fx-firefly {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff0b0;
  box-shadow: 0 0 8px rgba(255, 230, 140, 0.9), 0 0 16px rgba(255, 190, 60, 0.35);
  animation: mmFireflyCircle 3.2s ease-in-out forwards;
}

@keyframes mmFireflyCircle {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12% { opacity: 0.85; }
  50% { opacity: 0.7; transform: translate(18px, -14px) scale(1); }
  80% { opacity: 0.5; transform: translate(-6px, -28px) scale(0.85); }
  100% { opacity: 0; transform: translate(12px, -42px) scale(0.4); }
}

/* Idle firefly lands on handle then leaves */
.mm-fx-idle-fly {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6c8;
  box-shadow: 0 0 7px rgba(255, 230, 140, 0.95);
  opacity: 0;
}

.mm-fx-idle-fly.is-land {
  animation: mmIdleLand 2s ease-in-out forwards;
}

.mm-fx-idle-fly.is-leave {
  animation: mmIdleLeave 1.4s ease-in forwards;
}

@keyframes mmIdleLand {
  0% { opacity: 0; transform: translate(12px, -18px) scale(0.5); }
  40% { opacity: 0.9; transform: translate(2px, -2px) scale(1); }
  100% { opacity: 0.75; transform: translate(1px, 0) scale(0.95); }
}

@keyframes mmIdleLeave {
  0% { opacity: 0.75; transform: translate(1px, 0) scale(0.95); }
  100% { opacity: 0; transform: translate(-14px, -36px) scale(0.4); }
}

.mm-fx-feather {
  width: 10px;
  height: 18px;
  opacity: 0;
  background:
    radial-gradient(ellipse at 40% 20%, rgba(230, 220, 245, 0.95) 0%, rgba(180, 170, 210, 0.5) 55%, transparent 70%);
  border-radius: 50% 50% 40% 40%;
  filter: drop-shadow(0 0 3px rgba(200, 190, 255, 0.25));
  animation: mmFeatherDrift 5.5s ease-in forwards;
}

@keyframes mmFeatherDrift {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
  12% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--mm-fx, 40px), 120px) rotate(28deg); }
}

/* Silent crow glide across the top — silhouette only, no fanfare */
.mm-fx-crow {
  top: 16px;
  left: -90px;
  width: 42px;
  height: 20px;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  animation: mmCrowGlide 7.5s cubic-bezier(0.4, 0.05, 0.35, 1) forwards;
}

.mm-fx-crow svg {
  display: block;
  width: 42px;
  height: 20px;
}

@keyframes mmCrowGlide {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(0.92);
  }
  8% {
    opacity: 0.55;
  }
  25% {
    transform: translateX(28vw) translateY(5px) scale(0.96);
  }
  50% {
    opacity: 0.48;
    transform: translateX(52vw) translateY(-4px) scale(1);
  }
  75% {
    transform: translateX(78vw) translateY(4px) scale(0.96);
  }
  90% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(100vw + 50px)) translateY(-2px) scale(0.9);
  }
}

/* Reduced motion: never show (JS also skips) */
@media (prefers-reduced-motion: reduce) {
  .mm-lantern-root,
  .mm-fx-ember,
  .mm-fx-firefly,
  .mm-fx-feather,
  .mm-fx-crow,
  .mm-fx-idle-fly {
    display: none !important;
  }
}

/* Extra safety: hide on coarse pointers even if class leaked */
@media (hover: none), (pointer: coarse) {
  .mm-lantern-root,
  .mm-fx-ember,
  .mm-fx-firefly,
  .mm-fx-feather,
  .mm-fx-crow,
  .mm-fx-idle-fly {
    display: none !important;
  }

  html.mm-lantern-active,
  html.mm-lantern-active * {
    cursor: auto !important;
  }
}