/* ==========================================================================
   ANIMATIONS — entrance reveals, shimmer, floating elements
   Everything here is gated behind prefers-reduced-motion at the bottom.
   Only transform + opacity are animated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll-triggered entrance reveals
   JS adds .in-view via IntersectionObserver.
   --------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    clip-path var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].in-view { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
[data-reveal].in-view { will-change: auto; }

[data-reveal="fade-up"]    { transform: translateY(24px); }
[data-reveal="fade-down"]  { transform: translateY(-20px); }
[data-reveal="fade-left"]  { transform: translateX(28px); }
[data-reveal="fade-right"] { transform: translateX(-28px); }
[data-reveal="fade"]       { transform: none; }
[data-reveal="zoom"]       { transform: scale(.94); }
[data-reveal="clip"]       { clip-path: inset(100% 0 0 0); transform: translateY(14px); }
[data-reveal="mask"]       { clip-path: inset(0 100% 0 0); }

/* --------------------------------------------------------------------------
   Gold-leaf shimmer sweep across display type
   --------------------------------------------------------------------------- */
.gilt {
  transition: background-position 1.4s var(--ease-out);
}
.gilt.in-view,
.gilt.is-swept { background-position: 0 0; }
.gilt:hover { background-position: 100% 0; }

/* Continuous slow shimmer for the hero headline only */
.gilt--live.in-view {
  animation: gilt-sweep 7s var(--ease) 1.2s infinite;
}
@keyframes gilt-sweep {
  0%, 62%  { background-position: 0 0; }
  82%      { background-position: 100% 0; }
  100%     { background-position: 0 0; }
}

/* --------------------------------------------------------------------------
   Floating gold motes
   --------------------------------------------------------------------------- */
.motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.mote {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .0;
  filter: blur(.4px);
  box-shadow: 0 0 8px 1px rgba(200, 160, 46, .55);
  animation: drift 18s ease-in-out infinite;
}
.mote:nth-child(1) { left: 12%; top: 72%; animation-duration: 19s; animation-delay: 0s;    }
.mote:nth-child(2) { left: 28%; top: 84%; animation-duration: 24s; animation-delay: -4s;  width: 3px; height: 3px; }
.mote:nth-child(3) { left: 51%; top: 78%; animation-duration: 21s; animation-delay: -9s;  }
.mote:nth-child(4) { left: 73%; top: 88%; animation-duration: 27s; animation-delay: -13s; width: 5px; height: 5px; }
.mote:nth-child(5) { left: 88%; top: 68%; animation-duration: 23s; animation-delay: -6s;  width: 3px; height: 3px; }
.mote:nth-child(6) { left: 40%; top: 92%; animation-duration: 29s; animation-delay: -17s; }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(.6);        opacity: 0; }
  12%  {                                                    opacity: .75; }
  50%  { transform: translate3d(22px, -190px, 0) scale(1);  opacity: .5; }
  88%  {                                                    opacity: .3; }
  100% { transform: translate3d(-16px, -380px, 0) scale(.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Scroll cue
   --------------------------------------------------------------------------- */
.scroll-cue__line { animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  45%      { transform: scaleY(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   WhatsApp pulse on the sticky bar
   --------------------------------------------------------------------------- */
.action-bar__btn--wa svg { animation: wa-pulse 2.6s var(--ease) infinite; transform-origin: center; }
@keyframes wa-pulse {
  0%, 88%, 100% { transform: scale(1); }
  92%           { transform: scale(1.16); }
}

/* --------------------------------------------------------------------------
   Form submit: spinner → checkmark draw
   --------------------------------------------------------------------------- */
.btn.is-loading { pointer-events: none; opacity: .9; }
.btn.is-loading .btn__label { opacity: .35; }
.spinner {
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid rgba(5, 11, 20, .28);
  border-top-color: var(--ink-deep);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw-check .5s var(--ease) forwards;
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Magnetic buttons (JS sets --tx / --ty)
   --------------------------------------------------------------------------- */
.magnetic {
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform .35s var(--ease-out);
}
.magnetic.is-pulling { transition: transform .12s linear; }

/* --------------------------------------------------------------------------
   Timeline path draw (JS scrubs --draw from 1 → 0)
   --------------------------------------------------------------------------- */
.timeline__path { stroke-dashoffset: var(--draw, 1); }

/* --------------------------------------------------------------------------
   Chip filter re-layout (FLIP)
   --------------------------------------------------------------------------- */
.flip-move { transition: transform var(--dur-slow) var(--ease-out); }
.fade-swap { animation: fade-swap .45s var(--ease) both; }
@keyframes fade-swap {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Awards horizontal scroll hint
   --------------------------------------------------------------------------- */
.hscroll {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.hscroll > * { scroll-snap-align: start; flex: 0 0 clamp(260px, 30vw, 340px); }
.hscroll::-webkit-scrollbar { height: 5px; }
.hscroll::-webkit-scrollbar-track { background: var(--ink-line); border-radius: var(--r-pill); }
.hscroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: var(--r-pill); }

/* ==========================================================================
   REDUCED MOTION — kill transforms and looping motion, keep opacity fades
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .hero__img { transform: none !important; }
  .mote, .motes { display: none; }
  .marquee__track { animation: none; transform: none; }
  .ring-frame::before { animation: none; }
  .scroll-cue__line { animation: none; transform: scaleY(1); opacity: .8; }
  .action-bar__btn--wa svg { animation: none; }
  .cursor { display: none !important; }
  .curtain { display: none !important; }
  .timeline__path { stroke-dashoffset: 0 !important; }
  .gilt, .gilt--live.in-view {
    animation: none !important;
    background-position: 0 0 !important;
  }
  .tilt__inner { transform: none !important; }
  .card:hover .card__media img,
  .bento__tile:hover img,
  .gallery__item:hover img,
  .post-card:hover .post-card__media img,
  .video:hover img { transform: none; }
  .magnetic { transform: none !important; }
}