/* ============================================================
   KINGDOM — luxe motion & polish (homepage)
   Performance contract:
   • animates ONLY transform / opacity (GPU-composited, no reflow)
   • reveal driven by ONE IntersectionObserver (js/luxe.js), unobserved after firing
   • all hidden/animated states gated behind html.luxe, which js/luxe.js adds
     ONLY when JS runs AND prefers-reduced-motion is not set
   • no libraries, no new network assets
   ============================================================ */

/* ---------- Smooth in-page scrolling (motion-safe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   1 · Scroll reveal  (hidden state only under html.luxe → no flash,
   and content is always visible if JS is off / reduced motion)
   ============================================================ */
html.luxe .section-head,
html.luxe .trust-item,
html.luxe .col-card,
html.luxe .jr-card,
html.luxe .ex-card,
html.luxe .gem-card,
html.luxe .tm-card,
html.luxe .faq-item,
html.luxe .consult-grid,
html.luxe .center-cta,
html.luxe .faq-cta,
html.luxe .jr-banner {
  opacity: 0;
  transform: translateY(22px);
}
html.luxe .is-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
              transform .75s cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2 · Cinematic card hover — slow image zoom inside a clipped frame
   (cards already lift on hover; we add the image motion + gold edge)
   ============================================================ */
.col-card { overflow: hidden; }
.col-card image-slot,
.ex-card image-slot,
.gem-card image-slot {
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  display: block;
}
.col-card:hover image-slot,
.ex-card:hover image-slot,
.gem-card:hover image-slot { transform: scale(1.06); }

/* thin gold edge that fades in on hover */
.col-card, .ex-card, .gem-card { position: relative; }
.col-card::after,
.ex-card::after,
.gem-card::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--gold);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.col-card:hover::after,
.ex-card:hover::after,
.gem-card:hover::after { opacity: .55; }

/* ============================================================
   3 · Animated gold accent line under each section eyebrow
   ============================================================ */
.section-head .eyebrow { position: relative; display: inline-block; }
.section-head .eyebrow::after {
  content: "";
  position: absolute; left: 50%; bottom: -13px;
  width: 46px; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* grow from 0 when the head reveals */
html.luxe .section-head .eyebrow::after { width: 0; transition: width 1s cubic-bezier(.22, .61, .36, 1) .25s; }
html.luxe .section-head.is-in .eyebrow::after { width: 46px; }

/* ============================================================
   4 · Iconography that comes alive on hover / in view
   ============================================================ */
.trust-item .ico,
.col-card .c-ico,
.jr-ico svg,
.jr-tico { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.trust-item:hover .ico { transform: scale(1.14) rotate(-5deg); }
.col-card:hover .c-ico { transform: scale(1.16); }
.jr-card:hover .jr-ico svg { transform: scale(1.12) rotate(3deg); }
.jr-trust-item:hover .jr-tico { transform: scale(1.18); }

/* ============================================================
   5 · Whisper-soft shine sweep across primary buttons (hover)
   ============================================================ */
.btn-primary, .btn-gold { position: relative; overflow: hidden; }
.btn-primary::after, .btn-gold::after {
  content: "";
  position: absolute; top: 0; left: -150%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
html.luxe .btn-primary:hover::after,
html.luxe .btn-gold:hover::after { animation: btnShine .9s ease; }
@keyframes btnShine { from { left: -150%; } to { left: 160%; } }

/* ============================================================
   6 · Tasteful sparkle — a single decorative spark, gently twinkling
   ============================================================ */
@keyframes twinkle {
  0%, 100% { opacity: .5; transform: scale(.85) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1.12) rotate(8deg); }
}
html.luxe .jr-spark { transform-origin: center; animation: twinkle 3.4s ease-in-out infinite; }
html.luxe .hc-spark { transform-origin: center; animation: twinkle 4s ease-in-out infinite .6s; }

/* ============================================================
   7 · Journey numbers (01–04) slide in after the card reveals
   ============================================================ */
html.luxe .jr-num { opacity: 0; transform: translateY(10px); }
html.luxe .jr-card.is-in .jr-num {
  opacity: 1; transform: none;
  transition: opacity .6s ease .25s, transform .6s ease .25s;
}

/* ============================================================
   12 · Sticky header — subtle shrink + lift on scroll
   ============================================================ */
.site-header { transition: box-shadow .35s ease, background-color .35s ease; }
.site-header .brand-logo { transition: transform .35s cubic-bezier(.22, .61, .36, 1); transform-origin: left center; }
.site-header.scrolled { box-shadow: 0 6px 26px rgba(15, 31, 27, .07); }
.site-header.scrolled .brand-logo { transform: none; }

/* ============================================================
   Reduced motion — belt & braces (html.luxe is already withheld,
   but neutralise anything hover-triggered just in case)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .col-card image-slot, .ex-card image-slot, .gem-card image-slot { transition: none; }
  .btn-primary::after, .btn-gold::after { display: none; }
}