/* Home-only critical layout and animation budget. */
/* On the homepage the language choice belongs to the document footer rather
   than the viewport chrome. Other pages keep the shared switcher behavior. */
body[data-atmosphere="home"] > .site-footer > .locale-switcher {
  position: static !important;
  display: flex;
  width: max-content;
  margin: 18px auto 0 !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  z-index: auto;
}

body[data-atmosphere="home"] .content-column {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  transform: translateX(-3vw);
  pointer-events: none;
}

body[data-atmosphere="home"] .content-column .content {
  width: 100%;
  transform: none;
  pointer-events: auto;
}

body[data-atmosphere="home"] #mainCta {
  pointer-events: auto;
}

/* Keep card placement in a compositor transform without bringing back the
   animated registered custom properties that caused style recalculation. */
body[data-atmosphere="home"] .spread-card {
  /* The source deck is 729x1262. Keeping the real ratio prevents the card
     artwork (including its gold frame) from being cropped by object-fit. */
  aspect-ratio: 729 / 1262;
  transform: translate3d(
      calc(-50% + var(--card-x, 0px)),
      calc(-50% + var(--card-y, 0px)),
      0
    )
    rotateZ(var(--card-rot, 0deg))
    scale(var(--card-scale, 1));
  animation: none !important;
  will-change: auto;
}

body[data-atmosphere="home"] .spread-card img {
  object-fit: contain;
}

/* Move the complete card element, not the image inside its clipped frame.
   Individual transform longhands compose with the static placement transform
   above, so the whole artwork moves without exposing/cutting its edges. */
html.perf-high body[data-atmosphere="home"] .spread-object.is-active .spread-card {
  animation: spreadCardElementDrift var(--float-dur, 6.2s) ease-in-out infinite !important;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
}

html.perf-high body[data-atmosphere="home"] .spread-object.is-active .spread-card img {
  animation: none !important;
  will-change: auto;
}

/* Keep every morph ring centered on the actual control. The shared legacy
   offset was tailored to the old layout and shifted the homepage rings up. */
body[data-atmosphere="home"] .morph-btn__canvas {
  top: 50%;
}

body[data-atmosphere="home"] .spread-object:not(.is-active) .spread-object__cards,
body[data-atmosphere="home"] .spread-object:not(.is-active) .spread-card,
body[data-atmosphere="home"] .spread-object:not(.is-active) .spread-card img,
body[data-atmosphere="home"] .spread-object:not(.is-active) .spread-card::after {
  animation: none !important;
  will-change: auto !important;
}

html.perf-standard body[data-atmosphere="home"] .spread-object.is-active .spread-object__cards {
  animation: spreadCardsFloat 10s ease-in-out infinite !important;
}

html.perf-lite body[data-atmosphere="home"] .spread-object.is-active .spread-object__cards {
  animation: spreadCardsFloat 14s ease-in-out infinite !important;
}

html.perf-standard body[data-atmosphere="home"] .spread-card img,
html.perf-lite body[data-atmosphere="home"] .spread-card img,
html.perf-standard body[data-atmosphere="home"] .spread-card::after,
html.perf-lite body[data-atmosphere="home"] .spread-card::after {
  animation: none !important;
  will-change: auto !important;
}

@keyframes spreadCardElementDrift {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: var(--float-amp-x, 4px) var(--float-amp-y, -7px);
    rotate: var(--float-amp-rot, 0.7deg);
  }
}

/* The sea shader now owns the moving fog. These layers remain as a static
   tonal composition without six permanent CSS animations and SVG filters. */
body[data-atmosphere="home"] .fog-back::before,
body[data-atmosphere="home"] .fog-back::after,
body[data-atmosphere="home"] .fog-mid::before,
body[data-atmosphere="home"] .fog-mid::after,
body[data-atmosphere="home"] .fog-front::before,
body[data-atmosphere="home"] .fog-front::after {
  animation: none !important;
  will-change: auto !important;
}

body[data-atmosphere="home"] .fog-front::before,
body[data-atmosphere="home"] .fog-front::after {
  filter: blur(6px) contrast(1.08);
}

body[data-atmosphere="home"] .portal-wrap.orbit-ready .card-stack,
body[data-atmosphere="home"] .portal-wrap.orbit-ready .card-fx-shell {
  display: none !important;
  animation: none !important;
  will-change: auto !important;
}

@media (min-width: 901px) and (max-width: 1350px) {
  body[data-atmosphere="home"] .content-column {
    transform: translateX(6vw);
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  body[data-atmosphere="home"] .content-column {
    transform: translateX(1vw);
  }
}

@media (max-width: 900px) {
  body[data-atmosphere="home"] .content-column {
    display: contents;
    transform: none;
  }

  body[data-atmosphere="home"] .content-column .content {
    order: 1;
  }

  body[data-atmosphere="home"] #mainCta {
    order: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-atmosphere="home"] .spread-object__cards,
  body[data-atmosphere="home"] .spread-card img,
  body[data-atmosphere="home"] .spread-card::after {
    animation: none !important;
    will-change: auto !important;
  }
}