/* ═══════════════════════════════════════
   LOADER
═══════════════════════════════════════ */
#loader{position:fixed;inset:0;z-index:9000;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s;}
#loader.out{opacity:0;visibility:hidden;}

/* Both pieces share the exact same crop frame (459x946 → same aspect ratio),
   so sizing/positioning them identically keeps them perfectly aligned. */
#loader .ld-mark{position:relative;width:39px;height:80px;}
#loader .ld-mark img{position:absolute;top:0;left:0;width:100%;height:100%;}
#loader .ld-mark-navy{animation:ldDropIn 1s cubic-bezier(.16,1,.3,1) both;}
#loader .ld-mark-amber{animation:ldRiseIn 1s cubic-bezier(.16,1,.3,1) .12s both;}

@keyframes ldDropIn{
  0%{transform:translateY(-90px);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}
@keyframes ldRiseIn{
  0%{transform:translateY(90px);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}