/* Large displays */

@media (min-width: 1600px) {
  :root {
    --logos-stage-world-height: 74svh;
  }

  .logos-landing-copy {
    bottom:
      calc(
        1.7rem +
        var(--logos-safe-bottom)
      );
  }
}

/* Short desktop and laptop screens */

@media (max-height: 850px) and (min-width: 901px) {
  :root {
    --logos-topbar-height: 4.2rem;
    --logos-stage-world-height: 69svh;
  }

  .logos-stage__world {
    top: 43%;
  }

  .logos-brand__mark {
    width: 2.45rem;
    height: 2.45rem;
  }

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

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

  .logos-landing-copy {
    bottom:
      calc(
        0.65rem +
        var(--logos-safe-bottom)
      );
  }

  .logos-landing-copy__headline {
    font-size:
      clamp(1.45rem, 2.25vw, 2.55rem);
  }

  .logos-landing-copy__lead {
    margin-top: 0.4rem;
    font-size: 0.76rem;
    line-height: 1.7;
  }

  .logos-landing-copy__sequence {
    margin-top: 0.28rem;
  }

  .logos-landing-copy__actions {
    margin-top: 0.6rem;
  }

  .logos-button {
    min-height: 2.8rem;
    padding:
      0.6rem 1rem;
  }

  .logos-landing-copy__hint {
    margin-top: 0.35rem;
  }

  .logos-discovery,
  .logos-system-hint {
    bottom:
      calc(
        0.65rem +
        var(--logos-safe-bottom)
      );
  }
}

/* Medium desktop */

@media (max-width: 1280px) {
  :root {
    --logos-panel-width:
      clamp(21rem, 32vw, 26rem);
  }

  .logos-module-node__label {
    min-width: 8rem;
    padding: 0.55rem 0.65rem;
  }

  .logos-module-node__subtitle {
    display: none;
  }

  .logos-module-node__title {
    font-size: 0.72rem;
  }

  .logos-module-node__title-en {
    font-size: 0.46rem;
  }

  .logos-stage.is-panel-open
  .logos-stage__world {
    transform:
      translate(
        calc(-50% + 6vw),
        -50%
      )
      scale(0.9);
  }

  .logos-stage.is-panel-open[data-panel-side="left"]
  .logos-stage__world {
    transform:
      translate(
        calc(-50% - 6vw),
        -50%
      )
      scale(0.9);
  }
}

/* Tablet */

@media (max-width: 1024px) {
  :root {
    --logos-page-padding-inline: 1.25rem;
    --logos-stage-world-height: 67svh;
  }

  .logos-stage__world {
    top: 42%;
    width: min(
      110vw,
      calc(
        var(--logos-stage-world-height) *
        var(--logos-stage-world-ratio)
      )
    );
  }

  .logos-module-node__label {
    opacity: 0;
    pointer-events: none;
  }

  .logos-module-node:hover
  .logos-module-node__label,
  .logos-module-node.is-active
  .logos-module-node__label,
  .logos-module-node[aria-pressed="true"]
  .logos-module-node__label {
    opacity: 1;
  }

  .logos-module-node__status {
    top: 2%;
    left: 2%;
    min-width: 2rem;
    min-height: 1.4rem;
    padding: 0.18rem 0.38rem;
  }

  .logos-module-node__status-dot {
    display: none;
  }

  .logos-module-node__number {
    font-size: 0.54rem;
  }

  .logos-discovery {
    right: 1rem;
    bottom:
      calc(
        1rem +
        var(--logos-safe-bottom)
      );
  }

  .logos-system-hint {
    left: 1rem;
    bottom:
      calc(
        1rem +
        var(--logos-safe-bottom)
      );
  }

  .logos-module-panel {
    width: min(25rem, 84vw);
  }

  .logos-stage.is-panel-open
  .logos-stage__world,
  .logos-stage.is-panel-open[data-panel-side="left"]
  .logos-stage__world {
    transform:
      translate(-50%, -50%)
      scale(0.94);
    opacity: 0.38;
    filter: blur(2px);
  }
}

/* Mobile */

