/* ── Easter Egg Animations ──────────────────────────────────────── */

/* Overlay */
.ee-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  animation: ee-fade-in 0.3s ease forwards;
  cursor: pointer;
}
.ee-overlay.ee-closing {
  animation: ee-fade-out 0.5s ease forwards;
  pointer-events: none;
}

@keyframes ee-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ee-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Flash Card */
.ee-card {
  position: relative;
  width: 320px;
  min-height: 360px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 28px 28px;
  cursor: default;
  transform: scale(0) rotate(-8deg);
  animation: ee-card-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  overflow: hidden;
}
.ee-closing .ee-card {
  animation: ee-card-out 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

@keyframes ee-card-in {
  0%   { transform: scale(0) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes ee-card-out {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(0) rotate(8deg); }
}

/* Accent stripe at top of card */
.ee-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 24px 24px 0 0;
  background: var(--ee-accent, #2BAE4A);
}

/* SVG container */
.ee-scene {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ee-scene svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Caption */
.ee-caption {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(10px);
  animation: ee-caption-in 0.4s ease 0.6s forwards;
}
.ee-subcaption {
  font-size: 14px;
  color: #888;
  margin-top: 6px;
  opacity: 0;
  animation: ee-caption-in 0.3s ease 0.9s forwards;
}

@keyframes ee-caption-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Confetti ─────────────────────────────────────────────────── */
.ee-confetti-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10001;
}
.ee-confetti-particle {
  position: absolute;
  border-radius: 2px;
  animation: ee-confetti-burst var(--dur, 2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s) forwards;
  opacity: 0;
}

@keyframes ee-confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0);
    opacity: 1;
  }
  10% {
    transform: translate(calc(var(--x) * 0.15), calc(var(--y) * 0.1)) rotate(calc(var(--r) * 0.1)) scale(1);
    opacity: 1;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--x), calc(var(--y) + 120px)) rotate(var(--r));
    opacity: 0;
  }
}

/* ── Pizza Friday ─────────────────────────────────────────────── */
.ee-pizza-box-lid {
  transform-origin: 30px 138px;
  animation: ee-pizza-lid-open 1s ease 0.5s forwards;
}
@keyframes ee-pizza-lid-open {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-110deg); }
}

.ee-pizza-slice {
  opacity: 0;
  animation: ee-pizza-slice-rise 2s ease 1.2s forwards;
}
@keyframes ee-pizza-slice-rise {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  30%  { opacity: 1; transform: translateY(-30px) rotate(0deg); }
  80%  { opacity: 1; transform: translateY(-60px) rotate(15deg); }
  100% { opacity: 0; transform: translateY(-90px) rotate(30deg) scale(0.5); }
}

.ee-steam {
  animation: ee-steam-rise 2s ease infinite;
}
.ee-steam:nth-child(2) { animation-delay: 0.4s; }
.ee-steam:nth-child(3) { animation-delay: 0.8s; }
@keyframes ee-steam-rise {
  0%, 20% { opacity: 0; transform: translateY(0); }
  50%     { opacity: 0.5; }
  100%    { opacity: 0; transform: translateY(-20px); }
}

/* ── The Bat Cave ─────────────────────────────────────────────── */
.ee-spotlight {
  animation: ee-spotlight-pulse 1.5s ease infinite alternate;
}
@keyframes ee-spotlight-pulse {
  from { opacity: 0.1; r: 70; }
  to   { opacity: 0.25; r: 85; }
}

.ee-bat-main {
  transform: translate(-150px, -50px) scale(0.3);
  animation: ee-bat-swoop 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}
