@import url('./tablet-polish.css?v=20260901-155500');

/* ============================================================
   Moove native fallback — static editorial presentation

   Applies only when the Three.js enhancement is not pending/active and the
   desktop prepaint guard is not holding the enhanced startup geometry.
   ============================================================ */

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active) {
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(3.75rem, 7vh, 6rem));
  padding-bottom: clamp(3.75rem, 7vh, 6rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-stage {
  width: 100%;
  position: relative;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-composition {
  width: min(92vw, 1560px);
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.52fr) minmax(0, 1.48fr);
  align-items: center;
  gap: clamp(2.75rem, 4.5vw, 5.75rem);
  transform: none;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-three-container {
  display: none !important;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-intro {
  position: relative;
  width: 100%;
  max-width: 430px;
  align-self: center;
  margin: 0;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-logo {
  width: clamp(155px, 11vw, 205px);
  margin-bottom: clamp(2rem, 3.8vh, 3rem);
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-slogan {
  max-width: 9.5ch;
  margin-bottom: 1.35rem;
  font-size: clamp(36px, 3.15vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text);
  text-wrap: balance;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-body {
  max-width: 360px;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-portal {
  width: 100%;
  min-width: 0;
  margin: 0;
  justify-self: stretch;
  color: var(--text);
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.2vw, 20px);
  background: #e9e9e6;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-video,
html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-poster-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-portal-label {
  width: 100%;
  margin: 0;
  padding: clamp(0.9rem, 1.2vw, 1.1rem) 0;
  border-top: 1px solid rgba(26, 26, 26, 0.28);
  color: var(--text);
  background: transparent;
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-gateway-prefix {
  filter: brightness(0);
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-gateway-logo {
  filter: invert(1);
}

html:not(.moove-three-prepaint)
  .moment-moove:not(.moove-three-pending):not(.moove-three-active)
  .moove-portal:focus-visible {
  outline-color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-portal-label:hover,
  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-portal:focus-visible .moove-portal-label {
    border-top-color: rgba(26, 26, 26, 0.78);
    background: rgba(26, 26, 26, 0.018);
  }
}

/* Keep an editorial two-column composition on tablet-sized fallbacks. */
@media (min-width: 761px) and (max-width: 1023px) {
  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active) {
    padding-top: calc(var(--nav-h) + clamp(3rem, 6vh, 4.5rem));
    padding-bottom: clamp(3rem, 6vh, 4.5rem);
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-composition {
    width: min(94vw, 1120px);
    display: grid;
    grid-template-columns: minmax(210px, 0.66fr) minmax(0, 1.34fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-intro {
    max-width: 330px;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-logo {
    width: clamp(145px, 18vw, 185px);
    margin-bottom: 1.75rem;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-slogan {
    max-width: 10ch;
    font-size: clamp(31px, 4.15vw, 42px);
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-body {
    font-size: 15px;
  }
}

/* Narrow mobile: stack naturally, but keep the video as the dominant element. */
@media (max-width: 760px) {
  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active) {
    min-height: auto;
    padding-top: calc(var(--nav-h) + clamp(3rem, 10vw, 4.5rem));
    padding-bottom: clamp(4rem, 12vw, 6rem);
    overflow: hidden;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-composition {
    width: min(calc(100% - 2 * var(--gutter)), 680px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(2.5rem, 9vw, 4rem);
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-intro {
    max-width: 520px;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-logo {
    width: clamp(145px, 42vw, 190px);
    margin-bottom: 1.75rem;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-slogan {
    max-width: 11ch;
    font-size: clamp(34px, 9.4vw, 48px);
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-body {
    max-width: 460px;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-video-frame {
    border-radius: 14px;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-portal-label {
    padding: 0.95rem 0;
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-gateway-prefix {
    width: clamp(96px, 26vw, 118px);
  }

  html:not(.moove-three-prepaint)
    .moment-moove:not(.moove-three-pending):not(.moove-three-active)
    .moove-gateway-logo {
    width: clamp(100px, 28vw, 130px);
  }
}