/*
 * Shared brand loading contract.
 *
 * The document shell links this file before React starts, while the React
 * components import it through their small local CSS adapters. Keep the
 * nested x/y/image structure and the reduced-motion exception here so every
 * loading surface uses the same motion model.
 */

.brand-boomerang {
  --brand-boomerang-size: clamp(5.5rem, 15vmin, 9.75rem);
  --brand-boomerang-gutter: clamp(1rem, 3vmin, 2.25rem);
  --brand-boomerang-footer-space: clamp(7.625rem, 19vmin, 9.625rem);
  --brand-boomerang-travel-x: calc(100vw - var(--brand-boomerang-size) - (var(--brand-boomerang-gutter) * 2));
  --brand-boomerang-travel-y: calc(100svh - var(--brand-boomerang-size) - var(--brand-boomerang-footer-space) - (var(--brand-boomerang-gutter) * 2));
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.brand-boomerang--container {
  /* A containing block with a real width/height makes this variant safe for
     compact cards and inline loading thumbnails. */
  container-type: size;
  --brand-boomerang-size: clamp(2.75rem, 30%, 5.25rem);
  --brand-boomerang-gutter: clamp(0.5rem, 5%, 0.9rem);
  --brand-boomerang-footer-space: 0px;
  --brand-boomerang-travel-x: max(0px, calc(100cqw - var(--brand-boomerang-size) - (var(--brand-boomerang-gutter) * 2)));
  --brand-boomerang-travel-y: max(0px, calc(100cqh - var(--brand-boomerang-size) - (var(--brand-boomerang-gutter) * 2)));
}

.brand-boomerang__x {
  --brand-boomerang-x-duration: 10.5s;
  position: absolute;
  top: var(--brand-boomerang-gutter);
  left: var(--brand-boomerang-gutter);
  width: var(--brand-boomerang-size);
  height: var(--brand-boomerang-size);
  animation: brand-boomerang-bounce-x var(--brand-boomerang-x-duration) linear infinite alternate;
  will-change: transform;
}

.brand-boomerang__y {
  --brand-boomerang-y-duration: 7.2s;
  width: 100%;
  height: 100%;
  animation: brand-boomerang-bounce-y var(--brand-boomerang-y-duration) linear infinite alternate;
  will-change: transform;
}

.brand-boomerang__image {
  --brand-boomerang-spin-duration: 5.2s;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.9rem 1.2rem rgb(0 58 81 / 16%));
  animation: brand-boomerang-spin var(--brand-boomerang-spin-duration) linear infinite;
}

/* Keep the pink home mark identical in shape to the canonical green asset.
   The mask reuses its alpha channel while the background supplies the
   lilac-to-pink brand gradient, so changing tone never changes the motion or
   the silhouette. */