@media (max-width: 767px) {
  :root {
    --logos-page-padding-inline: 0.9rem;
    --logos-page-padding-block: 0.65rem;
    --logos-topbar-height: 4rem;
  }

  .logos-main,
  .logos-landing,
  .logos-stage {
    min-height: 100svh;
    height: 100svh;
  }

  .logos-topbar {
    min-height: var(--logos-topbar-height);
  }

  .logos-brand {
    gap: 0.55rem;
  }

  .logos-brand__mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.78rem;
  }

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

  .logos-brand__name {
    font-size: 0.8rem;
  }

  .logos-brand__descriptor {
    display: none;
  }

  .logos-icon-button {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
  }

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

  .logos-stage__viewport {
    display: flex;
    flex-direction: column;
  }

  .logos-stage__world {
    top: 35%;
    width: min(124vw, 39rem);
    height: min(53svh, 26rem);
  }

  .logos-orchestration-frame {
    opacity: 0.46;
  }

  .logos-orchestration-frame::before,
  .logos-orchestration-frame::after {
    display: none;
  }

  .logos-core-node {
    top: 42% !important;
    width: 37% !important;
  }

  .logos-module-node {
    width: 18% !important;
  }

  .logos-module-node__status,
  .logos-module-node__label,
  .logos-module-node__discovered {
    display: none;
  }

  /* Compact mobile constellation */

  .logos-module-node[data-module-id="strategic-brain"] {
    left: 50% !important;
    top: 2% !important;
  }

  .logos-module-node[data-module-id="operations-command"] {
    left: 82% !important;
    top: 27% !important;
  }

  .logos-module-node[data-module-id="growth-engine"] {
    left: 79% !important;
    top: 72% !important;
  }

  .logos-module-node[data-module-id="human-capital"] {
    left: 50% !important;
    top: 91% !important;
  }

  .logos-module-node[data-module-id="intelligence-center"] {
    left: 21% !important;
    top: 72% !important;
  }

  .logos-module-node[data-module-id="financial-hub"] {
    left: 18% !important;
    top: 27% !important;
  }

  .logos-landing-copy {
    right: 0.8rem;
    bottom:
      calc(
        0.85rem +
        var(--logos-safe-bottom)
      );
    left: 0.8rem;
    width: auto;
    transform: none;
  }

  .logos-stage.is-panel-open
  .logos-landing-copy {
    transform: translateY(0.5rem);
  }

  .logos-landing-copy__eyebrow {
    font-size: 0.56rem;
  }

  .logos-landing-copy__eyebrow-line {
    width: 1.5rem;
  }

  .logos-landing-copy__headline {
    margin-top: 0.42rem;
    font-size:
      clamp(1.45rem, 7vw, 2.15rem);
    letter-spacing: -0.04em;
  }

  .logos-landing-copy__lead {
    max-width: 28rem;
    margin-top: 0.45rem;
    font-size: 0.69rem;
    line-height: 1.75;
  }

  .logos-landing-copy__sequence {
    margin-top: 0.32rem;
    gap: 0.35rem;
    font-size: 0.54rem;
  }

  .logos-landing-copy__actions {
    display: grid;
    margin-top: 0.7rem;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .logos-button {
    min-height: 2.85rem;
    padding:
      0.65rem 0.75rem;
    gap: 0.5rem;
    border-radius: 0.9rem;
    font-size: 0.72rem;
  }

  .logos-button__icon {
    width: 1.55rem;
    height: 1.55rem;
  }

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

  .logos-landing-copy__hint {
    display: none;
  }

  .logos-discovery {
    top:
      calc(
        var(--logos-topbar-height) +
        var(--logos-safe-top) +
        0.4rem
      );
    right: 50%;
    bottom: auto;

    width: 8.6rem;

    padding: 0.55rem 0.65rem;

    transform: translateX(50%);
  }

  .logos-stage.is-panel-open
  .logos-discovery {
    transform:
      translateX(50%)
      translateY(-0.5rem);
  }

  .logos-discovery__title {
    font-size: 0.44rem;
  }

  .logos-discovery__count {
    font-size: 0.52rem;
  }

  .logos-discovery__track {
    gap: 0.2rem;
  }

  .logos-system-hint {
    right: 0.75rem;
    bottom:
      calc(
        0.75rem +
        var(--logos-safe-bottom)
      );
    left: 0.75rem;
    width: auto;
  }

  /* Bottom sheet */

  .logos-module-panel-layer {
    display: flex;
    align-items: flex-end;
  }

  .logos-module-panel-backdrop {
    background:
      rgba(3, 38, 28, 0.2);
  }

  .logos-module-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    max-width: none;
    max-height: min(82svh, 43rem);

    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius:
      1.65rem
      1.65rem
      0
      0;

    transform:
      translateY(calc(100% + 2rem));
  }

  .logos-module-panel::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;

    width: 2.7rem;
    height: 0.26rem;

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

    background: rgba(0, 95, 67, 0.18);

    transform: translateX(-50%);
  }

  .logos-module-panel-layer.is-open
  .logos-module-panel,
  .logos-module-panel-layer.is-open[data-side="left"]
  .logos-module-panel,
  .logos-module-panel-layer.is-open.is-left
  .logos-module-panel {
    right: 0;
    left: 0;
    transform: translateY(0);
  }

  .logos-module-panel__topbar {
    min-height: 3.7rem;
    padding-top: 0.35rem;
  }

  .logos-module-panel__header {
    padding:
      1rem
      1rem
      0.85rem;
  }

  .logos-module-panel__header::after {
    right: 1rem;
    left: 1rem;
  }

  .logos-module-panel__title {
    margin-top: 0.75rem;
    font-size: 1.4rem;
  }

  .logos-module-panel__body {
    padding:
      0.85rem
      1rem
      1rem;
  }

  .logos-module-panel__footer {
    padding:
      0.75rem
      1rem
      calc(
        0.75rem +
        var(--logos-safe-bottom)
      );
  }

  .logos-module-panel__next {
    font-size: 0;
  }

  .logos-module-panel__next svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  /* Demo dialog */

  .logos-demo-dialog {
    width: calc(
      100vw -
      1rem -
      var(--logos-safe-right) -
      var(--logos-safe-left)
    );

    max-height:
      calc(
        100svh -
        1rem -
        var(--logos-safe-top) -
        var(--logos-safe-bottom)
      );

    border-radius: 1.35rem;
  }

  .logos-demo-dialog__shell {
    display: block;
    min-height: auto;
  }

  .logos-demo-dialog__visual {
    display: none;
  }

  .logos-demo-dialog__content {
    max-height:
      calc(
        100svh -
        1rem -
        var(--logos-safe-top) -
        var(--logos-safe-bottom)
      );

    padding:
      1.25rem
      1rem
      calc(
        1.2rem +
        var(--logos-safe-bottom)
      );
  }

  .logos-demo-dialog__close {
    top: 0.75rem;
    left: 0.75rem;
  }

  .logos-demo-dialog__header {
    padding-left: 2.7rem;
  }

  .logos-demo-dialog__header h2 {
    font-size: 1.45rem;
  }

  .logos-demo-form__grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .logos-form-field--wide {
    grid-column: auto;
  }

  .logos-demo-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .logos-demo-form__submit {
    width: 100%;
  }

  .logos-demo-success {
    min-height: 28rem;
    padding: 1rem;
  }
}

