/* Topbar */

.logos-topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--logos-z-topbar);

  display: flex;
  min-height: var(--logos-topbar-height);
  align-items: center;
  justify-content: space-between;

  padding:
    calc(
      var(--logos-page-padding-block) +
      var(--logos-safe-top)
    )
    calc(
      var(--logos-page-padding-inline) +
      var(--logos-safe-right)
    )
    var(--logos-page-padding-block)
    calc(
      var(--logos-page-padding-inline) +
      var(--logos-safe-left)
    );

  pointer-events: none;
}

.logos-topbar > * {
  pointer-events: auto;
}

.logos-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  direction: ltr;
}

.logos-brand__mark {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;

  border:
    1px solid rgba(0, 201, 133, 0.2);
  border-radius: 0.95rem;

  background: rgba(255, 255, 255, 0.64);
  box-shadow: var(--logos-shadow-sm);
  backdrop-filter: blur(1rem);

  transition:
    transform var(--logos-duration-normal)
      var(--logos-ease),
    border-color var(--logos-duration-normal)
      var(--logos-ease);
}

.logos-brand:hover
.logos-brand__mark {
  border-color:
    rgba(0, 201, 133, 0.45);
  transform: translateY(-2px);
}

.logos-brand__mark img {
  width: 1.8rem;
  height: 1.8rem;
}

.logos-brand__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logos-brand__name {
  color: var(--logos-deep-2);
  font-family: var(--logos-font-en);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.1;
}

.logos-brand__descriptor {
  margin-top: 0.2rem;
  color: var(--logos-ink-muted);
  font-family: var(--logos-font-en);
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.logos-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.logos-icon-button {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;

  border:
    1px solid var(--logos-line);
  border-radius: 0.9rem;

  color: var(--logos-deep);
  background: rgba(255, 255, 255, 0.63);
  box-shadow: var(--logos-shadow-xs);
  backdrop-filter: blur(1rem);

  transition:
    color var(--logos-duration-fast)
      ease,
    border-color var(--logos-duration-fast)
      ease,
    background var(--logos-duration-fast)
      ease,
    transform var(--logos-duration-fast)
      ease;
}

.logos-icon-button:hover {
  color: var(--logos-mint);
  border-color:
    rgba(0, 201, 133, 0.36);
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-2px);
}

.logos-icon-button svg {
  width: 1.2rem;
  height: 1.2rem;
}

.logos-motion-icon--play {
  display: none;
}

.logos-icon-button[aria-pressed="true"]
.logos-motion-icon--pause {
  display: none;
}

.logos-icon-button[aria-pressed="true"]
.logos-motion-icon--play {
  display: block;
}

/* Landing copy */

.logos-landing-copy {
  position: absolute;
  left: 50%;
  bottom:
    calc(
      1.35rem +
      var(--logos-safe-bottom)
    );
  z-index: var(--logos-z-copy);

  width: min(92vw, 41rem);

  text-align: center;

  transform:
    translateX(-50%);

  transition:
    opacity var(--logos-duration-normal)
      var(--logos-ease),
    transform var(--logos-duration-slow)
      var(--logos-ease),
    filter var(--logos-duration-normal)
      var(--logos-ease);
}

.logos-stage.is-panel-open
.logos-landing-copy {
  opacity: 0.2;
  filter: blur(2px);
  transform:
    translateX(-50%)
    translateY(1rem);
  pointer-events: none;
}

.logos-landing-copy__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;

  color: var(--logos-deep);
  font-size: clamp(0.66rem, 0.8vw, 0.82rem);
  font-weight: 800;
}

.logos-landing-copy__eyebrow-line {
  display: block;
  width: clamp(1.8rem, 4vw, 4rem);
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0, 201, 133, 0.5)
    );
}

.logos-landing-copy__eyebrow-line:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(0, 201, 133, 0.5),
      transparent
    );
}

.logos-landing-copy__headline {
  margin-top: 0.55rem;

  color: var(--logos-ink);

  font-size:
    clamp(1.65rem, 2.8vw, 3.3rem);

  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 1.1;

  text-wrap: balance;
}

