/* ============================================================
   LOUKA PESCADOS — animations.css
   Scroll-reveal, wave, floating elements
   ============================================================ */

/* ---------- Scroll reveal base states ---------- */
.reveal,
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-up[data-delay="1"] { transition-delay: .12s; }
.reveal-up[data-delay="2"] { transition-delay: .24s; }
.reveal-up[data-delay="3"] { transition-delay: .36s; }
.reveal-up[data-delay="4"] { transition-delay: .48s; }
.reveal-up[data-delay="5"] { transition-delay: .60s; }

.delay-1 { transition-delay: .18s; }

.reveal.in-view,
.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero title lines stagger ---------- */
.hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease;
}
.hero-title .line:nth-child(2) { transition-delay: .15s; }

.hero-eyebrow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s .1s ease, transform .55s .1s ease;
}
.hero-btns {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s .25s ease, transform .55s .25s ease;
}

.hero-loaded .hero-title .line,
.hero-loaded .hero-eyebrow,
.hero-loaded .hero-subtitle,
.hero-loaded .hero-btns {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Pulse glow on gold elements ---------- */
@keyframes goldPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  50%      { box-shadow: 0 0 20px 6px rgba(201,168,76,.25); }
}
.btn-primary:hover {
  animation: goldPulse 1.5s ease infinite;
}

/* ---------- Wave animation on ticker ---------- */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Floating bubbles on ocean canvas ---------- */
@keyframes floatBubble {
  0%   { transform: translateY(0) scale(1); opacity: .5; }
  100% { transform: translateY(-120vh) scale(.5); opacity: 0; }
}

/* ---------- Fish card shimmer on hover ---------- */
.fish-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255,255,255,.07) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform .6s ease;
  z-index: 1;
  border-radius: inherit;
}
.fish-card:hover::before {
  transform: translateX(100%);
}

/* ---------- Reveal variants ---------- */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-scale {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
  opacity: 1;
  transform: none;
}

/* ---------- Count-up pulse ---------- */
@keyframes countPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}
.stat-number.counting {
  animation: countPulse .4s ease;
}

/* ---------- Back-to-top ---------- */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 99;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  color: var(--abyss);
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px) scale(.8);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, box-shadow .3s ease;
  box-shadow: 0 4px 20px rgba(201,168,76,.3);
}
#back-to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#back-to-top:hover {
  box-shadow: 0 8px 32px rgba(201,168,76,.55);
  transform: translateY(-3px) scale(1.05);
}
#back-to-top:active {
  transform: translateY(0) scale(.95);
}

/* ---------- Glow pulse on card hover ---------- */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 8px rgba(13,79,140,.25), 0 0 24px rgba(201,168,76,.08); }
  50%     { box-shadow: 0 0 20px rgba(13,79,140,.45), 0 0 48px rgba(201,168,76,.2); }
}
.glow-hover:hover {
  animation: glowPulse 2s ease-in-out infinite;
}

/* ---------- Image blur-up loading ---------- */
img[loading="lazy"] {
  filter: blur(6px) saturate(.5);
  transition: filter .6s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"]:not([src]) {
  filter: none;
}

/* ---------- Stagger scale reveal for grid items ---------- */
.stagger-scale > * {
  opacity: 0;
  transform: scale(.85);
  transition: opacity .5s ease, transform .5s ease;
}
.stagger-scale.in-view > * {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Smooth nav mobile ---------- */
.nav-links {
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}

/* ---------- Parallax hero ---------- */
.hero-parallax {
  will-change: transform;
}

/* ---------- Scroll progress bar ---------- */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt), var(--light-ocean));
  z-index: 999;
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(201,168,76,.5);
}

/* ---------- Loading screen ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--abyss);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, transform .6s ease;
}
#loader.loader-hidden {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}
.loader-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: loaderPulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(201,168,76,.3);
}
@keyframes loaderPulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50%     { transform: scale(1.1); opacity: 1; }
}
.loader-text {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  color: var(--gold);
  margin-top: 1.5rem;
  letter-spacing: .15em;
  animation: loaderText 1.2s ease-in-out infinite;
}
@keyframes loaderText {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}
.loader-bar {
  width: 200px;
  height: 2px;
  background: rgba(201,168,76,.15);
  border-radius: 2px;
  margin-top: 1.5rem;
  overflow: hidden;
}
.loader-bar-inner {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
  animation: loaderBar 1.5s ease-in-out infinite;
}
@keyframes loaderBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---------- Custom cursor glow ---------- */
#cursor-glow {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, rgba(201,168,76,.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
#cursor-glow.cursor-visible {
  opacity: 1;
}
#cursor-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: .6;
}

/* ---------- Ripple effect ---------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(201,168,76,.35);
  transform: scale(0);
  animation: rippleAnim .6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}
.btn, .lang-btn, #back-to-top {
  position: relative;
  overflow: hidden;
}

/* ---------- Glassmorphism ---------- */
.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- Premium section dividers ---------- */
.section-divider {
  position: relative;
  z-index: 5;
  height: 60px;
  overflow: hidden;
  margin-top: -1px;
}
.section-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Premium shine on section labels ---------- */
.section-label {
  position: relative;
  display: inline-block;
}
.section-label::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.section-label:hover::after {
  transform: translateX(100%);
}

/* ---------- Enhanced gold text gradient ---------- */
.gold-text {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 30%, #fff 50%, var(--gold-lt) 70%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ---------- Premium focus ring ---------- */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Enhanced scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--deep2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ocean), var(--gold));
  border-radius: 3px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
  .hero-title .line,
  .hero-eyebrow, .hero-subtitle, .hero-btns {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .swim { animation: none !important; }
  .ticker-track { animation: none !important; }
  .scroll-arrow { animation: none !important; }
  #back-to-top { display: none !important; }
  #cursor-glow { display: none !important; }
  #loader { display: none !important; }
  #progress-bar { display: none !important; }
  .ripple { display: none !important; }
  .stat-number.counting { animation: none !important; }
  .stagger-scale > * { opacity: 1 !important; transform: none !important; }
  .loader-logo, .loader-text, .loader-bar { animation: none !important; }
  .glow-hover:hover { animation: none !important; }
  .section-label::after { display: none !important; }
  .gold-text { animation: none !important; }
}