/* Mahogany Ridge introduction (mahogany-animation.js) and the hand-over to the venue page (mahogany-arrival.js).
   Timeline: gold line 0.06s → curtain opens 0.52s → flourishes unfurl 0.7s → letters 0.85–2.1s → shimmer 2s → original logo at 3.1s. */
.mr-intro{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;overflow:hidden;color:inherit;cursor:pointer}
.mr-intro::backdrop{background:transparent}
.mr-stage{position:absolute;left:50%;top:50%;width:min(96vw,calc(90vh * 2100 / 1500),1680px);aspect-ratio:2100/1500;transform:translate(-50%,-50%)}
.mr-layer{position:absolute;background:url(/assets/brand/mahogany-ridge-logo-gold.png) var(--bp)/var(--bs) no-repeat}
/* A light band that crosses each piece, masked to its exact shape. */
.mr-layer::after{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(100deg,transparent 30%,#fbe6b5f0 50%,transparent 70%) 150% 0/200% 100% no-repeat;-webkit-mask:url(/assets/brand/mahogany-ridge-logo-gold.png) var(--bp)/var(--bs) no-repeat;mask:url(/assets/brand/mahogany-ridge-logo-gold.png) var(--bp)/var(--bs) no-repeat}

/* Mahogany curtain, split by a gold line */
.mr-curtain{position:absolute;left:0;right:0;height:50.5%;z-index:2}
.mr-curtain-top{top:0;background:radial-gradient(130% 110% at 50% 100%,#8a2640 0%,#56122a 45%,#2b0812 100%)}
.mr-curtain-bottom{bottom:0;background:radial-gradient(130% 110% at 50% 0%,#8a2640 0%,#56122a 45%,#2b0812 100%)}
.mr-curtain::after{content:'';position:absolute;left:0;right:0;height:2px;opacity:0;background:linear-gradient(90deg,transparent,#ba9456 18%,#f7e4b3 50%,#ba9456 82%,transparent);box-shadow:0 0 16px 2px #f1d39599}
.mr-curtain-top::after{bottom:0}
.mr-curtain-bottom::after{top:0}
.mr-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:3;transform:scaleX(0);background:linear-gradient(90deg,transparent,#ba9456 15%,#fff1cc 50%,#ba9456 85%,transparent);box-shadow:0 0 24px 4px #f7dda58c}
.mr-sparks{position:absolute;inset:0;z-index:4;pointer-events:none}
.mr-spark{position:absolute;top:50%;left:var(--x);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;opacity:0;background:radial-gradient(circle,#fffbe9 0%,#f5d790 45%,transparent 72%)}
.mr-skip{position:absolute;right:20px;bottom:18px;z-index:5;background:transparent;color:#f3e2c3;border:1px solid #f3e2c366;border-radius:999px;padding:7px 15px;font:600 10px/1.4 var(--sans,sans-serif);letter-spacing:1.6px;text-transform:uppercase}
.mr-skip:focus-visible{outline:2px solid #c9a46a;outline-offset:3px}

/* The timeline, once the artwork has loaded */
.mr-intro.is-playing .mr-line{animation:mr-line .95s cubic-bezier(.6,0,.2,1) 60ms both}
.mr-intro.is-playing .mr-curtain::after{animation:mr-edge 1s ease 450ms both}
.mr-intro.is-playing .mr-curtain-top{animation:mr-open-up .9s cubic-bezier(.76,0,.2,1) 520ms both}
.mr-intro.is-playing .mr-curtain-bottom{animation:mr-open-down .9s cubic-bezier(.76,0,.2,1) 520ms both}
.mr-intro.is-playing .mr-spark{animation:mr-spark var(--t) cubic-bezier(.15,.7,.3,1) var(--delay) both}
.mr-intro.is-playing .mr-flourish{animation:mr-unfurl 1.35s cubic-bezier(.45,.05,.3,1) 700ms both}
.mr-intro.is-playing .mr-bottom-left,.mr-intro.is-playing .mr-bottom-right{animation-delay:820ms}
.mr-intro.is-playing .mr-letter{animation:mr-letter .66s cubic-bezier(.2,.9,.25,1.12) calc(850ms + var(--i) * 55ms) both}
.mr-intro.is-playing .mr-layer::after{animation:mr-shine .7s ease-in-out calc(2000ms + var(--shine)) both}
.mr-intro.is-playing .mr-skip{animation:mr-skip-light .35s ease 1.05s both}

/* Skipped or finished: show the original logo as it is */
.mr-intro.is-done .mr-layer,.mr-intro.is-done .mr-layer::after,.mr-intro.is-done .mr-skip{animation:none!important}
.mr-intro.is-done .mr-curtain,.mr-intro.is-done .mr-line,.mr-intro.is-done .mr-sparks,.mr-intro.is-done .mr-skip{display:none}
/* Replaying on the venue page: the logo grows slightly and dissolves back into the page. */
.mr-intro.is-leaving{animation:mr-fade .85s cubic-bezier(.5,0,.2,1) forwards}
.mr-intro.is-leaving .mr-stage{animation:mr-grow .85s cubic-bezier(.5,0,.2,1) forwards}

@keyframes mr-line{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes mr-edge{0%{opacity:0}25%{opacity:1}100%{opacity:.85}}
@keyframes mr-open-up{to{transform:translateY(-108%)}}
@keyframes mr-open-down{to{transform:translateY(108%)}}
@keyframes mr-spark{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes mr-unfurl{0%{clip-path:circle(0% at var(--cx) var(--cy));filter:brightness(1.9) saturate(1.4)}55%{filter:brightness(1.3) saturate(1.15)}100%{clip-path:circle(142% at var(--cx) var(--cy));filter:none}}
@keyframes mr-letter{0%{opacity:0;transform:translateY(40%) scale(.9);filter:blur(10px)}65%{filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes mr-shine{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-50% 0}}
@keyframes mr-skip-light{to{color:#7a6446;border-color:#7a644659}}
@keyframes mr-fade{to{opacity:0}}
@keyframes mr-grow{to{transform:translate(-50%,-50%) scale(1.12);filter:blur(6px)}}

/* Header invitation: the exact logo unfurls around the link, without resizing it. */
.mr-nav-art,.mr-nav-glitter{display:none;pointer-events:none}
@media(min-width:1001px){
  .site-header nav>a[data-mahogany-nav]{position:relative;isolation:isolate}
  .mr-nav-label{display:block;transition:opacity 140ms ease}
  /* Centre the visible artwork horizontally; align its lettering (stage y=750..980) with the navigation text. */
  .mr-nav-art{display:block;position:absolute;left:50%;top:50%;width:calc(80% + 38.4px);max-width:166.4px;aspect-ratio:2100/1500;transform:translate(-50%,-57.6%);opacity:0;transition:opacity 150ms ease;pointer-events:none}
  .mr-nav-art .mr-layer::after{content:none}
  .mr-nav-art .mr-flourish{clip-path:circle(0% at var(--cx) var(--cy));transition:clip-path 160ms cubic-bezier(.4,0,1,1)}
  .mr-nav-art .mr-letter{opacity:0;transition:opacity 140ms ease}
  .site-header nav>a.mr-nav-ready:focus-visible .mr-nav-label{opacity:0}
  .site-header nav>a.mr-nav-ready:focus-visible .mr-nav-art{opacity:1}
  .site-header nav>a.mr-nav-ready:focus-visible .mr-flourish{clip-path:circle(142% at var(--cx) var(--cy));transition:clip-path 620ms cubic-bezier(.23,1,.32,1)}
  .site-header nav>a.mr-nav-ready:focus-visible .mr-bottom-left,.site-header nav>a.mr-nav-ready:focus-visible .mr-bottom-right{transition-delay:65ms}
  .site-header nav>a.mr-nav-ready:focus-visible .mr-letter{opacity:1;transition:opacity 180ms ease 40ms}
  .site-header nav>a.mr-nav-ready:focus-visible::after{opacity:0}
  /* The venue's own page keeps its wordmark, without needing a hover. */
  .site-header nav>a.mr-nav-ready[aria-current=page] .mr-nav-label{opacity:0}
  .site-header nav>a.mr-nav-ready[aria-current=page] .mr-nav-art,
  .site-header nav>a.mr-nav-ready[aria-current=page] .mr-letter{opacity:1}
  .site-header nav>a.mr-nav-ready[aria-current=page] .mr-flourish{clip-path:circle(142% at var(--cx) var(--cy));transition:none}
  .site-header nav>a.mr-nav-ready[aria-current=page] .mr-nav-glitter{display:block;position:absolute;left:8%;right:8%;top:98%;height:38px;overflow:hidden;pointer-events:none;mask-image:linear-gradient(#000 50%,transparent);-webkit-mask-image:linear-gradient(#000 50%,transparent)}
  .mr-nav-fleck{position:absolute;left:var(--gx);top:0;width:var(--size);height:var(--size);opacity:0;background:linear-gradient(135deg,#eccc81,#ad833c 65%,#d4b36b);border-radius:.5px;animation:mr-nav-fall var(--gt) linear var(--gd) infinite}
}
@keyframes mr-nav-fall{
  0%{opacity:0;transform:translate3d(0,-4px,0) rotate(0deg) scale(.6)}
  16%{opacity:.8}
  70%{opacity:.6}
  100%{opacity:0;transform:translate3d(var(--drift),38px,0) rotate(150deg) scale(.35)}
}
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
  .site-header nav>a.mr-nav-ready:hover .mr-nav-label{opacity:0}
  .site-header nav>a.mr-nav-ready:hover .mr-nav-art{opacity:1}
  .site-header nav>a.mr-nav-ready:hover .mr-flourish{clip-path:circle(142% at var(--cx) var(--cy));transition:clip-path 620ms cubic-bezier(.23,1,.32,1)}
  .site-header nav>a.mr-nav-ready:hover .mr-bottom-left,.site-header nav>a.mr-nav-ready:hover .mr-bottom-right{transition-delay:65ms}
  .site-header nav>a.mr-nav-ready:hover .mr-letter{opacity:1;transition:opacity 180ms ease 40ms}
  .site-header nav>a.mr-nav-ready:hover::after{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .mr-nav-label,.mr-nav-art,.mr-nav-art .mr-flourish,.mr-nav-art .mr-letter{transition:none!important}
  .site-header nav>a.mr-nav-ready[aria-current=page] .mr-nav-glitter{display:none}
}

/* Arriving on the venue page: the same logo covers the page until it has loaded, then dissolves.
   If scripts fail, it fades by itself after a few seconds. */
/* Until the venue page's content is drawn it's too short to scroll, so it would start without a scrollbar and then gain one,
   nudging the logo sideways. Keeping the scrollbar from the first frame matches the page the introduction played on. */
html.mr-arriving{overflow-y:scroll}
/* The logo itself comes from mahogany-arrival.css, which embeds it so it's there in the page's very first frame. */
html.mr-arriving body::after{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;background-color:#fff;background-position:50% 50%;background-size:min(96vw,calc(90vh * 2100 / 1500),1680px) auto;background-repeat:no-repeat;animation:mr-arrive-fallback .85s cubic-bezier(.5,0,.2,1) 3s forwards}
/* A separate animation name, so the dissolve starts fresh rather than continuing the fallback's clock. */
html.mr-arriving.mr-revealing body::after{animation:mr-arrive .85s cubic-bezier(.5,0,.2,1) forwards}
@keyframes mr-arrive{to{opacity:0;transform:scale(1.12);filter:blur(6px)}}
@keyframes mr-arrive-fallback{to{opacity:0;transform:scale(1.12);filter:blur(6px)}}
/* Reduce Motion: the finished logo fades in and out, and the hand-over dissolves by opacity alone, with nothing growing or
   blurring. Marked !important to come through styles.css, which switches every animation off under reduced motion. */
@media (prefers-reduced-motion:reduce){
  .mr-intro{animation:sv-fade 400ms ease both!important}
  .mr-intro.is-leaving{animation:mr-fade .85s ease forwards!important}
  html.mr-arriving body::after{animation:mr-fade .85s ease 3s forwards!important}
  html.mr-arriving.mr-revealing body::after{animation:mr-arrive-still .85s ease forwards!important}
}
@keyframes mr-arrive-still{to{opacity:0}}

/* Only start the quote logo's arrival when the controller can show the artwork.
   Removing the arrival also leaves a completed logo settled instead of replaying. */
#main:not([data-mr-quote-arriving]) .qp-page .mr-venue-choice:has(input:checked) .mr-venue-base{animation:none!important}
@media(prefers-reduced-motion:reduce){
  #main[data-mr-quote-playing][data-mr-quote-arriving] .qp-page .mr-venue-choice:has(input:checked) .mr-venue-base{animation:mr-quote-fade 420ms ease both!important;animation-play-state:running!important}
}

/* Phone layout audit, 18 October 2026: the introduction's skip action must be readable and easy to tap. */
@media (max-width:720px){
  .mr-skip{min-width:44px;min-height:44px;font-size:13px}
}