/* ============================================================
   BETTER PARKER — Design System v2 "Proven Dubai"
   Display: Fraunces (stand-in for Canela Deck — license to buy)
   Body:    Instrument Sans (stand-in for Söhne)
   Palette: warm white / deep navy-ink / champagne gold (scarce)
   ============================================================ */

:root {
  color-scheme: only light;
  --bg:        #FAFAF7;
  --bg-2:      #F1EFE9;
  --sand-1:    #E4DED2;
  --sand-2:    #D6CDBC;
  --sand-3:    #B9AE99;
  --mute:      #8E8574;
  --ink:       #131722;
  --dark:      #0D1117;
  --dark-2:    #141A24;
  --gold:      #B9975B;
  --gold-2:    #D4B36A;
  --bone:      #EDEAE2;
  --font-display: "neue-haas-unica", "Instrument Sans", sans-serif;
  --font-serif: "freight-big-pro", "Fraunces", serif;
  --font-body: "neue-haas-unica", "Instrument Sans", sans-serif;
}

html { scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: var(--dark); }

/* ---------- Typography ---------- */
.display { font-family: var(--font-display); line-height: 0.98; letter-spacing: -0.035em; }
.h-hero    { font-size: clamp(3.2rem, 8vw, 8.2rem); font-weight: 700; }
.h-section { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 700; }
.h-card    { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; }
/* serif reserved for the single italic accent word — the one classical note */
.display em, em.gold { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.eyebrow--light { color: var(--gold-2); }
.body-lg { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.65; font-weight: 380; }
em.gold { color: var(--gold-2); font-style: italic; }

/* ---------- Image treatment: one grade for every photo ---------- */
.img-grade { position: relative; overflow: hidden; }
.img-grade img, .img-grade video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04) brightness(.98) sepia(.06); }
.img-grade::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,17,23,.05), rgba(13,17,23,.18)); pointer-events:none; }

/* Ken Burns */
.kenburns img { animation: kb 24s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.09); } }

/* Clip reveal (activated by JS) */
.clip-reveal { clip-path: inset(0 0 94% 0); }
.clip-reveal.is-in { clip-path: inset(0 0 0% 0); transition: clip-path 1.3s cubic-bezier(.65,.02,.23,1); }

/* Fade-up primitive (JS adds .is-in) */
[data-reveal] { opacity: 0; transform: translateY(36px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }

/* Split-line hero (JS wraps lines) */
.split-line { display: block; overflow: hidden; }
.split-line > span { display: block; transform: translateY(110%); }
.lines-in .split-line > span { transform: none; transition: transform 1.15s cubic-bezier(.65,.02,.23,1); }
.lines-in .split-line:nth-child(2) > span { transition-delay: .12s; }
.lines-in .split-line:nth-child(3) > span { transition-delay: .24s; }

/* ---------- Buttons & links ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  padding: 1.05rem 2.2rem; position: relative; overflow: hidden; z-index: 0;
  transition: color .45s cubic-bezier(.65,.02,.23,1); cursor: pointer; }
.btn::before { content:""; position:absolute; inset:0; z-index:-1; transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.65,.02,.23,1); }
.btn:hover::before { transform: scaleX(1); }
.btn-gold { background: var(--gold); color: var(--dark); }
.btn-gold::before { background: var(--bone); }
.btn-dark { background: var(--ink); color: var(--bone); }
.btn-dark::before { background: var(--gold); }
.btn-dark:hover { color: var(--dark); }
.btn-ghost { border: 1px solid rgba(19,23,34,.28); color: var(--ink); background: transparent; }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--bone); }
.btn-ghost--light { border-color: rgba(237,234,226,.4); color: var(--bone); }
.btn-ghost--light::before { background: var(--bone); }
.btn-ghost--light:hover { color: var(--dark); }

/* underline-draw link */
.link-draw { position: relative; text-decoration: none; }
.link-draw::after { content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s cubic-bezier(.65,.02,.23,1); }
.link-draw:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Forms: underline register ---------- */
.input-lux { background: transparent; border: 0; border-bottom: 1px solid var(--sand-2);
  padding: 1rem .2rem; font-size: .95rem; width: 100%; color: var(--ink); border-radius: 0;
  transition: border-color .4s; }
.input-lux:focus { outline: none; border-bottom-color: var(--gold); }
.input-lux::placeholder { color: var(--sand-3); }
select.input-lux { color: var(--mute); }
.dark-scope .input-lux { border-bottom-color: rgba(237,234,226,.25); color: var(--bone); }
.dark-scope .input-lux::placeholder { color: rgba(237,234,226,.4); }
.dark-scope select.input-lux { background: transparent; color: rgba(237,234,226,.7); }
.dark-scope select.input-lux option { color: var(--ink); background: var(--bone); }

/* ---------- Cards: borderless, shadow separation ---------- */
.card { background: #FFFFFF; box-shadow: 0 1px 2px rgba(13,17,23,.05), 0 12px 40px -18px rgba(13,17,23,.14);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(13,17,23,.06), 0 28px 60px -20px rgba(13,17,23,.24); }
.badge { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  padding: .35rem .7rem; background: var(--dark); color: var(--gold-2); }

/* ---------- Dark sections ---------- */
.dark-scope { background: var(--dark); color: var(--bone); }
.dark-scope .card { background: var(--dark-2); box-shadow: 0 12px 40px -18px rgba(0,0,0,.5); }

/* ---------- Preloader ---------- */
#preloader { position: fixed; inset: 0; z-index: 100; background: var(--dark);
  display: flex; align-items: center; justify-content: center; transition: clip-path .9s cubic-bezier(.65,.02,.23,1); }
#preloader.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
#preloader .bp-mono { font-family: var(--font-display); font-size: clamp(3rem,7vw,5.5rem); color: var(--gold-2);
  letter-spacing: -0.04em; opacity: 0; animation: mono-in 1s .1s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes mono-in { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform:none; } }