.logos-landing-copy__lead {
  max-width: 40rem;
  margin:
    0.65rem auto 0;

  color: var(--logos-ink-3);

  font-size:
    clamp(0.78rem, 0.95vw, 1rem);

  font-weight: 520;
  line-height: 1.9;

  text-wrap: balance;
}

.logos-landing-copy__sequence {
  display: flex;
  margin-top: 0.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  color: var(--logos-deep);

  font-size:
    clamp(0.62rem, 0.75vw, 0.78rem);

  font-weight: 800;
}

.logos-landing-copy__sequence-separator {
  color: rgba(0, 201, 133, 0.45);
}

.logos-landing-copy__actions {
  display: flex;
  margin-top: 0.85rem;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.logos-landing-copy__hint {
  display: inline-flex;
  margin-top: 0.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;

  color: var(--logos-ink-muted);

  font-size:
    clamp(0.58rem, 0.66vw, 0.68rem);

  font-weight: 650;
}

.logos-landing-copy__hint-icon {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  color: var(--logos-mint);
}

.logos-landing-copy__hint-icon svg {
  width: 100%;
  height: 100%;
}

/* Buttons */

.logos-button {
  position: relative;
  isolation: isolate;

  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;

  overflow: hidden;

  padding:
    0.75rem 1.3rem;

  border-radius: var(--logos-radius-md);

  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1;

  transition:
    transform var(--logos-duration-normal)
      var(--logos-ease),
    box-shadow var(--logos-duration-normal)
      var(--logos-ease),
    border-color var(--logos-duration-normal)
      var(--logos-ease),
    background var(--logos-duration-normal)
      var(--logos-ease);
}

.logos-button__label,
.logos-button__icon {
  position: relative;
  z-index: 2;
}

.logos-button__icon {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
}

.logos-button__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

[dir="rtl"]
.logos-button__icon svg {
  transform: rotate(180deg);
}

.logos-button--primary {
  border:
    1px solid rgba(0, 95, 67, 0.1);

  color: var(--logos-white);

  background:
    linear-gradient(
      135deg,
      var(--logos-deep-3),
      var(--logos-deep),
      var(--logos-mint)
    );

  box-shadow:
    0 12px 28px rgba(0, 95, 67, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.18);
}

.logos-button--primary
.logos-button__glow {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      110deg,
      transparent 18%,
      rgba(255, 255, 255, 0.28) 42%,
      transparent 66%
    );

  transform: translateX(-130%);
}

.logos-button--primary
.logos-button__icon {
  border:
    1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

.logos-button--primary:hover {
  box-shadow:
    0 17px 36px rgba(0, 95, 67, 0.28),
    0 0 2.8rem rgba(0, 201, 133, 0.18);
  transform: translateY(-3px);
}

.logos-button--primary:hover
.logos-button__glow {
  transform: translateX(130%);
  transition:
    transform 700ms var(--logos-ease);
}

.logos-button--secondary {
  border:
    1px solid rgba(0, 95, 67, 0.18);

  color: var(--logos-deep);

  background: rgba(255, 255, 255, 0.72);

  box-shadow: var(--logos-shadow-sm);

  backdrop-filter: blur(1rem);
}

.logos-button--secondary
.logos-button__icon {
  border:
    1px solid rgba(0, 95, 67, 0.12);
  background: rgba(0, 201, 133, 0.06);
}

.logos-button--secondary:hover {
  border-color:
    rgba(0, 201, 133, 0.4);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    var(--logos-shadow-md);
  transform: translateY(-3px);
}

.logos-button--compact {
  min-height: 2.85rem;
  padding:
    0.65rem 1rem;
  border-radius: var(--logos-radius-sm);
  font-size: 0.77rem;
}

/* Discovery */

.logos-discovery {
  position: absolute;
  right:
    calc(
      var(--logos-page-padding-inline) +
      var(--logos-safe-right)
    );
  bottom:
    calc(
      1.4rem +
      var(--logos-safe-bottom)
    );
  z-index: var(--logos-z-interface);

  width: clamp(9rem, 12vw, 12.5rem);

  padding: 0.72rem 0.85rem;

  border:
    1px solid var(--logos-line);
  border-radius: var(--logos-radius-md);

  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--logos-shadow-sm);
  backdrop-filter: blur(1.1rem);

  transition:
    opacity var(--logos-duration-normal)
      var(--logos-ease),
    transform var(--logos-duration-normal)
      var(--logos-ease);
}

