/* ============================================================================
   door.css — the bare door (a test, 06.10.2026)
   ============================================================================
   The logo on white, "CIO Office · Zürich" beneath it, and one quiet cue to
   go in. Nothing else: no chrome, no gradient, one face, red only on the
   arrow. Motion: a staggered fade in, a fade out on the way in; neither
   under reduced motion.
   ========================================================================= */

.door{margin:0;min-height:100vh;min-height:100svh;background:var(--surface);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased}
.door-main{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 1.25rem;box-sizing:border-box;text-align:center}

/* IN: the logo first, then the line, then the cue — staggered fades.
   OUT (door.js adds .leaving on a click): all three fade together, then the
   Insights page opens. Under reduced motion, neither. The way out is an
   animation, not a transition: Blink will not transition opacity away from a
   value an animation is still holding, it just snaps to 0. Back (pageshow
   drops .leaving) replays the way in. */
@keyframes door-in{from{opacity:0}to{opacity:1}}
@keyframes door-out{from{opacity:1}to{opacity:0}}
.door-logo{animation:door-in 1.1s ease-out both}
.door-line{animation:door-in .9s .45s ease-out both}
.door-go{animation:door-in .9s .8s ease-out both}
.door-main.leaving > *{animation:door-out .5s ease-in both}
@media (prefers-reduced-motion:reduce){
  .door-logo,.door-line,.door-go,.door-main.leaving > *{animation:none}
}

/* by HEIGHT, never width: the lockup's viewBox is wide */
.door-logo{display:block;line-height:0;border-radius:6px}
.door-logo img{height:clamp(52px,9vw,92px);width:auto;display:block}
.door-logo:focus-visible,.door-go:focus-visible{outline:2px solid var(--navy);outline-offset:6px}

.door-line{margin:1.6rem 0 0;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}

.door-go{margin-top:3.2rem;display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .2rem;
  font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.door-arrow{color:var(--npb-red);transition:transform .2s}
.door-go:hover{color:var(--ink);border-color:var(--ink-3)}
.door-go:hover .door-arrow{transform:translateX(3px)}