/* BenT Metal MFG logo intro (Plainwell Web, 2026-11-06). Pairs with bent-logo-intro.js. */
:root { --bent-intro-bg: #19202E; }   /* the logo navy, solid until the logo flies to the header */

/* A curtain in the logo navy covers the page from the first paint until the intro takes over,
   so the page never flashes first. If the script stops for any reason it lifts on its own. */
html.bent-intro-on:not(.bent-intro-live)::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--bent-intro-bg);
  animation: bent-intro-failsafe .3s ease 3.5s forwards;
}
@keyframes bent-intro-failsafe { to { opacity: 0; visibility: hidden; } }
html.bent-intro-on { overflow: hidden; }
html.bent-intro-on .site-header .brand img { opacity: 0; }

.bent-intro { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bent-intro__bg { position: absolute; inset: 0; background: var(--bent-intro-bg); }
.bent-intro__logo { position: relative; width: min(74vw, 580px, 60vh * 1.4288); aspect-ratio: 1363 / 954; transform-origin: 50% 50%; will-change: transform; }
.bent-intro__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bent-intro__skip { position: absolute; right: 20px; bottom: 18px; font: 500 13px/1 system-ui, sans-serif; letter-spacing: .02em; color: rgb(255 255 255 / 62%); }

@media (prefers-reduced-motion: reduce) {
  .bent-intro, html.bent-intro-on::after { display: none; }
  html.bent-intro-on { overflow: auto; }
  html.bent-intro-on .site-header .brand img { opacity: 1; }
}