/* Landing "Enter site" button + 3D page transition into Home (enter.js drives it) */

/* centred "Enter site": a slim outline button — thin white border, spaced caps, a fine arrow that stretches on hover */
.mt-enter { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 26px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff; text-decoration: none; white-space: nowrap;
  font: 400 .78rem/1 'Rubik', sans-serif; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.35);
  background: rgba(12,14,16,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: mt-enter-in 1.2s cubic-bezier(.2,.8,.2,1) .6s backwards; transition: background .4s, color .4s, border-color .4s, text-shadow .4s, transform .25s cubic-bezier(.2,.8,.2,1); }
.mt-enter-ico { position: relative; display: block; width: 22px; height: 1px; background: currentColor; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.mt-enter-ico::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; }
.mt-enter-ico svg { display: none; }
.mt-enter:hover, .mt-enter:focus-visible { background: #fff; color: #16191c; border-color: #fff; text-shadow: none; outline: none; }
.mt-enter:hover .mt-enter-ico, .mt-enter:focus-visible .mt-enter-ico { width: 34px; }
.mt-enter:active { transform: translate(-50%, -50%) scale(.97); }
@keyframes mt-enter-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } }
@media (max-width: 600px) { .mt-enter { padding: 12px 22px; letter-spacing: .26em; } }

/* landing header: logo + company name only — no page tabs or menu button (Enter site leads into the site) */
body.has-hero .ab-links, body.has-hero .ab-burger { display: none !important; }
body.has-hero .ab-nav .ab-brand span { display: inline; }

/* fade the video so the button reads clearly: an overall dim plus a soft darker pool behind the button */
.hm-hero-shade::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 42% 34% at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,0) 100%), rgba(0,0,0,.2); }

/* leaving the landing: the page recedes into depth while a white sheet with a red edge flips up over it */
html.mt-leaving { overflow: hidden; }
html.mt-leaving body > header, html.mt-leaving body > main { will-change: transform, opacity; transform-origin: 50% 40%; animation: mt-recede .9s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes mt-recede { to { transform: perspective(1400px) translateZ(-420px) rotateX(16deg); opacity: .2; } }
.mt-sheet { position: fixed; inset: 0; z-index: 9999; pointer-events: none; perspective: 1600px; }
.mt-sheet i { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 0%, #f4f5f6 100%); border-top: 4px solid var(--red, #e31e24); box-shadow: 0 -30px 80px rgba(0,0,0,.25);
  transform-origin: 50% 100%; transform: rotateX(-88deg); backface-visibility: hidden; }
.mt-sheet b { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 2px solid rgba(22,25,28,.1); border-top-color: var(--red, #e31e24);
  opacity: 0; }
html.mt-leaving .mt-sheet i { animation: mt-flip-up .75s cubic-bezier(.65,0,.35,1) .12s forwards; }
html.mt-leaving .mt-sheet b { animation: mt-fade-in .3s ease .7s forwards, mt-spin .8s linear infinite; }
@keyframes mt-flip-up { to { transform: none; box-shadow: 0 0 0 rgba(0,0,0,0); } }
@keyframes mt-fade-in { to { opacity: 1; } }
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* arriving on Home: the sheet flips away over the top while the page rises out of depth.
   Perspective lives inside each transform, never on <html>: on the root it would become the containing block for
   Home's fixed 3D background, which then sizes itself to the whole document and renders zoomed in. */
html.mt-arrive::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: linear-gradient(180deg, #fff, #f4f5f6);
  border-bottom: 4px solid var(--red, #e31e24); transform-origin: 50% 0; animation: mt-flip-away .9s cubic-bezier(.65,0,.35,1) .05s forwards; }
html.mt-arrive body > header { animation: mt-drop .8s cubic-bezier(.2,.8,.2,1) .45s backwards; }
html.mt-arrive body > main { will-change: transform, opacity; transform-origin: 50% 0; animation: mt-rise 1.2s cubic-bezier(.2,.8,.2,1) .3s backwards; }
@keyframes mt-flip-away { to { transform: perspective(1600px) rotateX(88deg); opacity: 0; visibility: hidden; } }
@keyframes mt-rise { from { transform: perspective(1400px) translate3d(0, 60px, -360px) rotateX(14deg); opacity: 0; } }
@keyframes mt-drop { from { transform: translateY(-30px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mt-enter { animation: none; }
  html.mt-arrive::before { display: none; }
  html.mt-arrive body > header, html.mt-arrive body > main { animation: none; }
}