.logos-stage.is-panel-open
.logos-discovery {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

.logos-discovery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.logos-discovery__title {
  color: var(--logos-deep);
  font-family: var(--logos-font-en);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.logos-discovery__count {
  color: var(--logos-ink-muted);
  font-family: var(--logos-font-en);
  font-size: 0.62rem;
  font-weight: 800;
}

.logos-discovery__count strong {
  color: var(--logos-mint);
}

.logos-discovery__track {
  display: grid;
  margin-top: 0.55rem;
  grid-template-columns:
    repeat(6, 1fr);
  gap: 0.3rem;
}

.logos-discovery__dot {
  display: block;
  height: 0.28rem;
  border-radius: var(--logos-radius-pill);
  background: rgba(0, 95, 67, 0.12);
  transition:
    background var(--logos-duration-normal)
      var(--logos-ease),
    box-shadow var(--logos-duration-normal)
      var(--logos-ease),
    transform var(--logos-duration-normal)
      var(--logos-ease);
}

.logos-discovery__dot.is-complete {
  background: var(--logos-mint);
  box-shadow:
    0 0 0.7rem rgba(0, 201, 133, 0.28);
  transform: scaleY(1.3);
}

.logos-discovery__complete {
  display: flex;
  margin-top: 0.55rem;
  align-items: center;
  gap: 0.45rem;
  color: var(--logos-success);
  font-family: var(--logos-font-en);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.logos-discovery__complete-signal {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--logos-mint);
  box-shadow:
    0 0 0 0.2rem rgba(0, 201, 133, 0.12),
    0 0 0.8rem rgba(0, 201, 133, 0.35);
}

/* System hint */

.logos-system-hint {
  position: fixed;
  left:
    calc(
      var(--logos-page-padding-inline) +
      var(--logos-safe-left)
    );
  bottom:
    calc(
      1.4rem +
      var(--logos-safe-bottom)
    );
  z-index: var(--logos-z-interface);

  display: flex;
  width: min(90vw, 23rem);
  align-items: center;
  gap: 0.8rem;

  padding: 0.85rem;

  border:
    1px solid rgba(0, 201, 133, 0.18);
  border-radius: var(--logos-radius-md);

  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--logos-shadow-md);
  backdrop-filter: blur(1.2rem);

  opacity: 0;
  transform:
    translateY(1rem)
    scale(0.97);

  pointer-events: none;

  transition:
    opacity var(--logos-duration-normal)
      var(--logos-ease),
    transform var(--logos-duration-normal)
      var(--logos-ease);
}

.logos-system-hint.is-visible,
.logos-system-hint[aria-hidden="false"] {
  opacity: 1;
  transform:
    translateY(0)
    scale(1);
  pointer-events: auto;
}

.logos-system-hint__icon {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.8rem;
  color: var(--logos-mint);
  background: rgba(0, 201, 133, 0.08);
}

.logos-system-hint__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.logos-system-hint__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
}

.logos-system-hint__content strong {
  color: var(--logos-ink);
  font-size: 0.77rem;
  font-weight: 900;
}

.logos-system-hint__content span {
  color: var(--logos-ink-3);
  font-size: 0.65rem;
  font-weight: 550;
  line-height: 1.75;
}

.logos-system-hint__close {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--logos-ink-muted);
  background: transparent;
}

.logos-system-hint__close:hover {
  color: var(--logos-deep);
  background: rgba(0, 95, 67, 0.06);
}

.logos-system-hint__close svg {
  width: 1rem;
  height: 1rem;
}