* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page-background);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--text-primary);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--page-background);
}

/* ---------- Landscape: tablets, laptops, desktops, ultrawide ---------- */

.mobile-stage {
  display: none;
}

.desktop-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Waves sit on the bottom edge and always span the full width. */
.background {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, calc(var(--background-cover-width) * var(--stage-scale)));
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Zero-size anchors pinned to the viewport corners; the corner inside keeps
   its own transform for the entrance animation. */
.corner-anchor {
  position: absolute;
  width: 0;
  height: 0;
  transform: scale(var(--stage-scale));
  pointer-events: none;
}

.corner-anchor--top-left {
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.corner-anchor--bottom-right {
  right: 0;
  bottom: 0;
  transform-origin: 0 0;
}

.corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.corner img {
  position: absolute;
  inset: -7.14%;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

.corner--top-left {
  left: var(--corner-top-left-x);
  top: var(--corner-top-left-y);
  transform: translate(var(--motion-corner-inset), var(--motion-corner-inset)) rotate(calc(0deg - var(--motion-corner-rotation))) scale(var(--motion-corner-start-scale));
}

.corner--bottom-right {
  left: calc(var(--corner-bottom-right-x) - var(--page-width));
  top: calc(var(--corner-bottom-right-y) - var(--page-height));
  transform: translate(calc(0px - var(--motion-corner-inset)), calc(0px - var(--motion-corner-inset))) rotate(var(--motion-corner-rotation)) scale(var(--motion-corner-start-scale));
}

.page.is-entering .corner {
  animation: corner-enter var(--motion-duration-corners) var(--motion-easing-spring) forwards;
}

/* Design-sized frame holding the logo and company names, centered in the viewport. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--page-width);
  height: var(--page-height);
  transform: translate(-50%, -50%) scale(var(--content-scale));
  pointer-events: none;
}

.identity {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: flex-start;
  transform: translate(-50%, -50%);
}

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--logo-width);
  height: var(--logo-height);
  max-width: none;
  transform: translate(-50%, -50%) translateY(var(--motion-logo-offset)) scale(var(--motion-logo-start-scale));
  object-fit: cover;
  opacity: 0;
  filter: blur(var(--motion-logo-blur));
  will-change: transform, opacity, filter;
}

/* Shared look for a company line: small region label + registered name. */
.company {
  display: flex;
  align-items: baseline;
  gap: var(--company-label-gap);
  margin: 0;
  white-space: nowrap;
}

.company-region {
  font-size: var(--company-label-size);
  line-height: var(--line-height-body);
  opacity: var(--company-label-opacity);
}

/* Centered on the same line as before (91px below the logo's center). */
.companies {
  position: absolute;
  left: 0;
  top: var(--company-line-offset);
  display: flex;
  align-items: baseline;
  gap: var(--company-divider-gap);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

/* Keep the label legible when the content is scaled down. */
.companies .company-region {
  font-size: max(var(--company-label-size), calc(10px / var(--content-scale)));
}

.companies .company,
.company-divider {
  opacity: 0;
  filter: blur(var(--motion-logo-blur));
  transform: scale(var(--motion-logo-start-scale));
  will-change: transform, opacity, filter;
}

.company-divider {
  color: var(--text-primary);
}

/* Footer pinned to the bottom edge, clear of the home indicator. */
.legal {
  position: absolute;
  left: 50%;
  bottom: calc(var(--footer-bottom) * var(--content-scale) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-start;
  gap: var(--footer-gap);
  transform: translateX(-50%) scale(var(--content-scale));
  transform-origin: 50% 100%;
  white-space: nowrap;
  color: var(--text-primary);
  opacity: 0;
}

.legal a {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

.page.is-entering .logo {
  animation: logo-enter var(--motion-duration-content) var(--motion-easing-spring) forwards;
  animation-delay: var(--motion-content-delay);
}

.page.is-entering .companies .company,
.page.is-entering .company-divider {
  animation: content-enter var(--motion-duration-content) var(--motion-easing-soft) forwards;
}

.page.is-entering .companies .company:first-child {
  animation-delay: calc(var(--motion-content-delay) + var(--motion-stagger));
}

.page.is-entering .company-divider,
.page.is-entering .companies .company:last-child {
  animation-delay: calc(var(--motion-content-delay) + var(--motion-stagger) * 2);
}

.page.is-entering .company-divider {
  animation-name: divider-enter;
}

.page.is-entering .legal {
  animation: footer-enter var(--motion-duration-content) var(--motion-easing-soft) forwards;
  animation-delay: calc(var(--motion-content-delay) + var(--motion-stagger) * 3);
}

@keyframes corner-enter {
  0% {
    opacity: 0;
  }
  58% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--motion-corner-overshoot-rotation)) scale(var(--motion-corner-overshoot-scale));
  }
  78% {
    transform: translate(0, 0) rotate(var(--motion-corner-correct-rotation)) scale(var(--motion-corner-correct-scale));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes logo-enter {
  0% {
    opacity: 0;
    filter: blur(var(--motion-logo-blur));
  }
  65% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) translateY(0) scale(var(--motion-logo-correct-scale));
  }
  84% {
    transform: translate(-50%, -50%) translateY(0) scale(var(--motion-logo-overshoot-scale));
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

@keyframes content-enter {
  0% {
    opacity: 0;
    filter: blur(var(--motion-logo-blur));
    transform: scale(var(--motion-logo-start-scale));
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes divider-enter {
  0% {
    opacity: 0;
    filter: blur(var(--motion-logo-blur));
    transform: scale(var(--motion-logo-start-scale));
  }
  100% {
    opacity: var(--company-divider-opacity);
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes footer-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corner,
  .logo,
  .companies .company,
  .legal {
    animation: none !important;
    opacity: 1;
    filter: none;
  }

  .company-divider {
    animation: none !important;
    opacity: var(--company-divider-opacity);
    filter: none;
    transform: none;
  }

  /* Show the settled (end-of-animation) positions. */
  .corner {
    transform: none;
  }

  .logo {
    transform: translate(-50%, -50%);
  }

  .companies .company {
    transform: none;
  }
}

/* ---------- Portrait: phones, portrait tablets, narrow windows ---------- */

@media (orientation: portrait) {
    .desktop-stage {
      display: none;
    }

    .mobile-stage {
      position: absolute;
      inset: 0;
      display: block;
      overflow: hidden;
      background: var(--page-background);
    }

    .mobile-anchor,
    .mobile-corner,
    .mobile-wave,
    .mobile-logo,
    .mobile-companies,
    .mobile-legal {
      position: absolute;
    }

    .mobile-anchor {
      width: 0;
      height: 0;
      transform: scale(var(--mobile-stage-scale));
      transform-origin: 0 0;
      pointer-events: none;
    }

    .mobile-anchor--top-left {
      top: 0;
      left: 0;
      z-index: 0;
    }

    .mobile-anchor--bottom-right {
      right: 0;
      bottom: 0;
      z-index: 3;
    }

    .mobile-corner {
      width: 211px;
      height: 211px;
      opacity: 1;
      will-change: transform, opacity;
    }

    .mobile-corner img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .mobile-corner--top-left {
      top: -44px;
      left: -66px;
      transform: none;
    }

    /* Offsets from the bottom-right of the 430×932 frame. */
    .mobile-corner--bottom-right {
      top: calc(753px - var(--mobile-height));
      left: calc(324px - var(--mobile-width));
      transform: none;
    }

    .mobile-wave {
      left: 0;
      width: 100%;
      max-width: none;
      pointer-events: none;
    }

    .mobile-wave--top {
      bottom: calc(0.5px * var(--mobile-stage-scale));
      height: calc(73.5px * var(--mobile-stage-scale));
    }

    .mobile-wave--bottom {
      bottom: 0;
      height: calc(204px * var(--mobile-stage-scale));
    }

    /* 430×932 design frame, centered and scaled to the device. */
    .mobile-canvas {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--mobile-width);
      height: var(--mobile-height);
      transform: translate(-50%, -50%) scale(var(--mobile-stage-scale));
      z-index: 4;
      pointer-events: none;
    }

    .mobile-logo {
      top: 50%;
      left: 50%;
      width: 250px;
      height: 48.438px;
      transform: translate(-50%, -50%);
      opacity: 0;
      filter: blur(10px);
      will-change: transform, opacity, filter;
      z-index: 2;
      pointer-events: auto;
    }

    .mobile-logo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Two lines, each centered on the logo. Label + name come out the same
       width on both lines, so the block reads as an even rectangle. */
    .mobile-companies {
      top: calc(50% + 63px);
      left: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transform: translateX(-50%);
      color: var(--text-primary);
      font-family: var(--font-family);
      /* Never renders below 14px, even on the narrowest phones. */
      font-size: max(var(--font-size-body), calc(14px / var(--mobile-stage-scale)));
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-body);
      white-space: nowrap;
      z-index: 2;
    }

    .mobile-companies .company-region {
      font-size: max(var(--company-label-size), calc(12px / var(--mobile-stage-scale)));
    }

    .mobile-companies .company {
      opacity: 0;
      filter: blur(10px);
      transform: scale(1.06);
      will-change: transform, opacity, filter;
    }

    .mobile-legal {
      left: calc(50% - var(--mobile-legal-offset) * var(--mobile-stage-scale));
      bottom: calc(var(--mobile-legal-bottom) * var(--mobile-stage-scale) + env(safe-area-inset-bottom, 0px));
      display: flex;
      gap: var(--footer-gap);
      color: var(--text-primary);
      font-family: var(--font-family);
      font-size: var(--font-size-body);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-body);
      white-space: nowrap;
      transform: scale(var(--mobile-stage-scale));
      transform-origin: 0 100%;
      opacity: 0;
      z-index: 2;
    }

    .mobile-legal a {
      color: inherit;
      text-decoration: none;
    }

    .page.is-entering .mobile-corner {
      animation: mobile-corner-enter var(--mobile-motion-corners) linear forwards;
    }

    .page.is-entering .mobile-corner--bottom-right {
      animation-name: mobile-corner-enter-right;
    }

    .page.is-entering .mobile-logo {
      animation: mobile-logo-enter 1100ms var(--motion-easing-spring) var(--mobile-motion-content-delay) forwards;
    }

    .page.is-entering .mobile-companies .company {
      animation: mobile-company-enter 850ms var(--motion-easing-soft) calc(var(--mobile-motion-content-delay) + 300ms) forwards;
    }

    .page.is-entering .mobile-companies .company:last-child {
      animation-delay: calc(var(--mobile-motion-content-delay) + 480ms);
    }

    .page.is-entering .mobile-legal {
      animation: footer-enter var(--motion-duration-content) var(--motion-easing-soft) calc(var(--mobile-motion-content-delay) + 660ms) forwards;
    }

    /* Circles glide in toward the center, then spring back to their corners
       just as the logo appears. */
    @keyframes mobile-corner-enter {
      0% {
        transform: none;
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
      }
      45% {
        transform: translate(148px, 338px);
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      }
      100% {
        transform: none;
      }
    }

    @keyframes mobile-corner-enter-right {
      0% {
        transform: none;
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
      }
      45% {
        transform: translate(-178px, -338px);
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      }
      100% {
        transform: none;
      }
    }

    @keyframes mobile-logo-enter {
      0% {
        opacity: 0;
        filter: blur(10px);
        transform: translate(-50%, -50%) scale(0.94);
      }
      70% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1.03);
      }
      100% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes mobile-company-enter {
      0% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(1.06);
      }
      100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
      }
    }
}

@media (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .mobile-corner,
  .mobile-logo,
  .mobile-companies .company,
  .mobile-legal {
    animation: none !important;
    opacity: 1;
    filter: none;
  }

  .mobile-corner--top-left,
  .mobile-corner--bottom-right {
    transform: none;
  }

  .mobile-logo {
    transform: translate(-50%, -50%);
  }

  .mobile-companies .company {
    transform: none;
  }
}

/* Entrance finished: drop the layer hints so the GPU memory is freed. */
.page.is-entered * {
  will-change: auto;
}