/* A short trail within the existing identity hold. The original first viewport,
   logo, subtitle, camera, and suitcase timing remain unchanged. */
.first-steps {
  position: absolute;
  z-index: 2;
  left: 12%;
  top: 55%;
  width: 62px;
  height: clamp(144px, 24svh, 210px);
  pointer-events: none;
  color: var(--hdf-blue, #2564AA);
}
.first-steps__pair {
  position: absolute;
  display: block;
  width: 40px;
  height: 50px;
  fill: currentColor;
  opacity: 0;
}
.first-steps__pair--one { bottom: 0; left: 20px; opacity: var(--first-step-one, 0); }
.first-steps__pair--two { bottom: 37%; left: 10px; opacity: var(--first-step-two, 0); }
.first-steps__pair--three { bottom: 74%; left: 0; opacity: var(--first-step-three, 0); }
@media (max-width: 700px) {
  .first-steps {
    left: calc(50% - 23px);
    /* Below the full logo + two-line subtitle, including wider mobile layouts. */
    top: max(65svh, calc(39svh + min(35.055vw, 196.65px) + 64px));
    width: 46px;
    height: clamp(100px, 17svh, 136px);
  }
  .first-steps__pair { width: 34px; height: 43px; }
  .first-steps__pair--one { left: 12px; }
  .first-steps__pair--two { bottom: auto; top: 0; left: 0; }
  .first-steps__pair--three { display: none; }
}
@media (max-width: 700px) and (max-height: 670px) {
  .first-steps { top: max(65svh, calc(39svh + min(29.4975vw, 196.65px) + 60px)); }
}
/* Compact landscape prioritizes the complete identity and interface. */
@media (max-height: 560px) and (orientation: landscape) {
  .first-steps { display: none; }
}
html:not(.js) .first-steps { display: none; }
@media (prefers-reduced-motion: reduce), print {
  .first-steps { display: none; }
}