/* Cinematic scroll effects — Lenis / GSAP ScrollTrigger / 3D / before-after
   Brand tokens already on the page: maroon, gold, cream, Playfair, Manrope. */

/* —— Lenis + overflow guards —— */
html.lenis, html.lenis body { height: auto; }
html, body { overflow-x: hidden; }
.cx-showcase, .cx-ba, .wd-hero { overflow: hidden; }

/* —— Glowing gradient CTAs —— */
.page-web .btn-gold {
  background-image: linear-gradient(110deg, #f3d789 0%, #c9a24d 35%, #ffe7a3 55%, #b8892f 100%);
  background-size: 200% 200%;
  animation: cxCtaShift 5s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 231, 163, .35), 0 0 22px rgba(201, 162, 77, .45), 0 10px 24px rgba(122, 31, 43, .22);
}
.page-web .btn-gold:hover {
  box-shadow: 0 0 0 1px rgba(255, 231, 163, .55), 0 0 32px rgba(201, 162, 77, .65), 0 12px 28px rgba(122, 31, 43, .28);
}
.page-web .btn-maroon {
  box-shadow: 0 0 0 1px rgba(201, 162, 77, .25), 0 0 18px rgba(122, 31, 43, .28);
}
@keyframes cxCtaShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* —— Subtle leaf / caustic overlay (used on 3D stage + lightly on hero) —— */
.cx-leaf {
  position: absolute; inset: -10%; pointer-events: none; z-index: 6;
  background:
    radial-gradient(ellipse 18% 28% at 18% 22%, rgba(255, 244, 210, .22), transparent 62%),
    radial-gradient(ellipse 16% 24% at 72% 18%, rgba(255, 236, 190, .16), transparent 60%),
    radial-gradient(ellipse 22% 18% at 48% 70%, rgba(232, 200, 120, .12), transparent 65%),
    radial-gradient(ellipse 14% 30% at 88% 60%, rgba(255, 250, 230, .14), transparent 60%),
    radial-gradient(ellipse 20% 16% at 30% 88%, rgba(201, 162, 77, .1), transparent 60%);
  mix-blend-mode: soft-light;
  filter: blur(10px);
  animation: cxLeafDrift 18s ease-in-out infinite alternate;
  opacity: .7;
}
@keyframes cxLeafDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

/* —— Hero: dim, bloom, particles, counters, parallax —— */
.wd-hero-dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 55% 42%, rgba(201, 162, 77, .28), transparent 42%),
    rgba(8, 4, 6, 0);
  opacity: 0;
}
.wd-gold-bloom {
  position: absolute; left: 50%; top: 46%; z-index: 3; pointer-events: none;
  width: min(70vw, 760px); height: min(70vw, 760px);
  transform: translate(-50%, -50%) scale(.35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 140, .7) 0%, rgba(201, 162, 77, .28) 36%, transparent 68%);
  opacity: 0; mix-blend-mode: screen; filter: blur(8px);
}
.wd-gold-burst {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%;
}
.wd-hero-orbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wd-hero-orbs span {
  position: absolute; border-radius: 50%; filter: blur(18px);
  background: radial-gradient(circle at 30% 30%, rgba(255, 236, 190, .55), rgba(122, 31, 43, .15) 70%);
}
.wd-hero-orbs span:nth-child(1) { width: 180px; height: 180px; left: 8%; top: 22%; opacity: .45; }
.wd-hero-orbs span:nth-child(2) { width: 120px; height: 120px; right: 18%; top: 16%; opacity: .35; background: radial-gradient(circle, rgba(122, 31, 43, .5), transparent 70%); }
.wd-hero-orbs span:nth-child(3) { width: 90px; height: 90px; left: 28%; bottom: 18%; opacity: .3; }

