/* Soft accents; content stays visible when JavaScript is unavailable. */
.hero-collage::before,
.hero-collage::after {
  content: '✦';
  position: absolute;
  pointer-events: none;
  z-index: 2;
  color: #f79433;
  font-size: 28px;
  text-shadow: 0 0 20px rgba(255, 232, 80, .55);
  animation: bery-twinkle 5s ease-in-out 2;
}
.hero-collage::before { top: 8%; left: 2%; }
.hero-collage::after { bottom: 16%; right: 3%; font-size: 20px; animation-delay: 1.2s; }
.hero .doodle { animation: bery-twinkle 5s ease-in-out 2; }
.hero-photo { box-shadow: 0 16px 48px rgba(40, 171, 226, .13), 0 0 34px rgba(255, 232, 80, .15); }
.experience-card, .visit-card, .ticket, .music-card {
  transition: translate 220ms ease-out, box-shadow 220ms ease-out;
}
.button { transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
.button:active { transform: translateY(0) scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .experience-card:hover, .visit-card:hover, .ticket:hover, .music-card:hover {
    translate: 0 -4px;
    box-shadow: 0 14px 34px rgba(40, 171, 226, .12);
  }
}
@keyframes bery-twinkle {
  0%, 100% { opacity: .6; transform: scale(.92) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-collage::before, .hero-collage::after, .hero .doodle { animation: none; }
  .experience-card, .visit-card, .ticket, .music-card, .button { transition: none; }
  .experience-card:hover, .visit-card:hover, .ticket:hover, .music-card:hover,
  .button:active { translate: none; transform: none; }
}