/* /velvetrouge - The Velvet Rouge, hosted client page (v2, phone first).
   Her brand: oxblood velvet, champagne gold #D1A667, Optima capitals (her logo tagline face; a serif off Apple).
   Scroll effects read --p (0..1) set by velvetrouge.js; with no JS or reduced motion the page is static and complete. */

:root {
  --gold: #d1a667;
  --gold-hi: #e2c086;
  --gold-lo: #b88d56;
  --line: #c9a066;
  --ink: #0a0202;
  --face: Optima, "Optima Nova", Candara, "Segoe UI", "Palatino Linotype", Palatino, serif;
  --col: 600px;                       /* the page is one phone-width column, also on desktop */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.vr { background: var(--ink); color: var(--gold); font-family: var(--face); -webkit-font-smoothing: antialiased; text-align: center; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }

.vr-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 90% 60% at 50% 30%, #2a0607 0%, #1e0403 34%, #0e0202 68%, #050100 100%); }
.vr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { max-width: var(--col); margin: 0 auto; position: relative; }

/* ---- reading progress, a gold hairline across the top */
.vr-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; pointer-events: none; }
.vr-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---- reveal on scroll (.rv gets .in from the observer). No JS = everything visible. */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv--img { transform: none; clip-path: inset(14% 0 0 0); transition: opacity .9s var(--ease), clip-path 1.1s var(--ease); }
.js .rv--img.in { clip-path: inset(0 0 0 0); }

/* ---- hero: her logo animation fills the phone (rendered at 19.5:9) */
.vr-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.vr-hero__v { width: 100%; height: 100%; object-fit: cover; background: #0b0202; }
.vr-cue { position: absolute; left: 50%; bottom: calc(12svh + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--gold-lo); text-decoration: none;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase; opacity: 0; animation: vr-in 1s 3.2s var(--ease) forwards; }
.vr-cue i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: vr-drip 2.2s 3.6s ease-in-out infinite; }
@keyframes vr-in { to { opacity: 1; } }
@keyframes vr-drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---- intro: the words light up as you scroll through them */
.vr-intro { padding: 22svh 26px 16svh; }
.vr-words { font-size: clamp(30px, 9.2vw, 50px); line-height: 1.22; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); }
.js .vr-words .w { opacity: .14; transition: opacity .5s ease, color .5s ease; }
.js .vr-words .w.lit { opacity: 1; }
.vr-styles { margin-top: 34px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.vr-dot { font-size: .6em; vertical-align: .2em; margin: 0 .6em; color: var(--line); }
.vr-twist { margin-top: 12px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-lo); }

/* ---- section label: gold rule, diamond, words */
.vr-label { display: flex; align-items: center; gap: 14px; padding: 0 22px; margin-bottom: 26px; font-weight: 400;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.vr-label::before, .vr-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.vr-label::after { background: linear-gradient(90deg, var(--line), transparent); }
.vr-label span::before, .vr-label span::after { content: "\25C6"; font-size: 7px; vertical-align: 2px; margin: 0 9px; color: var(--line); }

/* ---- the film: as wide as the phone, autoplays muted in view */
.vr-film { padding: 4svh 0 14svh; }
.vr-film__frame { position: relative; margin: 0 14px; padding: 5px; border: 1px solid var(--line); background: rgba(5, 1, 1, .7);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.vr-film__frame video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.vr-sound { position: absolute; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(10, 2, 2, .62); color: var(--gold-hi); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vr-sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vr-sound .spk { fill: currentColor; stroke: none; }
.vr-sound .on, .vr-sound[aria-pressed="true"] .off { display: none; }
.vr-sound[aria-pressed="true"] .on { display: inline; }

/* ---- chapters: a full-screen photo that eases out of a zoom while it is pinned, title rising */
.vr-ch { position: relative; height: 165svh; }
.vr-ch__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.vr-ch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.16 - .16 * var(--p, 1))); transform-origin: 50% 40%; will-change: transform; }
.vr-ch__shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 2, 2, .55) 0%, rgba(10, 2, 2, 0) 26%, rgba(10, 2, 2, 0) 52%, rgba(10, 2, 2, .82) 100%); }
.vr-ch__num { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 22px; display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .3em; color: var(--gold-hi); }
.vr-ch__num i { width: 34px; height: 1px; background: var(--line); }
.vr-ch__title { position: absolute; left: 50%; bottom: calc(15svh + env(safe-area-inset-bottom)); width: min(82%, 480px);
  transform: translate(-50%, calc((1 - var(--p, 1)) * 60px)); opacity: calc(.15 + var(--p, 1) * 1.8);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .7)); }
