/* University anniversary celebration — homepage only (driven by custom.js) */

.sau-celeb {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}

.sau-celeb__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 48%,
      rgba(255, 255, 255, 0.28) 0%,
      transparent 58%
    ),
    #2F6D59;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.7s ease,
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sau-celeb.is-intro .sau-celeb__bg {
  opacity: 1;
  transform: scale(1);
}

.sau-celeb__rings {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sau-celeb__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
}

.sau-celeb.is-intro .sau-celeb__ring {
  animation: sau-ring 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sau-celeb.is-intro .sau-celeb__ring:nth-child(2) {
  animation-delay: 0.22s;
}

.sau-celeb.is-intro .sau-celeb__ring:nth-child(3) {
  animation-delay: 0.44s;
}

@keyframes sau-ring {
  0% {
    transform: scale(0.35);
    opacity: 0.65;
  }

  100% {
    transform: scale(22);
    opacity: 0;
  }
}

.sau-celeb__confetti {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
}

.sau-celeb__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(560px, 82vw);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(1.22);
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  filter: blur(18px);
  will-change: transform, opacity, filter, clip-path;
}

.sau-celeb__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.sau-celeb__logo::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  opacity: 0;
}

.sau-celeb__logo.is-in {
  animation: sau-logo-in 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sau-celeb__logo.is-in::after {
  animation: sau-shine 1.1s 0.45s ease forwards;
}

.sau-celeb__logo.is-hold {
  clip-path: circle(80% at 50% 50%);
  filter: none;
  opacity: 1;
  animation: sau-logo-float 2.6s ease-in-out infinite;
}

.sau-celeb__logo.is-out {
  animation: sau-logo-out 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sau-logo-in {
  0% {
    clip-path: circle(0% at 50% 50%);
    transform: translate(-50%, -50%) scale(1.28);
    filter: blur(18px);
    opacity: 0;
  }

  45% {
    opacity: 1;
    filter: blur(6px);
  }

  100% {
    clip-path: circle(80% at 50% 50%);
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes sau-shine {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes sau-logo-float {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, calc(-50% - 12px)) scale(1.03);
  }
}

@keyframes sau-logo-out {
  0% {
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
    opacity: 1;
    clip-path: circle(80% at 50% 50%);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.4);
    filter: blur(24px);
    opacity: 0;
    clip-path: circle(100% at 50% 50%);
  }
}

.sau-celeb__balloons {
  position: absolute;
  inset: 0;
}

.sau-celeb__balloon {
  position: absolute;
  bottom: -140px;
  width: 44px;
  height: 58px;
  border-radius: 50% 50% 48% 48% / 42% 42% 58% 58%;
  animation: sau-balloon-rise linear infinite;
  will-change: transform;
}

.sau-celeb__balloon::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 14px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.sau-celeb__balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 72px;
  margin-left: -0.75px;
  background: linear-gradient(to bottom, #8d6e63, transparent);
}

.sau-celeb__balloon-knot {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 10px;
  height: 8px;
  margin-left: -5px;
  background: inherit;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  filter: brightness(0.85);
}

.sau-celeb__balloon.is-gif {
  width: 72px;
  height: auto;
  background: none;
  border-radius: 0;
}

.sau-celeb__balloon.is-gif::before,
.sau-celeb__balloon.is-gif::after {
  display: none;
}

.sau-celeb__balloon.is-gif img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
}

.sau-celeb__balloon.color-red {
  background: radial-gradient(circle at 32% 28%, #ff8a80, #e53935 55%, #b71c1c);
}

.sau-celeb__balloon.color-gold {
  background: radial-gradient(circle at 32% 28%, #ffe082, #ffc107 55%, #ff8f00);
}

.sau-celeb__balloon.color-green {
  background: radial-gradient(circle at 32% 28%, #a5d6a7, #43a047 55%, #1b5e20);
}

.sau-celeb__balloon.color-blue {
  background: radial-gradient(circle at 32% 28%, #90caf9, #1e88e5 55%, #0d47a1);
}

.sau-celeb__balloon.color-pink {
  background: radial-gradient(circle at 32% 28%, #f8bbd0, #ec407a 55%, #ad1457);
}

.sau-celeb__balloon.color-purple {
  background: radial-gradient(circle at 32% 28%, #ce93d8, #8e24aa 55%, #4a148c);
}

@keyframes sau-balloon-rise {
  0% {
    transform: translate3d(0, 0, 0) rotate(-6deg);
  }

  25% {
    transform: translate3d(18px, -28vh, 0) rotate(5deg);
  }

  50% {
    transform: translate3d(-12px, -55vh, 0) rotate(-4deg);
  }

  75% {
    transform: translate3d(22px, -82vh, 0) rotate(6deg);
  }

  100% {
    transform: translate3d(-8px, -125vh, 0) rotate(-3deg);
  }
}

@media (max-width: 767px) {
  .sau-celeb__logo {
    width: min(360px, 88vw);
  }

  .sau-celeb__balloon {
    width: 34px;
    height: 46px;
  }

  .sau-celeb__balloon.is-gif {
    width: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sau-celeb {
    display: none !important;
  }
}