/* =============================================================
   7 Plus Overseas · animations.css
   Every looping animation lives here, so one media query can
   switch them all off for visitors who prefer reduced motion.
   ============================================================= */

/* Animated logo: ring draws in, the 7 writes itself, the + pops, a dot orbits */
.mark-ring { stroke-dasharray: 176; stroke-dashoffset: 176; animation: draw 1.4s var(--ease) forwards; }
.mark-seven { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 0.9s var(--ease) 0.5s forwards; }
.mark-plus { transform-box: fill-box; transform-origin: center; animation: plus-pop 0.6s var(--ease) 1.2s both, plus-spin 6s ease-in-out 2s infinite; }
.mark-meridian { transform-box: fill-box; transform-origin: center; animation: meridian 5s linear infinite; }
.mark-orbit { transform-origin: 32px 32px; animation: orbit 4s linear infinite; }
.brand:hover .mark-orbit { animation-duration: 1.2s; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes plus-pop { from { transform: scale(0) rotate(-90deg); } }
@keyframes plus-spin { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes meridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.15); } 100% { transform: scaleX(1); } }
@keyframes orbit { to { transform: rotate(360deg); } }

/* Glowing CTA border */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn--glow::before { animation: spin-angle 4s linear infinite; }
@keyframes spin-angle { to { --angle: 360deg; } }

/* Gradient text shimmer */
.grad-text { animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: 200% center; } }

/* Pulsing live dots */
.dot-pulse::after, .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.8s ease-out infinite; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }

/* Floating cards and compass */
.float-card--a { animation: bob 6s ease-in-out infinite; }
.float-card--b { animation: bob 7s ease-in-out -3s infinite; }
@keyframes bob { 50% { translate: 0 -12px; } }
.compass__needle { transform-origin: 40px 40px; animation: needle 5s ease-in-out infinite; }
@keyframes needle { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(24deg); } }

/* Hero sea. sea.js sails the ship and rolls the swell (Web Animations API);
   these are the small loops on and around the ship. */
.ship__flag { animation: flag 1.4s ease-in-out infinite alternate; }
@keyframes flag { from { transform: skewY(-7deg) scaleX(0.92); } to { transform: skewY(5deg) scaleX(1); } }
.ship__radar { animation: meridian 2.2s linear infinite; }
.ship__lamp { animation: lamp 2.6s ease-in-out infinite; }
.ship__lamp--fore { animation-delay: -1.3s; }
@keyframes lamp { 50% { opacity: 0.35; } }
.ship__smoke i { animation: smoke 3.6s ease-out infinite; }
.ship__smoke i:nth-child(2) { animation-delay: 1.2s; }
.ship__smoke i:nth-child(3) { animation-delay: 2.4s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 15% { opacity: 0.9; } 100% { opacity: 0; transform: translate(-72px, -26px) scale(2.6); } }
.ship__wake::before { animation: foam 1.1s linear infinite; }
.ship__wake::after { animation: foam-slow 2.4s linear infinite; }
@keyframes foam { to { transform: translateX(-48px); } }
@keyframes foam-slow { to { transform: translateX(-80px); } }
.ship__reflection::before { animation: ripple 2.8s ease-in-out infinite; }
@keyframes ripple { 50% { transform: scaleX(1.3); opacity: 0.55; } }
.ship__spray { animation: spray 1.8s ease-in-out infinite; }
@keyframes spray { 50% { transform: scale(1.3, 1.6); opacity: 0.55; } }
.gull { animation: glide 8s ease-in-out infinite; }
.gull--b { animation-duration: 10s; animation-delay: -4s; }
.gull svg { animation: flap 2.2s ease-in-out infinite; }
.gull--b svg { animation-delay: -0.8s; }
@keyframes glide { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(18px, -10px); } 60% { transform: translate(-10px, -16px); } 80% { transform: translate(-18px, -4px); } }
@keyframes flap { 0%, 44%, 100% { transform: scaleY(1); } 11%, 33% { transform: scaleY(-0.55); } 22% { transform: scaleY(1); } }
.sea__glints i { animation: glint 4.2s ease-in-out infinite; }
.sea__glints i:nth-child(even) { animation-duration: 5.3s; }
.sea__glints i:nth-child(2) { animation-delay: -1.3s; }
.sea__glints i:nth-child(3) { animation-delay: -2.6s; }
.sea__glints i:nth-child(4) { animation-delay: -0.7s; }
.sea__glints i:nth-child(5) { animation-delay: -3.4s; }
.sea__glints i:nth-child(6) { animation-delay: -2s; }
@keyframes glint { 0%, 100% { opacity: 0; transform: scaleX(0.3); } 50% { opacity: 0.85; transform: scaleX(1); } }
/* sea.js adds is-paused while the sea is scrolled out of view */
.sea.is-paused *, .sea.is-paused *::before, .sea.is-paused *::after { animation-play-state: paused; }

/* Ticker marquee */
.ticker__track { animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Radar sweep */
.radar i { animation: orbit 4s linear infinite; }
.radar span:nth-child(1) { animation: radar-ring 3s ease-out infinite; }
.radar span:nth-child(2) { animation: radar-ring 3s ease-out 1s infinite; }
.radar span:nth-child(3) { animation: radar-ring 3s ease-out 2s infinite; }
@keyframes radar-ring { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }

/* Small one shot helpers */
@keyframes nudge { 50% { transform: translateX(5px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }

/* Scroll reveal (only hides content when JavaScript runs) */
.js .reveal { opacity: 0; }
.js .reveal.is-visible { animation: reveal 0.8s var(--ease) var(--delay, 0s) both; }
@keyframes reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

/* Reduced motion: stop every loop, keep the final state */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; }
  .mark-ring, .mark-seven { stroke-dashoffset: 0; }
}