/* =========================================================
   ASHISH GOLD & SILVER — Luxury Animation System
   File: assets/css/animations.css
   
   SAFE: Only adds new classes / selectors. Does NOT override
   existing IDs, class names, or layout rules.
   Palette: Rose #B0626E | Gold #c9a96e | Cream #F5EDE0
   ========================================================= */

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES  (animation tokens)
───────────────────────────────────────────── */
:root {
  --anim-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --anim-duration-s:  0.35s;
  --anim-duration-m:  0.55s;
  --anim-duration-l:  0.75s;
  --anim-gold:        #c9a96e;
  --anim-rose:        #B0626E;
  --anim-cream:       #F5EDE0;
  --anim-shadow-rose: rgba(176, 98, 110, 0.22);
  --anim-shadow-gold: rgba(201, 169, 110, 0.35);
}

/* ─────────────────────────────────────────────
   2. REDUCED-MOTION GUARD
   All animations respect user OS preference.
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:    0.01ms !important;
    animation-iteration-count: 1  !important;
    transition-duration:   0.01ms !important;
    scroll-behavior:       auto   !important;
  }

  .reveal,
  .fade-up,
  .fade-in,
  .fade-left,
  .fade-right {
    opacity:   1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────
   3. PAGE LOAD FADE-IN
───────────────────────────────────────────── */
@keyframes ag-pageLoad {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.ag-loaded main.main {
  animation: ag-pageLoad var(--anim-duration-m) var(--anim-ease) both;
}

/* ─────────────────────────────────────────────
   4. REUSABLE REVEAL CLASSES
   Hidden state → triggered by JS adding .active
───────────────────────────────────────────── */

/* Base hidden state */
.reveal,
.fade-up,
.fade-in,
.fade-left,
.fade-right {
  opacity:           0;
  will-change:       opacity, transform;
  transition:
    opacity  var(--anim-duration-m) var(--anim-ease-out),
    transform var(--anim-duration-m) var(--anim-ease-out);
}

/* Fade Up (most common) */
.fade-up {
  transform: translateY(32px);
}

/* Pure Fade In */
.fade-in {
  transform: translateY(0);
}

/* Slide in from left */
.fade-left {
  transform: translateX(-28px);
}

/* Slide in from right */
.fade-right {
  transform: translateX(28px);
}

/* ACTIVE: all reveal variants become visible */
.reveal.active,
.fade-up.active,
.fade-in.active,
.fade-left.active,
.fade-right.active {
  opacity:   1;
  transform: none;
}

/* Stagger delay helpers */
.anim-delay-1 { transition-delay: 0.08s; }
.anim-delay-2 { transition-delay: 0.16s; }
.anim-delay-3 { transition-delay: 0.24s; }
.anim-delay-4 { transition-delay: 0.32s; }
.anim-delay-5 { transition-delay: 0.40s; }
.anim-delay-6 { transition-delay: 0.48s; }

/* ─────────────────────────────────────────────
   5. ZOOM HOVER — generic images
───────────────────────────────────────────── */
.zoom-hover {
  overflow: hidden;
  display: block;
}

.zoom-hover img,
img.zoom-hover {
  transition: transform var(--anim-duration-m) var(--anim-ease) !important;
  will-change: transform;
}

.zoom-hover:hover img,
img.zoom-hover:hover {
  transform: scale(1.05) !important;
}

/* ─────────────────────────────────────────────
   6. GLOBAL IMG HOVER — smooth zoom (non-invasive)
   Targets all <img> that are NOT inside slick sliders
   or special logo containers, to avoid UI breakage.
───────────────────────────────────────────── */
img:not(.logo):not(.ele1):not(.ele2):not(.ele3):not(.ele4):not(.hero-img1):not(.hero-img2):not(.hero-img3):not(.hero-img4):not([src*="title-shape"]):not([src*="favicon"]):not([src*="logo"]):not([src*="shape"]) {
  transition: transform var(--anim-duration-s) ease !important;
  will-change: transform;
}

img:not(.logo):not(.ele1):not(.ele2):not(.ele3):not(.ele4):not(.hero-img1):not(.hero-img2):not(.hero-img3):not(.hero-img4):not([src*="title-shape"]):not([src*="favicon"]):not([src*="logo"]):not([src*="shape"]):hover {
  transform: scale(1.04) !important;
}

/* ─────────────────────────────────────────────
   7. PRODUCT IMAGE — gold shadow on hover
───────────────────────────────────────────── */
.orn-card__img img {
  transition:
    transform  var(--anim-duration-m) var(--anim-ease),
    filter     var(--anim-duration-m) var(--anim-ease) !important;
}

.orn-card:hover .orn-card__img img {
  filter: drop-shadow(0 4px 16px var(--anim-shadow-gold)) !important;
}

/* ─────────────────────────────────────────────
   8. CARD HOVER LIFT
   Enhances existing .orn-card hover transition
───────────────────────────────────────────── */
.card-hover,
.orn-card {
  transition:
    transform  var(--anim-duration-s) var(--anim-ease),
    box-shadow var(--anim-duration-s) var(--anim-ease) !important;
  will-change: transform;
}

.card-hover:hover,
.orn-card:hover {
  transform:  translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(125, 69, 80, 0.18) !important;
}

/* Contact cards */
.contact-card {
  transition:
    transform  var(--anim-duration-s) var(--anim-ease),
    box-shadow var(--anim-duration-s) var(--anim-ease);
  will-change: transform;
}

.contact-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 32px rgba(176, 98, 110, 0.14);
}

