/* ═══════════════════════════════════════════════════
   JEWEL WORLD — LUXURY ANIMATION LAYER
   Film grain · Page transitions · Parallax ·
   Refined reveal system · Hover hierarchy · Idle motion
═══════════════════════════════════════════════════ */

:root {
  /* // NEW: shared premium motion tokens */
  --lx-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --lx-ease-soft: cubic-bezier(0.19, 1, 0.22, 1);
  --lx-dur-fast: 0.42s;
  --lx-dur-base: 0.78s;
  --lx-dur-slow: 1.18s;
  --lx-shadow-diffuse: 0 18px 56px rgba(14, 27, 20, 0.16);
  --lx-shadow-lift: 0 28px 88px rgba(10, 16, 13, 0.36);
}

/* // NEW: registered properties for smoother idle depth motion */
@property --lx-idle-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --lx-idle-rotate {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── PAGE TRANSITION VEIL ── */
#lx-veil {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background:
    radial-gradient(circle at 35% 25%, rgba(226, 201, 126, 0.07), transparent 28%),
    linear-gradient(135deg, rgba(12, 30, 20, 0.92), rgba(26, 58, 42, 0.98));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--lx-ease-premium);
}

/* ── FILM GRAIN OVERLAY ── */
#lx-grain {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: soft-light;
  animation: lxGrainShift 1.1s steps(1) infinite;
  transition: opacity 0.6s ease;
}
body.lx-ready #lx-grain {
  opacity: 0.028;
}
@keyframes lxGrainShift {
  0%   { transform: translate3d(0, 0, 0) }
  13%  { transform: translate3d(-3%, 2%, 0) }
  25%  { transform: translate3d(2%, -3%, 0) }
  38%  { transform: translate3d(-2%, 1%, 0) }
  50%  { transform: translate3d(3%, -1%, 0) }
  63%  { transform: translate3d(-1%, 3%, 0) }
  75%  { transform: translate3d(2%, 2%, 0) }
  88%  { transform: translate3d(-2%, -2%, 0) }
  100% { transform: translate3d(0, 0, 0) }
}

/* ── HERO BADGE + IDLE MOTION ── */
.hero-badge {
  animation: lxBadgeFloat 7.6s ease-in-out infinite;
}
@keyframes lxBadgeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) }
  50%      { transform: translate3d(0, -6px, 0) }
}

/* // NEW: shared depth variables so hover/parallax/idle can coexist */
.hero-panel-main,
.hero-panel-small,
.bp-float-card,
.bs-glass-card {
  --lx-depth-y: 0px;
  --lx-depth-scale: 1;
  --lx-depth-blur: 0px;
  --lx-hover-y: 0px;
  --lx-hover-scale: 1;
  --lx-idle-y: 0px;
  --lx-idle-rotate: 0deg;
  transform:
    translate3d(0, calc(var(--lx-depth-y) + var(--lx-hover-y) + var(--lx-idle-y)), 0)
    scale(var(--lx-depth-scale))
    scale(var(--lx-hover-scale))
    rotate(var(--lx-idle-rotate));
  filter: blur(var(--lx-depth-blur));
  transform-origin: center center;
}

/* // NEW: extremely subtle luxury idle drift */
body.lx-ready .hero-panel-main,
body.lx-ready .hero-panel-small,
body.lx-ready .bp-float-card,
body.lx-ready .bs-glass-card {
  animation: lxIdleLuxury 8.8s ease-in-out infinite;
}
body.lx-ready .hero-panel-small,
body.lx-ready .bs-glass-card {
  animation-duration: 10s;
  animation-delay: -2.4s;
}
@keyframes lxIdleLuxury {
  0%, 100% {
    --lx-idle-y: 0px;
    --lx-idle-rotate: 0deg;
  }
  50% {
    --lx-idle-y: -4px;
    --lx-idle-rotate: -0.18deg;
  }
}

