/* First paint for the holding page and login. The rest of the CSS is applied
   after this file so the wordmark and the controls are not waiting on it. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: #000;
}

body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: #f2f0e6;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The holding page is one screen. A band past the viewport becomes a
   scroll in Instagram, and that scroll flashes white and moves the
   wordmark. The installed app and the signed-in shell keep their height. */
html:not(.is-signed-in):not(.pwa-standalone) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
}

html:not(.is-signed-in):not(.pwa-standalone) body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
  contain: paint;
  isolation: isolate;
}

.glow {
  position: absolute;
  overflow: visible;
}

.glow__soft {
  position: absolute;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  filter: blur(22px);
  transform: scale(4);
}

.glow--warm {
  width: 72vw;
  height: 78vh;
  left: 14%;
  top: 8%;
  animation: drift-warm 30s ease-in-out infinite alternate;
}

.glow--warm .glow__soft {
  top: 0;
  left: 0;
  transform-origin: top left;
  background: radial-gradient(circle, rgba(214, 168, 128, 0.95) 0%, rgba(150, 102, 72, 0.42) 42%, transparent 70%);
}

.glow--cool {
  width: 64vw;
  height: 72vh;
  right: 6%;
  bottom: 2%;
  animation: drift-cool 36s ease-in-out infinite alternate;
}

.glow--cool .glow__soft {
  right: 0;
  bottom: 0;
  transform-origin: bottom right;
  background: radial-gradient(circle, rgba(148, 168, 188, 0.8) 0%, rgba(70, 88, 108, 0.38) 46%, transparent 72%);
}

.atmosphere__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  view-transition-name: custo-sky;
}

@keyframes drift-warm {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(5%, 4%, 0) scale(1.07); }
}

@keyframes drift-cool {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to { transform: translate3d(-6%, -3%, 0) scale(1); }
}

.home,
.login-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

html:not(.is-signed-in):not(.pwa-standalone) .home,
html:not(.is-signed-in):not(.pwa-standalone) .login-page {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

h1 {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
}

.wordmark {
  display: grid;
  width: min(180px, calc(100vw - 48px));
  aspect-ratio: 321.78 / 78.76;
}

.wordmark .logo {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
}

.logo--dark {
  opacity: 0;
}

.home .wordmark,
.login-page .wordmark {
  view-transition-name: custo-wordmark;
}

/* The ® occupies the lockup’s right side. This shift is half of that extra
   ink, so the letters of Custo meet the page centre and the mark hangs beside
   them. Login keeps the unshifted lockup. */
.home .wordmark {
  translate: 5.50485% 0;
}

.login,
.back {
  transition: none;
}

.login {
  position: fixed;
  z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px 0 18px;
  border-radius: 999px;
  background: #f2f0e6;
  color: #141414;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  view-transition-name: custo-login;
}

.login:active {
  background: #dbd6c6;
}

.back {
  position: fixed;
  z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #f2f0e6;
  border-radius: 999px;
  background: #141414;
  color: #f2f0e6;
  text-decoration: none;
  view-transition-name: custo-back;
}

.back:active {
  background: #000;
}

.login-stage {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.login-block {
  width: min(22rem, calc(100vw - 48px));
  text-align: center;
  pointer-events: auto;
}

.login-page h1 {
  position: static;
  inset: auto;
  display: block;
  margin: 0 0 1.5rem;
}

.login-flow {
  view-transition-name: custo-login-flow;
}

.step input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0 0 12px;
  padding: 0 16px;
  border: 1px solid rgba(242, 240, 230, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #f2f0e6;
  font: inherit;
  font-size: 16px;
  text-align: center;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f2f0e6;
  color: #141414;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@view-transition {
  navigation: auto;
}

::view-transition {
  pointer-events: none;
}

::view-transition-group(root),
::view-transition-group(custo-login),
::view-transition-group(custo-back) {
  animation-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .glow--warm,
  .glow--cool {
    animation: none;
  }
}