/* ============================================
   ANIMATIONS.CSS — Keyframes & Reveal Classes
   Interior Design Website | Black & Gold Theme
   ============================================ */

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

@keyframes textReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0);   }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 8px var(--gold-glow); }
  50%       { box-shadow: 0 0 24px var(--gold-glow-md), 0 0 48px var(--gold-glow); }
}

@keyframes float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-12px); }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes counterPulse {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}

@keyframes heroSlideIn {
  from { opacity: 0; transform: translateY(60px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes imageParallax {
  from { transform: translateY(0px);   }
  to   { transform: translateY(-40px); }
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes navbarSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes overlayReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spinDot {
  0%   { transform: rotate(0deg)   scale(1);   }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1);   }
}

@keyframes ripple {
  0%   { transform: scale(0.8);  opacity: 1;   }
  100% { transform: scale(2.5);  opacity: 0;   }
}

/* ══════════════════════════════════════════
   SCROLL REVEAL — Base States
   (JS adds .is-visible via IntersectionObserver)
══════════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 1s;        /* was 0.75s */
  transition-timing-function: var(--ease-out);
}

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

/* Direction variants */
[data-reveal="up"]    { transform: translateY(50px); }
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal="left"]  { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="zoom"]  { transform: scale(0.7); }

/* Stagger delays for groups */
[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; }

/* ══════════════════════════════════════════
   PAGE LOAD ANIMATION
══════════════════════════════════════════ */

.page-enter {
  animation: fadeIn 0.6s var(--ease-out) forwards;
}

/* ══════════════════════════════════════════
   GOLD SHIMMER TEXT
══════════════════════════════════════════ */

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold-dim) 0%,
    var(--gold-bright) 40%,
    var(--gold-light) 50%,
    var(--gold-bright) 60%,
    var(--gold-dim) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3.5s linear infinite;
}

/* ══════════════════════════════════════════
   HOVER ANIMATIONS
══════════════════════════════════════════ */

.hover-lift {
  transition: transform var(--trans-base);
}
.hover-lift:hover { transform: translateY(-6px); }

.hover-glow:hover {
  box-shadow: var(--shadow-gold);
}

.hover-scale {
  transition: transform var(--trans-base);
}
.hover-scale:hover { transform: scale(1.04); }

/* ══════════════════════════════════════════
   HERO ANIMATIONS
══════════════════════════════════════════ */

.hero-animate-1 {
  animation: heroSlideIn 1s var(--ease-out) 0.2s both;
}
.hero-animate-2 {
  animation: heroSlideIn 1s var(--ease-out) 0.45s both;
}
.hero-animate-3 {
  animation: heroSlideIn 1s var(--ease-out) 0.65s both;
}
.hero-animate-4 {
  animation: heroSlideIn 1s var(--ease-out) 0.85s both;
}

/* ══════════════════════════════════════════
   FLOATING ELEMENTS
══════════════════════════════════════════ */

.float-anim {
  animation: float 4s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   CARD STAGGER (applied by JS)
══════════════════════════════════════════ */

.cards-stagger .card,
.cards-stagger [class*="-card"] {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.cards-stagger.is-visible .card:nth-child(1),
.cards-stagger.is-visible [class*="-card"]:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.cards-stagger.is-visible .card:nth-child(2),
.cards-stagger.is-visible [class*="-card"]:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.cards-stagger.is-visible .card:nth-child(3),
.cards-stagger.is-visible [class*="-card"]:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; }
.cards-stagger.is-visible .card:nth-child(4),
.cards-stagger.is-visible [class*="-card"]:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.35s; }
.cards-stagger.is-visible .card:nth-child(5),
.cards-stagger.is-visible [class*="-card"]:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.45s; }
.cards-stagger.is-visible .card:nth-child(6),
.cards-stagger.is-visible [class*="-card"]:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.55s; }
.cards-stagger.is-visible .card:nth-child(7),
.cards-stagger.is-visible [class*="-card"]:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.65s; }
.cards-stagger.is-visible .card:nth-child(8),
.cards-stagger.is-visible [class*="-card"]:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.70s; }
.cards-stagger.is-visible .card:nth-child(9),
.cards-stagger.is-visible [class*="-card"]:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.75s; }
.cards-stagger.is-visible .card:nth-child(10),
.cards-stagger.is-visible [class*="-card"]:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.80s; }
.cards-stagger.is-visible .card:nth-child(11),
.cards-stagger.is-visible [class*="-card"]:nth-child(11) { opacity: 1; transform: none; transition-delay: 0.85s; }
.cards-stagger.is-visible .card:nth-child(12),
.cards-stagger.is-visible [class*="-card"]:nth-child(12) { opacity: 1; transform: none; transition-delay: 0.90s; }

/* ══════════════════════════════════════════
   GOLD LINE REVEAL
══════════════════════════════════════════ */

.line-reveal {
  position: relative;
  overflow: hidden;
}

.line-reveal::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.line-reveal:hover::after,
.line-reveal.is-visible::after {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════
   COUNTER ANIMATION
══════════════════════════════════════════ */

.counter-num {
  display: inline-block;
  transition: transform 0.1s ease;
}

.counter-animating {
  animation: counterPulse 0.15s ease;
}

/* ══════════════════════════════════════════
   IMAGE REVEAL
══════════════════════════════════════════ */

.img-reveal-wrap {
  overflow: hidden;
  position: relative;
}

.img-reveal-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black-deep);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.9s var(--ease-inout);
}

.img-reveal-wrap.is-visible::after {
  transform: scaleX(0);
}

/* ══════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg,
    var(--black-surface) 25%,
    var(--black-muted) 50%,
    var(--black-surface) 75%
  );
  background-size: 200% auto;
  animation: goldShimmer 1.5s linear infinite;
  border-radius: var(--radius-md);
}

/* ══════════════════════════════════════════
   NAVBAR ENTRANCE
══════════════════════════════════════════ */

.navbar {
  animation: navbarSlideDown 0.7s var(--ease-out) forwards;
}

/* ══════════════════════════════════════════
   PREFERS REDUCED MOTION
══════════════════════════════════════════ */

@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;
  }
}