/* ==========================================================================
   MOTION — the "quiet luxury" layer
   --------------------------------------------------------------------------
   Every effect here is CSS transform + opacity only. Those two are the ONLY
   things a phone can animate at 60fps without the page stuttering, because
   the browser hands them to the GPU. No animating width/height/top/left,
   no heavy 3D library — that is the whole trick to "lots of motion" that
   still feels smooth on mobile data.

   Anyone who has "Reduce Motion" switched on in their phone settings gets
   none of this — see the guard at the very bottom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL REVEAL
   Sections lift in gently as they enter the screen. store.js adds .is-in
   through an IntersectionObserver; until then they sit slightly low and
   faded. The stagger (children arriving one after another) is what reads
   as expensive.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Children lift in one-by-one. The delay steps are small on purpose —
   long staggers feel slow, not luxurious. */
[data-reveal-stagger].is-in > * {
  animation: rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-reveal-stagger].is-in > *:nth-child(1) { animation-delay: 0.00s; }
[data-reveal-stagger].is-in > *:nth-child(2) { animation-delay: 0.06s; }
[data-reveal-stagger].is-in > *:nth-child(3) { animation-delay: 0.12s; }
[data-reveal-stagger].is-in > *:nth-child(4) { animation-delay: 0.18s; }
[data-reveal-stagger].is-in > *:nth-child(5) { animation-delay: 0.24s; }
[data-reveal-stagger].is-in > *:nth-child(6) { animation-delay: 0.30s; }
[data-reveal-stagger].is-in > *:nth-child(7) { animation-delay: 0.36s; }
[data-reveal-stagger].is-in > *:nth-child(8) { animation-delay: 0.42s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   2. PAGE ENTER
   A soft fade-up on every page load. No jarring white flash, no slide that
   fights the browser's own back-button animation.
   -------------------------------------------------------------------------- */

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

body { animation: pageEnter 0.5s ease both; }

/* --------------------------------------------------------------------------
   3. HERO
   The photo holds still and the words rise over it — the calm, confident
   opening a jewellery house uses. A very slow zoom on the image adds life
   without ever looking busy.
   -------------------------------------------------------------------------- */

@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero__img {
  animation: heroZoom 8s ease-out both;
}

.hero__cap > * {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__cap > *:nth-child(1) { animation-delay: 0.10s; }
.hero__cap > *:nth-child(2) { animation-delay: 0.20s; }
.hero__cap > *:nth-child(3) { animation-delay: 0.30s; }
.hero__cap > *:nth-child(4) { animation-delay: 0.40s; }
.hero__cap > *:nth-child(5) { animation-delay: 0.50s; }

/* --------------------------------------------------------------------------
   4. PRODUCT CARDS
   Lift and lean toward the viewer on hover (desktop) or press (phone). The
   photo inside pushes in a touch more, so the piece feels like it steps
   forward out of its frame.
   -------------------------------------------------------------------------- */

.card { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

.card__frame {
  overflow: hidden;   /* so the zooming photo stays inside its frame */
}

.card__img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@media (hover: hover) {
  .card:hover { transform: translateY(-6px); }
  .card:hover .card__img { transform: scale(1.06); }
}

/* On a touchscreen there is no hover, so respond to the press instead. */
.card:active { transform: translateY(-2px) scale(0.995); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   A quiet press-down, plus a soft sheen that sweeps across the dark buttons
   — the little "shine" that suits jewellery without shouting.
   -------------------------------------------------------------------------- */

.btn { position: relative; overflow: hidden; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary::after,
.btn--dark::after,
.btn:not(.btn--outline):not(.btn--light)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.6s ease;
}

@media (hover: hover) {
  .btn:not(.btn--outline):not(.btn--light):hover::after { left: 130%; }
}

/* --------------------------------------------------------------------------
   6. CATEGORY TILES & ICONS
   -------------------------------------------------------------------------- */

.cat { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease; }
.cat__img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@media (hover: hover) {
  .cat:hover { transform: translateY(-4px); }
  .cat:hover .cat__img { transform: scale(1.05); }
}
.cat:active { transform: translateY(-1px); }

.iconbtn { transition: transform 0.2s ease; }
.iconbtn:active { transform: scale(0.9); }

.card__heart { transition: transform 0.2s ease; }
.card__heart:active { transform: scale(0.82); }
.card__heart.is-saved {
  animation: heartPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   7. DRAWERS (cart, menu) & SHEETS
   The panel slides; the dark backdrop fades. Both together, so the cart
   feels like it is being drawn out over the page.
   -------------------------------------------------------------------------- */

.scrim { transition: opacity 0.3s ease; }
.scrim[hidden] { display: block; opacity: 0; pointer-events: none; }
.scrim:not([hidden]) { opacity: 1; }

.drawer { transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1); }

/* Items inside the cart stagger in once it opens. */
.drawer.is-open .line {
  animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.drawer.is-open .line:nth-child(1) { animation-delay: 0.05s; }
.drawer.is-open .line:nth-child(2) { animation-delay: 0.10s; }
.drawer.is-open .line:nth-child(3) { animation-delay: 0.15s; }
.drawer.is-open .line:nth-child(4) { animation-delay: 0.20s; }
.drawer.is-open .line:nth-child(5) { animation-delay: 0.25s; }

/* --------------------------------------------------------------------------
   8. THE FLOATING WHATSAPP BUTTON
   A slow, friendly breathing pulse — enough to catch the eye, calm enough
   not to nag.
   -------------------------------------------------------------------------- */

@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(30, 70, 54, 0.3), 0 0 0 0 rgba(31, 168, 85, 0.5); }
  50%      { box-shadow: 0 4px 16px rgba(30, 70, 54, 0.3), 0 0 0 12px rgba(31, 168, 85, 0); }
}

.wafloat { animation: waPulse 2.8s ease-out infinite; transition: transform 0.2s ease; }
.wafloat:active { transform: scale(0.9); }

/* --------------------------------------------------------------------------
   9. TOAST
   -------------------------------------------------------------------------- */

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.toast:not([hidden]) { animation: toastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* --------------------------------------------------------------------------
   10. SKELETONS — a shimmer while products load, instead of a dead grey box
   -------------------------------------------------------------------------- */

.card-ghost, .skeleton {
  position: relative;
  overflow: hidden;
}

.card-ghost::after, .skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

/* ==========================================================================
   THE GUARD
   If the visitor has asked their phone/computer to reduce motion (an
   accessibility setting, often used by people who get motion-sick), we
   honour it and switch everything off. The site still works perfectly —
   it just holds still.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}