/* About highlight boxes */
.about-highlight-box {
  transition:
    transform  var(--anim-duration-s) var(--anim-ease),
    box-shadow var(--anim-duration-s) var(--anim-ease);
}

.about-highlight-box:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 20px rgba(176, 98, 110, 0.14);
}

/* ─────────────────────────────────────────────
   9. BUTTON ANIMATIONS
───────────────────────────────────────────── */
.btn-animate,
.vs-btn,
.cat-pill,
.see-more-btn,
.wa-contact-btn {
  transition:
    background var(--anim-duration-s) var(--anim-ease),
    color      var(--anim-duration-s) var(--anim-ease),
    transform  var(--anim-duration-s) var(--anim-ease),
    box-shadow var(--anim-duration-s) var(--anim-ease) !important;
  will-change: transform;
}

/* Lift on hover */
.btn-animate:hover,
.vs-btn:hover,
.see-more-btn:hover,
.wa-contact-btn:hover {
  transform: translateY(-2px) !important;
}

/* Press / active effect */
.btn-animate:active,
.vs-btn:active,
.cat-pill:active,
.see-more-btn:active,
.wa-contact-btn:active {
  transform: scale(0.97) translateY(0) !important;
  transition-duration: 0.1s !important;
}

/* ─────────────────────────────────────────────
   10. NAVBAR SCROLL EFFECT
   .as-scrolled applied by JS on scroll > 40px
───────────────────────────────────────────── */
.vs-header.layout2 {
  transition:
    background    var(--anim-duration-s) ease,
    box-shadow    var(--anim-duration-s) ease,
    padding       var(--anim-duration-s) ease !important;
}

/* When user scrolls down: strengthen the header shadow */
.vs-header.layout2.as-scrolled {
  box-shadow: 0 4px 24px rgba(176, 98, 110, 0.25), 0 2px 0 rgba(201, 169, 110, 0.3) !important;
  background: linear-gradient(135deg, #F5EDE0 0%, #EDD8C8 100%) !important;
}

/* Nav link hover underline drawn from left */
.vs-header.layout2 .main-menu ul li a {
  position: relative;
  transition: color var(--anim-duration-s) ease !important;
}

.vs-header.layout2 .main-menu ul li a::after {
  content:    '';
  position:   absolute;
  bottom:     -3px;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--anim-gold);
  transition: width var(--anim-duration-s) var(--anim-ease);
}

.vs-header.layout2 .main-menu ul li a:hover::after {
  width: 100%;
}

/* ─────────────────────────────────────────────
   11. SECTION TITLE UNDERLINE REVEAL
───────────────────────────────────────────── */
.title-area {
  overflow: visible;
}

.title-area .sec-title {
  position: relative;
  display:  inline-block;
}

.title-area .sec-title::after {
  content:    '';
  position:   absolute;
  bottom:     -6px;
  left:       50%;
  transform:  translateX(-50%);
  width:      0;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--anim-gold), transparent);
  transition: width 0.7s var(--anim-ease-out) 0.2s;
}

