/* ---------------------------------------------------------------------------
   home.css: the home page's three doors.

   Side by side across the screen under the header, the TC faint behind all
   three; stacked on a phone. Each door's name fills with its own photo on
   hover: js/home.js hands the photo to the name, and moves it a little with
   the pointer.
   --------------------------------------------------------------------------- */

.doors{position:relative;display:flex;height:calc(100svh - 72px);min-height:520px;max-height:880px;overflow:hidden;background:var(--night);isolation:isolate;font-family:var(--letter)}
.doors-crest{position:absolute;inset:0;z-index:3;width:100%;height:74%;margin:auto;color:#fff;opacity:.09;pointer-events:none;transition:opacity .5s}
.doors.has-hot .doors-crest{opacity:0}
.door{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;container-type:inline-size;outline:none;-webkit-tap-highlight-color:transparent}
.door+.door{box-shadow:-1px 0 0 rgba(255,255,255,.22)}
.door-bg,.door-bg img{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover}
.door-bg{transform:translate(calc(var(--px,0)*-16px),calc(var(--py,0)*-16px)) scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .7s}
.door-bg img{inset:0;width:100%;height:100%}
.door-tint{position:absolute;inset:0;background:var(--navy);opacity:.66;transition:opacity .6s var(--ease)}
.door-in{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:.8rem;padding:1.6rem 1.2rem}
.door-kick{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.door-name{display:grid;font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:min(clamp(3rem,7.4vw,8.4rem),19cqi);line-height:.84;transition:transform .6s var(--ease),opacity .45s}
.door-name>span{grid-area:1/1;white-space:nowrap}
.door-solid{color:#fff;text-shadow:0 2px 24px rgba(10,23,71,.35);transition:color .4s}
.door-fill{color:transparent;background:var(--img,none) center/cover;background-position:calc(50% + var(--px,0)*40%) calc(50% + var(--py,0)*40%);-webkit-background-clip:text;background-clip:text;opacity:0;transition:opacity .5s;filter:saturate(1.35) brightness(1.18)}
.door-button{display:inline-flex;align-items:center;min-height:42px;padding:.55rem 1.1rem;border-radius:999px;font-size:.88rem;font-weight:600;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);transition:background .3s,color .3s,box-shadow .3s}
.door.hot .door-tint{opacity:.9}
.door.hot .door-bg{filter:blur(2px) saturate(.6);transform:translate(calc(var(--px,0)*-16px),calc(var(--py,0)*-16px)) scale(1.1)}
.door.hot .door-name{transform:scale(1.05)}
.doors.filled .door.hot .door-solid{color:transparent;text-shadow:none;-webkit-text-stroke:1.5px #fff}
.doors.filled .door.hot .door-fill{opacity:1}
.door.hot .door-button{background:#fff;color:var(--navy);box-shadow:none}
.doors.has-hot .door:not(.hot) .door-name{opacity:.45;transform:scale(.92)}
.door:focus-visible .door-in{outline:2px solid #fff;outline-offset:6px;border-radius:8px}
@media(max-width:860px){
  .doors{flex-direction:column;height:auto;max-height:none;min-height:0}
  .door{min-height:clamp(230px,34svh,320px)}
  .door+.door{box-shadow:0 -1px 0 rgba(255,255,255,.22)}
  .door-name{font-size:min(5rem,17cqi)}
}
@media(prefers-reduced-motion:reduce){
  .door-bg,.door-tint,.door-name,.door-solid,.door-fill,.door-button,.doors-crest{transition:none}
  .door-bg,.door.hot .door-bg{transform:none}
}