/* ============================================
   OPTIMO ENTERTAINMENT — Gold & motion layer
   Loads last on every page. Keeps the white/ivory
   base but adds metallic gold accents, shimmer,
   sparkle and movement so the site feels like a
   luxury entertainment brand, not a corporate one.
   All motion is switched off for reduced-motion users.
   ============================================ */

:root {
  --gold-metal: linear-gradient(105deg, #8A650C 0%, #C99A2E 18%, #F1D98F 38%, #D8B04F 52%, #FBEBB5 62%, #C99A2E 78%, #8A650C 100%);
  --gold-text:  linear-gradient(105deg, #7A5708 0%, #A67C12 22%, #D9AE45 42%, #B8891A 58%, #E2BC5A 72%, #8A650C 100%);
  --gold-soft:  linear-gradient(105deg, #E9CF86, #F7E7B4 45%, #D8B04F);
  --gold-line:  linear-gradient(90deg, transparent, #C99A2E 20%, #F1D98F 50%, #C99A2E 80%, transparent);
  --glow-gold:  0 0 0 1px rgba(201,154,46,.55), 0 18px 50px rgba(201,154,46,.28);
}

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

/* ── Metallic gold text for italic accents and big numbers ── */
.lx-hero h1 em, .lx-h2 em, body .page-banner h1 em, .ap2-bio-heading em,
.lx-stat .stat-num, .lx-hero-chip strong, .lx-step::before, body .stats-bar .stat-num {
  background: var(--gold-text);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lxGoldFlow 7s ease-in-out infinite alternate;
}
@keyframes lxGoldFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ── Buttons: primary = polished gold with a shimmer sweep ── */
.btn-lime, .btn-gold,
.hero .btn-lime, .stats-bar .btn-lime, body .cta-strip .btn-lime, .perf-reel .btn-lime,
.lx-hero .btn-lime, .nav-links > a.nav-cta, .float-book-btn,
body .ap2-btn-gold, body .ap2-cta-btn, body .ap2-float-btn, body .ap2-sticky-book,
.site-footer .footer-cta-btn, .nav-mobile-cta .btn {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gold-metal) !important; background-size: 200% 100% !important;
  color: var(--ink) !important; border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(201,154,46,.28), inset 0 1px 0 rgba(255,255,255,.45);
  transition: background-position .6s var(--ease, ease), transform .25s, box-shadow .25s !important;
}
.btn-lime::before, .nav-links > a.nav-cta::before, .float-book-btn::before,
body .ap2-btn-gold::before, body .ap2-cta-btn::before, body .ap2-sticky-book::before, .site-footer .footer-cta-btn::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg);
  animation: lxShine 5.5s ease-in-out infinite;
}
@keyframes lxShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn-lime:hover, .nav-links > a.nav-cta:hover, .float-book-btn:hover,
body .ap2-btn-gold:hover, body .ap2-cta-btn:hover, .site-footer .footer-cta-btn:hover {
  background-position: 100% 50% !important; color: var(--ink) !important;
  transform: translateY(-2px); box-shadow: 0 14px 36px rgba(201,154,46,.42), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-outline-lime, .btn-outline-gold, body .ap2-cta-btn-outline {
  border-color: #C99A2E !important; color: var(--ink) !important; background: rgba(255,255,255,.6);
}
.btn-outline-lime:hover, .btn-outline-gold:hover, body .ap2-cta-btn-outline:hover {
  background: var(--gold-wash, #F7EFD9) !important; box-shadow: var(--glow-gold);
}

/* ── Nav: gold hairline, gold underline on hover ── */
.site-nav { border-bottom: 0 !important; }
.site-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-line); opacity: .9; }
.nav-links > a:not(.nav-cta), .nav-dropdown > .nav-parent { position: relative; }
.nav-links > a:not(.nav-cta)::after, .nav-dropdown > .nav-parent::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
  background: var(--gold-metal); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease, ease);
}
.nav-links > a:not(.nav-cta):hover::after, .nav-dropdown:hover > .nav-parent::after,
.nav-links > a.active::after, .nav-parent.active::after { transform: scaleX(1); }
.nav-links > a:hover, .nav-dropdown:hover > .nav-parent { background: transparent !important; }
.dropdown-menu { border-top: 2px solid #D8B04F !important; }
.dropdown-menu a:hover { background: var(--gold-wash, #F7EFD9) !important; }
.top-bar { background: linear-gradient(90deg, #FBF6EA, #F7EFD9 50%, #FBF6EA) !important; }
.lang-opt[aria-pressed="true"] { background: var(--gold-metal) !important; background-size: 200% 100%; color: var(--ink) !important; }

/* ── Hero: moving gold aurora, framed media, sparkles ── */
.lx-hero, body .page-banner, body .faq-hero-dark, body .sound-hero, .lx-cta { position: relative; overflow: hidden; isolation: isolate; }
.lx-hero::before, body .page-banner::before, body .faq-hero-dark::before, body .sound-hero::after, .lx-cta::before {
  content: ''; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(35% 30% at 20% 30%, rgba(241,217,143,.55), transparent 70%),
    radial-gradient(30% 28% at 80% 20%, rgba(201,154,46,.35), transparent 70%),
    radial-gradient(40% 35% at 65% 85%, rgba(247,231,180,.6), transparent 70%);
  filter: blur(20px);
  animation: lxAurora 18s ease-in-out infinite alternate;
}
@keyframes lxAurora {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-2%, 5%, 0) rotate(-6deg) scale(1.02); }
}
.lx-hero-frame { box-shadow: 0 30px 80px rgba(23,20,15,.18), 0 0 0 1px rgba(201,154,46,.5) !important; }
.lx-hero-media::before {
  content: ''; position: absolute; inset: -14px; border-radius: 36px; z-index: -1;
  background: conic-gradient(from var(--lx-angle), #F1D98F, #C99A2E, #FBEBB5, #8A650C, #F1D98F);
  opacity: .55; filter: blur(18px);
  animation: lxSpin 10s linear infinite;
}
.lx-hero-media { isolation: isolate; }
@keyframes lxSpin { to { --lx-angle: 360deg; } }
.lx-hero-chip { border: 1px solid rgba(201,154,46,.45) !important; }
.lx-hero-kicker b { background: var(--gold-metal) !important; background-size: 200% 100%; color: var(--ink) !important; }

.lx-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.lx-sparkles i {
  position: absolute; width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%;
  background: radial-gradient(circle, #FFF6D6 0%, #F1D98F 35%, rgba(201,154,46,0) 70%);
  opacity: 0; animation: lxSparkle var(--d, 6s) ease-in-out var(--delay, 0s) infinite;
}
.lx-sparkles i::before, .lx-sparkles i::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255,240,190,.9);
  transform: translate(-50%, -50%);
}
.lx-sparkles i::before { width: 1px; height: calc(var(--s, 6px) * 2.6); }
.lx-sparkles i::after  { height: 1px; width: calc(var(--s, 6px) * 2.6); }
@keyframes lxSparkle {
  0%   { opacity: 0; transform: translateY(12px) scale(.4) rotate(0deg); }
  25%  { opacity: 1; }
  60%  { opacity: .8; transform: translateY(-26px) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translateY(-60px) scale(.3) rotate(90deg); }
}
.lx-hero > .lx-wrap, body .page-banner > *, .lx-cta > * { position: relative; z-index: 1; }

/* Headline entrance: words rise in with a soft blur */
.lx-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: lxWordIn .8s var(--ease, ease) forwards; }
@keyframes lxWordIn { to { opacity: 1; transform: none; filter: blur(0); } }

/* ── Venues: rich ink band with gold type (one dramatic moment) ── */
.lx-venues { background: #17140F !important; border-block: 1px solid #3a2f18 !important; }
.lx-venues .venue-name { color: #F1D98F !important; font-style: italic; }
.lx-venues .venue-name::before { content: '\2726'; font-style: normal; color: #8A650C; margin-right: 44px; font-size: .8rem; }
.lx-venues .venues-label { color: #E2BC5A !important; }

/* ── Eyebrows: animated gold rule ── */
.lx-eyebrow::before, body .srv-detail-eyebrow::before { background: var(--gold-metal) !important; height: 1.5px !important; width: 30px; }
.reveal .lx-eyebrow::before, .reveal.lx-eyebrow::before { width: 0; transition: width .9s var(--ease, ease) .2s; }
.reveal.visible .lx-eyebrow::before, .reveal.visible.lx-eyebrow::before { width: 30px; }
.lx-h2::after, body .section__head h2::after {
  content: ''; display: block; width: 64px; height: 2px; margin-top: 18px; border-radius: 2px;
  background: var(--gold-metal); background-size: 200% 100%; animation: lxGoldFlow 5s ease-in-out infinite alternate;
}
.lx-head--center .lx-h2::after, body .section__head h2::after, .lx-cta .lx-h2::after { margin-left: auto; margin-right: auto; position: static; transform: none; }

/* ── Richer reveals ── */
.reveal { transform: translateY(34px) scale(.985); transition: opacity .9s var(--ease, ease), transform .9s var(--ease, ease) !important; }
.reveal.visible { transform: none; }

/* ── Cards: gold glow on hover, gentle lift ── */
.lx-occ, .lx-artist-photo, .lx-result, .lx-step, .lx-nation-item, .lx-opt, body .why-card, body .testimonial-card,
body .srv-card, body .artist-thumb, body .sound-service-card, body .ap2-ec-card, body .ap2-band-card-face, .lx-bundle {
  transition: transform .45s var(--ease, ease), box-shadow .45s var(--ease, ease), border-color .3s !important;
}
.lx-occ:hover, .lx-artist:hover .lx-artist-photo, .lx-result:hover, .lx-step:hover, .lx-nation-item:hover,
body .why-card:hover, body .testimonial-card:hover, body .srv-card:hover, body .artist-thumb:hover, body .sound-service-card:hover, body .ap2-ec-card:hover {
  box-shadow: var(--glow-gold) !important;
}
.lx-step:hover, body .why-card:hover, body .sound-service-card:hover { transform: translateY(-6px); }
.lx-step { border: 1.5px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, var(--gold-soft) border-box !important; }
.lx-occ-go { background: var(--gold-metal) !important; background-size: 200% 100%; color: var(--ink) !important; }
.lx-occ::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(241,217,143,0); transition: box-shadow .4s;
}
.lx-occ:hover::after { box-shadow: inset 0 0 0 2px rgba(241,217,143,.85); }
.lx-artist strong { transition: color .3s; }
.lx-artist:hover strong { color: var(--gold-dk, #A67C12); }
.lx-nation-item svg { background: var(--gold-metal) !important; background-size: 200% 100%; color: var(--ink) !important; }
.lx-chip { border-color: rgba(201,154,46,.55) !important; }
.lx-chip:hover { background: var(--gold-wash, #F7EFD9) !important; box-shadow: var(--glow-gold) !important; }
.lx-round:hover { background: var(--gold-metal) !important; color: var(--ink) !important; border-color: transparent !important; }

/* ── Matchmaker: rotating gold border, gold selections ── */
.lx-match {
  border: 1.5px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box,
              conic-gradient(from var(--lx-angle), #F1D98F, #C99A2E, #FBEBB5, #8A650C, #F1D98F) border-box !important;
  animation: lxSpin 12s linear infinite;
}
.lx-match-progress span.on { background: var(--gold-metal) !important; background-size: 200% 100%; }
.lx-opt:hover { border-color: #D8B04F !important; }
.lx-opt[aria-pressed="true"] { border-color: #C99A2E !important; background: var(--gold-wash, #F7EFD9) !important; box-shadow: inset 0 0 0 1px #C99A2E, 0 10px 30px rgba(201,154,46,.22) !important; }
.lx-opt[aria-pressed="true"]::after { background: var(--gold-metal) !important; color: var(--ink) !important; }
.lx-opt-icon { transition: transform .35s var(--ease, ease); }
.lx-opt:hover .lx-opt-icon { transform: scale(1.15) rotate(-6deg); }
.lx-result-badge { background: var(--gold-metal) !important; color: var(--ink) !important; }

/* ── Quotes, FAQ, bundle ── */
.lx-quote blockquote::before { content: '\201C'; display: block; font-size: 4.5rem; line-height: .6; margin-bottom: 8px;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lx-quote-dots button.active { background: var(--gold-metal) !important; }
.lx-faq details[open] summary::after { background: var(--gold-metal) !important; color: var(--ink) !important; border-color: transparent !important; }
.lx-faq summary:hover { color: var(--gold-dk, #A67C12); }
.lx-bundle-list li::before { background: var(--gold-metal) !important; color: var(--ink) !important; }
.lx-reel-play { background: var(--gold-metal) !important; box-shadow: 0 0 0 10px rgba(241,217,143,.28), 0 10px 40px rgba(0,0,0,.3) !important; animation: lxPulse 2.6s ease-out infinite; }
@keyframes lxPulse { 0% { box-shadow: 0 0 0 0 rgba(241,217,143,.55), 0 10px 40px rgba(0,0,0,.3); } 100% { box-shadow: 0 0 0 26px rgba(241,217,143,0), 0 10px 40px rgba(0,0,0,.3); } }

/* ── Final CTA: gold frame ── */
.lx-cta { border: 1.5px solid transparent;
  background: radial-gradient(600px 300px at 90% 0%, rgba(226,188,90,.35), transparent 60%) padding-box,
              linear-gradient(#FBF3DD, #F7EFD9) padding-box,
              conic-gradient(from var(--lx-angle), #F1D98F, #C99A2E, #FBEBB5, #8A650C, #F1D98F) border-box !important;
  animation: lxSpin 14s linear infinite; }
body .cta-strip { border-block: 1px solid rgba(201,154,46,.45) !important; }

/* ── Footer & inner pages ── */
.site-footer { position: relative; border-top: 0 !important; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-line); }
.footer-col h4 { color: var(--gold-ink, #8A650C) !important; }
body .process-step-num { background: var(--gold-metal) !important; background-size: 200% 100%; color: var(--ink) !important; border: 0 !important; }
body .srv-card-name, body .artist-thumb-info h3 { transition: letter-spacing .4s; }
body .srv-card:hover .srv-card-name { letter-spacing: .01em; }
body .ap2-band-title, body .ap2-bio-heading { position: relative; }
body .testimonial-card .t-stars, .lx-stars, .tb-stars, .footer-stars { color: #D8B04F !important; text-shadow: 0 0 12px rgba(241,217,143,.6); }

/* Parallax hooks (set by motion.js) */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .lx-word { opacity: 1; transform: none; filter: none; }
  .lx-sparkles { display: none; }
  [data-parallax] { transform: none !important; }
}

/* ── Phone quick-booking dock (Call · Text · Check availability) ── */
.m-dock { display: none; }
@media (max-width: 768px) {
  .m-dock {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 9500;
    display: grid; grid-template-columns: auto auto 1fr; gap: 8px; padding: 8px;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-radius: 20px; border: 1px solid rgba(201,154,46,.45); box-shadow: 0 14px 40px rgba(23,20,15,.22);
    transform: translateY(140%); transition: transform .45s cubic-bezier(.22,.8,.26,1);
  }
  .m-dock.visible { transform: none; }
  .m-dock-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; padding: 6px 8px; border-radius: 14px; color: #17140F; font: 600 .72rem var(--font-ui, sans-serif); background: var(--ivory, #FBF8F2); }
  .m-dock-btn svg { width: 20px; height: 20px; color: #8A650C; }
  .m-dock-main { display: grid; place-items: center; border-radius: 14px; font: 650 .95rem var(--font-ui, sans-serif); color: #17140F !important;
    background: var(--gold-metal); background-size: 200% 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
  .float-book-btn, .ap2-float-btn { display: none !important; }
  .back-to-top { bottom: 96px !important; }
  .cookie-banner { bottom: 86px !important; }
}
.cookie-banner:not(.visible) { visibility: hidden; transition: transform .4s, visibility 0s .4s; }

/* Homepage roster: continuous slide (driven by home.js), no snapping */
#lx-rail { scroll-snap-type: none; scroll-behavior: auto; }
#lx-rail .lx-artist { scroll-snap-align: none; }
#lx-rail:hover .lx-artist:not(:hover) .lx-artist-photo { filter: saturate(.7) brightness(.92); }
#lx-rail .lx-artist-photo { transition: transform .5s, box-shadow .5s, filter .4s !important; }