/* ============================================================
   BRAND INTRO ANIMATION
   mainpanel sweeps in from top-right, covers the screen, then
   exits bottom-left. While it's fullscreen, the two stripes
   slide in from the left and out to the right (slightly
   offset from each other), and the logo enters from the right,
   centers, then exits left.
   Change --total-duration to rescale the whole sequence.
   ============================================================ */

:root {
  --total-duration: 1.0s;
  --panel-travel-x: 900px;
  --panel-travel-y: 400px;  /* reduced — this was causing the corner peek */
  --stripe-travel: 700px;
  --logo-travel: 700px;
}

#brand-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
  overflow: hidden;
}

#brand-intro-overlay.is-active {
  display: block;
  pointer-events: auto;
}

#brand-intro-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- main panel: top-right in, fullscreen, bottom-left out ---------- */
#brand-intro-overlay.is-active #mainpanel {
  animation: panelSweep var(--total-duration) forwards;
}

@keyframes panelSweep {
  0% {
    transform: translate(var(--panel-travel-x), calc(var(--panel-travel-y) * -1)) rotate(-15deg);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  50% {
    transform: translate(0, 0) rotate(-15deg);
    animation-timing-function: linear;
  }
  50% {
    transform: translate(0, 0) rotate(-15deg);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  100% {
    transform: translate(calc(var(--panel-travel-x) * -1), var(--panel-travel-y)) rotate(-15deg);
  }
}

/* ---------- stripe1 (right / thin): enters + exits slightly first ---------- */
#brand-intro-overlay.is-active #stripe1 {
  animation: stripe1Slide var(--total-duration) forwards;
}

@keyframes stripe1Slide {
  0%, 10% {
    transform: translateX(calc(var(--stripe-travel) * -1)) rotate(30deg);
  }
  50% {
    transform: translateX(0) rotate(30deg);
  }
  55% {
    transform: translateX(0) rotate(30deg);
  }
  90%, 100% {
    transform: translateX(var(--stripe-travel)) rotate(30deg);
  }
}

/* ---------- stripe2 (left / thick): enters + exits slightly after ---------- */
#brand-intro-overlay.is-active #stripe2 {
  animation: stripe2Slide var(--total-duration) forwards;
}

@keyframes stripe2Slide {
  0%, 13% {
    transform: translateX(calc(var(--stripe-travel) * -1)) rotate(30deg);
  }
  53% {
    transform: translateX(0) rotate(30deg);
  }
  58% {
    transform: translateX(0) rotate(30deg);
  }
  93%, 100% {
    transform: translateX(var(--stripe-travel)) rotate(30deg);
  }
}

/* ---------- logo: right in, centers, left out ---------- */
#brand-intro-overlay.is-active #logo {
  animation: logoSlide var(--total-duration) forwards;
}

@keyframes logoSlide {
  0%, 10% {
    transform: translateX(var(--logo-travel));
  }
  50% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(0);
  }
  90%, 100% {
    transform: translateX(calc(var(--logo-travel) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  #brand-intro-overlay.is-active #mainpanel,
  #brand-intro-overlay.is-active #stripe1,
  #brand-intro-overlay.is-active #stripe2,
  #brand-intro-overlay.is-active #logo {
    animation-duration: 0.01ms !important;
  }
}