/* tw-elements plugin ships its own '#3b71ca' default for the "primary"
   color name and wins the Tailwind theme merge over tailwind.config.js,
   so the brand blue is reasserted here to actually take effect. */
.bg-primary { background-color: #2F6FED !important; }
.text-primary { color: #2F6FED !important; }
.border-primary { border-color: #2F6FED !important; }
.hover\:bg-primary:hover { background-color: #2F6FED !important; }
.hover\:text-primary:hover { color: #2F6FED !important; }

.platform {
  position: relative;
  transition: right 0.3s;
}

.gallery {
  width: 1230px;
}

.card {
  min-width: 390px;
}

.arrow {
  top: 30%
}

#parks {
  scroll-behavior: smooth;
}

.alert-danger {
  color: red;
}

.alert {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-success {
  color: #fff;
  border-color: #4fd69c;
  background-color: #4fd69c;
}

/* ---------- Hero 3D animated scene ---------- */
.hero-scene {
  position: relative;
  width: 100%;
  height: 460px;
  perspective: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-scene__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: 0;
}

.hero-scene__blob--a {
  width: 320px;
  height: 320px;
  top: 10%;
  left: 8%;
  background: radial-gradient(circle, #2F6FED 0%, transparent 70%);
  animation: heroBlobDrift 9s ease-in-out infinite;
}

.hero-scene__blob--b {
  width: 260px;
  height: 260px;
  bottom: 5%;
  right: 10%;
  background: radial-gradient(circle, #22D3EE 0%, transparent 70%);
  animation: heroBlobDrift 11s ease-in-out infinite reverse;
}

.hero-scene__stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-14deg);
  animation: heroStageSway 8s ease-in-out infinite;
  z-index: 1;
}

.hero-scene__ground {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 260px;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(11, 37, 69, 0.25) 0%, transparent 75%);
  transform: translateX(-50%) rotateX(90deg);
  border-radius: 50%;
}

.hero-card {
  position: absolute;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 25px 45px -12px rgba(11, 37, 69, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

.hero-card__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.hero-card__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1E293B;
  white-space: nowrap;
}

.hero-card__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
}

.hero-card--main {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(40px);
  padding: 28px 34px;
  border-radius: 26px;
  animation: heroFloat 5s ease-in-out infinite;
}

.hero-card--main .hero-card__icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 18px;
  font-size: 24px;
  background: linear-gradient(135deg, #2F6FED, #22D3EE);
}

.hero-card--main .hero-card__title {
  font-size: 18px;
}

.hero-card--ticket {
  top: 6%;
  right: 4%;
  transform: translateZ(70px) rotate(-4deg);
  animation: heroFloat 6s ease-in-out infinite 0.4s;
}

.hero-card--ticket .hero-card__icon {
  background: linear-gradient(135deg, #22D3EE, #2F6FED);
}

.hero-card--pin {
  bottom: 10%;
  left: 2%;
  transform: translateZ(90px) rotate(3deg);
  animation: heroFloat 7s ease-in-out infinite 0.8s;
}

.hero-card--pin .hero-card__icon {
  background: linear-gradient(135deg, #818CF8, #2F6FED);
}

.hero-card--paid {
  bottom: 2%;
  right: 12%;
  transform: translateZ(110px) rotate(-2deg);
  animation: heroFloat 5.5s ease-in-out infinite 1.2s;
}

.hero-card--paid .hero-card__icon {
  background: linear-gradient(135deg, #16A34A, #22D3EE);
}

@keyframes heroFloat {
  0%, 100% { transform: translateZ(var(--z, 40px)) translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateZ(var(--z, 40px)) translateY(-14px) rotate(var(--r, 0deg)); }
}

.hero-card--main { --z: 40px; }
.hero-card--ticket { --z: 70px; --r: -4deg; }
.hero-card--pin { --z: 90px; --r: 3deg; }
.hero-card--paid { --z: 110px; --r: -2deg; }

@keyframes heroStageSway {
  0%, 100% { transform: rotateX(8deg) rotateY(-14deg); }
  50% { transform: rotateX(5deg) rotateY(-8deg); }
}

@keyframes heroBlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.08); }
}

@media (max-width: 1023px) {
  .hero-scene { height: 340px; }
  .hero-card { padding: 12px 16px; }
  .hero-card__title { font-size: 12px; }
  .hero-card__subtitle { font-size: 10px; }
}