.title-area.active .sec-title::after,
.title-area .sec-title.active::after {
  width: 80%;
}

/* ─────────────────────────────────────────────
   12. IMAGE REVEAL — about section
───────────────────────────────────────────── */
.about-single-img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.about-single-img::after {
  content:   '';
  position:  absolute;
  inset:     0;
  background: linear-gradient(135deg,
    rgba(201, 169, 110, 0.06) 0%,
    rgba(176, 98, 110, 0.10) 100%);
  opacity:    0;
  transition: opacity var(--anim-duration-m) ease;
  pointer-events: none;
  z-index: 1;
}

.about-single-img:hover::after {
  opacity: 1;
}

.about-img-full {
  transition: transform var(--anim-duration-l) var(--anim-ease) !important;
  will-change: transform;
}

.about-single-img:hover .about-img-full {
  transform: scale(1.04) !important;
}

/* ─────────────────────────────────────────────
   13. WHATSAPP FAB PULSE
───────────────────────────────────────────── */
@keyframes ag-waPulse {
  0%   { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0);    }
}

.wa-fab {
  /* Pulse handled via box-shadow only — no transform so position stays anchored */
  animation: ag-waPulse 2.8s ease-in-out infinite;
  /* Do NOT set transition here — defer to style.css so there's one source of truth */
}

.wa-fab:hover {
  /* Scale only — NO translateY which shifts the fixed button */
  transform: scale(1.12) !important;
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────
   14. SOCIAL LINK ICONS — hover pop
───────────────────────────────────────────── */
.contact-social-link {
  transition:
    transform  var(--anim-duration-s) var(--anim-ease),
    background var(--anim-duration-s) ease,
    color      var(--anim-duration-s) ease !important;
}

.contact-social-link:hover {
  transform: translateY(-3px) scale(1.12) !important;
}

/* ─────────────────────────────────────────────
   15. FOOTER ENTRANCE
───────────────────────────────────────────── */
.footer-layout1 {
  position: relative;
  overflow: hidden;
}

.footer-layout1 .footer-logo img {
  transition: transform var(--anim-duration-m) var(--anim-ease);
}

.footer-layout1 .footer-logo img:hover {
  transform: scale(1.06);
}

/* ─────────────────────────────────────────────
   16. ORNAMENTAL SECTION DIVIDER SHIMMER
───────────────────────────────────────────── */
@keyframes ag-dividerShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.ag-divider {
  display:    block;
  width:      180px;
  height:     1px;
  margin:     0 auto 28px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--anim-gold) 30%,
    var(--anim-rose) 50%,
    var(--anim-gold) 70%,
    transparent 100%);
  background-size: 200% auto;
  animation: ag-dividerShimmer 3s linear infinite;
  opacity: 0.65;
}

/* ─────────────────────────────────────────────
   17. CATEGORY PILLS — shimmer on active
───────────────────────────────────────────── */
.cat-pill {
  position: relative;
  overflow: hidden;
}

.cat-pill::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      60%;
  height:     100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%);
  transform:  skewX(-18deg);
  transition: left 0s;
}

.cat-pill:hover::before,
.cat-pill.active::before {
  left: 160%;
  transition: left 0.55s ease;
}

/* ─────────────────────────────────────────────
   18. MOBILE: reduce intensity  (≤ 576px)
───────────────────────────────────────────── */
@media (max-width: 576px) {
  .fade-up   { transform: translateY(18px); }
  .fade-left { transform: translateX(-14px); }
  .fade-right{ transform: translateX(14px); }

  .orn-card:hover {
    transform:  translateY(-3px) !important;
  }

  .vs-btn:hover,
  .see-more-btn:hover {
    transform: translateY(-1px) !important;
  }

  .wa-fab {
    animation-duration: 3s;
  }
}

