/* The curtain follows the assembled implant; it never captures input. */
.logo-arriving::before, .logo-leaving::before { content: ''; position: fixed; z-index: 200; inset: var(--site-header-height, 106px) 0 0; background: #153e33; pointer-events: none; }
.logo-transition { --logo-duration: 1300ms; position: fixed; z-index: 200; inset: var(--site-header-height, 106px) 0 0; pointer-events: none; overflow: hidden; isolation: isolate; contain: layout paint; }
.logo-transition-curtain { position: absolute; inset: 0; background: #153e33; transform: translate3d(0, 0, 0); will-change: transform; }
.logo-transition-traveller { position: absolute; top: 50%; left: 0; width: clamp(170px, min(30vw, 38svh), 340px); aspect-ratio: 2 / 3; transform: translate3d(calc(-24vw - 50%), -50%, 0) rotate(-8deg); will-change: transform; backface-visibility: hidden; }
.logo-transition-part { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; will-change: transform; backface-visibility: hidden; }
.logo-transition-part--screw { transform: translateY(16%) rotate(-26deg); }
.logo-transition-part--abutment { transform: translateY(-4%) rotate(8deg); }
.logo-transition-part--crown { transform: translateY(-18%) rotate(-8deg); }
.logo-transition-fallback { display: none; width: 100%; height: 100%; }
.logo-transition.has-fallback .logo-transition-part { display: none; }
.logo-transition.has-fallback .logo-transition-fallback { display: block; }
.logo-transition.is-running .logo-transition-curtain { animation: logo-reveal var(--logo-duration) linear both; }
.logo-transition.is-running .logo-transition-traveller { animation: logo-travel var(--logo-duration) linear both; }
.logo-transition.is-running .logo-transition-part--screw { animation: logo-screw var(--logo-duration) cubic-bezier(.22,1,.36,1) both; }
.logo-transition.is-running .logo-transition-part--abutment { animation: logo-abutment var(--logo-duration) cubic-bezier(.22,1,.36,1) both; }
.logo-transition.is-running .logo-transition-part--crown { animation: logo-crown var(--logo-duration) cubic-bezier(.22,1,.36,1) both; }
@keyframes logo-reveal {
  0%, 12% { transform: translate3d(0, 0, 0); }
  88%, 100% { transform: translate3d(100%, 0, 0); }
}
@keyframes logo-travel {
  0% { transform: translate3d(calc(-24vw - 50%), -50%, 0) rotate(-8deg); }
  12% { transform: translate3d(-50%, -50%, 0) rotate(-8deg); }
  88% { transform: translate3d(calc(100vw - 50%), -50%, 0) rotate(6deg); }
  100% { transform: translate3d(calc(124vw - 50%), -50%, 0) rotate(8deg); }
}
@keyframes logo-screw {
  0%, 18% { transform: translateY(16%) rotate(-26deg); }
  42% { transform: translateY(-1%) rotate(2deg); }
  54%, 100% { transform: none; }
}
@keyframes logo-abutment {
  0%, 24% { transform: translateY(-4%) rotate(8deg); }
  48%, 100% { transform: none; }
}
@keyframes logo-crown {
  0%, 22% { transform: translateY(-18%) rotate(-8deg); }
  62% { transform: translateY(.5%); }
  70%, 100% { transform: none; }
}
@media (max-width: 700px) {
  .logo-transition { --logo-duration: 1150ms; }
  .logo-transition-traveller { width: min(54vw, 32svh, 230px); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-arriving::before, .logo-leaving::before, .logo-transition { display: none; }
}