/* ==========================================================================
   Solvix Group — Halloween ghost mascot
   Self-contained: safe to remove this file + ghost-mascot.js + the two
   <link>/<script> tags to retire the mascot after the season.
   ========================================================================== */

.ghost-mascot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 170px;
  z-index: 150;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}

.ghost-mascot[hidden] { display: none; }

/* Soft glow that lifts the scene off whatever page content is behind it,
   so the house/candy don't read as random shapes over your copy. */
.ghost-stage {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 230px 130px at 130px 120px, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.is-trickortreating .ghost-stage,
.is-peeking .ghost-stage {
  opacity: 1;
}

/* Everything in the corner is decorative except the ghost itself, which is
   a real, focusable button. */
.ghost-hotspot {
  position: absolute;
  left: 18px;
  bottom: 14px;
  width: 92px;
  height: 108px;
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate(var(--ghost-x, 0px), 0) rotate(var(--ghost-rot, 0deg));
  animation: ghost-bob 4.2s ease-in-out infinite;
}

.ghost-hotspot:focus-visible {
  outline: 3px solid var(--orange-display);
  outline-offset: 4px;
  border-radius: 50%;
}

.ghost-svg { display: block; width: 100%; height: 100%; overflow: visible; }

.ghost-shadow {
  fill: var(--navy-deep);
  opacity: 0.14;
}

.ghost-body {
  fill: #FBFCFE;
  stroke: var(--navy);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

.ghost-lens {
  fill: var(--blue);
  stroke: var(--navy);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

.ghost-shades-bridge {
  fill: none;
  stroke: var(--navy);
  stroke-width: 4.5;
  stroke-linecap: round;
}

.ghost-shades-arm {
  stroke: var(--navy);
  stroke-width: 4;
  stroke-linecap: round;
}

.ghost-lens-shine { fill: #FFFFFF; opacity: 0.85; }
.ghost-lens-dot { fill: #FFFFFF; opacity: 0.75; }

.ghost-mouth-smile {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.ghost-mouth-boo {
  fill: var(--navy-deep);
  opacity: 0;
  transform-origin: 50px 78px;
  transform: scale(0.4);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ghost-mouth-chomp {
  fill: var(--navy-deep);
  opacity: 0;
  transform-origin: 50px 77px;
  transform: scale(0.3);
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.ghost-arm-right {
  transform-box: fill-box;
  transform-origin: 100% 40%;
}

.ghost-glow {
  fill: var(--orange-display);
  opacity: 0;
}

.ghost-hotspot {
  --chomp-x: 0px;
  --chomp-y: 0px;
}

/* -------- speech bubble -------- */
.ghost-bubble {
  position: absolute;
  left: 88px;
  bottom: 92px;
  min-width: 54px;
  padding: 6px 12px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 14px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.ghost-bubble::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}

/* -------- little house (trick-or-treat) -------- */
.ghost-house {
  position: absolute;
  left: 216px;
  bottom: 8px;
  width: 64px;
  height: 70px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.ghost-house-roof { fill: var(--orange-display); }
.ghost-house-wall { fill: var(--navy); }
.ghost-house-door { fill: var(--navy-deep); }
.ghost-house-window { fill: #FFE7B3; opacity: 0.9; }
.ghost-house-glow {
  fill: var(--orange-display);
  opacity: 0;
}

/* -------- candy -------- */
.ghost-candy {
  position: absolute;
  left: 128px;
  bottom: 118px;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform: translateY(6px) scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.ghost-candy-wrap { fill: var(--orange-display); }
.ghost-candy-twist { fill: var(--navy); }

/* -------- dismiss control -------- */
.ghost-dismiss {
  position: absolute;
  left: 96px;
  bottom: 122px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.ghost-mascot:hover .ghost-dismiss,
.ghost-mascot:focus-within .ghost-dismiss {
  opacity: 1;
  pointer-events: auto;
}

.ghost-dismiss:hover { background: var(--bg); }

/* ============ idle bob ============ */
@keyframes ghost-bob {
  0%, 100% { transform: translate(var(--ghost-x, 0px), 0) rotate(var(--ghost-rot, 0deg)); }
  50%      { transform: translate(var(--ghost-x, 0px), -9px) rotate(calc(var(--ghost-rot, 0deg) * -1)); }
}

/* ============ wave act ============ */
.is-waving .ghost-arm-right {
  animation: ghost-wave 1.3s ease-in-out;
}

@keyframes ghost-wave {
  0%, 100% { transform: rotate(0deg); }
  20%  { transform: rotate(-18deg); }
  35%  { transform: rotate(-32deg); }
  50%  { transform: rotate(-14deg); }
  65%  { transform: rotate(-32deg); }
  80%  { transform: rotate(-10deg); }
}

/* ============ peekaboo act ============ */
/* Relies on the page's own overflow-x: hidden to hide the ghost off-edge. */
.is-peeking .ghost-hotspot {
  animation: ghost-peek 2.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ghost-peek {
  0%   { transform: translate(0, 0); }
  18%  { transform: translate(-70px, 0); }
  30%  { transform: translate(-70px, 0); }
  42%  { transform: translate(4px, 0) scale(1.08); }
  50%  { transform: translate(0, 0) scale(1.08); }
  62%  { transform: translate(0, 0) scale(1); }
  78%  { transform: translate(-52px, 0); }
  92%  { transform: translate(-52px, 0); }
  100% { transform: translate(0, 0); }
}

.is-peeking .ghost-bubble {
  animation: ghost-bubble-pop 2.7s ease;
}

@keyframes ghost-bubble-pop {
  0%, 38%  { opacity: 0; transform: translateY(6px) scale(0.85); }
  46%, 60% { opacity: 1; transform: translateY(0) scale(1); }
  70%, 100% { opacity: 0; transform: translateY(6px) scale(0.85); }
}

/* ============ trick-or-treat act ============ */
.is-trickortreating .ghost-hotspot {
  animation: ghost-visit 4.4s cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes ghost-visit {
  0%   { transform: translate(0, 0); }
  22%  { transform: translate(100px, -4px); }
  28%  { transform: translate(100px, 2px); }
  33%  { transform: translate(100px, -6px); }
  38%  { transform: translate(100px, 2px); }
  80%  { transform: translate(100px, -2px); }
  100% { transform: translate(0, 0); }
}

.is-trickortreating .ghost-house {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.is-trickortreating .ghost-house-glow {
  animation: ghost-house-glow 4.4s ease;
}

@keyframes ghost-house-glow {
  0%, 30%   { opacity: 0; }
  36%, 44%  { opacity: 0.9; }
  50%, 100% { opacity: 0; }
}

/* Candy appears, gets bitten twice, then gets carried off. */
.is-trickortreating .ghost-candy {
  animation: ghost-candy-life 4.4s ease forwards;
}

@keyframes ghost-candy-life {
  0%, 46%   { opacity: 0; transform: translateY(6px) scale(0.7); }
  54%       { opacity: 1; transform: translateY(-4px) scale(1); }
  60%       { transform: translateY(-4px) scale(0.82); }   /* bite one */
  64%       { transform: translateY(-4px) scale(1); }
  70%       { transform: translateY(-4px) scale(0.74); }   /* bite two */
  75%       { transform: translateY(-4px) scale(0.92); }
  88%       { opacity: 1; transform: translateY(-4px) scale(0.86); }
  100%      { opacity: 0; transform: translateY(-15px) scale(0.55); }
}

/* Mouth bites in sync with the candy shrinking above. */
.is-trickortreating .ghost-mouth-smile {
  animation: ghost-nibble-smile 4.4s ease;
}
.is-trickortreating .ghost-mouth-chomp {
  animation: ghost-nibble-mouth 4.4s ease;
}

@keyframes ghost-nibble-smile {
  0%, 56%   { opacity: 1; }
  60%, 84%  { opacity: 0; }
  90%, 100% { opacity: 1; }
}

@keyframes ghost-nibble-mouth {
  0%, 56%   { opacity: 0; transform: scale(0.3); }
  60%       { opacity: 1; transform: scale(1); }
  64%       { opacity: 1; transform: scale(0.55); }
  68%       { opacity: 1; transform: scale(1); }
  72%       { opacity: 1; transform: scale(0.55); }
  76%       { opacity: 1; transform: scale(0.9); }
  86%, 100% { opacity: 0; transform: scale(0.3); }
}

/* ============ boo mouth swap ============ */
.is-peeking .ghost-mouth-smile { opacity: 0; }
.is-peeking .ghost-mouth-boo { opacity: 1; transform: scale(1); }

/* ============ chomp-the-cursor (hover) ============ */
.is-chomping .ghost-hotspot {
  animation: ghost-chomp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ghost-chomp {
  0%   { transform: translate(var(--ghost-x, 0px), 0) scale(1); }
  32%  { transform: translate(calc(var(--ghost-x, 0px) + var(--chomp-x, 0px)), var(--chomp-y, 0px)) scale(1.14); }
  58%  { transform: translate(calc(var(--ghost-x, 0px) + var(--chomp-x, 0px) * 0.35), calc(var(--chomp-y, 0px) * 0.35)) scale(0.94); }
  100% { transform: translate(var(--ghost-x, 0px), 0) scale(1); }
}

.is-chomping .ghost-mouth-smile { opacity: 0; }
.is-chomping .ghost-mouth-chomp {
  opacity: 1;
  transform: scale(1);
  animation: ghost-chomp-mouth 0.5s ease;
}

@keyframes ghost-chomp-mouth {
  0%, 100% { transform: scale(0.3); }
  32%, 58% { transform: scale(1.1); }
  45%      { transform: scale(0.6); }
}

.is-chomping .ghost-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.1s ease, transform 0.1s ease;
}

@media (max-width: 640px) {
  .ghost-mascot { width: 180px; height: 140px; transform: scale(0.82); transform-origin: bottom left; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-hotspot { animation: none; }
}