/* ==========================================================================
   SAHARA NIGHT CAMP — Animations & Keyframes
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes scrollLine {
  0%   { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,145,47,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(200,145,47,0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL — Intersection Observer classes
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 0.9s;
  will-change: opacity, transform;
}

[data-reveal="up"] {
  transform: translateY(45px);
}

[data-reveal="down"] {
  transform: translateY(-30px);
}

[data-reveal="left"] {
  transform: translateX(45px);
}

[data-reveal="right"] {
  transform: translateX(-45px);
}

[data-reveal="scale"] {
  transform: scale(0.9);
}

[data-reveal="fade"] {
  transform: none;
}

/* Delay utilities */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }

/* Revealed state */
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   HERO TEXT REVEAL
   -------------------------------------------------------------------------- */
.hero-badge {
  animation: fadeDown 1s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s both;
}

.hero h1 {
  animation: fadeUp 1.1s cubic-bezier(0.25,0.46,0.45,0.94) 0.55s both;
}

.hero-lead {
  animation: fadeUp 1s cubic-bezier(0.25,0.46,0.45,0.94) 0.8s both;
}

.hero-actions {
  animation: fadeUp 1s cubic-bezier(0.25,0.46,0.45,0.94) 1s both;
}

.hero-scroll {
  animation: fadeIn 1s ease 1.4s both;
}

/* --------------------------------------------------------------------------
   PAGE HERO TEXT
   -------------------------------------------------------------------------- */
.page-hero-breadcrumb {
  animation: fadeUp 0.8s ease 0.3s both;
}

.page-hero h1 {
  animation: fadeUp 1s cubic-bezier(0.25,0.46,0.45,0.94) 0.5s both;
}

/* --------------------------------------------------------------------------
   NAVIGATION REVEAL
   -------------------------------------------------------------------------- */
.header-logo {
  animation: fadeDown 0.7s ease 0.1s both;
}

.header-nav {
  animation: fadeDown 0.7s ease 0.2s both;
}

/* --------------------------------------------------------------------------
   STRIP ANIMATION
   -------------------------------------------------------------------------- */
.strip-inner {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   FEATURE CARD STAGGER
   -------------------------------------------------------------------------- */
.feature-card:nth-child(1) [data-delay] { transition-delay: 0.1s; }
.feature-card:nth-child(2) [data-delay] { transition-delay: 0.2s; }
.feature-card:nth-child(3) [data-delay] { transition-delay: 0.3s; }
.feature-card:nth-child(4) [data-delay] { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   GOLD SHIMMER — On hover text
   -------------------------------------------------------------------------- */
.shimmer-gold {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-pale) 40%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shimmer-gold:hover {
  animation: shimmer 2.5s linear infinite;
}

/* --------------------------------------------------------------------------
   SMOOTH BUTTON PRESS
   -------------------------------------------------------------------------- */
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* --------------------------------------------------------------------------
   IMAGE LOADING SKELETON
   -------------------------------------------------------------------------- */
.img-loading {
  background: linear-gradient(90deg, var(--linen) 25%, var(--sand) 50%, var(--linen) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* --------------------------------------------------------------------------
   COUNTER NUMBER ANIMATION
   -------------------------------------------------------------------------- */
.stat-num.counting {
  animation: counterUp 0.5s ease both;
}

/* --------------------------------------------------------------------------
   WHATSAPP PULSE
   -------------------------------------------------------------------------- */
.whatsapp-float {
  animation: pulse 2.5s ease-in-out infinite;
}

.whatsapp-float:hover {
  animation: none;
}

/* --------------------------------------------------------------------------
   PAGE TRANSITIONS
   -------------------------------------------------------------------------- */
body {
  animation: fadeIn 0.4s ease both;
}

/* --------------------------------------------------------------------------
   GOLD LINE REVEAL (used in dividers)
   -------------------------------------------------------------------------- */
.gold-divider.animated::before,
.gold-divider.animated::after {
  transform-origin: left;
  animation: scaleX 0.8s var(--ease-luxury) forwards;
}

/* --------------------------------------------------------------------------
   TRUST CARD REVEAL
   -------------------------------------------------------------------------- */
.trust-card:nth-child(1)[data-reveal] { transition-delay: 0.1s; }
.trust-card:nth-child(2)[data-reveal] { transition-delay: 0.25s; }
.trust-card:nth-child(3)[data-reveal] { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   HEADER ENTRANCE (on page load)
   -------------------------------------------------------------------------- */
/* translateY(-100%) previously moved the fixed header fully off-screen,
   and opacity:0 made it fully invisible, for the first part of this
   animation — combined with #header having no background of its own at
   the time, that off-screen/invisible window could expose bare canvas
   above the header. #header now always paints its own gradient (see
   style.css) and this keyframe no longer touches opacity at all, so the
   header is solid and in-place for the animation's entire duration; only
   a small cosmetic slide remains. */
@keyframes headerEntrance {
  from { transform: translateY(-16px); }
  to   { transform: translateY(0); }
}

#header {
  animation: headerEntrance 0.7s var(--ease-luxury) 0.1s both;
}

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

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  html { scroll-behavior: auto; }
}