/* ── CINEMATIC HERO REVEAL ── */
body.lx-enter #hero .hero-eyebrow,
body.lx-enter #hero .hero-title,
body.lx-enter #hero .hero-desc,
body.lx-enter #hero .hero-btns,
body.lx-enter #bp-hero .bp-eyebrow,
body.lx-enter #bp-hero .bp-hero-title,
body.lx-enter #bp-hero .bp-hero-desc,
body.lx-enter #bp-hero .bp-hero-btns,
body.lx-enter #bs-hero .bs-eyebrow,
body.lx-enter #bs-hero .bs-hero-title,
body.lx-enter #bs-hero .bs-hero-desc,
body.lx-enter #bs-hero .bs-hero-btns,
body.lx-enter #heroCarousel .hc-content {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(0.995);
  filter: blur(10px);
  clip-path: inset(0 0 100% 0);
}
body.lx-enter #hero .hero-panel-main,
body.lx-enter #hero .hero-panel-small,
body.lx-enter #bp-hero .bp-float-card,
body.lx-enter #bs-hero .bs-glass-card {
  opacity: 0;
  --lx-depth-y: 36px;
  --lx-depth-scale: 1.08;
  --lx-depth-blur: 14px;
}
body.lx-ready #hero .hero-eyebrow,
body.lx-ready #hero .hero-title,
body.lx-ready #hero .hero-desc,
body.lx-ready #hero .hero-btns,
body.lx-ready #bp-hero .bp-eyebrow,
body.lx-ready #bp-hero .bp-hero-title,
body.lx-ready #bp-hero .bp-hero-desc,
body.lx-ready #bp-hero .bp-hero-btns,
body.lx-ready #bs-hero .bs-eyebrow,
body.lx-ready #bs-hero .bs-hero-title,
body.lx-ready #bs-hero .bs-hero-desc,
body.lx-ready #bs-hero .bs-hero-btns,
body.lx-ready #heroCarousel .hc-content {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity var(--lx-dur-slow) var(--lx-ease-premium),
    transform var(--lx-dur-slow) var(--lx-ease-premium),
    filter calc(var(--lx-dur-slow) + 0.08s) var(--lx-ease-premium),
    clip-path calc(var(--lx-dur-slow) + 0.08s) var(--lx-ease-soft);
  transition-delay: var(--motion-delay, 0ms);
}
body.lx-ready #hero .hero-panel-main,
body.lx-ready #hero .hero-panel-small,
body.lx-ready #bp-hero .bp-float-card,
body.lx-ready #bs-hero .bs-glass-card {
  opacity: 1;
  --lx-depth-y: 0px;
  --lx-depth-scale: 1;
  --lx-depth-blur: 0px;
  transition:
    opacity calc(var(--lx-dur-slow) + 0.04s) var(--lx-ease-premium),
    transform calc(var(--lx-dur-slow) + 0.08s) var(--lx-ease-premium),
    filter calc(var(--lx-dur-slow) + 0.08s) var(--lx-ease-premium),
    box-shadow calc(var(--lx-dur-base) + 0.08s) ease;
  transition-delay: var(--motion-delay, 0ms);
}

/* // NEW: heading mask reveal hook */
.lx-mask-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  clip-path: inset(0 0 100% 0);
  filter: blur(8px);
  transition:
    opacity 1.05s var(--lx-ease-premium),
    transform 1.05s var(--lx-ease-premium),
    clip-path 1.1s var(--lx-ease-soft),
    filter 1.05s var(--lx-ease-premium);
  transition-delay: var(--motion-delay, 0ms);
}
.lx-mask-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
  filter: blur(0);
}

/* ── HOVER HIERARCHY ── */
/* // UPDATED: primary hover = lift + scale */
.hero-panel-main,
.hero-panel-small,
.bp-float-card,
.bs-glass-card,
.lv-main {
  transition:
    transform 0.85s var(--lx-ease-premium),
    box-shadow 0.85s ease,
    filter 0.85s var(--lx-ease-premium),
    border-color 0.45s ease,
    background 0.45s ease !important;
}
.hero-panel-main:hover,
.bp-float-card:hover,
.bs-glass-card:hover,
.lv-main:hover {
  --lx-hover-y: -10px;
  --lx-hover-scale: 1.018;
  box-shadow: var(--lx-shadow-lift) !important;
}
.hero-panel-small:hover {
  --lx-hover-y: -7px;
  --lx-hover-scale: 1.016;
  box-shadow: 0 18px 52px rgba(201, 168, 76, 0.2) !important;
}
.hero-panel-main svg,
.hero-panel-main img,
.bp-float-card img,
.bs-glass-card img,
.lv-main img {
  transition: transform 1.15s var(--lx-ease-premium), filter 1.15s var(--lx-ease-premium);
  display: block;
}
.hero-panel-main:hover svg,
.hero-panel-main:hover img,
.bp-float-card:hover img,
.bs-glass-card:hover img,
.lv-main:hover img {
  transform: scale(1.035);
  filter: saturate(1.02);
}

/* // UPDATED: secondary hover = shadow and polish, not movement */
.c-card,
.occ-card,
.svc-feat-card,
.s-card,
.jewel-card,
.style-card,
.rv-card {
  transition:
    box-shadow 0.65s ease,
    border-color 0.5s ease,
    background 0.5s ease,
    opacity 0.4s ease !important;
}
.c-card:hover,
.occ-card:hover,
.svc-feat-card:hover,
.s-card:hover,
.jewel-card:hover,
.style-card:hover,
.rv-card:hover {
  box-shadow: var(--lx-shadow-diffuse) !important;
}
.c-card:hover,
.jewel-card:hover,
.style-card:hover,
.svc-feat-card:hover,
.s-card:hover {
  border-color: rgba(201, 168, 76, 0.34) !important;
}
.c-card .c-bg,
.jewel-card .jewel-img img {
  transition: transform 0.95s var(--lx-ease-premium), filter 0.95s var(--lx-ease-premium) !important;
}
.c-card:hover .c-bg,
.jewel-card:hover .jewel-img img {
  transform: scale(1.045) !important;
  filter: saturate(1.02);
}

