/* Post-login logo reveal — shared by the internal and customer login pages. */
.gi-login-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 2rem;
  color: #fffdf9;
  background:
    radial-gradient(circle at 50% 42%, #42342d 0 8%, #2c2521 38%, #1f1a17 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.gi-login-splash.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease;
}

.gi-login-splash::before,
.gi-login-splash::after {
  position: absolute;
  width: min(68vw, 760px);
  height: min(68vw, 760px);
  border: 1px solid rgba(222, 195, 160, 0.16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.gi-login-splash::before {
  transform: translate(-42%, -46%);
}

.gi-login-splash::after {
  right: -28vw;
  bottom: -36vw;
  width: min(54vw, 620px);
  height: min(54vw, 620px);
  border-color: rgba(222, 195, 160, 0.1);
}

.gi-login-splash__stage {
  position: relative;
  z-index: 1;
  width: min(84vw, 540px);
  aspect-ratio: 1023 / 283;
}

.gi-login-splash__gastvrouw-window,
.gi-login-splash__imane-window {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gi-login-splash__gastvrouw-window {
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 71.5%, 29% 71.5%, 29% 100%, 0 100%);
}

.gi-login-splash__imane-window {
  overflow: hidden;
  clip-path: inset(70.5% 31.5% 4% 43.5%);
}

.gi-login-splash__gastvrouw-reveal,
.gi-login-splash__imane-reveal {
  position: absolute;
  inset: 0;
  filter: invert(1) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32));
}

.gi-login-splash__gastvrouw-reveal {
  clip-path: inset(0 100% 0 0);
}

.gi-login-splash__imane-reveal {
  clip-path: inset(0 56.5% 0 0);
  opacity: 0;
  transform: translateY(10px) skewX(-4deg);
  transform-origin: 50% 100%;
}

.gi-login-splash__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gi-login-splash__caret {
  position: absolute;
  top: 14%;
  bottom: 21%;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: #e1c49e;
  box-shadow: 0 0 0 3px rgba(225, 196, 158, 0.1), 0 0 16px rgba(225, 196, 158, 0.42);
  opacity: 0;
}

.gi-login-splash__imane-caret {
  position: absolute;
  top: 72.5%;
  bottom: 6.5%;
  left: 43.5%;
  width: 1.5px;
  border-radius: 999px;
  background: #e1c49e;
  box-shadow: 0 0 0 2px rgba(225, 196, 158, 0.1), 0 0 12px rgba(225, 196, 158, 0.42);
  opacity: 0;
}

.gi-login-splash.is-animating .gi-login-splash__caret {
  animation: gi-login-gastvrouw-caret 560ms steps(12, end) 160ms forwards;
}

.gi-login-splash.is-animating .gi-login-splash__gastvrouw-reveal {
  animation: gi-login-gastvrouw-type 560ms steps(12, end) 160ms forwards;
}

.gi-login-splash.is-animating .gi-login-splash__imane-reveal {
  animation: gi-login-imane-signature 980ms cubic-bezier(0.22, 1, 0.36, 1) 800ms forwards;
}

.gi-login-splash.is-animating .gi-login-splash__imane-caret {
  animation: gi-login-imane-caret 980ms cubic-bezier(0.22, 1, 0.36, 1) 800ms forwards;
}

@keyframes gi-login-gastvrouw-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes gi-login-gastvrouw-caret {
  0% { left: 0; opacity: 0; }
  4% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes gi-login-imane-signature {
  0% {
    clip-path: inset(0 56.5% 0 0);
    opacity: 0;
    transform: translateY(10px) skewX(-4deg);
  }
  36% { opacity: 1; }
  100% {
    clip-path: inset(0 31% 0 0);
    opacity: 1;
    transform: translateY(0) skewX(0);
  }
}

@keyframes gi-login-imane-caret {
  0% { left: 43.5%; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 68.5%; opacity: 0; }
}

.gi-login-splash__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gi-login-splash,
  .gi-login-splash::before,
  .gi-login-splash::after {
    transition: none;
    animation: none;
  }

  .gi-login-splash__gastvrouw-reveal,
  .gi-login-splash__imane-reveal {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
    animation: none;
  }

  .gi-login-splash__caret,
  .gi-login-splash__imane-caret {
    display: none;
  }

  .gi-login-splash.is-animating .gi-login-splash__gastvrouw-reveal,
  .gi-login-splash.is-animating .gi-login-splash__imane-reveal,
  .gi-login-splash.is-animating .gi-login-splash__caret,
  .gi-login-splash.is-animating .gi-login-splash__imane-caret {
    animation: none;
  }
}

@media (max-width: 520px) {
  .gi-login-splash {
    padding: 1.25rem;
  }

  .gi-login-splash__stage {
    width: min(90vw, 460px);
  }
}