/* Homepage logo intro: shown once per session, then the page opens like a folded sheet
   Scope: .hi  |  html.hi-on while it is on screen */

.hi { display: none; }

html.hi-on { overflow: hidden; }

html.hi-on .hi {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  cursor: progress;
  /* if the script never finishes, the intro gets out of the way on its own */
  animation: hi-safety 0s linear 4.5s forwards;
}

.hi-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #f7f8fa;
  will-change: transform;
  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1);
}
.hi-half--top { top: 0; }
.hi-half--bot { bottom: 0; }

/* the fold: a soft shadow where the two halves part */
.hi-half--top::after,
.hi-half--bot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hi-half--top::after { bottom: 0; background: linear-gradient(0deg, rgba(14, 26, 47, 0.12), transparent); }
.hi-half--bot::before { top: 0; background: linear-gradient(180deg, rgba(14, 26, 47, 0.12), transparent); }

.hi-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(260px, 64vw);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hi-logo {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 100% 0 0);
  animation: hi-wipe 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

.hi-line {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: #e4e8ee;
}
.hi-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #f08a24;
  transform: scaleX(0);
  transform-origin: left center;
  animation: hi-load 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

/* opening */
html.hi-out .hi { pointer-events: none; cursor: auto; }
html.hi-out .hi-mark { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
html.hi-out .hi-half--top { transform: translate3d(0, -100%, 0); transition-delay: 0.1s; }
html.hi-out .hi-half--bot { transform: translate3d(0, 100%, 0); transition-delay: 0.1s; }
html.hi-out .hi-half--top::after,
html.hi-out .hi-half--bot::before { opacity: 1; }

@keyframes hi-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes hi-load { to { transform: scaleX(1); } }
@keyframes hi-safety { to { visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  html.hi-on .hi { display: none; }
  html.hi-on { overflow: auto; }
}