/* ---------- Page wipe ---------- */
#page-wipe { position: fixed; inset: 0; z-index: 99; background: var(--dark); transform: scaleY(0);
  transform-origin: bottom; pointer-events: none; }
#page-wipe.active { animation: wipe .8s cubic-bezier(.65,.02,.23,1) forwards; }
@keyframes wipe { to { transform: scaleY(1); } }

/* ---------- Cursor dot ---------- */
#cursor-dot { position: fixed; width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
  pointer-events: none; z-index: 200; transform: translate(-50%,-50%); transition: width .3s, height .3s, opacity .3s;
  mix-blend-mode: difference; opacity: 0; }
body:hover #cursor-dot { opacity: 1; }
#cursor-dot.grow { width: 44px; height: 44px; }
@media (pointer: coarse) { #cursor-dot { display: none; } }

/* ---------- WhatsApp pill ---------- */
#wa-pill { position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 60; display: flex; align-items: center; gap: .6rem;
  background: var(--gold); color: var(--dark); padding: .9rem 1.4rem; border-radius: 999px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 16px 40px -12px rgba(13,17,23,.45); transition: all .45s cubic-bezier(.22,1,.36,1); text-decoration: none; }
#wa-pill .wa-label { max-width: 200px; overflow: hidden; white-space: nowrap; transition: max-width .45s, opacity .3s; }
#wa-pill.mini .wa-label { max-width: 0; opacity: 0; }
#wa-pill.mini { padding: .9rem; }
#wa-pill:hover { background: var(--gold-2); }

/* ---------- Ticket stub (roadshow registration) ---------- */
.ticket { background: #fff; position: relative; box-shadow: 0 24px 60px -24px rgba(13,17,23,.3); }
.ticket::before, .ticket::after { content:""; position:absolute; width:26px; height:26px; border-radius:50%;
  background: var(--bg-2); top: 50%; transform: translateY(-50%); }
.ticket::before { left: -13px; } .ticket::after { right: -13px; }
.ticket-divider { border-top: 2px dashed var(--sand-2); }

/* seats bar */
.seats-bar { height: 4px; background: var(--sand-1); position: relative; }
.seats-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--gold); }

/* ---------- Reduced motion: kill everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .kenburns img { animation: none; }
  [data-reveal], .clip-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .split-line > span { transform: none !important; }
  #preloader { display: none; }
  #cursor-dot { display: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== Aesthetics pass v3 ===== */
/* A2: unified warm-teal grade */
.img-grade img, .img-grade video { filter: saturate(.84) contrast(1.07) brightness(.97) sepia(.09) hue-rotate(-5deg); }
/* C11: card title gold sweep + arrow slide */
.card h3 { position: relative; }
.card h3::after { content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--gold); transition:width .5s cubic-bezier(.65,.02,.23,1); }
.card:hover h3::after { width:2.4rem; }
.card .link-draw::after { transition-delay:.05s; }
/* D15: pull-quote for Parker Verdict */
.pull-quote { position:relative; padding-left:2.4rem; }
.pull-quote::before { content:"\201C"; font-family:var(--font-serif); font-size:5rem; color:var(--gold); position:absolute; left:0; top:-1.2rem; line-height:1; opacity:.9; }
/* B7: oversized margin numerals */
.section-num { font-family:var(--font-serif); font-size:clamp(3rem,6vw,5.5rem); color:var(--gold); opacity:.32; line-height:1; font-style:italic; }
/* B8: footer BP watermark */
footer.dark-scope { position:relative; overflow:hidden; }
footer.dark-scope::after { content:"BP"; position:absolute; right:-1.5rem; bottom:-4rem; font-family:var(--font-serif); font-style:italic; font-size:17rem; color:rgba(237,234,226,.045); pointer-events:none; line-height:1; }
/* C9: gold em pulse on hero clip change */
@keyframes goldPulse { 0%{opacity:.45} 100%{opacity:1} }
.em-pulse em { animation: goldPulse 1.4s cubic-bezier(.22,1,.36,1); }
/* B6: full-bleed breather band */
.breather { min-height:52vh; display:flex; align-items:center; }
.dark-scope.texture { background-image: linear-gradient(rgba(13,17,23,.88), rgba(13,17,23,.92)), url('img/bp-texture-dark.jpg'); background-size: cover; }