/* ════════════════════════════════════════════════════════════
   PARAMOUNT PREMIUM LAYER
   Cinematic motion, 3D depth and gold-finish polish shared by
   every page. All motion is gated behind html.lux-on (added by
   premium.js) so the site stays fully readable without JS, and
   honours prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */

/* ── Scroll progress bar ── */
#luxProgress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, #9a7d4a, #e8cf9a 60%, #c8a96a);
  box-shadow: 0 0 14px rgba(200,169,106,0.55);
  z-index: 1001; pointer-events: none;
}

/* ── Filmic grain over everything (very subtle) ── */
html.lux-on body::after {
  content: ''; position: fixed; inset: 0; z-index: 998;
  pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── Scroll reveals (staggered, silky) ── */
html.lux-on .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.95s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.95s cubic-bezier(0.22,0.61,0.36,1);
  will-change: opacity, transform;
}
html.lux-on .reveal.visible { opacity: 1; transform: none; }
html.lux-on .reveal.d1 { transition-delay: 0.12s; }
html.lux-on .reveal.d2 { transition-delay: 0.24s; }
html.lux-on .reveal.d3 { transition-delay: 0.36s; }

/* ── Hero entrance choreography ── */
@keyframes luxUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
html.lux-on .hero-eyebrow,
html.lux-on .breadcrumb   { animation: luxUp 0.9s 0.10s cubic-bezier(0.22,0.61,0.36,1) both; }
html.lux-on .page-label   { animation: luxUp 0.9s 0.18s cubic-bezier(0.22,0.61,0.36,1) both; }
html.lux-on .hero-title,
html.lux-on .page-title   { animation: luxUp 1.05s 0.28s cubic-bezier(0.22,0.61,0.36,1) both; }
html.lux-on .hero-sub,
html.lux-on .page-intro   { animation: luxUp 1.05s 0.46s cubic-bezier(0.22,0.61,0.36,1) both; }
html.lux-on .hero-btns    { animation: luxUp 1.05s 0.64s cubic-bezier(0.22,0.61,0.36,1) both; }

/* ── Cinematic slow zoom on hero photography (Ken Burns) ── */
@keyframes luxKenBurns { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.2%); } }
html.lux-on .hero-photo img { animation: luxKenBurns 24s ease-in-out infinite alternate; will-change: transform; }

/* ── Liquid-gold shimmer on italic accents in headings ── */
@keyframes luxShimmer { to { background-position: 220% center; } }
html.lux-on .hero-title em,
html.lux-on .section-title em,
html.lux-on .page-title em {
  background: linear-gradient(100deg, #a8854e 0%, #ecd49e 30%, #c8a96a 50%, #f4e2b0 70%, #a8854e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: luxShimmer 7s linear infinite;
}

/* ── 3D tilt cards + cursor-tracking glare ── */
.lux-tilt { position: relative; transform-style: preserve-3d; }
.lux-glare {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: radial-gradient(560px circle at var(--gx,50%) var(--gy,50%),
              rgba(255,236,196,0.13), transparent 46%);
  transition: opacity 0.35s;
}
.lux-tilt:hover .lux-glare { opacity: 1; }
html.lux-on .lux-tilt {
  box-shadow: 0 10px 34px rgba(0,0,0,0.35);
  transition: box-shadow 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
html.lux-on .lux-tilt:hover { box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,169,106,0.18); }

/* ── Gold sheen sweep across primary buttons ── */
html.lux-on .btn-gold, html.lux-on .nav-cta { position: relative; overflow: hidden; }
html.lux-on .btn-gold::after, html.lux-on .nav-cta::after {
  content: ''; position: absolute; top: 0; left: -90%;
  width: 55%; height: 100%; transform: skewX(-22deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.65s cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: none;
}
html.lux-on .btn-gold:hover::after, html.lux-on .nav-cta:hover::after { left: 135%; }

/* ── Animated statistics ── */
.stat-n, .about-badge-n, .h-num-n, .hero-stat-n, .q-stat-n, .w-stat-n, .num-val {
  font-variant-numeric: tabular-nums;
}

/* ── Gold dust particles (canvas injected by premium.js) ── */
.lux-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ── Deeper glass nav once scrolled ── */
html.lux-on nav.scrolled {
  background: rgba(10,8,6,0.82) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}

/* ── Photography micro-interactions ── */
html.lux-on .ph-photo { backface-visibility: hidden; }
html.lux-on .lux-tilt .ph-photo { transition: transform 0.9s cubic-bezier(0.22,0.61,0.36,1), filter 0.5s; }
html.lux-on .lux-tilt:hover .ph-photo { filter: saturate(1.05) brightness(1.06); }

/* ── Accessibility: no motion if the visitor asked for none ── */
@media (prefers-reduced-motion: reduce) {
  html.lux-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.lux-on .hero-photo img,
  html.lux-on .hero-title em, html.lux-on .section-title em, html.lux-on .page-title em,
  html.lux-on .hero-eyebrow, html.lux-on .breadcrumb, html.lux-on .page-label,
  html.lux-on .hero-title, html.lux-on .page-title,
  html.lux-on .hero-sub, html.lux-on .page-intro, html.lux-on .hero-btns { animation: none !important; }
}

/* ── Touch devices: keep depth shadows, skip hover-only chrome ── */
@media (hover: none) {
  .lux-glare { display: none; }
}