.brand-boomerang__image--pink {
  background: linear-gradient(
    180deg,
    var(--brand-lilac, #d194ff) 0%,
    var(--brand-pink, #ff7ba4) 100%
  );
  -webkit-mask: url('/brand/elements/organic-gradient-green.png') center / contain no-repeat;
  mask: url('/brand/elements/organic-gradient-green.png') center / contain no-repeat;
}

.brand-boomerang--page {
  z-index: 0;
}

.brand-boomerang--page .brand-boomerang__x {
  --brand-boomerang-x-duration: 8.2s;
}

.brand-boomerang--page .brand-boomerang__y {
  --brand-boomerang-y-duration: 5.4s;
}

.brand-boomerang--page .brand-boomerang__image {
  --brand-boomerang-spin-duration: 4.8s;
}

.brand-boomerang--easter-egg {
  z-index: 0;
  opacity: 0.24;
  mix-blend-mode: multiply;
}

.brand-boomerang--easter-egg .brand-boomerang__x {
  top: 13%;
  left: -2.5rem;
  --brand-boomerang-size: clamp(3.25rem, 7vw, 6rem);
  --brand-boomerang-x-duration: 12s;
}

.brand-boomerang--easter-egg .brand-boomerang__y {
  --brand-boomerang-y-duration: 8s;
}

.brand-boomerang--easter-egg .brand-boomerang__image {
  filter: drop-shadow(0 0.75rem 1rem rgb(0 58 81 / 18%));
  --brand-boomerang-spin-duration: 6s;
}

.brand-boomerang--container .brand-boomerang__x {
  --brand-boomerang-x-duration: 6.8s;
}

.brand-boomerang--container .brand-boomerang__y {
  --brand-boomerang-y-duration: 4.8s;
}

.brand-boomerang--container .brand-boomerang__image {
  --brand-boomerang-spin-duration: 4.2s;
}

@keyframes brand-boomerang-bounce-x {
  from { transform: translateX(0); }
  to { transform: translateX(var(--brand-boomerang-travel-x)); }
}

@keyframes brand-boomerang-bounce-y {
  from { transform: translateY(0); }
  to { transform: translateY(var(--brand-boomerang-travel-y)); }
}

@keyframes brand-boomerang-spin {
  to { transform: rotate(360deg); }
}

@supports not (height: 100svh) {
  .brand-boomerang:not(.brand-boomerang--container) {
    --brand-boomerang-travel-y: calc(100vh - var(--brand-boomerang-size) - var(--brand-boomerang-footer-space) - (var(--brand-boomerang-gutter) * 2));
  }
}

@supports not (width: 1cqw) {
  /* Older browsers still get a bounded, visible motion instead of a static
     thumbnail. Modern browsers use the actual container dimensions above. */
  .brand-boomerang--container {
    --brand-boomerang-travel-x: 3rem;
    --brand-boomerang-travel-y: 1.5rem;
  }
}

.brand-loading {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  place-items: center;
  container-type: size;
}

.brand-loading--full {
  min-height: 100vh;
  min-height: 100svh;
}

.brand-loading--compact {
  min-height: 7rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 76%);
}

.brand-loading__message {
  position: relative;
  z-index: 1;
  color: rgb(0 58 81 / 74%);
}

.brand-loading-message {
  display: inline-flex;
  align-items: baseline;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
}

.brand-loading-dots {
  display: inline-flex;
  flex: 0 0 1.25em;
  width: 1.25em;
  min-width: 1.25em;
  text-align: left;
}

.brand-loading-dot {
  display: block;
}

.brand-loading-dot:nth-child(2) {
  opacity: 0;
  animation: brand-loading-dot-two 1.5s steps(1, end) infinite;
  will-change: opacity;
}

.brand-loading-dot:nth-child(3) {
  opacity: 0;
  animation: brand-loading-dot-three 1.5s steps(1, end) infinite;
  will-change: opacity;
}

@keyframes brand-loading-dot-two {
  /* Opacity keeps this animation on the compositor while startup JavaScript
     is busy. Each state still changes abruptly instead of fading. */
  0%, 33.332% { opacity: 0; }
  33.333%, 100% { opacity: 1; }
}

@keyframes brand-loading-dot-three {
  /* The third dot appears only in the final 0.5s of the 1.5s cycle. */
  0%, 66.665% { opacity: 0; }
  66.666%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* The boomerang and dots are the branded loading cue. Keep this narrow
     exception while generic interface transitions remain reduced elsewhere. */
  .brand-boomerang__x {
    animation-name: brand-boomerang-bounce-x !important;
    animation-duration: var(--brand-boomerang-x-duration) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-play-state: running !important;
    transform: none;
  }

  .brand-boomerang__y {
    animation-name: brand-boomerang-bounce-y !important;
    animation-duration: var(--brand-boomerang-y-duration) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-play-state: running !important;
  }

  .brand-boomerang__image {
    animation-name: brand-boomerang-spin !important;
    animation-duration: var(--brand-boomerang-spin-duration) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-direction: normal !important;
    animation-play-state: running !important;
  }

  .brand-loading-dot:nth-child(2),
  .brand-loading-dot:nth-child(3) {
    animation-duration: 1.5s !important;
    animation-timing-function: steps(1, end) !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }

  .brand-loading-dot:nth-child(2) {
    animation-name: brand-loading-dot-two !important;
  }

  .brand-loading-dot:nth-child(3) {
    animation-name: brand-loading-dot-three !important;
  }
}