/* ============================================================
   TRIRREME — Editorial Moderno Náutico
   Complementa as utilidades do Tailwind (CDN) com keyframes,
   componentes e ajustes de base para as versões desktop e mobile.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }
img { display: block; max-width: 100%; }

main > :first-child { margin-top: 0 !important; }
main > :last-child { margin-bottom: 0 !important; }

::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.pt-safe { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- Flutuação náutica do emblema (desktop) ---------- */
@keyframes shipGentlySway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-8px) rotate(-1.2deg); }
  70%      { transform: translateY(4px) rotate(0.8deg); }
}
.animate-nautical-sway { animation: shipGentlySway 7s ease-in-out infinite; }

/* ---------- Flutuação do barco (mobile) ---------- */
@keyframes floatBoat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(1.2deg); }
}
.animate-float-boat {
  animation: floatBoat 4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* ---------- Ponto pulsante ---------- */
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.6; }
}
.animate-pulse-glow { animation: pulseGlow 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ---------- Faixa corrida — desktop ---------- */
@keyframes marqueeScroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee-track {
  display: flex;
  width: 200%;
  animation: marqueeScroll 28s linear infinite;
}
.animate-marquee-track:hover { animation-play-state: paused; }

/* ---------- Faixa corrida — mobile ---------- */
@keyframes tickerMarquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: tickerMarquee 22s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }

/* ---------- Reveal fade-up ---------- */
.js .fade-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js .fade-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-nautical-sway,
  .animate-float-boat,
  .animate-pulse-glow,
  .animate-marquee-track,
  .ticker-track { animation: none !important; }
  .js .fade-reveal { opacity: 1; transform: none; transition: none; }
}