@keyframes ee-bat-swoop {
  0%   { transform: translate(-150px, -50px) scale(0.3) rotate(-20deg); }
  40%  { transform: translate(0, 10px) scale(1) rotate(0deg); }
  60%  { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

.ee-mini-bat {
  opacity: 0;
  animation: ee-mini-bat-fly 2s ease var(--bat-delay, 1.5s) forwards;
}
@keyframes ee-mini-bat-fly {
  0%   { opacity: 0; transform: translate(var(--bx, 0), var(--by, 0)) scale(0.3); }
  30%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(calc(var(--bx, 0) + var(--bdx, 80px)), calc(var(--by, 0) + var(--bdy, -60px))) scale(0.5); }
}

/* ── Wednesday Drinks & Braai ─────────────────────────────────── */
.ee-fire-flame {
  transform-origin: bottom center;
  animation: ee-flame-flicker 0.4s ease infinite alternate;
}
.ee-fire-flame:nth-child(2) { animation-delay: 0.15s; animation-duration: 0.35s; }
.ee-fire-flame:nth-child(3) { animation-delay: 0.3s; animation-duration: 0.45s; }

@keyframes ee-flame-flicker {
  0%   { transform: scaleY(1) scaleX(1); opacity: 0.9; }
  100% { transform: scaleY(1.15) scaleX(0.9); opacity: 1; }
}

.ee-beer-group {
  transform: translateY(40px);
  opacity: 0;
  animation: ee-beer-slide-in 0.6s ease 0.5s forwards;
}
@keyframes ee-beer-slide-in {
  to { transform: translateY(0); opacity: 1; }
}

.ee-beer-bubble {
  animation: ee-bubble-rise 1.5s ease infinite;
}
.ee-beer-bubble:nth-child(2) { animation-delay: 0.5s; }
.ee-beer-bubble:nth-child(3) { animation-delay: 1s; }
@keyframes ee-bubble-rise {
  0%   { transform: translateY(0); opacity: 0.6; }
  100% { transform: translateY(-50px); opacity: 0; }
}

.ee-foam-bob {
  animation: ee-foam-bounce 1s ease infinite alternate;
}
@keyframes ee-foam-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

/* ── The Death Star ───────────────────────────────────────────── */
.ee-death-star-group {
  transform: scale(0);
  animation: ee-ds-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
@keyframes ee-ds-appear {
  to { transform: scale(1); }
}

.ee-ds-laser {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: ee-laser-fire 0.8s ease 1.8s forwards;
}
@keyframes ee-laser-fire {
  to { stroke-dashoffset: 0; }
}

.ee-ds-glow {
  opacity: 0;
  animation: ee-ds-glow-pulse 0.3s ease 1.6s forwards, ee-ds-glow-fade 0.5s ease 2.6s forwards;
}
@keyframes ee-ds-glow-pulse {
  to { opacity: 1; }
}
@keyframes ee-ds-glow-fade {
  to { opacity: 0.3; }
}

.ee-ds-impact {
  opacity: 0;
  transform: scale(0);
  animation: ee-ds-explode 0.6s ease 2.5s forwards;
}
@keyframes ee-ds-explode {
  0%   { opacity: 0; transform: scale(0); }
  50%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2); }
}

/* ── Fortress of Solitude ─────────────────────────────────────── */
.ee-crystal {
  transform-origin: bottom center;
  transform: scaleY(0);
  animation: ee-crystal-grow 1s cubic-bezier(0.34, 1.56, 0.64, 1) var(--crystal-delay, 0.5s) forwards;
}
@keyframes ee-crystal-grow {
  to { transform: scaleY(1); }
}

.ee-crystal-sparkle {
  opacity: 0;
  animation: ee-sparkle 1.2s ease var(--sparkle-delay, 1.5s) infinite;
}
@keyframes ee-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.2); }
}

.ee-shield {
  opacity: 0;
  transform: scale(0.5);
  animation: ee-shield-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}
@keyframes ee-shield-appear {
  to { opacity: 1; transform: scale(1); }
}

/* ── Respect ──────────────────────────────────────────────────── */
.ee-fist-left {
  animation: ee-fist-left-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
  transform: translateX(-80px);
}
@keyframes ee-fist-left-in {
  to { transform: translateX(0); }
}

.ee-fist-right {
  animation: ee-fist-right-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
  transform: translateX(80px);
}
@keyframes ee-fist-right-in {
  to { transform: translateX(0); }
}

.ee-impact-ring {
  opacity: 0;
  transform: scale(0);
  animation: ee-impact-burst 0.8s ease 1.2s forwards;
}
@keyframes ee-impact-burst {
  0%   { opacity: 0; transform: scale(0); }
  30%  { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2.5); }
}

.ee-impact-star {
  opacity: 0;
  animation: ee-star-pop 0.6s ease var(--star-delay, 1.3s) forwards;
}
@keyframes ee-star-pop {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1.3) rotate(90deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(180deg); }
}

/* ── To Cover, To Clothe, or To Fit ───────────────────────────── */
.ee-garment-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: ee-garment-draw 2s ease 0.5s forwards;
}
@keyframes ee-garment-draw {
  to { stroke-dashoffset: 0; }
}

.ee-pepla-leaf {
  opacity: 0;
  transform: scale(0);
  animation: ee-leaf-bloom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--leaf-delay, 2s) forwards;
}
@keyframes ee-leaf-bloom {
  to { opacity: 1; transform: scale(1); }
}

/* ── Company Mission ──────────────────────────────────────────── */
.ee-rocket-group {
  animation: ee-rocket-launch 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}
@keyframes ee-rocket-launch {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(5px); }
  100% { transform: translateY(-220px); }
}

