/* Animations for June Calendar */

/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s forwards;
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 1s forwards;
}

/* Fade In Down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-down {
  animation: fadeInDown 1s forwards;
}

/* Fade In Left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-left {
  animation: fadeInLeft 1s forwards;
}

/* Fade In Right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-right {
  animation: fadeInRight 1s forwards;
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Bounce */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}

/* Pulse */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Float */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.float {
  animation: float 6s ease-in-out infinite;
}

/* Spin */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 10s linear infinite;
}

/* Shimmer */
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.2) 50%, 
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Calendar Flip */
@keyframes calendarFlip {
  0% {
    transform: rotateX(0);
  }
  10% {
    transform: rotateX(-180deg);
  }
  20% {
    transform: rotateX(-180deg);
  }
  30% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}

.calendar-flip {
  animation: calendarFlip 10s infinite;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Day Highlight */
@keyframes dayHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 133, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(26, 133, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 133, 255, 0);
  }
}

.day-highlight {
  animation: dayHighlight 2s infinite;
}

/* Panel Slide In */
@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-slide-in {
  animation: panelSlideIn 0.5s ease forwards;
}

/* Panel Slide Out */
@keyframes panelSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.panel-slide-out {
  animation: panelSlideOut 0.5s ease forwards;
}

/* Card Stagger Animation */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-item.active {
  animation: fadeInUp 0.5s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }

/* Staggered Animation Delays */
.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

.delay-4 {
  animation-delay: 0.4s;
}

.delay-5 {
  animation-delay: 0.5s;
}

.delay-6 {
  animation-delay: 0.6s;
}

.delay-7 {
  animation-delay: 0.7s;
}

.delay-8 {
  animation-delay: 0.8s;
}

.delay-9 {
  animation-delay: 0.9s;
}

.delay-10 {
  animation-delay: 1s;
}

