/* Easter egg: trashcan suck animation */

.trash-btn { position: fixed; right: 16px; bottom: 16px; z-index: 999; }
.trash-btn { cursor: pointer; height: 50px; width: 50px; color: #e5e7eb; border-radius: 10px; box-shadow: 0px 10px 18px rgba(0,0,0,0.35); background: #0b0b0b; margin: 5px; transition: 0.3s; justify-content: center; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid #1f2937; }
.trash-btn svg { height: 24px; width: 24px; fill: #39ff14; filter: drop-shadow(0 0 4px rgba(57,255,20,0.7)); }
.trash-btn span { width: 0; overflow: hidden; transition: 0.3s; text-align: center; margin-left: 5px; color: #e5e7eb; }
.trash-btn:hover { width: 150px; border-radius: 5px; background: #111; z-index: 1000; }
.trash-btn:hover span { padding: 2px; width: 80px; }
.trash-btn.active { outline: 2px solid color-mix(in oklab, var(--accent, #7dd3fc) 60%, transparent); }

/* Suck animation: shrink and fade content to bottom-right (trash) */
.egg-active body { background: #000; }

/* Apply transitions to main site regions */
header, main, footer {
  transition: transform 900ms cubic-bezier(.2,.8,.2,1),
              opacity 800ms ease,
              filter 800ms ease;
  transform-origin: 100% 100%; /* towards bottom-right trash */
  will-change: transform, opacity, filter;
}

.egg-active header,
.egg-active main,
.egg-active footer {
  transform: perspective(900px) rotateZ(-10deg) rotateX(22deg) translate3d(6px,6px,0) scale(0.02);
  opacity: 0;
  filter: blur(8px) contrast(0.85) saturate(0.9);
  pointer-events: none;
}

/* Keep the trash button always clickable and visible */
.egg-active .trash-btn { transform: scale(1.05); box-shadow: 0 14px 36px rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce) {
  header, main, footer { transition: none !important; }
}

/* Vortex overlay: spiral conic gradient anchored at trash (bottom-right) */
.vortex-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998; /* under button (999) */
  opacity: 0;
  transform: none;
  transition: opacity 800ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
  background:
    radial-gradient(140% 140% at 100% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.9) 100%),
    repeating-conic-gradient(from 0deg at 100% 100%, rgba(167,139,250,.06) 0deg, rgba(167,139,250,.06) 8deg, rgba(125,211,252,.05) 12deg, rgba(125,211,252,0) 24deg);
  mix-blend-mode: normal;
  will-change: transform, opacity;
}

.egg-active .vortex-overlay {
  opacity: 1;
  transform: rotate(360deg) scale(1.08);
}