.ee-rocket-flame {
  transform-origin: top center;
  animation: ee-flame-thrust 0.2s ease infinite alternate;
}
@keyframes ee-flame-thrust {
  from { transform: scaleY(1) scaleX(1); }
  to   { transform: scaleY(1.3) scaleX(0.85); }
}

.ee-launch-smoke {
  opacity: 0;
  animation: ee-smoke-puff 2s ease 0.8s forwards;
}
@keyframes ee-smoke-puff {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 0.5; }
  100% { opacity: 0; transform: scale(3) translateY(-20px); }
}

.ee-mission-star {
  opacity: 0;
  animation: ee-twinkle 1s ease var(--star-delay, 1s) infinite alternate;
}
@keyframes ee-twinkle {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Company Vision ───────────────────────────────────────────── */
.ee-eye-top, .ee-eye-bottom {
  animation: ee-eye-open 0.8s ease 0.5s forwards;
}
.ee-eye-top {
  transform-origin: center bottom;
  transform: scaleY(0);
}
.ee-eye-bottom {
  transform-origin: center top;
  transform: scaleY(0);
}
@keyframes ee-eye-open {
  to { transform: scaleY(1); }
}

.ee-iris {
  opacity: 0;
  transform: scale(0);
  animation: ee-iris-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
}
@keyframes ee-iris-appear {
  to { opacity: 1; transform: scale(1); }
}

.ee-vision-star {
  opacity: 0;
  animation: ee-vision-star-appear 0.6s ease var(--star-delay, 1.5s) forwards, ee-twinkle 1.5s ease var(--star-delay, 1.5s) infinite alternate;
}
@keyframes ee-vision-star-appear {
  to { opacity: 1; }
}

.ee-vision-ray {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ee-ray-extend 0.8s ease var(--ray-delay, 1.2s) forwards;
}
@keyframes ee-ray-extend {
  to { stroke-dashoffset: 0; }
}

/* ── Company Values ───────────────────────────────────────────── */
.ee-heart {
  transform-origin: center center;
  animation: ee-heartbeat 0.8s ease 0.5s infinite;
}
@keyframes ee-heartbeat {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.15); }
  30%      { transform: scale(1); }
  45%      { transform: scale(1.1); }
}

.ee-heart-glow {
  opacity: 0;
  animation: ee-glow-pulse 1.5s ease 0.8s infinite alternate;
}
@keyframes ee-glow-pulse {
  from { opacity: 0; }
  to   { opacity: 0.3; }
}

.ee-hand-group {
  opacity: 0;
  animation: ee-hands-appear 0.6s ease 1.2s forwards;
}
@keyframes ee-hands-appear {
  to { opacity: 1; }
}

.ee-value-ring {
  opacity: 0;
  transform: scale(0);
  animation: ee-ring-expand 1s ease var(--ring-delay, 1s) forwards;
}
@keyframes ee-ring-expand {
  0%   { opacity: 0.6; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2); }
}

/* ── Orange Team ──────────────────────────────────────────────── */
.ee-orange-flame {
  transform-origin: bottom center;
  opacity: 0;
  animation: ee-orange-flame-grow 0.8s ease var(--flame-delay, 0.5s) forwards, ee-flame-flicker 0.4s ease var(--flame-delay, 0.5s) infinite alternate;
}
@keyframes ee-orange-flame-grow {
  0%   { opacity: 0; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}

.ee-orange-spark {
  opacity: 0;
  animation: ee-spark-fly 1s ease var(--spark-delay, 1s) forwards;
}
@keyframes ee-spark-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 20px), var(--sy, -40px)) scale(0); }
}

/* ── Green Team ───────────────────────────────────────────────── */
.ee-green-leaf {
  transform-origin: bottom center;
  opacity: 0;
  transform: scale(0) rotate(var(--leaf-rot, 0deg));
  animation: ee-green-leaf-grow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--leaf-delay, 0.5s) forwards;
}
@keyframes ee-green-leaf-grow {
  to { opacity: 1; transform: scale(1) rotate(var(--leaf-rot, 0deg)); }
}

.ee-green-stem {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: ee-stem-draw 1s ease 0.3s forwards;
}
@keyframes ee-stem-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Blue Team ────────────────────────────────────────────────── */
.ee-wave {
  opacity: 0;
  animation: ee-wave-roll 2s ease var(--wave-delay, 0.5s) forwards;
}
@keyframes ee-wave-roll {
  0%   { opacity: 0; transform: translateX(-60px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0.6; transform: translateX(0); }
}

.ee-blue-droplet {
  opacity: 0;
  animation: ee-droplet-splash 1.2s ease var(--drop-delay, 1s) forwards;
}
@keyframes ee-droplet-splash {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.5); }
  40%  { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(0) scale(1.1); }
  100% { opacity: 0.8; transform: translateY(0) scale(1); }
}