/* Very small mobile */

@media (max-width: 420px) {
  .logos-stage__world {
    top: 34%;
    width: 132vw;
    height: min(51svh, 24rem);
  }

  .logos-core-node {
    width: 39% !important;
  }

  .logos-module-node {
    width: 17% !important;
  }

  .logos-landing-copy__lead {
    max-width: 22rem;
  }

  .logos-landing-copy__sequence {
    font-size: 0.49rem;
  }

  .logos-button {
    font-size: 0.67rem;
  }
}

/* Very short mobile */

@media (max-width: 767px) and (max-height: 700px) {
  .logos-stage__world {
    top: 31%;
    height: 45svh;
  }

  .logos-landing-copy__eyebrow {
    display: none;
  }

  .logos-landing-copy__headline {
    font-size: 1.45rem;
  }

  .logos-landing-copy__lead {
    font-size: 0.63rem;
    line-height: 1.6;
  }

  .logos-landing-copy__sequence {
    display: none;
  }

  .logos-landing-copy__actions {
    margin-top: 0.5rem;
  }

  .logos-button {
    min-height: 2.55rem;
  }
}

/* Touch devices */

@media (hover: none) and (pointer: coarse) {
  .logos-module-node:hover {
    filter: none;
  }

  .logos-module-node:hover::before {
    transform: scale(0.92);
  }

  .logos-button:hover,
  .logos-icon-button:hover,
  .logos-brand:hover
  .logos-brand__mark {
    transform: none;
  }
}

/* Fallback for browsers without backdrop-filter */

@supports not (
  backdrop-filter: blur(1rem)
) {
  .logos-brand__mark,
  .logos-icon-button,
  .logos-module-node__status,
  .logos-module-node__label,
  .logos-discovery,
  .logos-system-hint,
  .logos-module-panel,
  .logos-button--secondary {
    background: rgba(255, 255, 255, 0.95);
  }

  .logos-demo-dialog::backdrop {
    background:
      rgba(4, 31, 23, 0.7);
  }
}

/* Fallback for browsers without color-mix */

@supports not (
  color:
    color-mix(
      in srgb,
      white 50%,
      black
    )
) {
  .logos-module-node::before,
  .logos-module-node__halo {
    background:
      radial-gradient(
        circle,
        rgba(0, 201, 133, 0.18),
        transparent 68%
      );
  }

  .logos-module-node:hover,
  .logos-module-node.is-active {
    filter:
      drop-shadow(
        0 0 1.2rem rgba(0, 201, 133, 0.32)
      );
  }

  .logos-module-node.is-active
  .logos-module-node__focus-ring {
    border-color:
      rgba(0, 201, 133, 0.7);
    box-shadow:
      0 0 0 0.25rem rgba(0, 201, 133, 0.12);
  }
}