html, body { margin: 0; background: #fff; }
img, video { display: block; }

/* template's pill shimmer */
@keyframes t047-pill-shimmer { 0% { background-position: 150% 0; } 60%, 100% { background-position: -150% 0; } }
.t047-pill-shimmer { animation: t047-pill-shimmer 3s linear infinite; }

/* ---- framer-motion variants (z = cubic-bezier(.22,1,.36,1), s = cubic-bezier(.16,1,.3,1)) ---- */
[data-v] { transition-delay: var(--vd, 0s); }
[data-v="P"] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1.05s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1), filter 1.05s cubic-bezier(.22,1,.36,1); }
[data-v="E"] { opacity: 0; transform: translateY(16px); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
[data-v="M"] { opacity: 0; transition: opacity 1.2s cubic-bezier(.22,1,.36,1); }
[data-v="V"] { opacity: 0; transform: scaleX(.35); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.16,1,.3,1); }
[data-v="F"] { opacity: 0; transform: translateY(26px) scale(1.04); filter: blur(6px); transition: opacity 1.35s cubic-bezier(.16,1,.3,1), transform 1.35s cubic-bezier(.16,1,.3,1), filter 1.35s cubic-bezier(.16,1,.3,1); }
[data-v="Z"] { opacity: 0; transform: scale(1.12); transition: opacity 1.8s cubic-bezier(.16,1,.3,1), transform 1.8s cubic-bezier(.16,1,.3,1); }
[data-v="H"] { opacity: 0; transform: translateY(-20px); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
[data-v="R"] { opacity: 0; transform: scale(.5) translateY(8px); transition: opacity .35s ease-out, transform .6s cubic-bezier(.34,1.56,.64,1); }
[data-v="O"] { opacity: 0; transform: scale(.9); transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
[data-v].in { opacity: 1; transform: none; filter: none; }
/* keep whatever transition-delay was scheduled even after a variant's own `transition` shorthand */
[data-v].in, [data-v] { transition-delay: var(--vd, 0s); }

/* hero copy: fade + rise 26px over 1s, staggered */
[data-hero] { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.22,1,.36,1) var(--hd), transform 1s cubic-bezier(.22,1,.36,1) var(--hd); }
[data-hero].in { opacity: 1; transform: none; }

/* cover copy */
.vr-cover-names { animation: vr-rise 1.4s cubic-bezier(.22,1,.36,1) .55s both; }
.vr-cover-hint { animation: vr-fade 1.2s ease 1.1s both; }
@keyframes vr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vr-fade { from { opacity: 0; } to { opacity: 1; } }

/* masks from the template */
.vr-hero-mask { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,.88) 70%, rgba(0,0,0,.55) 84%, rgba(0,0,0,.18) 94%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,.88) 70%, rgba(0,0,0,.55) 84%, rgba(0,0,0,.18) 94%, rgba(0,0,0,0) 100%); }
/* Image is 686x1294: pulling it up by 55% of its width hides only sky behind the text. */
.vr-dress-img { margin-top: calc(-0.55 * min(100vw, 40rem)); }
.vr-dress-mask { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.85) 15%, #000 26%, #000 74%, rgba(0,0,0,.85) 85%, rgba(0,0,0,.35) 93%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.85) 15%, #000 26%, #000 74%, rgba(0,0,0,.85) 85%, rgba(0,0,0,.35) 93%, rgba(0,0,0,0) 100%); }
.vr-closing-mask { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 8%, rgba(0,0,0,.18) 16%, rgba(0,0,0,.38) 26%, rgba(0,0,0,.62) 36%, rgba(0,0,0,.85) 46%, #000 58%, #000 92%, rgba(0,0,0,.7) 97%, rgba(0,0,0,.35) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 8%, rgba(0,0,0,.18) 16%, rgba(0,0,0,.38) 26%, rgba(0,0,0,.62) 36%, rgba(0,0,0,.85) 46%, #000 58%, #000 92%, rgba(0,0,0,.7) 97%, rgba(0,0,0,.35) 100%); }
.vr-venue { filter: saturate(.75); }

@media (prefers-reduced-motion: reduce) {
  [data-v], [data-hero] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .t047-pill-shimmer, .vr-cover-names, .vr-cover-hint { animation: none; }
}

.vr-oneline { white-space: nowrap; font-size: min(1.45rem, 5.4vw); }

.vr-scratch { aspect-ratio: 1.5; touch-action: none; user-select: none; -webkit-user-select: none; }
:root { --wc-bg: #fffcf6; --wc-ink: #8a6a46; --wc-accent: #a2865c; --wc-line: #e4d5bf; --wc-font: "cormorant", Georgia, serif;
  --wf-bg: #eae3dc; --wf-ink: #8a6a46; --wf-line: rgba(201,175,142,.8); --wf-font: "cormorant", Georgia, serif; }
#vrScratch { border-radius: 12px; background: #fdfaf4; box-shadow: inset 0 0 0 1px rgba(201,175,142,.35); }
#vrScratch .font-pinyon { font-size: clamp(2rem, 8vw, 2.5rem); line-height: 1.2; }
#vrScratch .italic { font-size: 1.05rem; }
#vrScratch + *, .vr-scratch-frame { }
div:has(> #vrScratch) { border-radius: 18px; border-color: rgba(201,175,142,.7); padding: .5rem; }

/* Client: hero film lifted so the chandelier clears the (long) names */
#heroVideo[data-lift], #heroPoster[data-lift] { transform: translateY(-6%);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 97%); mask-image: linear-gradient(to bottom, #000 78%, transparent 97%); }
@media (min-width: 768px) { #heroVideo[data-lift], #heroPoster[data-lift] { transform: translateY(-9%); } }
