/* =====================================================================
   SEA HUNT - sea-themed motion: rolling waves, bobbing boat, gulls,
   bubbles, fish and scroll reveals. Everything is transform/opacity
   only (cheap to animate) and switched off for visitors who prefer
   reduced motion. Elements are injected by frontend/js/animations.js.
   ===================================================================== */

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; translate: 0 28px; transition: opacity .7s ease var(--reveal-delay, 0ms), translate .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms), transform .18s ease, box-shadow .18s ease; }
.reveal.in { opacity: 1; translate: 0 0; }

/* ---------- Hero scene: floating card, gulls, rolling waves ---------- */
.hero-art { animation: float-soft 7s ease-in-out infinite; }
.sea-overlay { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; pointer-events: none; }
.sea-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; }
.sea-waves svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: wave-roll 12s linear infinite; }
.sea-waves svg:nth-child(1) { fill: rgba(255,255,255,.20); animation-duration: 16s; height: 100%; }
.sea-waves svg:nth-child(2) { fill: rgba(143,192,240,.30); animation-duration: 11s; animation-direction: reverse; height: 80%; }
.sea-waves svg:nth-child(3) { fill: rgba(15,76,158,.45); animation-duration: 8s; height: 58%; }

.gull { position: absolute; left: 0; width: 38px; height: 16px; opacity: .9; animation: gull-fly 24s linear infinite; }
.gull svg { width: 100%; height: 100%; overflow: visible; animation: gull-flap .55s ease-in-out infinite alternate; transform-origin: 50% 70%; }
.gull path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gull.g1 { top: 10%; animation-duration: 26s; }
.gull.g2 { top: 20%; width: 28px; animation-duration: 34s; animation-delay: -12s; opacity: .75; }
.gull.g3 { top: 6%;  width: 22px; animation-duration: 40s; animation-delay: -24s; opacity: .6; }

/* ---------- Wave dividers ---------- */
.wave-top, .wave-bottom { position: absolute; left: 0; right: 0; height: 72px; overflow: hidden; pointer-events: none; z-index: 1; }
.wave-top { bottom: 99%; }
body { overflow-x: clip; }
.wave-bottom { bottom: -1px; }
.wave-clip { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; overflow: hidden; line-height: 0; }
.wave-clip svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: wave-roll 14s linear infinite; }
.wave-clip svg:nth-child(1) { opacity: .45; animation-duration: 22s; animation-direction: reverse; }
.wave-clip svg:nth-child(2) { animation-duration: 15s; }
.cta-band, .site-footer, .page-hero { position: relative; }
.cta-band .wave-top, .cta-band .wave-clip svg { fill: var(--cedar); }
.site-footer .wave-top, .site-footer .wave-clip svg { fill: var(--ink); }
.page-hero { overflow: hidden; }
.page-hero .wave-bottom, .page-hero .wave-clip svg { fill: var(--paper); }
.cta-band > .container, .site-footer > .container, .page-hero > .container { position: relative; z-index: 2; }

/* ---------- Sailing boat crossing above the footer ---------- */
.sailing-boat { position: absolute; left: 0; bottom: 16px; width: 64px; height: 50px; animation: sail-across 38s linear infinite; z-index: 3; }
.sailing-boat svg { width: 100%; height: 100%; animation: boat-bob 2.6s ease-in-out infinite; transform-origin: 50% 90%; }

/* ---------- Bubbles and fish ---------- */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubble { position: absolute; bottom: -30px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 70%); border: 1px solid rgba(255,255,255,.35); animation: bubble-rise linear infinite; }
.fish { position: absolute; width: 44px; height: 22px; opacity: .22; animation: fish-swim linear infinite; }
.fish svg { width: 100%; height: 100%; fill: #fff; animation: fish-wiggle .5s ease-in-out infinite alternate; }

/* ---------- Brand, buttons, cards ---------- */
.brand:hover .brand-logo { animation: logo-bob 1.1s ease-in-out infinite; }
.btn-primary, .btn-dark { position: relative; overflow: hidden; }
.btn-primary::after, .btn-dark::after { content: ''; position: absolute; top: 0; left: -90%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; }
.btn-primary:hover::after, .btn-dark:hover::after { left: 140%; }
.btn-primary { animation: cta-pulse 3.2s ease-in-out infinite; }
.product-card .product-media img, .product-card .product-media svg { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-media img, .product-card:hover .product-media svg { transform: scale(1.07); }
.gallery-item img, .blog-media img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img, .blog-card:hover .blog-media img { transform: scale(1.07); }
.step-item .step-num { transition: transform .4s ease; }
.step-item:hover .step-num { transform: translateY(-4px) rotate(-4deg); }

/* ---------- Loading screen: bobbing logo with ripples ---------- */
.page-loader img { animation: logo-bob 1.5s ease-in-out infinite; position: relative; z-index: 1; }
.page-loader::before, .page-loader::after { content: ''; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid rgba(15,76,158,.35); animation: ripple 1.8s ease-out infinite; }
.page-loader::after { animation-delay: .9s; }

/* ---------- Keyframes ---------- */
@keyframes wave-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes gull-fly { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw)); } }
@keyframes gull-flap { from { transform: scaleY(1); } to { transform: scaleY(-.55) translateY(3px); } }
@keyframes sail-across { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 30px)); } }
@keyframes boat-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes bubble-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .9; } 50% { transform: translateY(-140px) translateX(12px); } 100% { transform: translateY(-300px) translateX(-8px); opacity: 0; } }
@keyframes fish-swim { from { transform: translateX(110vw); } to { transform: translateX(-120px); } }
@keyframes fish-wiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes logo-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes ripple { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(236,96,10,.0); } 50% { box-shadow: 0 0 0 7px rgba(236,96,10,.14); } }

@media (max-width: 760px) {
  .gull.g3, .fish.f2 { display: none; }
  .sailing-boat { width: 48px; height: 38px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
  .hero-art, .sea-waves svg, .gull, .gull svg, .wave-clip svg, .sailing-boat, .sailing-boat svg,
  .bubble, .fish, .fish svg, .btn-primary, .brand:hover .brand-logo, .page-loader img,
  .page-loader::before, .page-loader::after { animation: none !important; }
  .gull, .fish, .bubbles, .sailing-boat { display: none !important; }
}