/* pixel/pixel.css — pixel mode styles. Scoped under body[data-pixel="on"]. */

body[data-pixel="on"] .pixel-sprite {
  position: fixed;
  bottom: 24px;
  left: 0;
  z-index: 100;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: auto;
  will-change: transform;
  transform-origin: 50% 65%;
}

/* facing is applied in JS via the transform property */

body[data-pixel="on"] .pixel-shadow {
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 30px;
  height: 5px;
  background: radial-gradient(ellipse at center, rgba(42, 34, 24, 0.4) 0%, rgba(42, 34, 24, 0.15) 50%, transparent 75%);
  pointer-events: none;
  transform: translateX(-50%);
  z-index: -1;
}

body[data-pixel="on"] .pixel-overlay {
  position: absolute;
  top: -36px; /* float the ! above the sprite head */
  left: 0;
  image-rendering: pixelated;
  pointer-events: none;
}

body[data-pixel="on"] .pixel-sprite[data-facing="left"] .pixel-overlay {
  transform: scaleX(-1); /* counter-rotate so the ! reads correctly */
}

body[data-pixel="on"] .pixel-heart {
  position: absolute;
  top: 0;
  left: 50%;
  color: #B89968;
  font-size: 14px;
  pointer-events: none;
  animation: pixelHeart 1100ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
  transform: translateX(calc(var(--dx, 0px) - 50%));
  opacity: 0;
}

body[data-pixel="on"] .pixel-dust {
  position: fixed;
  bottom: 24px;
  width: 56px;
  height: 26px;
  pointer-events: none;
  z-index: 99;
  background:
    radial-gradient(ellipse 13px 10px at 22% 65%, rgba(110, 110, 110, 0.95), transparent 65%),
    radial-gradient(ellipse 17px 13px at 50% 50%, rgba(95, 95, 95, 0.95), transparent 65%),
    radial-gradient(ellipse 14px 11px at 78% 65%, rgba(115, 115, 115, 0.95), transparent 65%),
    radial-gradient(ellipse 10px 8px at 33% 28%, rgba(150, 150, 150, 0.9), transparent 70%),
    radial-gradient(ellipse 9px 7px at 67% 28%, rgba(150, 150, 150, 0.9), transparent 70%);
  opacity: 0;
  animation: pixelDust 750ms ease-out forwards;
  filter: drop-shadow(0 1px 0 rgba(42, 34, 24, 0.35));
}

@keyframes pixelDust {
  0%   { opacity: 0; transform: translateX(0) scale(0.3); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--dir, 1) * 52px)) scale(2.2); }
}

body[data-pixel="on"] .pixel-z {
  position: absolute;
  top: -14px;
  right: 0px;
  color: var(--text, #2A2218);
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  animation: pixelZ 2400ms ease-in-out infinite;
}

@keyframes pixelZ {
  0%   { opacity: 0; transform: translate(0, 6px) scale(0.55); }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -36px) scale(1.25); }
}

@keyframes pixelHeart {
  0%   { opacity: 0; transform: translate(calc(var(--dx) - 50%), 0px) scale(0.8); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) - 50%), -60px) scale(1.1); }
}

body[data-pixel="on"] .pixel-cigar {
  position: absolute;
  bottom: 30px;
  left: 33px;
  width: 9px;
  height: 3px;
  background: #4A2E1A;
  border-top: 1px solid #6B4429;
  pointer-events: none;
  display: none;
  z-index: 2;
}

body[data-pixel="on"] .pixel-cigar .pixel-cigar-tip {
  position: absolute;
  right: -2px;
  top: -1px;
  width: 3px;
  height: 5px;
  background: #FF6B35;
  box-shadow: 0 0 5px #FF8A4C, 0 0 9px rgba(255, 120, 60, 0.6);
  animation: pixelCigarTip 1100ms ease-in-out infinite;
}

@keyframes pixelCigarTip {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* Cigar visible only during the smoke quirk. */
body[data-pixel="on"] .pixel-sprite[data-state="smoke"] .pixel-cigar {
  display: block;
}

/* Spotlight on the work-item the cursor is hovering — only in pixel mode. */
body[data-pixel="on"] .work-item.pixel-spotlight {
  background: rgba(184, 153, 104, 0.10);
  padding-left: 16px !important;
  box-shadow: inset 3px 0 0 var(--gold);
}
body[data-pixel="on"] .work-item.pixel-spotlight .work-name {
  color: var(--gold);
}

body[data-pixel="on"] .pixel-cigar-puff {
  position: absolute;
  bottom: 36px;
  left: 38px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(220, 220, 220, 0.95), rgba(190, 190, 190, 0.6) 45%, transparent 78%);
  opacity: 0;
  border-radius: 50%;
  animation: pixelCigarPuff 2000ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
  filter: blur(0.6px);
}

@keyframes pixelCigarPuff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.35); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 0px), -42px) scale(1.9); }
}

body[data-pixel="on"] .pixel-codec-dot {
  position: absolute;
  top: -2px;
  left: 20px;
  width: 5px;
  height: 5px;
  background: #4AFF7A;
  box-shadow: 0 0 4px rgba(74, 255, 122, 0.85);
  pointer-events: none;
  opacity: 0;
  border-radius: 1px;
  animation: pixelCodec 1400ms ease-in-out forwards;
}

@keyframes pixelCodec {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  25%  { opacity: 0.2; }
  40%  { opacity: 1; }
  55%  { opacity: 0.2; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Konami payoff: confetti shower + rainbow shimmer on the sprite. */
body[data-pixel="on"] .pixel-confetti {
  position: fixed;
  top: -16px;
  width: 7px;
  height: 7px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: pixelConfettiFall var(--dur, 2400ms) ease-in forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes pixelConfettiFall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--fall, 100vh)) rotate(var(--spin, 720deg)); }
}

body[data-pixel="on"] .pixel-sprite.pixel-celebrating {
  animation: pixelRainbow 900ms linear infinite;
}
@keyframes pixelRainbow {
  0%   { filter: hue-rotate(0deg) brightness(1.15) drop-shadow(0 0 6px rgba(255, 210, 80, 0.85)); }
  50%  { filter: hue-rotate(180deg) brightness(1.3) drop-shadow(0 0 10px rgba(255, 210, 80, 0.95)); }
  100% { filter: hue-rotate(360deg) brightness(1.15) drop-shadow(0 0 6px rgba(255, 210, 80, 0.85)); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-pixel="on"] .pixel-heart { display: none; }
  body[data-pixel="on"] .pixel-overlay { display: none !important; }
  body[data-pixel="on"] .pixel-dust { display: none; }
  body[data-pixel="on"] .pixel-z { display: none; }
  body[data-pixel="on"] .pixel-cigar-puff { display: none; }
  body[data-pixel="on"] .pixel-codec-dot { display: none; }
  body[data-pixel="on"] .pixel-confetti { display: none; }
  body[data-pixel="on"] .pixel-sprite.pixel-celebrating { animation: none; filter: none; }
}