/* Hero Section Specific Animations */
.hero-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  background: linear-gradient(-45deg, var(--summer-blue), var(--aqua), var(--lavender), var(--soft-coral));
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-calendar-icon {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hero-calendar-icon-day {
  animation: numberChange 20s infinite;
}

@keyframes numberChange {
  0%, 100% {
    content: "1";
  }
  5% {
    content: "5";
  }
  10% {
    content: "8";
  }
  15% {
    content: "12";
  }
  20% {
    content: "14";
  }
  25% {
    content: "19";
  }
  30% {
    content: "21";
  }
  35% {
    content: "23";
  }
  40% {
    content: "27";
  }
  45% {
    content: "30";
  }
  50% {
    content: "1";
  }
  55% {
    content: "5";
  }
  60% {
    content: "8";
  }
  65% {
    content: "12";
  }
  70% {
    content: "14";
  }
  75% {
    content: "19";
  }
  80% {
    content: "21";
  }
  85% {
    content: "23";
  }
  90% {
    content: "27";
  }
  95% {
    content: "30";
  }
}

/* Day Detail Panel Animations */
.day-detail-panel {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.day-detail-panel.active {
  animation: panelSlideIn 0.4s ease forwards;
}

.day-detail-panel.closing {
  animation: panelSlideOut 0.4s ease forwards;
}

/* Event Card Animations */
.event-card {
  opacity: 0;
  transform: translateY(20px);
}

.event-card.fade-in {
  animation: none; /* Override the general fade-in */
}

.event-card.active {
  animation: fadeInUp 0.5s ease forwards;
}

/* Intersection Observer Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Calendar Day Hover Animation */
.calendar-day {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.calendar-day:hover:not(.empty):not(.no-events) {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Featured Card Hover Animation */
.featured-day-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-day-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.featured-day-card:hover .featured-day-image img {
  transform: scale(1.1);
}

/* Button Hover Animation */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.btn:hover::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

/* Filter Animation Keyframes */
@keyframes filterFadeIn {
  from {
    opacity: 0.3;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes filterFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.3;
    transform: scale(0.95);
  }
}

@keyframes filterPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 133, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(26, 133, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 133, 255, 0);
  }
}

/* Filter Button Animation */
@keyframes filterButtonActive {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.category-filter.active {
  animation: filterButtonActive 0.4s ease;
}

/* Calendar Day Filter Animations */
.calendar-day.filter-in {
  animation: filterFadeIn 0.5s ease forwards;
}

.calendar-day.filter-out {
  animation: filterFadeOut 0.5s ease forwards;
}

.calendar-day.filter-match {
  animation: filterPulse 1s ease;
}

/* Event Card Filter Animations */
.event-card.filter-in {
  animation: filterFadeIn 0.5s ease forwards;
}

.event-card.filter-out {
  animation: filterFadeOut 0.5s ease forwards;
  display: none;
  animation-fill-mode: forwards;
}

/* Filter Feedback Animation */
.filter-feedback {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--summer-blue);
  color: white;
  padding: 10px 20px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.filter-feedback.active {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Filter Animation */
.staggered-filter-item {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.staggered-filter-item:nth-child(1) { transition-delay: 0.05s; }
.staggered-filter-item:nth-child(2) { transition-delay: 0.1s; }
.staggered-filter-item:nth-child(3) { transition-delay: 0.15s; }
.staggered-filter-item:nth-child(4) { transition-delay: 0.2s; }
.staggered-filter-item:nth-child(5) { transition-delay: 0.25s; }
.staggered-filter-item:nth-child(6) { transition-delay: 0.3s; }
.staggered-filter-item:nth-child(7) { transition-delay: 0.35s; }
.staggered-filter-item:nth-child(8) { transition-delay: 0.4s; }
.staggered-filter-item:nth-child(9) { transition-delay: 0.45s; }
.staggered-filter-item:nth-child(10) { transition-delay: 0.5s; }
.staggered-filter-item:nth-child(11) { transition-delay: 0.55s; }
.staggered-filter-item:nth-child(12) { transition-delay: 0.6s; }
.staggered-filter-item:nth-child(13) { transition-delay: 0.65s; }
.staggered-filter-item:nth-child(14) { transition-delay: 0.7s; }
.staggered-filter-item:nth-child(15) { transition-delay: 0.75s; }
.staggered-filter-item:nth-child(16) { transition-delay: 0.8s; }
.staggered-filter-item:nth-child(17) { transition-delay: 0.85s; }
.staggered-filter-item:nth-child(18) { transition-delay: 0.9s; }
.staggered-filter-item:nth-child(19) { transition-delay: 0.95s; }
.staggered-filter-item:nth-child(20) { transition-delay: 1s; }
.staggered-filter-item:nth-child(21) { transition-delay: 1.05s; }
.staggered-filter-item:nth-child(22) { transition-delay: 1.1s; }
.staggered-filter-item:nth-child(23) { transition-delay: 1.15s; }
.staggered-filter-item:nth-child(24) { transition-delay: 1.2s; }
.staggered-filter-item:nth-child(25) { transition-delay: 1.25s; }
.staggered-filter-item:nth-child(26) { transition-delay: 1.3s; }
.staggered-filter-item:nth-child(27) { transition-delay: 1.35s; }
.staggered-filter-item:nth-child(28) { transition-delay: 1.4s; }
.staggered-filter-item:nth-child(29) { transition-delay: 1.45s; }
.staggered-filter-item:nth-child(30) { transition-delay: 1.5s; }
/* Carousel Specific Animations */

/* Card Entrance Animation */
@keyframes cardEntranceRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cardEntranceLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.card-entrance-right {
  animation: cardEntranceRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.card-entrance-left {
  animation: cardEntranceLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Card Hover Effects */
.featured-day-card {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s ease;
}

.featured-day-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Image Zoom Effect */
.featured-day-image img {
  transition: transform 0.8s ease;
}

.featured-day-card:hover .featured-day-image img {
  transform: scale(1.1);
}

/* Date Label Animation */
@keyframes dateHighlight {
  0% {
    background-color: rgba(0, 0, 0, 0.7);
  }
  50% {
    background-color: var(--summer-blue);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

.featured-day-card:hover .featured-day-date {
  animation: dateHighlight 1.5s ease infinite;
}

/* Link Animation */
@keyframes linkPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.featured-day-link {
  transition: color 0.3s ease, transform 0.3s ease;
}

.featured-day-card:hover .featured-day-link {
  color: var(--aqua);
  animation: linkPulse 2s ease infinite;
}

/* Carousel Navigation Button Animations */
@keyframes navButtonPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(26, 133, 255, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(26, 133, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(26, 133, 255, 0);
  }
}

.carousel-nav:hover {
  animation: navButtonPulse 1.5s infinite;
}

/* Carousel Indicator Animation */
@keyframes indicatorPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.carousel-indicator.active {
  animation: indicatorPulse 2s infinite;
}

/* Staggered Card Animation */
.featured-day-card {
  opacity: 0;
}

.featured-day-card.visible {
  animation: cardEntranceRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.featured-day-card:nth-child(1) { animation-delay: 0.1s; }
.featured-day-card:nth-child(2) { animation-delay: 0.2s; }
.featured-day-card:nth-child(3) { animation-delay: 0.3s; }
.featured-day-card:nth-child(4) { animation-delay: 0.4s; }
.featured-day-card:nth-child(5) { animation-delay: 0.5s; }
.featured-day-card:nth-child(6) { animation-delay: 0.6s; }

/* Scroll Animation */
@keyframes scrollIndicator {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(10px);
  }
  20% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

.featured-carousel:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
  animation: scrollIndicator 4s ease-in-out infinite;
  display: none;
}

.featured-carousel.has-overflow:after {
  display: block;
}

/* Card Active State Animation */
.featured-day-card.active {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border: 2px solid var(--summer-blue);
}

/* Carousel Scroll Snap Animation */
.featured-carousel {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.featured-day-card {
  scroll-snap-align: start;
}

/* Carousel Pagination Animation */
@keyframes paginationFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-pagination {
  animation: paginationFadeIn 0.5s ease forwards;
  animation-delay: 0.8s;
  opacity: 0;
}