@import url("./homepage-upload-status.css");
@import url("./homepage-upload-carousel.css");

/* Values come from the homepage component owner. No private visual palette. */
.homepage-quote {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.homepage-quote__background,
.homepage-quote__background-author,
.homepage-quote__foreground {
  position: absolute;
}

.homepage-quote__moving-mask {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--homepage-aperture-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--homepage-aperture-mask) 0 0 / 100% 100% no-repeat;
}

.homepage-quote__author-layer {
  position: absolute;
  inset: 0;
}

.homepage-quote[data-background-author-motion="horizontal"] .homepage-quote__author-layer,
.homepage-quote[data-background-author-motion="vertical"] .homepage-quote__author-layer {
  -webkit-mask: var(--homepage-aperture-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--homepage-aperture-mask) 0 0 / 100% 100% no-repeat;
}

.homepage-quote__author-track {
  display: flex;
  width: max-content;
}

.homepage-quote__author-unit {
  display: block;
  flex: none;
}

.homepage-quote[data-background-author-motion="horizontal"] .homepage-quote__author-track,
.homepage-quote[data-background-author-motion="vertical"] .homepage-quote__author-track {
  animation: homepage-author-travel var(--homepage-quote-duration) linear infinite;
}

.homepage-quote[data-background-author-motion="horizontal"] .homepage-quote__author-unit,
.homepage-quote[data-background-author-motion="vertical"] .homepage-quote__author-unit {
  padding-inline-end: var(--homepage-quote-repeat-gap);
}

.homepage-quote[data-background-author-motion="vertical"] .homepage-quote__author-track {
  writing-mode: horizontal-tb;
  flex-direction: column;
}

.homepage-quote[data-background-author-motion="vertical"] .homepage-quote__author-unit {
  writing-mode: vertical-rl;
}

.homepage-quote__background {
  display: flex;
  gap: var(--homepage-quote-background-gap);
}

.homepage-quote[data-background-layout="rows"] .homepage-quote__background {
  flex-direction: column;
}

.homepage-quote__lane {
  flex: none;
}

.homepage-quote__track {
  display: flex;
  width: max-content;
  animation: homepage-quote-travel var(--homepage-quote-duration) linear infinite;
}

.homepage-quote__lane[data-direction="reverse"] .homepage-quote__track {
  animation-direction: reverse;
}

.homepage-quote__unit {
  display: block;
  flex: none;
  white-space: nowrap;
  padding-inline-end: var(--homepage-quote-repeat-gap);
}

.homepage-quote[data-background-layout="columns"] .homepage-quote__track {
  flex-direction: column;
}

.homepage-quote[data-background-layout="columns"] .homepage-quote__unit {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.homepage-quote[data-background-layout="columns"] .homepage-quote__background-author {
  writing-mode: vertical-rl;
}

.homepage-quote__background-author {
  white-space: nowrap;
}

.homepage-quote__author-metric-probe {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  white-space: pre;
  writing-mode: horizontal-tb;
}

.homepage-quote__author-baseline {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

.homepage-quote__foreground {
  display: flex;
  flex-direction: column;
  gap: var(--homepage-quote-foreground-gap);
  margin: 0;
  max-width: 100%;
}

.homepage-quote__text {
  margin: 0;
}

.homepage-quote__author {
  align-self: flex-end;
  font-style: normal;
}

.homepage-quote[data-foreground-writing-mode="vertical-rl"] .homepage-quote__foreground {
  flex-direction: row;
}

.homepage-quote[data-foreground-writing-mode="vertical-rl"] .homepage-quote__text,
.homepage-quote[data-foreground-writing-mode="vertical-rl"] .homepage-quote__author {
  writing-mode: vertical-rl;
}

/* A transparent wrapper with no stacking context preserves the shared backdrop. */
.homepage-instructions {
  position: relative;
  z-index: auto;
  isolation: auto;
}

.homepage-instructions__line {
  margin: 0;
}

.homepage-instructions__line + .homepage-instructions__line {
  margin-block-start: var(--homepage-instructions-line-gap);
}

.homepage-instructions__selection {
  display: inline-block;
  max-width: 100%;
  color: var(--homepage-instructions-selection-text);
  background-color: transparent;
  -webkit-backdrop-filter: var(--homepage-instructions-selection-backdrop-filter);
  backdrop-filter: var(--homepage-instructions-selection-backdrop-filter);
  padding: var(--homepage-instructions-selection-block-padding) var(--homepage-instructions-selection-inline-padding);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow-wrap: anywhere;
}

@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  .homepage-instructions__selection {
    background-color: var(--homepage-instructions-selection-source);
  }
}

.homepage-instructions__risk {
  margin: var(--homepage-instructions-risk-gap) 0 0;
  color: var(--homepage-instructions-risk-color);
  font-size: var(--homepage-instructions-risk-size);
  line-height: var(--homepage-instructions-risk-line-height);
}

@keyframes homepage-quote-travel {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--homepage-quote-travel-x), var(--homepage-quote-travel-y)); }
}

@keyframes homepage-author-travel {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--homepage-quote-author-travel-x), var(--homepage-quote-author-travel-y)); }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-quote__track { animation: none; }
  .homepage-quote__author-track { animation: none !important; }
}