/*!
 * Phoenix Hero Animation
 * Inspired by https://codepen.io/FlorCoppola/pen/rNoQWpj
 * Optimized for Phoenix International Logistics Platform
 */

.hero-animated {
  position: relative;
  overflow: hidden;
  background: var(--phoenix-primary-blue);
}

.hero-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  animation: heroFloat 20s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

.hero-animated::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70%);
  animation: heroRotate 30s linear infinite;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3; /* Above animated layers */
}

/* Floating particles effect */
.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-particles::before,
.hero-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: particleFloat 15s linear infinite;
}

.hero-particles::before {
  bottom: 0;
  left: 10%;
  animation-delay: -5s;
  animation-duration: 20s;
}

.hero-particles::after {
  bottom: 0;
  right: 15%;
  animation-delay: -10s;
  animation-duration: 25s;
}

/* Additional floating elements */
.hero-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: particleFloat 18s linear infinite;
}

.hero-particle:nth-child(1) {
  bottom: 0;
  left: 20%;
  animation-delay: -2s;
  animation-duration: 22s;
}

.hero-particle:nth-child(2) {
  bottom: 0;
  left: 60%;
  animation-delay: -8s;
  animation-duration: 16s;
}

.hero-particle:nth-child(3) {
  bottom: 0;
  right: 25%;
  animation-delay: -12s;
  animation-duration: 24s;
}

.hero-particle:nth-child(4) {
  bottom: 0;
  left: 40%;
  animation-delay: -6s;
  animation-duration: 20s;
}

.hero-particle:nth-child(5) {
  bottom: 0;
  right: 40%;
  animation-delay: -14s;
  animation-duration: 18s;
}

/* Parallax waves from CodePen */
.hero-waves {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 2;
  overflow: hidden;
}

.waves {
  position: relative;
  width: 100%;
  height: 120px;
  margin-bottom: 0px; /* Fix “white gap” */
  min-height: 150px;
  max-height: 150px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes move-forever {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

@media (max-width: 768px) {
  .hero-waves {
    height: 60px;
  }
  .waves {
    height: 60px;
    min-height: 60px;
    bottom: -1px;
  }
}

/* Hero silhouettes */
.hero-silhouettes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.silhouette {
  position: absolute;
  width: 64px;
  height: 64px;
  opacity: 0.12;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
  will-change: transform;
}

.silhouette.plane {
  top: var(--plane-top, 10%);
  left: -20%;
  right: auto;
  background-image: url("/static/images/silhouettes/plane.6c7de23f17c1.svg");
  animation-name: planeFlyRight;
  animation-duration: var(--plane-duration, 22s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 3s;
}

.silhouette.ship {
  bottom: var(--ship-bottom, 12%);
  left: -20%; /* default from left to right */
  width: 96px;
  height: 96px;
  background-image: url("/static/images/silhouettes/ship.17a00dec4eab.svg");
  animation-name: shipSailRight;
  animation-duration: var(--ship-duration, 35s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 8s;
}

/* Rightward flight/sail */
@keyframes planeFlyRight {
  0% { transform: translateX(0) translateY(0) scale(var(--plane-scale, 1)) rotateY(var(--plane-flip, 180deg)); opacity: 0; }
  6% { opacity: 0.14; }
  50% { transform: translateX(80vw) translateY(var(--plane-y, -10px)) scale(var(--plane-scale, 1)) rotateY(var(--plane-flip, 180deg)); }
  94% { opacity: 0.14; }
  100% { transform: translateX(160vw) translateY(var(--plane-y-end, -14px)) scale(var(--plane-scale, 1)) rotateY(var(--plane-flip, 180deg)); opacity: 0; }
}

@keyframes shipSailRight {
  0% { transform: translateX(0) translateY(0) scale(var(--ship-scale, 1)) rotateY(var(--ship-flip, 180deg)); opacity: 0; }
  6% { opacity: 0.14; }
  50% { transform: translateX(80vw) translateY(var(--ship-y, 2px)) scale(var(--ship-scale, 1)) rotateY(var(--ship-flip, 180deg)); }
  94% { opacity: 0.14; }
  100% { transform: translateX(160vw) translateY(var(--ship-y-end, 4px)) scale(var(--ship-scale, 1)) rotateY(var(--ship-flip, 180deg)); opacity: 0; }
}

/* Leftward flight/sail */
@keyframes planeFlyLeft {
  0% { transform: translateX(0) translateY(0) scale(var(--plane-scale, 1)) rotateY(var(--plane-flip, 0deg)); opacity: 0; }
  6% { opacity: 0.14; }
  50% { transform: translateX(-80vw) translateY(var(--plane-y, 10px)) scale(var(--plane-scale, 1)) rotateY(var(--plane-flip, 0deg)); }
  94% { opacity: 0.14; }
  100% { transform: translateX(-160vw) translateY(var(--plane-y-end, 14px)) scale(var(--plane-scale, 1)) rotateY(var(--plane-flip, 0deg)); opacity: 0; }
}

@keyframes shipSailLeft {
  0% { transform: translateX(0) translateY(0) scale(var(--ship-scale, 1)) rotateY(var(--ship-flip, 0deg)); opacity: 0; }
  6% { opacity: 0.14; }
  50% { transform: translateX(-80vw) translateY(var(--ship-y, -2px)) scale(var(--ship-scale, 1)) rotateY(var(--ship-flip, 0deg)); }
  94% { opacity: 0.14; }
  100% { transform: translateX(-160vw) translateY(var(--ship-y-end, -4px)) scale(var(--ship-scale, 1)) rotateY(var(--ship-flip, 0deg)); opacity: 0; }
}

/* Keyframe animations */
@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.1;
  }
}

@keyframes heroRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(150px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-120vh) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes waveMove {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-50px);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-animated::before,
  .hero-animated::after {
    animation-duration: 15s;
  }
  
  .hero-particles::before,
  .hero-particles::after,
  .hero-particle {
    animation-duration: 12s;
  }
  
  .hero-wave {
    height: 60px;
    background-size: 800px 60px;
  }
}

@media (max-width: 480px) {
  .hero-animated::before,
  .hero-animated::after {
    animation-duration: 10s;
  }
  
  .hero-particles::before,
  .hero-particles::after,
  .hero-particle {
    animation-duration: 8s;
  }
  
  .hero-wave {
    height: 40px;
    background-size: 600px 40px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero-animated::before,
  .hero-animated::after,
  .hero-particles::before,
  .hero-particles::after,
  .hero-particle,
  .hero-waves,
  .silhouette,
  .parallax > use {
    animation: none !important;
  }

  .hero-animated::before { opacity: 0.1; }
  .hero-animated::after { opacity: 0.05; }
}

/* Performance optimizations */
.hero-animated,
.hero-animated::before,
.hero-animated::after,
.hero-particles,
.hero-particles::before,
.hero-particles::after,
.hero-particle,
.hero-wave {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hero-animated::before,
  .hero-animated::after,
  .hero-particles::before,
  .hero-particles::after,
  .hero-particle,
  .hero-wave {
    display: none;
  }
}