/* Hero — animations & layout helpers not covered by Tailwind */

:root {
  --symbol-width: clamp(13rem, 74vw, 39rem);
  --hero-ticket-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M146.562,116.642c0,11.405-9.239,20.644-20.635,20.644c-11.405,0-20.644-9.239-20.644-20.644H0v278.716h105.284c0-11.405,9.239-20.644,20.644-20.644c11.396,0,20.635,9.239,20.635,20.644H512V116.642H146.562z M125.928,346.329c-11.405,0-20.644-9.247-20.644-20.652c0-11.405,9.239-20.644,20.644-20.644c11.396,0,20.635,9.239,20.635,20.644C146.562,337.082,137.324,346.329,125.928,346.329z M125.928,276.649c-11.405,0-20.644-9.239-20.644-20.644c0-11.397,9.239-20.652,20.644-20.652c11.396,0,20.635,9.255,20.635,20.652C146.562,267.41,137.324,276.649,125.928,276.649z M125.928,206.967c-11.405,0-20.644-9.239-20.644-20.644c0-11.396,9.239-20.644,20.644-20.644c11.396,0,20.635,9.248,20.635,20.644C146.562,197.728,137.324,206.967,125.928,206.967z'/%3E%3C/svg%3E");
}

/* Ambient gradient */
.hero-ambient::before,
.hero-ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform, opacity;
}

.hero-ambient::before {
  width: min(85vmax, 900px);
  height: min(85vmax, 900px);
  top: -18%;
  left: -12%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, #8b5cf6 42%, transparent) 0%,
    transparent 68%
  );
  animation: ambient-drift-a 22s ease-in-out infinite;
}

.hero-ambient::after {
  width: min(75vmax, 780px);
  height: min(75vmax, 780px);
  right: -14%;
  bottom: -16%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, #ff6b8a 38%, transparent) 0%,
    transparent 70%
  );
  animation: ambient-drift-b 26s ease-in-out infinite;
}

@keyframes ambient-drift-a {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translate(6%, 8%) scale(1.08);
    opacity: 0.75;
  }
}

@keyframes ambient-drift-b {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-8%, -6%) scale(1.1);
    opacity: 0.7;
  }
}

/* Emblem stage — tap/click to spin faster */
.hero-stage {
  container-type: size;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-stage:focus-visible {
  outline: 2px solid color-mix(in srgb, #8b5cf6 60%, transparent);
  outline-offset: 4px;
}

.hero-emblem {
  width: min(var(--symbol-width), 94vw, calc(100cqh * 1000 / 650 * 1.06));
  max-height: 100%;
}

.logo-spin-wrap {
  animation: spin-y 12s linear infinite;
  will-change: transform;
}

.hero-stage.is-fast .logo-spin-wrap {
  animation-duration: 0.5s;
}

@keyframes spin-y {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* Ticket icon & always-on gradient */
.hero-ticket-icon,
.hero-tickets-text {
  background-image: linear-gradient(
    100deg,
    #ff6b8a 0%,
    #ff857a 10%,
    #8b5cf6 25%,
    #6d28d9 37.5%,
    #ff6b8a 50%,
    #ff857a 60%,
    #8b5cf6 75%,
    #6d28d9 87.5%,
    #ff6b8a 100%
  );
  background-size: 200% auto;
  animation: tickets-gradient-shift 2.4s linear infinite;
}

.hero-ticket-icon {
  -webkit-mask-image: var(--hero-ticket-mask);
  mask-image: var(--hero-ticket-mask);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero-tickets-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@keyframes tickets-gradient-shift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}

@container (max-height: 280px) {
  .logo-spin-wrap {
    width: clamp(4.5rem, 22dvh, 8rem);
    max-height: min(70cqh, 75vw);
  }
}

@container (max-height: 180px) {
  .logo-spin-wrap {
    width: clamp(3.5rem, 18dvh, 6rem);
  }
}

@media (max-width: 480px) {
  :root {
    --symbol-width: clamp(12rem, 86vw, 30rem);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --symbol-width: clamp(9.5rem, 52vw, 19rem);
  }

  .hero-ambient::before,
  .hero-ambient::after {
    filter: blur(48px);
    opacity: 0.85;
  }
}

@media (max-height: 400px) {
  :root {
    --symbol-width: clamp(8.5rem, 46vw, 15rem);
  }

  .hero-shell {
    padding-top: max(clamp(0.5625rem, 2.25dvh, 1.125rem), env(safe-area-inset-top));
    padding-bottom: max(clamp(0.5625rem, 2.25dvh, 1.125rem), env(safe-area-inset-bottom));
  }
}

@media (min-width: 1024px) {
  :root {
    --symbol-width: clamp(17rem, 52vw, 39rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-spin-wrap,
  .hero-ambient::before,
  .hero-ambient::after {
    animation: none;
  }

  .hero-ticket-icon,
  .hero-tickets-text {
    animation: none;
    background-position: 50% center;
  }
}