/* ═══════════════════════════════════════════
   NAVE MAGNA — FULL-SCREEN COMPASS
   Nautical compass with coordinate readouts
   File: /css/animation.css
   ═══════════════════════════════════════════ */

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-canvas svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150vmin;
  height: 150vmin;
  max-width: 1600px;
  max-height: 1600px;
}

/* Stroke draw-in */
@keyframes draw {
  from { stroke-dashoffset: var(--d); }
  to { stroke-dashoffset: 0; }
}
.cdraw {
  stroke-dasharray: var(--d);
  stroke-dashoffset: var(--d);
  animation: draw var(--t, 4s) var(--del, 0s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fade in to target opacity */
@keyframes cFadeIn {
  from { opacity: 0; }
  to { opacity: var(--to, 0.06); }
}
.cfade {
  opacity: 0;
  animation: cFadeIn var(--t, 3s) var(--del, 0s) ease forwards;
}

/* Continuous animations */
@keyframes outerSpin   { to { transform: rotate(360deg); } }
@keyframes innerSpin   { to { transform: rotate(-360deg); } }
@keyframes needleSwing { 0% { transform: rotate(-8deg); } 30% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 100% { transform: rotate(-8deg); } }
@keyframes breathe     { 0%,100% { opacity: var(--lo, 0.02); } 50% { opacity: var(--hi, 0.05); } }
@keyframes pulse       { 0%,100% { opacity: 0.03; } 50% { opacity: 0.12; } }
@keyframes coordBlink  { 0%,100% { opacity: var(--to, 0.04); } 50% { opacity: calc(var(--to, 0.04) * 1.8); } }
@keyframes yachtGlide  { 0% { transform: translate(0,0); } 50% { transform: translate(5px,-1.5px); } 100% { transform: translate(0,0); } }
@keyframes yachtFade   { 0%,100% { opacity: 0.018; } 40%,60% { opacity: 0.045; } }
@keyframes waveScroll  { to { transform: translateX(-50px); } }