.vr-ch__title img { width: 100%; height: auto; }

/* ---- swipe strips: big cards that snap to the centre, the next one peeking in */
.vr-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 11% 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.vr-strip::-webkit-scrollbar { display: none; }
.vr-card { flex: 0 0 78%; aspect-ratio: 3 / 4; scroll-snap-align: center; overflow: hidden; border: 1px solid rgba(201, 160, 102, .55); background: #0b0202; }
.vr-card--wide { flex-basis: 88%; aspect-ratio: 16 / 9; align-self: center; }
.vr-card img, .vr-card video { width: 100%; height: 100%; object-fit: cover; }
.vr-swipe { margin: 10px 0 12svh; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-lo); }
.vr-swipe span { display: inline-block; animation: vr-nudge 1.8s ease-in-out infinite; }
@keyframes vr-nudge { 50% { transform: translateX(6px); } }

/* ---- what we offer: numbered, each line slides in on its own */
.vr-offer { padding: 4svh 0 10svh; }
.vr-offer__list { list-style: none; margin: 0 22px; text-align: left; }
.vr-offer__list li { display: flex; align-items: baseline; gap: 18px; padding: 20px 2px; border-bottom: 1px solid rgba(201, 160, 102, .28); }
.vr-offer__list li:first-child { border-top: 1px solid rgba(201, 160, 102, .28); }
.js .vr-offer__list li.rv { transform: translateX(-24px); }
.js .vr-offer__list li.rv.in { transform: none; }
.vr-offer__n { flex: none; width: 2.2em; font-size: 12px; letter-spacing: .2em; color: var(--gold-lo); }
.vr-offer__t { font-size: clamp(17px, 5vw, 22px); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); line-height: 1.3; }

/* ---- contact */
.vr-contact { padding: 6svh 22px 4svh; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.vr-contact .vr-label { padding: 0; }
.vr-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 18px;
  border: 1px solid var(--line); color: var(--gold-hi); text-decoration: none; font-size: 15px; letter-spacing: .06em;
  transition: background .25s ease; }
.vr-btn:hover, .vr-btn:focus-visible { background: rgba(209, 166, 103, .12); }
.vr-btn--solid { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--ink); border-color: transparent; }
.vr-btn--solid:hover, .vr-btn--solid:focus-visible { background: linear-gradient(180deg, #ecd09c, var(--gold-hi) 55%, var(--gold)); }
.vr-ic { width: 20px; height: 20px; flex: none; }
.vr-place { margin-top: 18px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-lo); }
.vr-foot { padding: 7svh 18px calc(110px + env(safe-area-inset-bottom)); }
.vr-foot a { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(209, 166, 103, .5); text-decoration: none; }

/* ---- contact dock: slides up after the hero */
.vr-dock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 8px; padding: 6px;
  width: min(calc(100% - 28px), 420px); transform: translate(-50%, 140%); transition: transform .5s var(--ease);
  border: 1px solid rgba(201, 160, 102, .5); background: rgba(14, 3, 3, .72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.vr-dock.show { transform: translate(-50%, 0); }
.vr-dock a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; color: var(--gold-hi); text-decoration: none;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.vr-dock a:first-child { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--ink); }
.vr-dock .vr-ic { width: 17px; height: 17px; }

/* ---- desktop: the same phone column, centred; the hero shows the whole logo instead of cropping */
@media (min-width: 700px) {
  main { border-left: 1px solid rgba(201, 160, 102, .18); border-right: 1px solid rgba(201, 160, 102, .18); }
  .vr-hero__v { object-fit: contain; }
  .vr-strip { padding-left: 14%; padding-right: 14%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .rv--img, .js .vr-offer__list li.rv { opacity: 1; transform: none; clip-path: none; transition: none; }
  .vr-ch__img, .vr-ch__title { transform: none; opacity: 1; }
  .js .vr-words .w { opacity: 1; }
  .vr-cue, .vr-cue i, .vr-swipe span { animation: none; opacity: 1; }
}