/* ===================================
   WHALE LOGO ANIMATIONS
   WebMar Studios - Interactive Whale Logo
   =================================== */

/* ===================================
   LOGO CONTAINER STYLES
   =================================== */

.whale-logo {
  width: 64px;
  height: 53px;
  transition: transform var(--duration-normal) var(--ease-smooth);
  will-change: transform;
  cursor: pointer;
}

.whale-logo-static {
  width: 64px;
  height: 53px;
  opacity: 0.8;
}

/* ===================================
   LOGO IMAGE HOVER TRANSITION
   =================================== */

.logo-icon-img {
  width: 64px;
  height: 53px;
  display: block;
  transition: opacity 0.4s var(--ease-smooth);
  will-change: opacity;
}

.logo-icon-container {
  position: relative;
  width: 64px;
  height: 53px;
  display: inline-block;
}

.logo-icon-default {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 1;
}

.logo-icon-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
}

.logo:hover .logo-icon-default {
  opacity: 0;
}

.logo:hover .logo-icon-hover {
  opacity: 1;
}

/* Smooth scale on hover */
.logo:hover .logo-icon-container {
  transform: scale(1.05);
  transition: transform 0.3s var(--ease-smooth);
}

/* ===================================
   BASE WHALE ANIMATIONS
   =================================== */

/* Gentle floating animation - always active */
@keyframes whaleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Tail wiggle animation */
@keyframes tailWiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}

/* Eye blink animation */
@keyframes eyeBlink {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

/* Water spout animation */
@keyframes spoutRise {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
}

/* Spout droplets rising */
@keyframes dropletRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-15px) scale(0.5);
  }
}

/* Water splash animation */
@keyframes splashBurst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--splash-x), var(--splash-y)) scale(1.5);
  }
}

/* Wave beneath whale */
@keyframes waveFlow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -40;
  }
}

/* Fin wave animation */
@keyframes finWave {
  0%, 100% {
    transform: rotate(-25deg) translateY(0);
  }
  50% {
    transform: rotate(-25deg) translateY(-3px);
  }
}

/* Happy bounce animation */
@keyframes happyBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-12px) scale(1.05);
  }
  50% {
    transform: translateY(0) scale(1);
  }
  75% {
    transform: translateY(-6px) scale(1.02);
  }
}

/* ===================================
   DEFAULT STATE - GENTLE FLOAT
   =================================== */

.whale-body {
  animation: whaleFloat 4s var(--ease-ocean) infinite;
  transform-origin: center;
}

.whale-wave {
  stroke-dasharray: 20 20;
  animation: waveFlow 3s linear infinite;
}

/* Subtle tail movement even when idle */
.whale-tail {
  transform-origin: 95px 55px;
  animation: tailWiggle 3s var(--ease-ocean) infinite;
}

/* ===================================
   HOVER STATE - ACTIVE ANIMATIONS
   =================================== */

.logo:hover .whale-logo {
  transform: scale(1.05);
}

/* Enhanced tail wiggle on hover */
.logo:hover .whale-tail {
  animation: tailWiggle 1s var(--ease-ocean) infinite;
}

/* Activate water spout on hover */
.logo:hover .whale-spout .spout-stream {
  animation: spoutRise 1.5s var(--ease-smooth) infinite;
}

.logo:hover .whale-spout .spout-1 {
  animation-delay: 0s;
}

.logo:hover .whale-spout .spout-2 {
  animation-delay: 0.1s;
}

.logo:hover .whale-spout .spout-3 {
  animation-delay: 0.2s;
}

/* Spout droplets on hover */
.logo:hover .whale-spout .spout-droplet {
  animation: dropletRise 1.5s var(--ease-smooth) infinite;
}

.logo:hover .whale-spout .droplet-1 {
  animation-delay: 0.2s;
}

.logo:hover .whale-spout .droplet-2 {
  animation-delay: 0.3s;
}

.logo:hover .whale-spout .droplet-3 {
  animation-delay: 0.4s;
}

/* Eye follows on hover */
.logo:hover .whale-pupil {
  animation: eyeBlink 3s ease-in-out infinite;
}

/* Fin movement on hover */
.logo:hover .whale-fin-left {
  animation: finWave 1.2s var(--ease-ocean) infinite;
  transform-origin: 48px 68px;
}

/* ===================================
   CLICK/ACTIVE STATE - SPLASH
   =================================== */

.logo.whale-clicked .whale-body {
  animation: happyBounce 0.8s var(--ease-bounce) 1;
}

.logo.whale-clicked .whale-splash {
  opacity: 1;
}

.logo.whale-clicked .splash-bubble {
  animation: splashBurst 0.6s var(--ease-smooth) forwards;
}

.logo.whale-clicked .splash-1 {
  --splash-x: -15px;
  --splash-y: -10px;
  animation-delay: 0s;
}

.logo.whale-clicked .splash-2 {
  --splash-x: 15px;
  --splash-y: -8px;
  animation-delay: 0.05s;
}

.logo.whale-clicked .splash-3 {
  --splash-x: -12px;
  --splash-y: -5px;
  animation-delay: 0.1s;
}

/* ===================================
   SCROLL STATE - SUBTLE ANIMATION
   =================================== */

.nav.scrolled .whale-body {
  animation: whaleFloat 5s var(--ease-ocean) infinite;
}

.nav.scrolled .whale-tail {
  animation: tailWiggle 4s var(--ease-ocean) infinite;
}

/* ===================================
   MOBILE OPTIMIZATIONS
   =================================== */

@media (max-width: 768px) {
  .whale-logo {
    width: 56px;
    height: 46px;
  }

  .logo-icon-img {
    width: 56px;
    height: 46px;
  }

  .logo-icon-container {
    width: 56px;
    height: 46px;
  }

  /* Reduce animation complexity on mobile for performance */
  .whale-body {
    animation: whaleFloat 5s var(--ease-ocean) infinite;
  }

  .logo:hover .whale-spout .spout-stream,
  .logo:hover .whale-spout .spout-droplet {
    animation-duration: 2s;
  }
}

@media (max-width: 480px) {
  .whale-logo {
    width: 48px;
    height: 40px;
  }

  .logo-icon-img {
    width: 48px;
    height: 40px;
  }

  .logo-icon-container {
    width: 48px;
    height: 40px;
  }
}

/* ===================================
   ACCESSIBILITY - REDUCED MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {
  .whale-logo,
  .whale-body,
  .whale-tail,
  .whale-spout .spout-stream,
  .whale-spout .spout-droplet,
  .whale-fin-left,
  .whale-pupil,
  .whale-wave,
  .splash-bubble {
    animation: none !important;
  }

  .logo:hover .whale-logo {
    transform: none;
  }

  .logo.whale-clicked .whale-body {
    animation: none;
  }
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* GPU acceleration for smooth animations */
.whale-logo,
.whale-body,
.whale-tail,
.whale-fin-left,
.whale-spout,
.whale-splash {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Contain repaints to the logo area */
.logo {
  contain: layout style paint;
}

/* ===================================
   LOADING STATE
   =================================== */

.whale-logo.loading .whale-body {
  animation: happyBounce 1s var(--ease-bounce) infinite;
}

.whale-logo.loading .whale-spout .spout-stream {
  animation: spoutRise 0.8s var(--ease-smooth) infinite;
}

/* ===================================
   SUCCESS STATE (Optional)
   =================================== */

@keyframes successGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(5, 191, 219, 0));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(5, 191, 219, 0.8));
  }
}

.whale-logo.success {
  animation: successGlow 1.5s var(--ease-smooth) 2;
}