/* ShipTastic — motion layer.
   Cinematic, purposeful animation on the RoboTastic brand. Everything here is
   fully disabled under prefers-reduced-motion. */

/* ---- Scroll reveal (progressive enhancement: hidden ONLY when JS is on) ---- */
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
html.js .reveal-l { opacity: 0; transform: translateX(-30px); }
html.js .reveal-l.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
html.js .reveal-r { opacity: 0; transform: translateX(30px); }
html.js .reveal-r.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
html.js .reveal-scale { opacity: 0; transform: scale(.96); }
html.js .reveal-scale.in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
html.js [data-stagger] > * { opacity: 0; transform: translateY(22px); }
html.js [data-stagger].in > * { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

/* ---- Hero headline word rise ---- */
.rise { display: inline-block; overflow: hidden; vertical-align: top; }
html.js .rise > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.16,1,.3,1); }
html.js .hero-in .rise > span { transform: none; }

/* ---- Aurora drift (RoboTastic signature) ---- */
.aurora { position: absolute; inset: -30%; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .8; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%;
}
.aurora::before {
  width: 46%; height: 60%; left: 8%; top: 6%;
  background: radial-gradient(circle at 30% 30%, rgba(38,131,198,.55), transparent 62%);
  animation: drift1 20s ease-in-out infinite alternate;
}
.aurora::after {
  width: 42%; height: 56%; right: 6%; bottom: 4%;
  background: radial-gradient(circle at 60% 60%, rgba(47,211,199,.42), transparent 62%);
  animation: drift2 26s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8%,6%,0) scale(1.12); } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-7%,-5%,0) scale(1.15); } }

/* ---- Shimmer sweep on the accent (blue->teal->indigo) ---- */
.shimmer {
  background: linear-gradient(90deg, #2683c6, #2fd3c7, #37569d, #2683c6);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmerPan 6s linear infinite;
}
@keyframes shimmerPan { to { background-position: 220% center; } }

/* ---- Hero live-map cinematics ---- */
.route-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-in .route-line { animation: draw 2.8s cubic-bezier(.6,0,.2,1) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.node-ping { transform-box: fill-box; transform-origin: center; animation: ping 2.8s ease-out infinite; }
@keyframes ping { 0% { r: 5; opacity: .7; } 70%,100% { r: 22; opacity: 0; } }
.vessel-travel { offset-rotate: 0deg; }
.vessel-dot { filter: drop-shadow(0 0 6px rgba(47,211,199,.9)); }
.float-card { animation: floaty 7s ease-in-out infinite; }
.float-card.d2 { animation-delay: -3.5s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Marquee (carrier / coverage strip) ---- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; gap: 64px; white-space: nowrap; animation: scrollX 60s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---- Header condense on scroll ---- */
.site-header { transition: height .3s ease, box-shadow .3s ease, background .3s ease; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(4,4,74,.07); }
.site-header.scrolled .nav { height: 62px; }

/* ---- Magnetic + hover lift ---- */
.magnetic { transition: transform .18s cubic-bezier(.16,1,.3,1); }
.lift { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(4,4,74,.28); }

/* ---- Count-up ---- */
.count { font-variant-numeric: tabular-nums; }

/* ---- Scroll cue ---- */
.scroll-cue { animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r, .reveal-scale, [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .rise > span { transform: none !important; }
  .aurora::before, .aurora::after, .route-line, .node-ping, .float-card, .marquee-track, .shimmer, .scroll-cue { animation: none !important; }
  .route-line { stroke-dashoffset: 0 !important; }
  .shimmer { -webkit-text-fill-color: initial; color: var(--brand); background: none; }
}