/* Easter eggs: hidden terminal, hail storm, toast, remix² tear and palette swap, shattering monogram. Loaded on every page. */

/* ---------- remix²: green and purple trade places ---------- */
.remixed {
  --green: #c48bff;
  --green-dim: #a865e0;
  --purple: #33ff66;
  --line: #3b2a55;
  --glow: 0 0 6px rgba(191,95,255,.5);
  --glow-purple: 0 0 8px rgba(51,255,102,.55);
}
.tearing main { animation: tear .65s steps(1) both; }
@keyframes tear {
  0% { clip-path: inset(0 0 60% 0); transform: translateX(-14px); }
  15% { clip-path: inset(30% 0 30% 0); transform: translateX(18px) skewX(-6deg); }
  30% { clip-path: inset(55% 0 5% 0); transform: translateX(-8px); }
  45% { clip-path: inset(10% 0 70% 0); transform: translateX(12px); }
  60% { clip-path: inset(0); transform: translateX(-4px) skewX(3deg); }
  80% { clip-path: inset(40% 0 40% 0); transform: none; }
  100% { clip-path: inset(0); transform: none; }
}

/* ---------- toast ---------- */
.egg-toast {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 140;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  background: rgba(0,0,0,.92);
  border: 1px solid var(--green);
  color: var(--green);
  text-shadow: var(--glow);
  box-shadow: 4px -3px 0 rgba(191,95,255,.4);
  animation: rise .3s var(--snap) both;
}

/* ---------- hail storm ---------- */
.hail { position: fixed; inset: 0; z-index: 130; pointer-events: none; overflow: hidden; }
.hail span {
  position: absolute;
  top: -30px;
  color: var(--green);
  text-shadow: var(--glow);
  animation: fall 1s linear both;
}
.hail span:nth-child(3n) { color: var(--purple); text-shadow: var(--glow-purple); }
@keyframes fall { to { transform: translateY(calc(100vh + 60px)) translateX(-20px); } }

/* ---------- shattering monogram (five clicks on the About art) ---------- */
.about .art { cursor: pointer; }
.about .art.shatter span::before { animation: shatter-a 1.3s var(--snap); }
.about .art.shatter span::after { animation: shatter-b 1.3s var(--snap); }
@keyframes shatter-a {
  30% { transform: translate(-60px, -40px) rotate(-14deg); opacity: .6; }
  60% { transform: translate(-30px, -10px) rotate(6deg); }
  100% { transform: translateX(-7px); }
}
@keyframes shatter-b {
  30% { transform: translate(60px, 40px) rotate(12deg); opacity: .6; }
  60% { transform: translate(25px, 12px) rotate(-5deg); }
  100% { transform: translateX(7px); }
}

/* ---------- hidden terminal (press ~) ---------- */
.term {
  position: fixed;
  left: 50%; bottom: 16px;
  z-index: 150;
  width: min(700px, calc(100% - 24px));
  height: min(46vh, 380px);
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
  background: rgba(0,0,0,.95);
  border: 1px solid var(--green);
  box-shadow: 0 0 24px rgba(51,255,102,.25), 5px -4px 0 rgba(191,95,255,.45);
  font-size: .9rem;
  animation: rise .2s var(--snap) both;
}
.term[hidden] { display: none; }
.term-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 4px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--green-dim);
}
.term-x { background: none; border: 0; color: var(--green-dim); font: inherit; cursor: pointer; padding: 6px 8px; }
.term-x:hover { color: var(--green); }
.term-log { flex: 1; overflow-y: auto; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.term-log .cmd { color: var(--green); text-shadow: var(--glow); }
.term-log .err { color: var(--purple); text-shadow: var(--glow-purple); }
.term-log .dim { color: var(--green-dim); }
.term-line { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.term-line label { color: var(--purple); text-shadow: var(--glow-purple); white-space: nowrap; }
.term-line input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; caret-color: var(--green); }
.term-line input:focus-visible { outline: none; }
@media (max-width: 480px) { .term-line label { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tearing main, .egg-toast, .term, .about .art.shatter span::before, .about .art.shatter span::after { animation: none; }
}