/* // UPDATED: minimal hover = underline / opacity only */
.btn-gold,
.btn-outline,
.hc-cta {
  transition:
    background var(--lx-dur-fast) ease,
    border-color var(--lx-dur-fast) ease,
    color var(--lx-dur-fast) ease,
    box-shadow 0.55s ease,
    transform 0.55s var(--lx-ease-premium),
    letter-spacing 0.45s ease,
    opacity 0.35s ease !important;
}
.btn-gold:hover {
  transform: scale(1.018) !important;
  box-shadow: 0 14px 38px rgba(201, 168, 76, 0.24) !important;
}
.btn-outline:hover,
.hc-cta:hover {
  transform: scale(1.012) !important;
  box-shadow: 0 10px 28px rgba(253, 250, 244, 0.06) !important;
}
.hc-cta:hover {
  letter-spacing: 0.32em !important;
}
.nav-links a,
.f-links a,
.social-link,
.action-btn {
  transition:
    color 0.35s ease,
    opacity 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.45s ease !important;
}
.nav-links a:hover,
.f-links a:hover {
  opacity: 0.92;
}

/* ── NAV LINK UNDERLINE REVEAL ── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0), #e2c97e 28%, #e2c97e 72%, rgba(201, 168, 76, 0));
  transition: width 0.55s var(--lx-ease-premium), opacity 0.35s ease;
  opacity: 0.7;
}
.nav-links a:hover::after {
  width: 100%;
}

/* ── GOLD EYEBROW LINE SHIMMER ── */
.hero-eyebrow::before,
.section-eyebrow::before,
.hero-eyebrow-line .rule {
  background: linear-gradient(90deg, #c9a84c 0%, #e2c97e 50%, #c9a84c 100%) !important;
  background-size: 200% 100% !important;
  animation: lxEyebrowShimmer 4.4s ease-in-out infinite;
}
@keyframes lxEyebrowShimmer {
  0%   { background-position: 0% 0% }
  50%  { background-position: 100% 0% }
  100% { background-position: 0% 0% }
}

/* ── MARQUEE PAUSE ON HOVER ── */
.marquee-strip:hover .marquee-inner {
  animation-play-state: paused;
}

/* ── ADVANCED PARALLAX DEPTH SYSTEM ── */
/* // UPDATED: transforms are driven by CSS vars set in JS */
.hero-content,
.bp-hero-content,
.bs-hero-content {
  --lx-parallax-y: 0px;
  --lx-parallax-scale: 1;
  --lx-parallax-blur: 0px;
  --lx-parallax-opacity: 1;
  transform: translate3d(0, var(--lx-parallax-y), 0) scale(var(--lx-parallax-scale));
  filter: blur(var(--lx-parallax-blur));
  opacity: var(--lx-parallax-opacity);
}
.hero-dots,
.bp-hero-dots,
.bs-hero-dots {
  --lx-dots-y: 0px;
  --lx-dots-scale: 1;
  --lx-dots-opacity: 0.05;
  transform: translate3d(0, var(--lx-dots-y), 0) scale(var(--lx-dots-scale));
  opacity: var(--lx-dots-opacity);
  transition: opacity 0.35s ease;
}
#hero,
#bp-hero,
#bs-hero {
  overflow: hidden;
}

/* ── GLOBAL REVEAL SYSTEM ── */
html.js-motion .reveal-init {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(0.992);
  filter: blur(10px);
  transition:
    opacity 1.05s var(--lx-ease-premium),
    transform 1.05s var(--lx-ease-premium),
    filter 1.05s var(--lx-ease-premium);
  transition-delay: var(--lx-reveal-delay, 0ms);
}
html.js-motion .reveal-init.reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* ── HERO SCROLL INDICATOR PULSE ── */
.hero-scroll-invite .hero-scroll-line {
  animation: lxScrollPulse 2.8s ease-in-out infinite;
}
@keyframes lxScrollPulse {
  0%, 100% { opacity: 0.34; transform: scaleY(1) }
  50%      { opacity: 0.82; transform: scaleY(1.08) }
}

/* ── STORY HERO: ENHANCED CORNERS ── */
.hero-corner {
  transition: opacity 0.4s ease;
}
.story-hero:hover .hero-corner {
  opacity: 0.85;
}

/* ── REDUCED MOTION OVERRIDES ── */
@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero-panel-main,
  .hero-panel-small,
  .bp-float-card,
  .bs-glass-card {
    animation: none !important;
  }
  #lx-grain {
    animation: none !important;
  }
  .hero-eyebrow::before,
  .section-eyebrow::before,
  .hero-eyebrow-line .rule,
  .hero-scroll-invite .hero-scroll-line {
    animation: none !important;
  }
  .btn-gold:hover,
  .btn-outline:hover,
  .hc-cta:hover,
  .hero-panel-main:hover,
  .hero-panel-small:hover,
  .bp-float-card:hover,
  .bs-glass-card:hover,
  .lv-main:hover {
    transform: none !important;
  }
  .hero-content,
  .bp-hero-content,
  .bs-hero-content,
  .hero-dots,
  .bp-hero-dots,
  .bs-hero-dots,
  .reveal-init,
  .lx-mask-reveal {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
  }
}