/* ============================================
   INCHI MEMORIES — Custom styles & animations
   ============================================ */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  cursor: default;
}

/* Selection */
::selection {
  background: #3FE0D0;
  color: #0E3F4F;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FFFCF7; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3FE0D0, #00C2D1);
  border-radius: 10px;
}

/* ============ LOADER ============ */
#loader { transition: opacity .8s ease, visibility .8s ease; }
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-bar {
  width: 0%;
  animation: loaderBar 1.6s cubic-bezier(.65,.05,.36,1) forwards;
}
@keyframes loaderBar { to { width: 100%; } }

.loader-text { animation: fadeInUp 1s ease forwards .2s; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ NAVIGATION ============ */
#navbar {
  background: transparent;
  color: #FFFCF7;
}
#navbar.scrolled {
  background: rgba(255, 252, 247, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #0E3F4F;
  box-shadow: 0 4px 30px rgba(14, 63, 79, 0.08);
}
#navbar.scrolled .nav-brand,
#navbar.scrolled .nav-tagline { color: #0E3F4F; }
#navbar:not(.scrolled) .nav-links a,
#navbar:not(.scrolled) .lang-btn { color: #FFFCF7; }
#navbar:not(.scrolled) .nav-brand,
#navbar:not(.scrolled) .nav-tagline { color: #FFFCF7; }

.lang-btn {
  opacity: 0.5;
  transition: opacity .3s;
  cursor: pointer;
  font-weight: 500;
}
.lang-btn:hover { opacity: 0.85; }
.lang-btn.active { opacity: 1; color: #F4A261 !important; }

/* Mobile menu */
#mobileMenu.active { display: flex; }
.mobile-link {
  opacity: 0;
  transform: translateY(20px);
  animation: mobileIn .6s ease forwards;
}
.mobile-link:nth-child(1) { animation-delay: .1s; }
.mobile-link:nth-child(2) { animation-delay: .15s; }
.mobile-link:nth-child(3) { animation-delay: .2s; }
.mobile-link:nth-child(4) { animation-delay: .25s; }
.mobile-link:nth-child(5) { animation-delay: .3s; }
@keyframes mobileIn { to { opacity: 1; transform: translateY(0); } }

/* ============ HERO — REAL PHOTO, NATURAL CINEMATIC ============ */
.hero-media {
  will-change: transform;
  /* Parallax target — JS translates this on scroll */
  transform: translate3d(0, 0, 0);
}

/* Very slow, very subtle Ken Burns — natural breathing, not flashy */
.hero-media img {
  transform: scale(1.06);
  animation: kenBurnsNatural 42s ease-in-out infinite alternate;
  will-change: transform, filter;
  /* preserve realism — no AI-look filters */
  filter: saturate(1.04) contrast(1.02);
}
@keyframes kenBurnsNatural {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  50%  { transform: scale(1.09) translate3d(-0.6%, -0.4%, 0); }
  100% { transform: scale(1.08) translate3d(0.5%, -0.8%, 0); }
}

/* Water shimmer — slow drifting highlight across ocean, organic light play */
.hero-shimmer {
  background:
    radial-gradient(ellipse 60% 30% at 30% 55%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 65%),
    radial-gradient(ellipse 45% 25% at 70% 60%, rgba(255, 240, 200, 0.06) 0%, rgba(255, 240, 200, 0) 70%);
  mix-blend-mode: screen;
  animation: shimmerDrift 18s ease-in-out infinite alternate;
  opacity: 0.85;
}
@keyframes shimmerDrift {
  0%   { transform: translate3d(-2%, 0, 0); opacity: 0.7; }
  50%  { transform: translate3d(1%, -1%, 0); opacity: 0.95; }
  100% { transform: translate3d(3%, 0.5%, 0); opacity: 0.8; }
}

/* Legibility-only gradient — sits at the BOTTOM where text lives */
/* Top of frame stays clean; ocean stays vivid */
.hero-readability-grad {
  background:
    linear-gradient(180deg,
      rgba(14, 63, 79, 0.05) 0%,
      rgba(14, 63, 79, 0) 25%,
      rgba(14, 63, 79, 0) 55%,
      rgba(14, 63, 79, 0.30) 85%,
      rgba(14, 63, 79, 0.55) 100%
    ),
    linear-gradient(90deg,
      rgba(14, 63, 79, 0.20) 0%,
      rgba(14, 63, 79, 0) 35%
    );
}

/* Cinematic vignette — soft, no heavy darkening */
.hero-vignette {
  background: radial-gradient(ellipse at center,
              transparent 55%,
              rgba(14, 63, 79, 0.10) 85%,
              rgba(14, 63, 79, 0.22) 100%);
}

/* Almost-imperceptible film grain — premium cinema texture, not noise */
.hero-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.10 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.35;
  mix-blend-mode: overlay;
  animation: grainShift 1.4s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-5%, 3%); }
  40%  { transform: translate(3%, -4%); }
  60%  { transform: translate(-3%, 2%); }
  80%  { transform: translate(2%, -2%); }
  100% { transform: translate(0,0); }
}

