@keyframes sail-float { 0%,100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-13px) rotate(1.4deg); } }
@keyframes tide-drift { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes compass-sway { 0%,100% { rotate: -9deg; } 50% { rotate: 13deg; } }
@keyframes route-flow { to { stroke-dashoffset: -96; } }
@keyframes orbit-slow { to { rotate: 360deg; } }
@keyframes beacon-breathe { 0%,100% { box-shadow: 0 0 0 0 #ff9a8040; } 55% { box-shadow: 0 0 0 8px #ff9a8000; } }
@keyframes world-point-breathe { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,154,128,0)); } 50% { transform: scale(1.3); filter: drop-shadow(0 0 8px rgba(255,154,128,0.75)); } }
@keyframes guide-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes network-beacon-pulse { 0% { box-shadow: 0 0 0 4px #e6f3ec, 0 0 0 0 rgba(41,110,100,0.5); } 70% { box-shadow: 0 0 0 4px #e6f3ec, 0 0 0 10px rgba(41,110,100,0); } 100% { box-shadow: 0 0 0 4px #e6f3ec, 0 0 0 10px rgba(41,110,100,0); } }
@keyframes tunnel-shield-breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(131,204,231,0.55); } 50% { box-shadow: 0 0 0 10px rgba(131,204,231,0); } }
@keyframes tunnel-packet-stream { from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes toast-spring-in { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes details-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes boat-dock-rock { 0% { transform: rotate(-3deg) translateY(0); } 100% { transform: rotate(4deg) translateY(-2px); } }


.home-vessel { animation: sail-float 6s ease-in-out infinite; transform-origin: 50% 80%; will-change: transform; }
.home-compass-needle,.nautical-needle { transform-origin: center; transform-box: fill-box; animation: compass-sway 12s ease-in-out infinite; }
.public-heading-mark>svg { transform-origin: center; animation: compass-sway 16s ease-in-out infinite; }
.home-chart-route { stroke-dasharray: 7 9; animation: route-flow 16s linear infinite; }
.home-tide-front,.home-tide-back { animation: tide-drift 20s linear infinite; will-change: transform; }
.home-tide-back { animation-duration: 32s; animation-direction: reverse; }
.user-route-circle { animation: orbit-slow 70s linear infinite; }
.user-art-point { animation: beacon-breathe 4s ease-in-out infinite; }
.user-art-point-two { animation-delay: 2s; }


.home-world-point { transform-origin: center; transform-box: fill-box; animation: world-point-breathe 3.2s ease-in-out infinite; }
.home-world-point:nth-child(2) { animation-delay: 0.6s; }
.home-world-point:nth-child(3) { animation-delay: 1.2s; }
.home-world-point:nth-child(4) { animation-delay: 1.8s; }
.home-world-point:nth-child(5) { animation-delay: 2.4s; }
.home-seascape-label .icon { animation: guide-bounce 2.2s ease-in-out infinite; }


.brand { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand:hover { transform: scale(1.02); }
.brand-boat { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand:hover .brand-boat { transform: rotate(-5deg) translateY(-2px) scale(1.08); }
.main-nav a { position: relative; transition: color 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.main-nav a:hover { transform: translateY(-1px); }
.main-nav a:after { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center; }
.language-btn { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s; }
.language-btn:hover { transform: rotate(10deg) scale(1.05); }
.language-btn:active { transform: rotate(0) scale(0.95); }
.mobile-menu-btn { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mobile-menu-btn:hover { transform: scale(1.08); }
.mobile-menu-btn:active { transform: scale(0.92); }


.btn {
  position: relative; overflow: hidden;
  transition: background .25s, color .25s, border-color .25s, box-shadow .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.34,1.56,.64,1);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -4px rgba(23,62,80,0.22); }
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 4px rgba(23,62,80,0.12); transition-duration: .1s; }
.btn:disabled { transform: none; box-shadow: none; }
.btn.primary { background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%); }
.btn.primary:hover { box-shadow: 0 10px 24px -4px rgba(255,154,128,0.45), 0 4px 10px -2px rgba(23,62,80,0.2); }
.btn .icon, .public-arrow, .user-link-card>svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.btn:hover .icon:last-child, .public-link-card:hover .public-arrow, .user-link-card:hover>svg { transform: translateX(5px); }


.benefit-arrow { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, box-shadow .3s; }
.benefit-arrow:hover:enabled { transform: scale(1.12); box-shadow: 0 6px 16px -2px rgba(23,62,80,0.22); }
.benefit-arrow:active:enabled { transform: scale(0.92); box-shadow: none; }
.benefit-carousel-dots button span { transition: width .35s cubic-bezier(.34,1.56,.64,1), background .3s; }


.network-dot:not(.offline) { animation: network-beacon-pulse 2.5s ease-out infinite; }
.network-card { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1); }
.network-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -8px rgba(23,62,80,0.14); }


.home-assurance-card {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.home-assurance-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px -8px rgba(23,62,80,0.18);
}
.home-assurance-card .home-assurance-icon {
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.home-assurance-card:hover .home-assurance-icon {
  transform: scale(1.12) rotate(-5deg);
}
.home-assurance-card:nth-child(2):hover .home-assurance-icon {
  transform: scale(1.12) rotate(5deg);
}
.home-assurance-card:nth-child(3):hover .home-assurance-icon {
  transform: scale(1.12) translateY(-2px);
}


.tunnel-secure {
  animation: tunnel-shield-breathe 4s ease-in-out infinite;
}
.tunnel-dots {
  background-image: radial-gradient(#173e50 22%, transparent 22%);
  background-size: 14px 14px;
  border-bottom: 0;
  height: 4px;
  animation: tunnel-packet-stream 1.4s linear infinite;
}


.home-client-card { transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s cubic-bezier(.16,1,.3,1); }
.home-client-card:hover { transform: translateY(-6px); box-shadow: 0 20px 42px -8px rgba(23,62,80,0.2); }
.home-client-brand { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.home-client-card:hover .home-client-brand { transform: scale(1.08) rotate(-4deg); }
.home-client-symbol { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.home-client-card:hover .home-client-symbol { transform: scale(1.08) rotate(4deg); }
.home-client-pills > span { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s; }
.home-client-pills > span:hover { transform: translateY(-2px) scale(1.05); background: #fffdf7; border-color: #173e50; }


.home-simple-steps > li { transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s cubic-bezier(.16,1,.3,1); }
.home-simple-steps > li:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -8px rgba(23,62,80,0.16); }
.home-step-number { transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.home-simple-steps > li:hover .home-step-number { transform: scale(1.15) rotate(-6deg); box-shadow: 0 6px 14px -2px rgba(23,62,80,0.2); }


details summary { cursor: pointer; transition: color .2s; }
details summary .icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
details[open] summary .icon { transform: rotate(180deg); }
details[open] > *:not(summary) { animation: details-open .35s cubic-bezier(.16,1,.3,1); }
.public-faq[open]>p { animation: faq-enter .3s ease-out; }
@keyframes faq-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }


.workspace-sidebar a { transition: background .25s, color .25s, padding .3s cubic-bezier(.16,1,.3,1), transform .25s; }
.workspace-sidebar a:hover { padding-left: 21px; transform: translateX(2px); }
.workspace-sidebar a .icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.workspace-sidebar a:hover .icon { transform: scale(1.12); }
.user-topic-card { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .2s; }
.user-topic-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px -4px rgba(23,62,80,0.15); }
.connect-device { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .2s; }
.connect-device:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -4px rgba(23,62,80,0.18); }
.app-toast { animation: toast-spring-in .4s cubic-bezier(.34,1.56,.64,1); }


.motion-paused *,.motion-paused *:before,.motion-paused *:after { animation-play-state: paused!important; }
.motion-rest,.motion-rest *,.motion-rest:before,.motion-rest:after { animation-play-state: paused!important; }

@media(hover:none) {
  .btn:hover { transform: none; box-shadow: none; }
  .btn:hover .icon:last-child { transform: none; }
  .home-assurance-card:hover { transform: none; box-shadow: none; }
  .home-client-card:hover { transform: none; box-shadow: none; }
  .workspace-sidebar a:hover { padding-left: 16px; transform: none; }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .home-vessel { translate: 0 0!important; }
}