/* ─────────────────────────────────────────────
   19. PERFORMANCE GUARD
   Contain composited layers to GPU-friendly props.
───────────────────────────────────────────── */
.orn-card,
.contact-card,
.about-highlight-box,
.about-single-img,
.vs-btn,
.cat-pill,
.see-more-btn,
.wa-fab,
.contact-social-link {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════
   20. HERO BACKGROUND IMAGE SLIDER
   ─ Slides sit at z-index:0, behind ::before warm overlay
     (z-index:1) and content containers (z-index:2).
   ─ The warm gradient overlay tints every photo, preserving
     the luxury cream jewellery aesthetic automatically.
   ═══════════════════════════════════════════════════════════ */

/* ── Slide wrapper — fills hero section absolutely ── */
.ag-hero-slider {
  position:       absolute;
  inset:          0;
  z-index:        0;
  overflow:       hidden;
  pointer-events: none;
}

/* ── Individual slides ── */
.ag-hero-slide {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  opacity:             0;
  /* Cross-dissolve on opacity only — GPU composited, no jank */
  transition:          opacity 1.1s ease-in-out;
  will-change:         opacity, transform;
  transform:           scale(1.00); /* start at natural size; Ken Burns zooms IN */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ag-hero-slide.ag-active {
  opacity:   1;
  /*
   * Ken Burns: zoom IN slowly (1.00 → 1.08) over 5.5 s.
   * linear easing = constant smooth motion (cinematic feel).
   * 5.5s slightly exceeds the 4.5s interval so the zoom
   * is NEVER fully complete — it reads as infinite slow drift.
   */
  animation: ag-kenBurns 5.5s linear forwards;
}

@keyframes ag-kenBurns {
  from { transform: scale(1.00); }  /* start at natural size */
  to   { transform: scale(1.08); }  /* end 8% larger — barely perceptible, luxury */
}

/* ── Warm-dark gradient overlay for text readability ──
   Sits above slides (z:2 within slider’s stacking context)
   but below parent ::before (z:1) and content (z:2 in parent).
   Darkens left + bottom where text lives in col-lg-7. */
.ag-hero-overlay {
  position:       absolute;
  inset:          0;
  z-index:        2;
  background:     linear-gradient(
    108deg,
    rgba(45,  21,  32, 0.54) 0%,     /* deep burgundy — text column left */
    rgba(125, 69,  80, 0.30) 38%,    /* mid rose — blend zone         */
    rgba(45,  21,  32, 0.12) 65%,    /* very subtle on right           */
    transparent               100%
  ),
  linear-gradient(
    to top,
    rgba(45, 21, 32, 0.35) 0%,       /* slightly darker at bottom edge */
    transparent 45%
  );
  pointer-events: none;
}

/* ── ALL Slider UI hidden — clean minimal auto-play only ──
   No arrows, no dots, no counter, no progress bar.
   Belt-and-suspenders: hides anything injected by old cached JS. */
.ag-slider-ui,
.ag-slider-dots,
.ag-dot,
.ag-slider-prev,
.ag-slider-next,
.ag-slider-count,
.ag-slider-progress {
  display:        none !important;
  visibility:     hidden !important;
  pointer-events: none !important;
}

/* ── Pause indicator hidden ── */
.ag-hero-slider.ag-paused::after {
  display: none !important;
}

/* ─── Reduced motion: no Ken Burns, instant dissolve ─── */
@media (prefers-reduced-motion: reduce) {
  .ag-hero-slide {
    transform:  none !important;
    animation:  none !important;
    transition: opacity 0.01ms !important;
  }
}

/* ===========================================================
   21. BANNER BACKGROUND - all sections except #home hero
   Uses banner-bg-1-2.png as the full-bleed background.
   ID selectors override the generic section rule.
   #home is untouched - slider + radial-gradient stay active.
   =========================================================== */

section#about,
section#trending,
section#collection,
section#contact {
  background-image:    url('../img/banner/banner-bg-1-2.png') !important;
  background-size:     cover !important;
  background-position: center center !important;
  background-repeat:   no-repeat !important;
  background-color:    #F5EDE0 !important;
}



/* ── About section: override with deal-bg-1-1.jpg ──
   Same selector (section#about) but declared LATER in the file,
   so CSS cascade picks this one over the banner rule above. */
section#about {
  background-image:    url('../img/bg/deal-bg-1-1.jpg') !important;
  background-size:     cover                            !important;
  background-position: center center                    !important;
  background-repeat:   no-repeat                        !important;
  background-color:    #F5EDE0                          !important;
}