/* Mobile: tighten legibility gradient so text stays crisp on small screens */
@media (max-width: 768px) {
  .hero-readability-grad {
    background:
      linear-gradient(180deg,
        rgba(14, 63, 79, 0.10) 0%,
        rgba(14, 63, 79, 0) 30%,
        rgba(14, 63, 79, 0.15) 55%,
        rgba(14, 63, 79, 0.45) 80%,
        rgba(14, 63, 79, 0.65) 100%
      );
  }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .hero-media img,
  .hero-shimmer,
  .hero-grain {
    animation: none;
  }
}

/* Title typography refinements */
.hero-title {
  text-shadow: 0 4px 40px rgba(14, 63, 79, 0.35);
}

/* Line-by-line rise reveal */
.hero-line span {
  transform: translateY(110%);
  display: inline-block;
  animation: heroRise 1.4s cubic-bezier(.16,.84,.3,1) forwards;
}
.hero-line:nth-child(1) span { animation-delay: 1.3s; }
.hero-line:nth-child(2) span { animation-delay: 1.65s; }
@keyframes heroRise { to { transform: translateY(0); } }

.hero-eyebrow    { animation: fadeIn 1.2s ease forwards 1.0s; }
.hero-subtitle   { animation: fadeIn 1.2s ease forwards 2.2s; }
.hero-cta        { animation: fadeInUpHero 1.2s ease forwards 2.5s; }
.hero-scroll     { animation: fadeIn 1.2s ease forwards 2.9s; }
.hero-stat       { animation: fadeIn 1.2s ease forwards 3.0s; }
.hero-frame      { animation: fadeIn 1.2s ease forwards 1.6s; }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeInUpHero {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrolling indicator line */
.scroll-line {
  transform: translateY(-100%);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* ============ MARQUEE ============ */
.marquee-track {
  animation: marquee 50s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ REVEAL on scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============ EXCURSIONS ============ */
.excursion-card {
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.excursion-card:hover {
  transform: translateY(-8px);
}

/* ============ STORY ============ */
.story-image-main img,
.story-image-second img {
  transition: transform 1.5s ease;
}
.story-image-main:hover img,
.story-image-second:hover img {
  transform: scale(1.05);
}

/* ============ GALERIE ============ */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0E3F4F;
}
.gallery-item img {
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  filter: saturate(1.08) brightness(1.02);
}
.gallery-item:hover img {
  transform: scale(1.08);
  filter: saturate(1.25) brightness(1.08);
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14,63,79,.4));
  opacity: 0;
  transition: opacity .5s;
}
.gallery-item:hover::after { opacity: 1; }

/* ============ TESTIMONIALS ============ */
.testimonials-swiper { padding: 10px 4px 60px; overflow: visible; }
.testimonials-swiper .swiper-slide {
  width: 90%;
  max-width: 720px;
  height: auto;
}
@media (min-width: 768px) {
  .testimonials-swiper .swiper-slide { width: 60%; }
}

/* ============ MUSTANG CINEMA EFFECT ============ */
.mustang-video {
  animation: mustangKenBurns 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mustangKenBurns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(-2%, -1%, 0); }
}

/* Wind streaks — animated horizontal lines flying across */
.mustang-wind {
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%);
  background-size: 30% 2px, 22% 1px, 35% 2px, 18% 1px;
  background-repeat: no-repeat;
  background-position: -40% 18%, -40% 42%, -40% 68%, -40% 88%;
  animation: windStreaks 1.6s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}
@keyframes windStreaks {
  0%   { background-position: -40% 18%, -40% 42%, -40% 68%, -40% 88%; }
  100% { background-position: 140% 18%, 145% 42%, 140% 68%, 142% 88%; }
}

/* Subtle car body slight oscillation (vibration of driving) */
.mustang-cinema {
  animation: drivingVibration 0.8s ease-in-out infinite alternate;
}
@keyframes drivingVibration {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-1.5px); }
}

/* ============ WHATSAPP FAB ============ */
.whatsapp-fab {
  animation: pulseRing 2.5s ease-in-out infinite;
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70% { box-shadow: 0 0 0 18px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ============ UTILITIES ============ */
.text-balance { text-wrap: balance; }

/* ============ AFTER DARK HERO HOTSPOTS ============ */
/* Invisible click zones over the drawn buttons in the mockup image.
   Cursor + subtle hover ring to confirm clickability without ruining the design. */
.hero-hotspot {
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease;
  z-index: 5;
}
.hero-hotspot:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 2px rgba(255, 190, 152, 0.5);
}
.hero-hotspot:active {
  background: rgba(255, 255, 255, 0.10);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}