/* The painted opener, after KL Flora's: an old-master flower painting with "Wynn's" set across it.
   As you scroll, the blooms part and fly out of the frame one after another, the leaves follow, the canvas
   darkens into the site's ink, and the line and buttons rise in under the name.
   opener.js sets --e (the push-in), each layer's own --e, --bg (the ink), --c1/--c2 (the copy), --cue. */
.opener { position: relative; padding: 0; height: 260svh; background: var(--ink); color: #fff; }
.op-stage { background: #15110d var(--ph) 50% 50% / cover no-repeat; position: sticky; top: var(--hd-h, 65px); height: calc(100svh - var(--hd-h, 65px)); min-height: 480px; overflow: hidden; }
.op-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.op-back { z-index: 0; transform: scale(calc(1.02 + var(--e, 0) * .06)); transform-origin: 50% 60%; }
/* First frame: one combined picture (painting, leaves and the left blooms) shows straight away;
   opener.js swaps in the separate moving layers once every one of them has loaded. */
.op-first { z-index: 3; transition: opacity .2s; }
.opener.is-ready .op-first { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
/* the canvas settling into the site's ink */
.op-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ink); opacity: calc(var(--bg, 0) * .92); pointer-events: none; }

.op-leaf, .op-bloom { position: absolute; inset: 0; pointer-events: none; will-change: transform;
  transform: translate(calc(var(--e, 0) * var(--x)), calc(var(--e, 0) * var(--y))) rotate(calc(var(--e, 0) * var(--r))) scale(calc(1 + var(--e, 0) * var(--s))); }
.op-leaf { z-index: 2; filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.op-bloom { filter: drop-shadow(0 18px 28px rgba(0,0,0,.5)); }
.op-tl, .op-bl { z-index: 3; }
.op-title { z-index: 4; }
.op-tr, .op-br { z-index: 5; }
.op-copy, .op-cue { z-index: 6; }

/* leaves drift out past the edges after the blooms */
.op-l-tl { --x: -40vw; --y: -30vh; --r: -14deg; --s: .2; transform-origin: 0% 30%; }
.op-l-tc { --x: 4vw;   --y: -60vh; --r: 8deg;   --s: .15; transform-origin: 50% 0%; }
.op-l-tr { --x: 42vw;  --y: -30vh; --r: 14deg;  --s: .2; transform-origin: 100% 30%; }
.op-l-bl { --x: -42vw; --y: 34vh;  --r: -12deg; --s: .22; transform-origin: 0% 100%; }
.op-l-bc { --x: 0vw;   --y: 60vh;  --r: -6deg;  --s: .18; transform-origin: 50% 100%; }
.op-l-br { --x: 44vw;  --y: 34vh;  --r: 12deg;  --s: .22; transform-origin: 100% 100%; }
/* blooms fly out of the frame, each its own way */
.op-tl { --x: -70vw; --y: -55vh; --r: -24deg; --s: .3; transform-origin: 15% 15%; }
.op-tr { --x: 70vw;  --y: -58vh; --r: 22deg;  --s: .3; transform-origin: 80% 5%; }
.op-bl { --x: -78vw; --y: 50vh;  --r: -18deg; --s: .4; transform-origin: 10% 80%; }
.op-br { --x: 80vw;  --y: 56vh;  --r: 16deg;  --s: .42; transform-origin: 85% 85%; }

/* the name: it holds still in the middle of the painting the whole way */
.op-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 16vh; text-align: center; color: #f6f1e7; pointer-events: none; text-wrap: nowrap; }
.op-name { font: 500 clamp(4.5rem, 2rem + 13vw, 15rem)/.86 var(--fd); font-variation-settings: "opsz" 72; letter-spacing: -.045em;
  text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.op-sub { margin-top: .45em; font: italic 400 clamp(1.375rem, 1rem + 1.6vw, 2.5rem)/1 var(--fd); text-shadow: 0 1px 18px rgba(0,0,0,.6); }

/* the line and the buttons rise in under the name */
.op-copy { position: absolute; left: 50%; bottom: 9vh; width: min(620px, calc(100% - 32px)); transform: translateX(-50%);
  text-align: center; color: #f6f1e7; pointer-events: none; }
.opener.is-copy .op-copy { pointer-events: auto; }
.op-lead { font: italic 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.12 var(--fd); opacity: var(--c1, 0); translate: 0 calc((1 - var(--c1, 0)) * 24px); }
.op-detail { margin-top: 10px; font-weight: 500; opacity: var(--c1, 0); translate: 0 calc((1 - var(--c1, 0)) * 24px); }
.op-copy .row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; opacity: var(--c2, 0); translate: 0 calc((1 - var(--c2, 0)) * 20px); }
.btn-ghost { background: rgba(15,20,25,.25); color: #fff; border-color: rgba(255,255,255,.8); }
.btn-ghost:hover { background: rgba(15,20,25,.55); }
.opener :focus-visible { outline-color: #fff; }
.op-cue { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
  color: #f6f1e7; text-shadow: 0 1px 10px rgba(0,0,0,.85); opacity: var(--cue, 1); pointer-events: none; }
.op-cue::after { content: ""; display: block; width: 1px; height: 30px; margin: 8px auto 0; background: currentColor; opacity: .7; }

@media (max-width: 700px) {
  .opener { height: 230svh; }
  .op-layer { object-position: 74% 50%; }
  .op-stage { background-position: 74% 50%; }
  .op-title { justify-content: flex-start; padding: 13vh 16px 0; }
  .op-name { font-size: 27vw; }
  .op-copy { bottom: 11vh; }
  .op-cue { bottom: 84px; }   /* above the Call / Order bar */
}
/* Reduced motion: the finished frame, no scroll story */
@media (prefers-reduced-motion: reduce) {
  .opener { height: auto; }
  .op-stage { position: relative; top: 0; height: calc(100svh - 65px); }
  .op-leaf, .op-bloom, .op-back { transform: none !important; }
  .op-stage::after { opacity: .55; }
  .op-lead, .op-detail, .op-copy .row { opacity: 1; translate: none; }
  .op-copy { pointer-events: auto; }
  .op-cue { display: none; }
}