/* ===== Hero title reveal ===== */
.hero__title-line {
  opacity: 0;
  transform: translateY(30px);
  animation: revealLine 0.8s ease forwards;
}

.hero__title-line:nth-child(1) { animation-delay: 0.2s; }
.hero__title-line:nth-child(2) { animation-delay: 0.4s; }
.hero__title-line:nth-child(3) { animation-delay: 0.6s; }

@keyframes revealLine {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__subtitle {
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.8s forwards;
}

.hero__actions {
  opacity: 0;
  animation: fadeInUp 0.8s ease 1.1s forwards;
}

.hero__label {
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.1s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Wave animations ===== */
.wave__path--crest {
  animation: waveCrest 5s ease-in-out infinite;
}

.wave__path--1 {
  animation: wave1 6s ease-in-out infinite;
}

.wave__path--2 {
  animation: wave2 5s ease-in-out infinite 0.5s;
}

.wave__path--3 {
  animation: wave3 7s ease-in-out infinite 1s;
}

@keyframes waveCrest {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-1.5%) translateY(-3px); }
}

@keyframes wave1 {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(-2%) scaleX(1.02); }
}

@keyframes wave2 {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(2%) scaleX(0.98); }
}

@keyframes wave3 {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(-1.5%) scaleX(1.01); }
}

/* ===== Fisherman bob ===== */
.fisherman-illustration {
  animation: fishermanBob 4s ease-in-out infinite;
}

@keyframes fishermanBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

/* ===== Floating fish ===== */
.floating-fish--1 {
  animation: floatFish1 5s ease-in-out infinite;
}

.floating-fish--2 {
  animation: floatFish2 6s ease-in-out infinite 1s;
}

.floating-fish--3 {
  animation: floatFish3 5.5s ease-in-out infinite 2s;
}

.floating-fish--4 {
  animation: floatFish2 6s ease-in-out infinite 0.5s;
}

.floating-hook {
  animation: floatFish1 7s ease-in-out infinite 1.5s;
}

.floating-anchor {
  animation: floatFish2 8s ease-in-out infinite 3s;
}

@keyframes floatFish1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  33% { transform: translate(8px, -6px) rotate(5deg); opacity: 0.8; }
  66% { transform: translate(-4px, 4px) rotate(-3deg); opacity: 0.5; }
}

@keyframes floatFish2 {
  0%, 100% { transform: translate(0, 0) scaleX(-1) rotate(0deg); opacity: 0.6; }
  50% { transform: translate(-10px, 8px) scaleX(-1) rotate(-5deg); opacity: 0.7; }
}

@keyframes floatFish3 {
  0%, 100% { transform: translate(0, 0) scaleX(-1); opacity: 0.6; }
  25% { transform: translate(6px, -4px) scaleX(-1); opacity: 0.7; }
  75% { transform: translate(-6px, 6px) scaleX(-1); opacity: 0.5; }
}

/* ===== Concept cards scroll reveal ===== */
.concept-card {
  opacity: 0;
  transform: translateY(40px);
}

.concept-card.visible {
  animation: cardReveal 0.6s ease forwards;
}

.concept-card--1.visible { animation-delay: 0.1s; }
.concept-card--2.visible { animation-delay: 0.2s; }
.concept-card--3.visible { animation-delay: 0.3s; }

.concept-highlight-card { opacity: 0; transform: translateY(30px); }
.concept-highlight-card.visible { animation: cardReveal 0.6s ease forwards; }
.concept-highlight-card:nth-child(1).visible { animation-delay: 0.1s; }
.concept-highlight-card:nth-child(2).visible { animation-delay: 0.2s; }

.why-card { opacity: 0; transform: translateY(20px); }
.why-card.visible { animation: cardReveal 0.5s ease forwards; }
.why-card:nth-child(1).visible { animation-delay: 0.05s; }
.why-card:nth-child(2).visible { animation-delay: 0.1s; }
.why-card:nth-child(3).visible { animation-delay: 0.15s; }
.why-card:nth-child(4).visible { animation-delay: 0.2s; }

@keyframes cardReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}