@font-face {
  font-family: "Vazir";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/Vazir-Bold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlayfairDisplay";
  src: url("https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXBbif.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Vazir", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

.hero-logo {
  position: fixed;
  top: 15vh;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(160px, 25vw, 300px);
  height: clamp(160px, 25vw, 300px);
  object-fit: contain;
  filter: blur(1.4px)
          drop-shadow(0 20px 45px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 35px rgba(255, 214, 142, 0.4));
  z-index: 9;
  opacity: 0.78;
  animation: logoBlur 6s ease-in-out infinite;
}

.hero-text {
  position: fixed;
  bottom: 6vh;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: #ffe9c9;
  font-size: clamp(20px, 5vw, 44px);
  text-align: center;
  text-shadow: 0 8px 35px rgba(0, 0, 0, 0.9);
  padding: 0 24px;
  z-index: 10;
}

.countdown {
  position: fixed;
  bottom: calc(11vh + 150px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: #fdf3de;
  font-size: clamp(24px, 5vw, 42px);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.75);
  z-index: 10;
  font-family: "PlayfairDisplay", "Vazir", serif;
}

.message-carousel {
  position: fixed;
  bottom: calc(8vh + 70px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: min(80vw, 420px);
  padding: 14px 24px;
  text-align: center;
  color: #fff7e6;
  font-size: clamp(14px, 4vw, 20px);
  border-radius: 20px;
  background: rgba(17, 21, 34, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 10;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-carousel.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.audio-toggle {
  position: fixed;
  bottom: calc(clamp(14px, 4vw, 28px) + env(safe-area-inset-bottom, 0px));
  left: calc(clamp(14px, 4vw, 28px) + env(safe-area-inset-left, 0px));
  width: 56px;
  height: 56px;
  font-family: "Vazir", sans-serif;
  font-size: 22px;
  color: #0f0e0b;
  background: #9d7f55;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}

.audio-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55);
  background: rgba(255, 245, 220, 0.95);
}

.audio-toggle.is-playing {
  background: #154436;
  color: #062418;
}

.audio-toggle .icon {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.audio-toggle .icon-play {
  width: 0;
  height: 0;
  border-left: 18px solid #0f0e0b;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  opacity: 1;
}

.audio-toggle.is-playing .icon-play {
  opacity: 0;
  transform: scale(0.8);
}

.audio-toggle .icon-pause {
  width: 20px;
  height: 24px;
  display: flex;
  justify-content: space-between;
  opacity: 0;
}

.audio-toggle .icon-pause::before,
.audio-toggle .icon-pause::after {
  content: "";
  width: 6px;
  height: 100%;
  background: #062418;
  border-radius: 3px;
}

.audio-toggle.is-playing .icon-pause {
  opacity: 1;
}

@media (max-width: 640px) {
  .hero-logo {
    top: 10vh;
  }

  .hero-text {
    bottom: 4vh;
    padding: 0 16px;
  }

  .countdown {
    bottom: calc(8vh + 130px);
    padding: 0 12px;
  }

  .message-carousel {
    bottom: calc(5vh + 70px);
    min-width: min(88vw, 340px);
    padding: 12px 18px;
    white-space: nowrap;
  }

  .audio-toggle {
    bottom: calc(12vh + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

@keyframes logoBlur {
  0%, 100% {
    filter: blur(1px)
            drop-shadow(0 20px 45px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 35px rgba(255, 214, 142, 0.4));
  }
  50% {
    filter: blur(3px)
            drop-shadow(0 20px 45px rgba(0, 0, 0, 0.45))
            drop-shadow(0 0 50px rgba(255, 214, 142, 0.45));
  }
}