/* ═══ THE 3D LOGO (2026-10-18) — only under html.lg3d. See showcase-logo3d.js. ═══ */
html.lg3d-in .is-heroc{top:clamp(96px,13vh,170px)}
.lg3d-box{display:flex;justify-content:center;margin:0 auto clamp(18px,3vh,34px);perspective:1100px;pointer-events:none}
.lg3d-tilt{position:relative;transform-style:preserve-3d;
  animation:lg3dIn .8s cubic-bezier(.16,1,.3,1) both,lg3dBreathe 6s ease-in-out 1.4s infinite alternate}
/* the chrome edge: the logo's own outline stacked a few pixels deep in darkening silver, then its shadow on the scene */
.lg3d-img{display:block;width:clamp(260px,30vw,600px);height:auto;max-height:26vh;object-fit:contain;
  filter:drop-shadow(0 1px 0 rgba(203,210,217,.55)) drop-shadow(0 1px 0 rgba(150,158,166,.6)) drop-shadow(0 1px 0 rgba(104,112,120,.65))
         drop-shadow(0 2px 0 rgba(58,63,69,.75)) drop-shadow(0 16px 30px rgba(0,0,0,.55));
  -webkit-box-reflect:below 6px linear-gradient(transparent 64%,rgba(255,255,255,.14))}
/* one pass of light across the logo's own shape, 350 ms after it lands (MOTION.md: sweep 2.2 s, once) */
.lg3d-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(238,242,246,.9) 50%,transparent 60%) no-repeat;background-size:280% 100%;
  animation:lg3dSweep 2.2s cubic-bezier(.4,0,.2,1) 1.15s both}
/* the title steps down to a tagline under the logo */
html.lg3d-in .is-heroc-h{font-size:clamp(22px,2.1vw,40px);line-height:1.12}
html.lg3d-in .is-heroc-h em{display:inline}
html.lg3d-in .is-heroc-h em::before{content:" "}
.lg3d-named .is-heroc-h{display:none}
/* the same logo twice on one screen reads as a mistake: the corner lockup steps aside on Home only (it returns on every
   other door) — Michael 10-17 "get rid of" the header logo when the logo is centre stage */
html.lg3d-shown body.on-main #brandbar .brand-center{opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.7,0,.84,0)}
@keyframes lg3dIn{from{opacity:0;transform:translateY(18px) rotateX(16deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes lg3dBreathe{from{transform:rotateY(-7deg) rotateX(2deg)}to{transform:rotateY(7deg) rotateX(-2deg)}}
@keyframes lg3dSweep{from{background-position:135% 0}to{background-position:-35% 0}}
@media (prefers-reduced-motion:reduce){.lg3d-tilt{animation:lg3dIn .2s linear both}.lg3d-sheen{display:none}}