/* MAC LEE DESIGNS occasion doodles - lightweight website animations */

.nav__logo-mark--occasion {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.occasion-doodle__pitch,
.occasion-doodle__ball,
.occasion-doodle__goal,
.occasion-doodle__spark {
  position: absolute;
  pointer-events: none;
}

.occasion-doodle__pitch {
  inset: -5px;
  z-index: -1;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px;
  opacity: 0;
  transform: scale(0.82);
  animation: doodlePitchReveal 1.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

.occasion-doodle__pitch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 255, 0, 0.65), transparent);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  animation: doodlePitchLine 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s forwards;
}

.occasion-doodle__ball {
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, #f4f1ea 0 25%, transparent 26%),
    radial-gradient(circle at 62% 70%, rgba(28, 28, 28, 0.95) 0 18%, transparent 19%),
    linear-gradient(135deg, #f4f1ea, #ccff00);
  box-shadow:
    0 0 0 1px rgba(28, 28, 28, 0.24),
    0 0 18px rgba(204, 255, 0, 0.52);
  opacity: 0;
  transform: rotate(-35deg) translateX(23px) scale(0.2);
  animation: doodleBallOrbit 2.7s cubic-bezier(0.18, 0.92, 0.2, 1) 0.38s forwards;
}

.occasion-doodle__goal {
  right: -13px;
  top: -7px;
  z-index: 2;
  width: 20px;
  height: 15px;
  border-top: 1.5px solid rgba(0, 240, 255, 0.72);
  border-right: 1.5px solid rgba(0, 240, 255, 0.72);
  border-bottom: 1.5px solid rgba(0, 240, 255, 0.72);
  border-radius: 0 6px 6px 0;
  opacity: 0;
  transform: translateX(-8px) scaleX(0.55);
  animation: doodleGoalFlash 2.25s cubic-bezier(0.2, 0.8, 0.2, 1) 1.18s forwards;
}

.occasion-doodle__spark {
  right: -20px;
  top: -13px;
  z-index: 4;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent-lime);
  box-shadow:
    -12px 8px 0 -2px rgba(0, 240, 255, 0.9),
    -4px 18px 0 -2px rgba(204, 255, 0, 0.8),
    9px 8px 0 -2px rgba(244, 241, 234, 0.8);
  opacity: 0;
  animation: doodleSpark 1.1s ease-out 2.25s forwards;
}

.occasion-kickoff-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0.55rem 0.82rem;
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at 16% 50%, rgba(204, 255, 0, 0.18), transparent 42%),
    rgba(244, 241, 234, 0.06);
  color: rgba(244, 241, 234, 0.82);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
  animation: doodleBadgeIn 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both;
}

.occasion-kickoff-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-accent-lime);
  box-shadow: 0 0 24px rgba(204, 255, 0, 0.76);
}

.occasion-kickoff-badge strong {
  color: var(--color-accent-blue);
}

@keyframes doodlePitchReveal {
  0% {
    opacity: 0;
    transform: scale(0.82) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes doodlePitchLine {
  to {
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes doodleBallOrbit {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translateX(23px) scale(0.2);
  }
  12% {
    opacity: 1;
    transform: rotate(-20deg) translateX(24px) scale(1);
  }
  56% {
    opacity: 1;
    transform: rotate(230deg) translateX(24px) scale(1);
  }
  78% {
    opacity: 1;
    transform: rotate(322deg) translateX(27px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) translateX(23px) scale(0.86);
  }
}

@keyframes doodleGoalFlash {
  0% {
    opacity: 0;
    transform: translateX(-8px) scaleX(0.55);
  }
  35%,
  68% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
  100% {
    opacity: 0.58;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes doodleSpark {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  42% {
    opacity: 1;
    transform: scale(1.28);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes doodleBadgeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .occasion-doodle__goal,
  .occasion-doodle__spark {
    display: none;
  }

  .occasion-kickoff-badge {
    max-width: calc(100vw - 2 * var(--container-padding));
    font-size: 0.64rem;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .occasion-doodle__pitch,
  .occasion-doodle__pitch::before,
  .occasion-doodle__ball,
  .occasion-doodle__goal,
  .occasion-doodle__spark,
  .occasion-kickoff-badge {
    animation: none !important;
  }

  .occasion-doodle__pitch,
  .occasion-doodle__ball,
  .occasion-doodle__goal,
  .occasion-kickoff-badge {
    opacity: 1;
  }
}