.wd-hero-counters {
  position: absolute; left: 0; right: 0; bottom: 18%; z-index: 5;
  display: flex; justify-content: center; gap: clamp(2rem, 8vw, 6rem);
  pointer-events: none; opacity: 0; transform: scale(.86);
  padding: 0 1.5rem;
}
.wd-hero-counters div { text-align: center; color: #fffdf8; }
.wd-hero-counters strong {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(3.2rem, 8vw, 6.2rem); line-height: .9; color: var(--gold-bright, #e0c06a);
  letter-spacing: -.03em; text-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.wd-hero-counters span {
  display: block; margin-top: .45rem; letter-spacing: .16em; text-transform: uppercase;
  font-size: .78rem; font-weight: 700; color: #f0e6d6;
}


/* —— Shared cinematic section chrome —— */
.cx-kicker {
  letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; font-weight: 800;
  color: var(--gold-deep, #a67b1a); margin: 0 0 .7rem;
}
.cx-showcase .cx-kicker, .cx-ba .cx-kicker { color: var(--gold-bright, #e0c06a); }
.cx-copy { position: relative; z-index: 5; text-align: center; max-width: 40rem; margin: 0 auto 1.4rem; padding: 0 1.2rem; }
.cx-copy h2 {
  font-family: var(--display); font-weight: 600; color: #fffdf8;
  font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 0 0 .55rem; line-height: 1.12;
}
.cx-copy p { margin: 0; color: #e8dccb; line-height: 1.55; }

/* Section headings slide-in is applied by JS; starting state: */
.wd-slide-head { will-change: transform, opacity; }

/* —— 3D device showcase —— */
.cx-showcase {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, #3a1820 0%, #1a1214 48%, #0e0a0b 100%);
  color: #fff;
}
.cx-showcase-pin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h, 72px) + 1.2rem) 0 2rem;
  background:
    radial-gradient(ellipse at 50% 0%, #3a1820 0%, #1a1214 48%, #0e0a0b 100%);
}
.cx-stage {
  position: relative;
  height: min(68vh, 640px);
  width: min(100% - 2rem, 1100px);
  margin: 0 auto;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
.cx-laptop, .cx-phone, .cx-float, .cx-fly {
  transform-style: preserve-3d; will-change: transform;
}
.cx-laptop {
  position: absolute; left: 50%; top: 46%;
  width: min(58%, 620px);
  transform: translate(-54%, -50%) rotateX(14deg) rotateY(-22deg);
  z-index: 3;
}
.cx-lid {
  background: #1a1214;
  border-radius: 14px 14px 6px 6px;
  padding: 12px 12px 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(201,162,77,.4);
}
.cx-screen {
  position: relative; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden;
  background: #0e0a0b;
}
.cx-screen img, .cx-screen .cx-mosaic { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cx-mosaic {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 3px; background: #1a1214; opacity: 0;
}
.cx-mosaic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cx-screen-final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.cx-base {
  height: 16px; margin: 0 -22px 0;
  background: linear-gradient(#2a1c20, #1a1214);
  border-radius: 0 0 12px 12px; position: relative;
}
.cx-base::after {
  content: ""; position: absolute; left: 50%; top: 5px; width: 70px; height: 4px;
  transform: translateX(-50%); background: #3a2a2e; border-radius: 4px;
}

.cx-phone {
  position: absolute; left: 62%; top: 58%;
  width: min(18%, 168px);
  transform: translate(-10%, -40%) rotateX(10deg) rotateY(-14deg);
  z-index: 4;
  background: #1a1214; border: 6px solid #1a1214; border-radius: 22px;
  box-shadow: 0 22px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(201,162,77,.4);
  overflow: hidden;
}
.cx-phone-screen { aspect-ratio: 9/16; background: #0e0a0b; position: relative; overflow: hidden; }
.cx-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; opacity: 0; }

/* Floating screens at depth */
.cx-float {
  position: absolute; border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(201,162,77,.3);
  background: #1a1214;
  opacity: 0;
}
.cx-float img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cx-float--a { width: 22%; left: 2%; top: 8%; aspect-ratio: 16/10; z-index: 1; opacity: .55; }
.cx-float--b { width: 16%; right: 4%; top: 12%; aspect-ratio: 16/10; z-index: 1; opacity: .5; }
.cx-float--c { width: 14%; left: 8%; bottom: 4%; aspect-ratio: 16/10; z-index: 2; opacity: .6; }

/* Flying sample cards (start scattered; JS sets initial 3D) */
.cx-fly {
  position: absolute; left: 42%; top: 38%; width: 18%; aspect-ratio: 16/10; z-index: 5;
  border-radius: 10px; overflow: hidden; opacity: 0;
  box-shadow: 0 14px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(201,162,77,.35);
  background: #1a1214;
}
.cx-fly img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cx-fly figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(16,8,10,.85));
  color: #fffdf8; font-size: .68rem; font-weight: 700;
  padding: .55rem .6rem .4rem; letter-spacing: .04em;
}

/* —— Before / After —— */
.cx-ba {
  position: relative;
  background: #0c0a0d;
  color: #fff;
}
.cx-ba-pin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h, 72px) + 1rem) 0 2.2rem;
  background: #0c0a0d;
}
.cx-ba-label {
  text-align: center; min-height: 2.4rem; margin: 0 0 1rem;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: .04em; color: #fffdf8;
}
.cx-ba-label .cx-typed { border-right: 2px solid var(--gold-bright, #e0c06a); padding-right: .15rem; }
.cx-ba-label.is-done .cx-typed { border-right-color: transparent; }

.cx-browser {
  position: relative; z-index: 3;
  width: min(100% - 2rem, 900px);
  margin: 0 auto;
  border-radius: 16px;
  background: #1a1214;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,77,.35);
  overflow: hidden;
}
.cx-chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .65rem .9rem; background: #24181c;
  border-bottom: 1px solid rgba(201,162,77,.22);
}
.cx-chrome i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.cx-chrome i:nth-child(1) { background: #c45c58; }
.cx-chrome i:nth-child(2) { background: #c9a24d; }
.cx-chrome i:nth-child(3) { background: #3d8f6e; }
.cx-chrome .cx-url {
  flex: 1; margin-left: .6rem; height: 22px; border-radius: 6px;
  background: rgba(255,253,248,.08); color: rgba(255,253,248,.55);
  font-size: .68rem; display: flex; align-items: center; padding: 0 .7rem;
}

.cx-ba-stage { position: relative; aspect-ratio: 16/10; background: #d7d4cf; overflow: hidden; }
.cx-before, .cx-after, .cx-dark-beat {
  position: absolute; inset: 0;
}
.cx-before { z-index: 1; background: #e6e4e0; }
.cx-after { z-index: 2; opacity: 0; }
.cx-dark-beat {
  z-index: 4; background: #070506; opacity: 0; pointer-events: none;
}

/* Mini-site layouts (same structure, wireframe vs finished) */
.mini { height: 100%; display: grid; grid-template-rows: auto 1fr auto; font-family: var(--font, Manrope, sans-serif); }
.mini-nav { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; gap: .5rem; }
.mini-brand { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .72rem; letter-spacing: .04em; white-space: nowrap; }
.mini-brand b { width: 14px; height: 14px; border-radius: 4px; display: block; }
.mini-links { display: flex; gap: .55rem; }
.mini-links em { display: block; height: 8px; width: 36px; border-radius: 4px; font-style: normal; }
.mini-cta { height: 16px; width: 54px; border-radius: 999px; }
.mini-hero { padding: 1.1rem 1.1rem .4rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: .8rem; align-items: center; }
.mini-hero h3 { margin: 0 0 .3rem; font-family: var(--display); font-size: clamp(1rem, 2.2vw, 1.6rem); line-height: 1.15; }
.mini-hero p { margin: 0; font-size: .62rem; line-height: 1.4; }
.mini-bars span { display: block; height: 7px; border-radius: 4px; margin-bottom: 5px; }
.mini-pic { border-radius: 8px; min-height: 70px; }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; padding: .3rem 1.1rem 1rem; }
.mini-card { border-radius: 8px; min-height: 52px; padding: .45rem; }
.mini-foot { height: 16px; }

/* Wireframe (grey) */
.mini--wire .mini-nav { background: #f3f2f0; }
.mini--wire .mini-brand { color: #9a9894; }
.mini--wire .mini-brand b, .mini--wire .mini-links em, .mini--wire .mini-cta,
.mini--wire .mini-bars span, .mini--wire .mini-pic, .mini--wire .mini-card, .mini--wire .mini-foot {
  background: #cfcbc5;
}
.mini--wire .mini-hero h3, .mini--wire .mini-hero p { color: transparent; }
.mini--wire .mini-hero h3 { background: linear-gradient(#c8c4be, #c8c4be) 0 20%/80% 16px no-repeat; }
.mini--wire .mini-hero p { background:
  linear-gradient(#d4d1cc, #d4d1cc) 0 0/90% 8px no-repeat,
  linear-gradient(#d4d1cc, #d4d1cc) 0 12px/70% 8px no-repeat; height: 24px; }
.mini--wire .mini-pic {
  background:
    #cfcbc5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'%3E%3Cpolygon fill='%23b9b5af' points='0,50 25,22 40,34 55,16 80,50'/%3E%3Ccircle fill='%23b9b5af' cx='18' cy='14' r='6'/%3E%3C/svg%3E") center/70% no-repeat;
}
.mini--wire .mini-card { background: #d8d5d0; }

/* Finished glassmorphism maroon / gold */
.mini--done { background: linear-gradient(160deg, #3a1520 0%, #7A1F2B 45%, #1a1214 100%); color: #fffdf8; }
.mini--done .mini-nav { background: rgba(255,253,248,.08); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,162,77,.28); }
.mini--done .mini-brand { color: #f3e6c8; }
.mini--done .mini-brand b { background: linear-gradient(145deg, #f3d789, #c9a24d); }
.mini--done .mini-links em { background: rgba(255,253,248,.28); }
.mini--done .mini-cta { background: linear-gradient(110deg, #f3d789, #c9a24d); }
.mini--done .mini-hero h3 { color: #fffdf8; }
.mini--done .mini-hero p { color: #e8dccb; }
.mini--done .mini-pic {
  background:
    linear-gradient(160deg, rgba(201,162,77,.35), rgba(26,18,20,.2)),
    #5c2430;
  box-shadow: 0 10px 24px rgba(0,0,0,.25); border: 1px solid rgba(201,162,77,.35);
}
.mini--done .mini-card {
  background: rgba(255,253,248,.1); backdrop-filter: blur(12px);
  border: 1px solid rgba(201,162,77,.35);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.mini--done .mini-card::before {
  content: ""; display: block; width: 30%; height: 6px; border-radius: 4px;
  background: var(--gold, #c9a24d); margin-bottom: .35rem;
}
.mini--done .mini-foot { background: rgba(14,8,10,.45); }

/* Comparison slider (enabled after the dissolve) */
.cx-slider {
  position: absolute; inset: 0; z-index: 5; display: none;
  touch-action: none;
}
.cx-ba.is-compare .cx-slider { display: block; }
.cx-ba.is-compare .cx-after { opacity: 1; clip-path: inset(0 0 0 var(--split, 50%)); }
.cx-ba.is-compare .cx-before { opacity: 1; }
.cx-slider-bar {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 2px; background: #fffdf8; transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(201,162,77,.8); pointer-events: none;
}
.cx-slider-handle {
  position: absolute; top: 50%; left: var(--split, 50%);
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #fffdf8; cursor: ew-resize;
  background: linear-gradient(145deg, #c9a24d, #7A1F2B);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.cx-slider-handle::before, .cx-slider-handle::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-style: solid; transform: translateY(-50%);
}
.cx-slider-handle::before { left: 10px; border-width: 5px 6px 5px 0; border-color: transparent #fffdf8 transparent transparent; }
.cx-slider-handle::after { right: 10px; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #fffdf8; }
.cx-side-tag {
  position: absolute; top: .7rem; z-index: 6; pointer-events: none;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 6px;
  background: rgba(14,8,10,.55); color: #fffdf8;
}
.cx-side-tag--b { left: .7rem; }
.cx-side-tag--a { right: .7rem; }
.cx-ba:not(.is-compare) .cx-side-tag { display: none; }

/* Floating glass spheres — behind and in front of the frame */
.cx-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(2px);
  animation: cxOrb 9s ease-in-out infinite;
}
.cx-orb--back {
  z-index: 1; width: 180px; height: 180px; left: 8%; top: 18%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 236, 190, .55), rgba(122, 31, 43, .35) 60%, transparent 70%);
  filter: blur(8px); opacity: .85;
}
.cx-orb--back-2 {
  z-index: 1; width: 120px; height: 120px; right: 10%; bottom: 16%;
  background: radial-gradient(circle at 30% 28%, rgba(201, 162, 77, .6), rgba(26, 18, 20, .3) 62%, transparent 72%);
  filter: blur(10px); animation-delay: -3s; animation-duration: 11s;
}
.cx-orb--front {
  z-index: 7; width: 90px; height: 90px; left: 18%; bottom: 18%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 250, 230, .7), rgba(201, 162, 77, .35) 55%, rgba(122, 31, 43, .15) 72%, transparent 74%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.25);
  animation-delay: -1.5s; animation-duration: 8s;
}
.cx-orb--front-2 {
  z-index: 7; width: 56px; height: 56px; right: 16%; top: 22%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 236, 190, .75), rgba(122, 31, 43, .4) 60%, transparent 74%);
  animation-delay: -4s; animation-duration: 10s;
}
@keyframes cxOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -22px, 0) scale(1.08); }
}

/* —— Reduced motion / small screens —— */
@media (prefers-reduced-motion: reduce) {
  .page-web .btn-gold, .cx-leaf, .cx-orb { animation: none !important; }
  .wd-hero-counters { opacity: 1; transform: none; }
  .cx-after { opacity: 1; }
  .cx-screen-final, .cx-phone-screen img { opacity: 1; }
  .wd-gold-bloom, .wd-hero-dim { opacity: 0 !important; }
}
@media (max-width: 767px) {
  .page-web .btn-gold { animation: none; box-shadow: 0 0 14px rgba(201,162,77,.35); }
  .cx-leaf { opacity: .35; filter: blur(14px); animation-duration: 28s; }
  .wd-hero-orbs { display: none; }
  .wd-hero-counters { bottom: 8%; gap: 2rem; }
  .wd-hero-counters strong { font-size: 2.6rem; }
  .cx-showcase-pin, .cx-ba-pin { min-height: auto; padding: 3.2rem 0 2.4rem; }
  .cx-stage { height: 420px; perspective: 900px; }
  .cx-laptop { width: 78%; left: 46%; transform: translate(-50%, -50%) rotateX(10deg) rotateY(-12deg) !important; }
  .cx-phone { width: 28%; left: 72%; top: 62%; }
  .cx-float, .cx-fly { display: none; } /* lighten: no scattered 3D cards on small screens */
  .cx-mosaic { opacity: 0; }
  .cx-screen-final, .cx-phone-screen img { opacity: 1; }
  .cx-orb--back, .cx-orb--back-2 { width: 90px; height: 90px; }
  .cx-orb--front, .cx-orb--front-2 { width: 48px; height: 48px; }
  .mini-hero { grid-template-columns: 1fr; }
  .mini-cards { gap: .3rem; }
  .cx-slider-handle { width: 40px; height: 40px; }
}

/* ============================================================
   Instant wow, ambient motion, video bands, marquees, cursor
   These run on mobile too. Only prefers-reduced-motion opts out.
   ============================================================ */

/* Immediate intro (CSS-first, no JS required) */
#cx-intro {
  position: fixed; inset: 0; z-index: 5000;
  display: grid; place-items: center;
  pointer-events: auto;
  background: transparent;
  overflow: hidden;
}
#cx-intro.is-done { pointer-events: none; }
.cx-intro-curtains { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; }
.cx-intro-curtain {
  flex: 1; background: linear-gradient(180deg, #2a0c12, #5a1a24 55%, #3a1218);
  transform-origin: center;
}
.cx-intro-curtain--top { animation: cxCurtainTop 0.85s cubic-bezier(.7,.1,.2,1) 1.05s forwards; }
.cx-intro-curtain--bot { animation: cxCurtainBot 0.85s cubic-bezier(.7,.1,.2,1) 1.05s forwards; }
@keyframes cxCurtainTop { to { transform: translateY(-105%); } }
@keyframes cxCurtainBot { to { transform: translateY(105%); } }
.cx-intro-goldline {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 0; height: 2px; background: linear-gradient(90deg, transparent, #f3d789, #c9a24d, #f3d789, transparent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(201,162,77,.8);
  animation: cxGoldLine 0.55s ease 0.7s forwards;
}
@keyframes cxGoldLine { to { width: min(80vw, 520px); } }
.cx-intro-mark {
  position: relative; z-index: 4; text-align: center; color: #f3d789;
  animation: cxIntroMarkOut 0.45s ease 1.15s forwards;
}
.cx-intro-emblem {
  width: 72px; height: 72px; display: block; margin: 0 auto .85rem;
  filter: drop-shadow(0 0 18px rgba(243,215,137,.65));
  clip-path: circle(0% at 50% 50%);
  animation: cxEmblemIn 0.7s cubic-bezier(.2,.7,.2,1) 0.05s forwards;
}
@keyframes cxEmblemIn { to { clip-path: circle(75% at 50% 50%); } }
.cx-intro-name {
  margin: 0; font-family: var(--display, "Playfair Display", serif);
  font-weight: 600; letter-spacing: .18em;
  font-size: clamp(1.15rem, 4.2vw, 1.85rem);
  background: linear-gradient(90deg, #8a6a22 0%, #ffe9a8 35%, #c9a24d 50%, #ffe9a8 65%, #8a6a22 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cxNameIn 0.7s ease 0.28s forwards, cxShimmer 3.2s linear 0.9s infinite;
  clip-path: inset(0 100% 0 0);
}
.cx-intro-unit {
  margin: .4rem 0 0; letter-spacing: .28em; font-size: .68rem; font-weight: 800;
  color: #e8dccb; opacity: 0;
  animation: cxUnitIn 0.5s ease 0.5s forwards;
}
@keyframes cxNameIn { to { clip-path: inset(0 0 0 0); } }
@keyframes cxUnitIn { to { opacity: 1; } }
@keyframes cxIntroMarkOut { to { opacity: 0; transform: scale(.92); } }
@keyframes cxShimmer { to { background-position: -200% 0; } }

body.cx-introing .site-header,
body.cx-introing .wd-float-wa,
body.cx-introing #toTop,
body.cx-introing #musicToggle,
body.cx-introing #musicHint,
body.cx-introing #scrollProgress { opacity: 0 !important; pointer-events: none; }
body.cx-intro-done .site-header,
body.cx-intro-done .wd-float-wa,
body.cx-intro-done #musicToggle,
body.cx-intro-done #musicHint:not(.is-hidden),
body.cx-intro-done #scrollProgress { opacity: 1; transition: opacity .45s ease; }

/* After curtains finish, fade the overlay so hero copy is unobstructed.
   .is-done (added by JS at ~1.9s) must NOT restart a delayed animation. */
#cx-intro { animation: cxIntroFadeOut 0.4s ease 1.85s forwards; }
@keyframes cxIntroFadeOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
#cx-intro.is-done {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Headline words: blur-to-sharp rise, after the curtain */
.cx-word {
  display: inline-block; opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  animation: cxWordIn 0.7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(1.6s + var(--d, 0s));
  will-change: transform, opacity, filter;
}
.cx-word-em { font-family: var(--display); font-style: italic; color: var(--gold-bright, #e0c06a); }
@keyframes cxWordIn {
  to { opacity: 1; filter: blur(0); transform: none; }
}
.wd-hero .eyebrow { opacity: 0; animation: cxWordIn 0.6s ease 1.5s forwards; }
.wd-hero .lead, .wd-hero-note { opacity: 0; animation: cxWordIn 0.6s ease 2.25s forwards; }
.wd-tagline {
  opacity: 0;
  background: linear-gradient(90deg, #c9a24d 0%, #ffe9a8 40%, #c9a24d 60%, #8a6a22 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  animation: cxWordIn 0.7s ease 2.05s forwards, cxShimmer 3.5s linear 2.6s infinite;
}
.wd-hero-actions { opacity: 0; transform: scale(.9); animation: cxCtaPop 0.55s cubic-bezier(.2,1.2,.3,1) 2.35s forwards; }
@keyframes cxCtaPop {
  to { opacity: 1; transform: none; }
}
.wd-hero-actions .btn-gold { animation: cxCtaShift 5s ease-in-out 2.6s infinite, cxGlowPulse 1.8s ease-in-out 2.4s 3; }
@keyframes cxGlowPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,231,163,.35), 0 0 22px rgba(201,162,77,.45), 0 10px 24px rgba(122,31,43,.22); }
  50% { box-shadow: 0 0 0 2px rgba(255,231,163,.7), 0 0 36px rgba(201,162,77,.85), 0 12px 28px rgba(122,31,43,.3); }
}

/* Disable the old immediate rise so the intro can own the first paint */
.wd-anim { opacity: inherit; transform: none; animation: none; }

/* Ken Burns on video and poster fallback */
.wd-hero-media { overflow: hidden; }
.wd-hero-video, .cx-bg-video, .cx-kb-poster, .wd-hero-poster-kb {
  transform-origin: 50% 50%;
  animation: cxKenBurns 22s ease-in-out infinite alternate;
}
@keyframes cxKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-2.2%, -1.4%); }
}
.wd-hero-poster-kb, .cx-kb-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: 0; pointer-events: none; transition: opacity .4s;
}
.wd-hero-media.is-static .wd-hero-poster-kb,
.cx-videobox.is-static .cx-kb-poster { opacity: 1; }
.wd-hero-media.is-playing .wd-hero-poster-kb,
.cx-videobox.is-playing .cx-kb-poster { opacity: 0; }
.wd-hero-video, .cx-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Persistent floating devices (including a compact phone on mobile) */
.wd-devices .device-laptop, .wd-devices .device-phone {
  animation: floaty 6.5s ease-in-out infinite, cxTilt 9s ease-in-out infinite;
}
.wd-devices .device-phone { animation-delay: .4s, 1s; }
@keyframes cxTilt {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 1.2deg; }
}

/* CSS bokeh (visible even before JS) + canvas particles */
.cx-bokeh { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.cx-bokeh i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,240,190,.85), rgba(201,162,77,.2) 55%, transparent 70%);
  animation: cxBokehDrift 14s ease-in-out infinite;
  filter: blur(1px);
}
.cx-bokeh i:nth-child(1) { width: 14px; height: 14px; left: 12%; top: 22%; animation-duration: 16s; }
.cx-bokeh i:nth-child(2) { width: 22px; height: 22px; left: 78%; top: 18%; animation-duration: 18s; animation-delay: -3s; }
.cx-bokeh i:nth-child(3) { width: 10px; height: 10px; left: 28%; top: 70%; animation-duration: 12s; animation-delay: -2s; }
.cx-bokeh i:nth-child(4) { width: 18px; height: 18px; left: 62%; top: 64%; animation-duration: 15s; animation-delay: -6s; }
.cx-bokeh i:nth-child(5) { width: 8px; height: 8px; left: 48%; top: 30%; animation-duration: 11s; animation-delay: -1s; }
.cx-bokeh i:nth-child(6) { width: 26px; height: 26px; left: 88%; top: 48%; animation-duration: 20s; animation-delay: -8s; opacity: .7; }
@keyframes cxBokehDrift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .55; }
  50% { transform: translate3d(18px, -28px, 0); opacity: 1; }
}
#cx-ambient {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%;
}

/* Video bands */
.cx-videobox {
  position: relative; overflow: hidden;
  color: #fffdf8; text-align: center;
  min-height: 42vh;
  display: flex; align-items: center; justify-content: center;
}
.cx-videobox-media { position: absolute; inset: 0; }
.cx-videobox-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,18,20,.45), rgba(92,21,32,.55) 50%, rgba(26,18,20,.7));
}
.cx-videobox-content { position: relative; z-index: 2; padding: 3.2rem 1.4rem; max-width: 46rem; }
.wd-band.cx-videobox { padding: 0; min-height: 48vh; }
.wd-band.cx-videobox p,
.cx-videobox-content .wd-band-line {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  line-height: 1.2; margin: 0;
  background: linear-gradient(90deg, #c9a24d, #ffe9a8, #c9a24d);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cxShimmer 4s linear infinite;
  text-shadow: none;
}
.wd-launch.cx-videobox { border-radius: 0; min-height: 52vh; padding: 0; box-shadow: none; }
.wd-launch.cx-videobox h2 { color: #fffdf8; }
.wd-launch.cx-videobox p { color: #f0e6d6; }

/* Marquees */
.cx-marquee-wrap { overflow: hidden; background: #1a1214; }
.cx-marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid rgba(201,162,77,.35);
  border-bottom: 1px solid rgba(201,162,77,.35);
  background: #1a1214;
  padding: .7rem 0;
}
.cx-marquee--tilt {
  transform: rotate(-2.2deg) scale(1.05);
  margin: .6rem 0 1.2rem;
  background: #2a1218;
  border-color: rgba(201,162,77,.5);
}
.cx-marquee-track {
  display: inline-block;
  color: var(--gold-bright, #e0c06a);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .78rem;
  animation: cxMarquee 36s linear infinite;
  will-change: transform;
}
.cx-marquee--rev .cx-marquee-track { animation-direction: reverse; animation-duration: 42s; }
@keyframes cxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cursor glow (desktop) */
#cx-cursor {
  position: fixed; width: 22px; height: 22px; border-radius: 50%;
  pointer-events: none; z-index: 4500;
  background: radial-gradient(circle, rgba(255,232,160,.7), rgba(201,162,77,.15) 55%, transparent 70%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .2s;
}
#cx-cursor.is-on { opacity: 1; }
.cx-magnetic { will-change: transform; }

/* Tap ripples */
.btn { position: relative; overflow: hidden; }
.cx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 236, 190, .45);
  transform: scale(0); animation: cxRipple .6s ease-out forwards;
}
@keyframes cxRipple { to { transform: scale(18); opacity: 0; } }

/* Showcase laptop video */
.cx-screen-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .9;
}

/* Light parallax still allowed on mobile */
@media (max-width: 767px) {
  .wd-hero-orbs { display: block; opacity: .7; }
  .cx-float, .cx-fly { display: block; }
  .cx-mosaic { opacity: 0; }
  .cx-screen-final { opacity: 0; }
  .cx-phone-screen img { opacity: 0; }
  .page-web .btn-gold { animation: cxCtaShift 5s ease-in-out infinite, cxGlowPulse 1.8s ease-in-out 2.4s 3; }
  .cx-marquee { padding: .55rem 0; }
  .cx-marquee-track { font-size: .68rem; }
  .wd-devices {
    display: block !important;
    width: 34vw; max-width: 130px;
    right: 0.85rem !important; left: auto !important;
    top: auto !important; bottom: 5.2rem;
  }
  .wd-devices .device-laptop { display: none; }
  .wd-devices .device-phone { position: relative; left: 0 !important; width: 100% !important; bottom: 0 !important; }
  .cx-showcase-pin, .cx-ba-pin { min-height: 100vh; min-height: 100dvh; }
  .cx-stage { height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  #cx-intro, #cx-intro * { animation: none !important; }
  #cx-intro { display: none !important; }
  .cx-word, .wd-hero .eyebrow, .wd-hero .lead, .wd-hero-note, .wd-tagline, .wd-hero-actions {
    animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important;
    color: inherit;
  }
  .wd-tagline { color: var(--saffron-soft, #fde9b8) !important; }
  .wd-hero-video, .cx-bg-video, .cx-kb-poster, .wd-hero-poster-kb, .cx-bokeh i, .cx-marquee-track,
  .wd-devices .device-laptop, .wd-devices .device-phone { animation: none !important; }
  body.cx-introing .site-header { opacity: 1 !important; pointer-events: auto; }
}

@media (max-width: 960px) {
  .wd-devices {
    display: block !important;
    width: min(38vw, 160px);
    right: 1rem; left: auto; top: auto; bottom: 5rem;
  }
  .wd-devices .device-laptop { display: none; }
  .wd-devices .device-phone { position: relative; left: 0; width: 100%; bottom: 0; }
}
#launch.wd-section { padding: 0; }

.wd-hero-copy { position: relative; z-index: 8; }
.wd-hero-counters { z-index: 8; }

/* Kill CSS entrance once JS owns it, so a later pin cannot restart it. */
body.cx-js-enter .cx-word,
body.cx-js-enter .wd-hero .eyebrow,
body.cx-js-enter .wd-hero .lead,
body.cx-js-enter .wd-hero-note,
body.cx-js-enter .wd-tagline,
body.cx-js-enter .wd-hero-actions {
  animation: none !important;
}
/* After the intro, JS adds cx-hero-in so a ScrollTrigger pin cannot
   restart CSS entrance animations and leave the headline at opacity 0. */
body.cx-hero-in .cx-word,
body.cx-hero-in .wd-hero .eyebrow,
body.cx-hero-in .wd-hero .lead,
body.cx-hero-in .wd-hero-note,
body.cx-hero-in .wd-tagline,
body.cx-hero-in .wd-hero-actions {
  opacity: 1;
  filter: none;
  transform: none;
}
body.cx-hero-in .wd-tagline {
  animation: cxShimmer 3.5s linear infinite;
}
@media (max-width: 767px) {
  .wd-hero-copy { padding-right: 0.25rem; padding-bottom: 5.6rem; }
  .wd-hero h1 { font-size: clamp(2.05rem, 8.6vw, 2.7rem); }
  .wd-hero-actions { max-width: calc(100% - 7.2rem); }
  .wd-hero-note { max-width: calc(100% - 7.2rem); }
}