@font-face {
  font-family: 'Benjamin Franklin';
  src: url('BenjaminFranklin.woff2') format('woff2'),
       url('BenjaminFranklin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Parallax item floating animations */
.parallax-item {
  will-change: transform;
}

.parallax-item:nth-child(5n+1) img {
  animation: float1 8s ease-in-out infinite;
}

.parallax-item:nth-child(5n+2) img {
  animation: float2 10s ease-in-out infinite;
}

.parallax-item:nth-child(5n+3) img {
  animation: float3 7s ease-in-out infinite;
}

.parallax-item:nth-child(5n+4) img {
  animation: float4 9s ease-in-out infinite;
}

.parallax-item:nth-child(5n+5) img {
  animation: float5 11s ease-in-out infinite;
}

/* Floating/Wiggle animations for parallax elements */
@keyframes float1 {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  25% { 
    transform: translate(10px, -15px) rotate(5deg); 
  }
  50% { 
    transform: translate(-5px, -25px) rotate(-3deg); 
  }
  75% { 
    transform: translate(-15px, -10px) rotate(7deg); 
  }
}

@keyframes float2 {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  30% { 
    transform: translate(-12px, 20px) rotate(-6deg); 
  }
  60% { 
    transform: translate(15px, 10px) rotate(4deg); 
  }
  90% { 
    transform: translate(8px, -8px) rotate(-2deg); 
  }
}

@keyframes float3 {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  20% { 
    transform: translate(8px, 12px) rotate(3deg); 
  }
  40% { 
    transform: translate(-10px, 5px) rotate(-5deg); 
  }
  80% { 
    transform: translate(5px, -15px) rotate(6deg); 
  }
}

@keyframes float4 {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  35% { 
    transform: translate(-8px, -18px) rotate(-4deg); 
  }
  65% { 
    transform: translate(12px, 8px) rotate(5deg); 
  }
  85% { 
    transform: translate(-5px, 15px) rotate(-3deg); 
  }
}

@keyframes float5 {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  35% { 
    transform: translate(-8px, -18px) rotate(-4deg); 
  }
  65% { 
    transform: translate(12px, 8px) rotate(5deg); 
  }
  85% { 
    transform: translate(-5px, 15px) rotate(-3deg); 
  }
}

/* Disable animations when dragging */
.parallax-item.dragging img {
  animation-play-state: paused !important;
}

    /* Subtle Ken Burns pan/zoom effect */
@keyframes ken-burns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -1%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

.animate-ken-burns {
  animation: ken-burns 15s ease-in-out infinite;
}


/* Modal fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.modal-fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

.modal-fade-out {
  animation: fadeOut 0.3s ease-in-out forwards;
}

/* Optional: Content slide up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-slide-up {
  animation: slideUp 0.6s ease-out 0.2s backwards;
}

/* Seamless infinite scrolling animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  display: inline-flex;
  animation: scroll 40s linear infinite;
  will-change: transform;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

/* Ensure no gaps */
.animate-scroll span {
  flex-shrink: 0;
  white-space: nowrap;
}