/* ============================================
   GYVYN ANIMATIONS
   Save to: css/gyvyn-animations.css
   Subtle. Confident. On-brand.
   ============================================ */

/* ===== HERO IMAGE — KEN BURNS SLOW ZOOM ===== */
.hero-img-wrap img {
  animation: heroZoom 12s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes heroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

/* ===== HERO H1 — LETTER SHIMMER ON LOAD ===== */
.hero-h1 {
  animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes fadeUp {
  from { opacity:0; transform: translateY(24px); }
  to   { opacity:1; transform: translateY(0); }
}
.hero-sub  { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .4s both; }
.hero-ctas { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .55s both; }
.hero-badge { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .1s both; }
.cashapp-badge { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .7s both; }

/* ===== GOLD DIVIDER — DRAW IN ===== */
.splash-divider {
  animation: drawIn .6s cubic-bezier(.16,1,.3,1) 1.5s both;
  transform-origin: left;
}
@keyframes drawIn {
  from { transform: scaleX(0); opacity:0; }
  to   { transform: scaleX(1); opacity:.7; }
}

/* ===== TRUST BAR — STAGGER FADE ===== */
.trust-item:nth-child(1) { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .1s both; }
.trust-item:nth-child(3) { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .2s both; }
.trust-item:nth-child(5) { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .3s both; }
.trust-item:nth-child(7) { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .4s both; }
.trust-item:nth-child(9) { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .5s both; }

/* ===== PRODUCT CARDS — SHIMMER ON HOVER ===== */
.prod-card {
  position: relative;
  overflow: hidden;
}
.prod-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(204,136,0,.07) 50%,
    transparent 60%
  );
  transition: left .5s ease;
  pointer-events: none;
}
.prod-card:hover::after {
  left: 140%;
}

/* ===== CATEGORY CARDS — GOLD BORDER DRAW ===== */
.cat-card {
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--g);
  transition: width .35s cubic-bezier(.16,1,.3,1);
}
.cat-card:hover::before { width: 100%; }

/* ===== WHY CARDS — ICON PULSE ON HOVER ===== */
.why-card:hover .why-icon {
  animation: iconPulse .4s cubic-bezier(.16,1,.3,1);
}
@keyframes iconPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== REVIEW CARDS — SUBTLE LIFT ===== */
.rev-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.rev-card:hover {
  transform: translateY(-4px);
}

/* ===== COMMUNITY CARDS — LEFT BORDER SLIDE ===== */
.comm-card {
  position: relative;
  overflow: hidden;
}
.comm-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--g);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.comm-card:hover::before { transform: scaleY(1); }

/* ===== MARQUEE — PAUSE ON HOVER ===== */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ===== HERO OVERLAY BADGE — FLOAT ===== */
.hero-overlay-badge {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ===== SECTION TAGS — GOLD GLOW ===== */
.sec-tag {
  position: relative;
  display: inline-block;
}
.sec-tag::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--g);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.sec-tag.vis::after,
.rv.vis .sec-tag::after {
  transform: scaleX(1);
}

/* ===== NAV LINKS — UNDERLINE SLIDE ===== */
.nav-links a::after {
  transition: width .3s cubic-bezier(.16,1,.3,1);
}

/* ===== STICKY MOBILE BAR — SLIDE UP ON LOAD ===== */
.sticky-cta {
  animation: slideUp .5s cubic-bezier(.16,1,.3,1) 1s both;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ===== CART DRAWER — SMOOTH OPEN ===== */
.cart-drawer {
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}

/* ===== AREA TAGS — HOVER GOLD ===== */
.area-tag {
  transition: all .2s;
}
.area-tag:hover {
  background: var(--g);
  color: var(--k);
  border-color: var(--g);
  transform: translateY(-2px);
}

/* ===== FOOTER SOCIAL — SPIN ON HOVER ===== */
.fsoc {
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.fsoc:hover {
  transform: translateY(-3px) rotate(8deg);
}

/* ===== CTA SECTION — PULSE BUTTON ===== */
.cta-section .btn-dark {
  position: relative;
  overflow: hidden;
}
.cta-section .btn-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  transform: translateX(-100%);
  transition: transform .4s ease;
}
.cta-section .btn-dark:hover::after {
  transform: translateX(0);
}

/* ===== SCROLL REVEAL STAGGER FOR GRIDS ===== */
.prod-grid .rv:nth-child(1) { transition-delay: 0s; }
.prod-grid .rv:nth-child(2) { transition-delay: .08s; }
.prod-grid .rv:nth-child(3) { transition-delay: .16s; }
.prod-grid .rv:nth-child(4) { transition-delay: .24s; }
.why-grid  .rv:nth-child(1) { transition-delay: 0s; }
.why-grid  .rv:nth-child(2) { transition-delay: .07s; }
.why-grid  .rv:nth-child(3) { transition-delay: .14s; }
.why-grid  .rv:nth-child(4) { transition-delay: .21s; }
.why-grid  .rv:nth-child(5) { transition-delay: .28s; }
.why-grid  .rv:nth-child(6) { transition-delay: .35s; }
.cat-grid  .rv:nth-child(1) { transition-delay: 0s; }
.cat-grid  .rv:nth-child(2) { transition-delay: .06s; }
.cat-grid  .rv:nth-child(3) { transition-delay: .12s; }
.cat-grid  .rv:nth-child(4) { transition-delay: .18s; }
.cat-grid  .rv:nth-child(5) { transition-delay: .24s; }
.reviews-grid .rv:nth-child(1) { transition-delay: 0s; }
.reviews-grid .rv:nth-child(2) { transition-delay: .1s; }
.reviews-grid .rv:nth-child(3) { transition-delay: .2s; }

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