@import "tailwindcss";

@font-face {
  font-family: "Bespoke Serif";
  src:
    url("./fonts/BespokeSerif-Bold.woff2") format("woff2"),
    url("./fonts/BespokeSerif-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bespoke Serif";
  src:
    url("./fonts/BespokeSerif-BoldItalic.woff2") format("woff2"),
    url("./fonts/BespokeSerif-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("./fonts/CormorantGaramond-Italic.woff2") format("woff2"),
    url("./fonts/CormorantGaramond-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("./fonts/CormorantGaramond-Regular.woff2") format("woff2"),
    url("./fonts/CormorantGaramond-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("./fonts/CormorantGaramond-SemiBold.woff2") format("woff2"),
    url("./fonts/CormorantGaramond-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("./fonts/CormorantGaramond-SemiBoldItalic.woff2") format("woff2"),
    url("./fonts/CormorantGaramond-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Great Vibes";
  src:
    url("./fonts/GreatVibes-Regular.woff2") format("woff2"),
    url("./fonts/GreatVibes-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@theme {
  --font-bespoke: "Bespoke Serif", serif;
  --font-cormorant: "Cormorant Garamond", serif;
  --font-vibes: "Great Vibes", cursive;

  --animate-float-arrow: float-arrow 1.8s ease-in-out infinite;
  --animate-fade-up: fade-up 1.5s ease-out forwards;
  --animate-gold-glow: gold-glow 2s ease-in-out infinite;
  --animate-pulse-dot: pulseDot 2s ease-out infinite;
  --animate-flash: flash 1s ease-out forwards;

  @keyframes float-arrow {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(8px);
    }
  }

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(40px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes gold-glow {
    0%,
    100% {
      text-shadow:
        0 0 0px #d8b15a,
        0 0 4px #d8b15a55;
    }

    50% {
      text-shadow:
        0 0 8px #d8b15a,
        0 0 18px #d8b15a99,
        0 0 30px #d8b15a66;
    }
  }

  @keyframes pulseDot {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }

    70% {
      transform: scale(2);
      opacity: 0;
    }

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

  @keyframes flash {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    100% {
      transform: translate(-50%, -50%) scale(80);
      opacity: 1;
    }
  }
}

body {
  @apply font-cormorant text-xl bg-[#F2E7D2] pt-3 pb-5 px-3 md:px-5 text-[#1d1814];
}

.details-block::before {
  content: "";
  background: linear-gradient(90deg, #0000, #be9123cc, #0000);
  width: 96px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.place-state::before {
  content: "";
  background: linear-gradient(90deg, #0000, #be9123cc, #0000);
  width: 96px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.countdown-block::before {
  content: "";
  background: linear-gradient(90deg, #0000, #be9123cc, #0000);
  width: 96px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

#music-btn {
  @apply bg-[radial-gradient(circle_at_30%_30%,#fffef8_0%,#f4e1a6_38%,#d2a84a_100%)];
}

#music-btn.playing {
  @apply bg-[radial-gradient(circle_at_30%_30%,#fbf8f2_0%,#e8e0d2_42%,#c8b8a0_100%)];
}

.reveal {
  opacity: 0;
}

.reveal.show {
  animation: var(--animate-fade-up);
}

.name-block::after {
  content: "";
  background: linear-gradient(90deg, #0000, #be9123cc, #0000);
  width: 96px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.pulse-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #f7b2b2;
  animation: var(--animate-pulse-dot);
}

.loader.hide {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

#flash {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;

  background: radial-gradient(
    circle,
    rgba(255, 255, 220, 1) 0%,
    rgba(255, 245, 170, 1) 8%,
    rgba(255, 220, 90, 0.95) 18%,
    rgba(255, 190, 40, 0.75) 35%,
    rgba(255, 160, 0, 0.45) 55%,
    rgba(255, 140, 0, 0.15) 70%,
    transparent 55%
  );

  filter: blur(8px);

  box-shadow:
    0 0 40px rgba(255, 240, 150, 1),
    0 0 100px rgba(255, 210, 70, 0.95),
    0 0 220px rgba(255, 180, 20, 0.8),
    0 0 420px rgba(255, 150, 0, 0.55),
    0 0 650px rgba(255, 120, 0, 0.35);

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);

  opacity: 0;
  pointer-events: none;
}

#flash.active {
  animation: var(--animate-flash);
}