* {
  box-sizing: border-box;
}

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

/* Locks scrolling at the viewport. body stays unclipped so the artwork can
   bleed under Safari's bottom toolbar. */
html {
  overflow: hidden;
}

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-x: clip;
  overflow-y: visible;
  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-x: clip;
      overflow-y: visible;
      background: var(--page-background);
    }

    /* Safari paints content that overflows the viewport bottom under its
       toolbar, but nothing above the top edge. Continue the wave colors
       below the page, and fade the top-left circle into the page color
       where the viewport cuts it off (unless html.is-bleed lets it
       continue above). */
    .mobile-stage::before,
    .mobile-stage::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
      pointer-events: none;
    }

    .mobile-stage::before {
      top: 0;
      height: calc(56px * var(--mobile-stage-scale));
      background: linear-gradient(var(--page-background), rgb(86 101 126 / 0));
    }

    /* Both waves are full-width rectangles at their bottom edge; this is
       their two gradients stacked over the page color. Starts 0.5px early
       to cover the sliver under the top wave. */
    .mobile-stage::after {
      top: calc(100% - 0.5px * var(--mobile-stage-scale));
      /* Toolbar height varies by Safari tab layout and isn't exposed to CSS;
         a full viewport is always enough and never scrolls. */
      height: 100lvh;
      background:
        linear-gradient(to left, rgb(217 217 217 / 0.25), rgb(115 115 115 / 0.25)),
        linear-gradient(to left, rgb(140 141 143 / 0.3), rgb(240 242 245 / 0.3)),
        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;
    }

    /* iOS Safari (set by script.js): the page sits --top-bleed down the
       document and is pinned there, so the strip above it shows under the
       status bar and address bar. The circles move out by about a status
       bar's height, into the areas under Safari's top and bottom bars. */
    html.is-bleed {
      overflow: visible;
      overscroll-behavior: none;
    }

    html.is-bleed .page {
      margin-top: var(--top-bleed);
    }

    html.is-bleed .mobile-anchor--top-left {
      top: calc(0px - var(--mobile-bleed-shift) * var(--mobile-stage-scale));
    }

    html.is-bleed .mobile-anchor--bottom-right {
      bottom: calc(0px - var(--mobile-bleed-shift) * var(--mobile-stage-scale));
    }

    html.is-bleed .mobile-stage::before {
      display: none;
    }

    .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;
    }

    /* The logo and the two company lines are centered as one block (it runs
       24px above to 117px below the logo's center), then nudged a little
       higher toward the open space above the waves. */
    .mobile-logo {
      top: calc(50% - var(--mobile-identity-shift));
      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 - var(--mobile-identity-shift));
      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;
}

/* Entrance finished: hold every element at its end state without the
   animation. The layout that was hidden during the entrance (the other
   orientation) then appears settled after a rotation; iOS Safari doesn't
   always start its animations there. */
.page.is-entered .corner,
.page.is-entered .logo,
.page.is-entered .companies .company,
.page.is-entered .company-divider,
.page.is-entered .legal,
.page.is-entered .mobile-corner,
.page.is-entered .mobile-logo,
.page.is-entered .mobile-companies .company,
.page.is-entered .mobile-legal {
  animation: none;
  opacity: 1;
  filter: none;
}

.page.is-entered .corner,
.page.is-entered .companies .company,
.page.is-entered .company-divider,
.page.is-entered .mobile-corner,
.page.is-entered .mobile-companies .company {
  transform: none;
}

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

.page.is-entered .company-divider {
  opacity: var(--company-divider-opacity);
}