.ee-ripple {
  opacity: 0;
  transform: scale(0);
  animation: ee-ripple-expand 1.5s ease var(--ripple-delay, 1.2s) forwards;
}
@keyframes ee-ripple-expand {
  0%   { opacity: 0.5; transform: scale(0); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* ── White Team ───────────────────────────────────────────────── */
.ee-prism {
  opacity: 0;
  transform: scale(0) rotate(-30deg);
  animation: ee-prism-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
@keyframes ee-prism-appear {
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.ee-light-beam {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ee-beam-shoot 0.6s ease var(--beam-delay, 0.8s) forwards;
}
@keyframes ee-beam-shoot {
  to { stroke-dashoffset: 0; }
}

.ee-color-ray {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: ee-ray-shoot 0.8s ease var(--ray-delay, 1.2s) forwards;
}
@keyframes ee-ray-shoot {
  to { stroke-dashoffset: 0; }
}

.ee-white-sparkle {
  opacity: 0;
  animation: ee-sparkle 1s ease var(--sparkle-delay, 1.5s) infinite;
}

/* ── Get To Know Us (Matrix) ───────────────────────────────────── */
.ee-matrix-col {
  animation: ee-matrix-fall var(--fd, 3s) linear var(--dd, 0s) infinite;
}
@keyframes ee-matrix-fall {
  0%   { transform: translateY(-80px); opacity: 0; }
  5%   { opacity: 0.9; }
  85%  { opacity: 0.3; }
  100% { transform: translateY(220px); opacity: 0; }
}
.ee-matrix-text {
  opacity: 0;
  animation: ee-matrix-reveal 0.8s ease 1.2s forwards;
}
.ee-matrix-text-sub {
  opacity: 0;
  animation: ee-matrix-reveal 0.8s ease 1.6s forwards;
}
@keyframes ee-matrix-reveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.ee-matrix-glow {
  opacity: 0;
  animation: ee-matrix-glow-pulse 1.5s ease 1.5s infinite alternate;
}
@keyframes ee-matrix-glow-pulse {
  from { opacity: 0; }
  to   { opacity: 0.15; }
}

/* Override scene overflow for matrix */
.ee-scene--matrix svg {
  overflow: hidden;
}
.ee-door {
  transform-origin: left center;
  animation: ee-door-open 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
@keyframes ee-door-open {
  0%   { transform: perspective(400px) rotateY(0deg); }
  100% { transform: perspective(400px) rotateY(-70deg); }
}

.ee-welcome-hand {
  opacity: 0;
  transform-origin: bottom center;
  animation: ee-hand-wave 2s ease 1s forwards;
}
@keyframes ee-hand-wave {
  0%   { opacity: 0; transform: rotate(0deg) translateY(10px); }
  20%  { opacity: 1; transform: rotate(0deg) translateY(0); }
  35%  { transform: rotate(20deg); opacity: 1; }
  50%  { transform: rotate(-10deg); opacity: 1; }
  65%  { transform: rotate(15deg); opacity: 1; }
  80%  { transform: rotate(-5deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 1; }
}

.ee-welcome-star {
  opacity: 0;
  animation: ee-sparkle 1s ease var(--sparkle-delay, 1.2s) infinite;
}

/* ── Testify ──────────────────────────────────────────────────── */
.ee-megaphone {
  opacity: 0;
  transform: scale(0) rotate(-15deg);
  animation: ee-mega-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
@keyframes ee-mega-appear {
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.ee-sound-wave {
  opacity: 0;
  transform: scale(0.5);
  animation: ee-sound-pulse 1s ease var(--wave-delay, 1s) forwards;
}
@keyframes ee-sound-pulse {
  0%   { opacity: 0; transform: scale(0.5) translateX(0); }
  50%  { opacity: 0.8; transform: scale(1) translateX(10px); }
  100% { opacity: 0; transform: scale(1.5) translateX(20px); }
}

.ee-review-star {
  opacity: 0;
  animation: ee-review-star-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--star-delay, 1s) forwards;
}
@keyframes ee-review-star-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 400px) {
  .ee-card {
    width: 280px;
    min-height: 320px;
    padding: 28px 20px 20px;
  }
  .ee-scene {
    width: 160px;
    height: 160px;
  }
  .ee-caption { font-size: 18px; }
}

/* Clickable cursor for interactive elements */
.speech-bubble { cursor: pointer; }
.mvv__card { cursor: pointer; }
.workforce__team { cursor: pointer; }