/* Original VM logo pieces meet, then become the logo in the real site header. */
.vm-opening {
  --vm-duration: 2800ms;
  --vm-logo-width: min(430px, 78vw);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: #f5f3eb;
  overscroll-behavior: contain;
}
.vm-opening[open] { display: block; }
.vm-opening:not([open]) { display: none; }
.vm-opening:not([open]) * { animation: none; }
.vm-opening::backdrop { background: transparent; }
html.vm-opening-active { overflow: hidden; }
.vm-opening-panel {
  position: absolute;
  inset-block: 0;
  width: calc(50% + 1px);
  background: #103b36;
  will-change: transform;
}
.vm-opening-panel-left { left: 0; animation: vm-curtain-left var(--vm-duration) cubic-bezier(.76,0,.24,1) both; }
.vm-opening-panel-right { right: 0; animation: vm-curtain-right var(--vm-duration) cubic-bezier(.76,0,.24,1) both; }
.vm-opening-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, #2ab7b52b, transparent 56%);
  animation: vm-scene-fade var(--vm-duration) ease both;
}
.vm-opening-orbit {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(580px, 86vw);
  aspect-ratio: 1;
  border: 1px solid #83c1b71a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.vm-opening-orbit::after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid #eda28d12;
  border-radius: 50%;
}
.vm-opening-logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  width: var(--vm-logo-width);
  aspect-ratio: 455 / 303;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
  animation: vm-logo-to-header var(--vm-duration) cubic-bezier(.65,0,.2,1) both;
}
.vm-opening-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}
.vm-opening-v { clip-path: polygon(27.4725% 43.5644%,27.4725% 34.6535%,31.6484% 28.0528%,58.2418% 25.4125%,58.2418% 30.3630%,40.6593% 65.6766%,32.5275% 65.6766%); animation: vm-v-join var(--vm-duration) cubic-bezier(.22,1,.36,1) both; }
.vm-opening-m { clip-path: polygon(58.2418% 25.4125%,100% 25.4125%,100% 73.9274%,49.8901% 73.9274%,49.8901% 65.0165%,45.4945% 60.3960%,49.8901% 49.5050%,58.2418% 30.3630%); animation: vm-m-join var(--vm-duration) cubic-bezier(.22,1,.36,1) both; }
.vm-opening-arc { clip-path: polygon(0 0,59.3407% 0,59.3407% 25.4125%,31.6484% 28.0528%,27.4725% 34.6535%,27.4725% 43.5644%,32.5275% 65.6766%,40.6593% 65.6766%,50.5495% 63.0363%,50.5495% 73.9274%,0 73.9274%); animation: vm-arc-form var(--vm-duration) ease both; }
.vm-opening-caption { clip-path: inset(73.9274% 0 0); animation: vm-caption-in var(--vm-duration) ease both; }
.vm-opening-tagline {
  position: absolute;
  top: calc(46% + var(--vm-logo-width) * .333 + 10px);
  left: 24px;
  right: 24px;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -.015em;
  animation: vm-tagline-in var(--vm-duration) ease both;
}
.vm-opening-tagline em { color: #eda28d; }
.vm-opening-controls {
  position: absolute;
  z-index: 3;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: max(32px, env(safe-area-inset-left));
  right: max(32px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 11px;
}
.vm-opening-book, .vm-opening-skip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid #c1d0c752;
  border-radius: 40px;
  background: #103b36;
  color: #f5f3eb;
  font: inherit;
}
.vm-opening-book { gap: 18px; }
.vm-opening-book:hover, .vm-opening-skip:hover { background: #24534c; border-color: #eda28d; }
.vm-opening-skip { color: #d3ded6; }
.vm-opening :focus-visible { outline: 2px solid #eda28d; outline-offset: 4px; }
.vm-opening-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vm-opening-replay { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; margin-top: 10px; border: 0; background: transparent; color: #c4cec7; font-size: 11px; }
.vm-opening-replay:hover { color: #eda28d; }
/* Both ends of the handoff use real transparency, including in Safari. */
.editorial-home .brand img { mix-blend-mode: normal; }
.vm-home-revealing .site-header .brand img { animation: vm-header-logo var(--vm-duration, 2800ms) ease both; }
.hero[data-vm-reveal] .hero-copy > * { animation: vm-home-rise 1000ms cubic-bezier(.22,1,.36,1) both; animation-delay: 1850ms; }
.hero[data-vm-reveal] .hero-copy h1 { animation-delay: 1940ms; }
.hero[data-vm-reveal] .hero-intro, .hero[data-vm-reveal] .hero-description { animation-delay: 2060ms; }
.hero[data-vm-reveal] .hero-actions, .hero[data-vm-reveal] .hero-note { animation-delay: 2180ms; }
.hero[data-vm-reveal] .hero-art { animation: vm-home-art 1200ms cubic-bezier(.22,1,.36,1) 1900ms both; }
@keyframes vm-v-join { 0%,5% { opacity: 0; transform: translateX(-65px) rotate(-5deg); } 29%,100% { opacity: 1; transform: none; } }
@keyframes vm-m-join { 0%,9% { opacity: 0; transform: translateX(65px) rotate(5deg); } 33%,100% { opacity: 1; transform: none; } }
@keyframes vm-arc-form { 0%,12% { opacity: 0; transform: scale(.92) rotate(-12deg); } 36%,100% { opacity: 1; transform: none; } }
@keyframes vm-caption-in { 0%,24% { opacity: 0; transform: translateY(9px); } 42%,100% { opacity: 1; transform: none; } }
@keyframes vm-tagline-in { 0%,32% { opacity: 0; translate: 0 10px; } 48%,59% { opacity: 1; translate: 0 0; } 70%,100% { opacity: 0; translate: 0 -6px; } }
@keyframes vm-scene-fade { 0% { opacity: 0; } 25%,58% { opacity: 1; } 77%,100% { opacity: 0; } }
@keyframes vm-logo-to-header { 0%,60% { transform: translate(-50%, -50%); } 95%,100% { transform: translate(calc(-50% + var(--vm-target-x,0px)), calc(-50% + var(--vm-target-y,0px))) scale(var(--vm-target-scale,.36)); } }
@keyframes vm-curtain-left { 0%,62% { transform: translateX(0); } 100% { transform: translateX(-101%); } }
@keyframes vm-curtain-right { 0%,62% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes vm-header-logo { 0%,96% { opacity: 0; } 97%,100% { opacity: 1; } }
@keyframes vm-home-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes vm-home-art { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@media (max-width:680px) {
  .vm-opening { --vm-logo-width: min(330px, 86vw); }
  .vm-opening-tagline { top: calc(46% + var(--vm-logo-width) * .333 + 8px); font-size: 26px; }
  .vm-opening-controls { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); font-size: 10px; gap: 12px; }
  .vm-opening-book, .vm-opening-skip { padding: 10px 14px; }
}
@media (max-height:450px) {
  .vm-opening { --vm-logo-width: min(270px, 52vh); }
  .vm-opening-tagline { font-size: 22px; top: calc(46% + var(--vm-logo-width) * .333); }
  .vm-opening-controls { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) {
  .vm-opening { display: none !important; }
  .hero[data-vm-reveal] .hero-copy > *, .hero[data-vm-reveal] .hero-art, .vm-home-revealing .site-header .brand img { animation: none !important; opacity: 1; translate: none; }
}