/* =============================================================
   JERICHO STANDARD — Animations v2
   ============================================================= */

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.85s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--delay, 0s);
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Hero section entrance */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Marquee */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% { opacity: 0.4; transform: scaleY(1) translateY(0); }
  50%       { opacity: 0.15; transform: scaleY(0.5) translateY(6px); }
}

/* Float (quote block, accent elements) */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Shimmer sweep for loading states */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ============================================================
   HERO ENTRANCE — applied via inline animation properties
   ============================================================ */
.hero-kicker,
.hero-headline__line,
.hero-sub,
.hero-actions,
.hero-scroll {
  /* animation is set inline via the CSS property in styles.css */
}

/* ============================================================
   BUTTON SHIMMER (primary / newsletter)
   ============================================================ */
.btn--cream,
.btn--newsletter {
  overflow: hidden;
  position: relative;
}
.btn--cream::after,
.btn--newsletter::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn--cream:hover::after,
.btn--newsletter:hover::after { left: 150%; }

/* ============================================================
   COLLECTION CARD — staggered entrance
   ============================================================ */
.collection-card[data-index="0"] { --delay: 0s; }
.collection-card[data-index="1"] { --delay: 0.08s; }
.collection-card[data-index="2"] { --delay: 0.16s; }
.collection-card[data-index="3"] { --delay: 0.24s; }

/* ============================================================
   STORY ACCENT BLOCK — Float
   ============================================================ */
.brand-story__quote-block {
  animation: float 7s ease-in-out infinite;
}

/* ============================================================
   PROOF BAR — counter count-up effect hook
   (JS triggers .is-counted class)
   ============================================================ */
.proof-item__num {
  transition: opacity 0.4s ease;
}
.proof-item.counting .proof-item__num { opacity: 0.4; }

/* ============================================================
   NEWSLETTER SUCCESS FADE
   ============================================================ */
.newsletter__success {
  animation: scaleIn 0.4s ease both;
}

/* ============================================================
   MARQUEE — Pause on hover
   ============================================================ */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ============================================================
   SWATCH SELECTION RIPPLE
   ============================================================ */
.swatch {
  position: relative;
  overflow: hidden;
}
.swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  transition: transform 0.25s ease;
}
.swatch:active::after { transform: scale(1); }

/* ============================================================
   SKELETON LOADER
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(220,210,195,0.5) 25%,
    rgba(220,210,195,0.9) 37%,
    rgba(220,210,195,0.5) 63%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s ease infinite;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .brand-story__quote-block {
    animation: none;
  }
  .marquee-track {
    animation: none;
  }
  .hero-kicker,
  .hero-headline__line,
  .hero-sub,
  .hero-actions,
  .hero-scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero-scroll__line { animation: none; }
}