@font-face {
  font-family: "SB Sans Display";
  src: url("./assets/SBSansDisplay-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "SB Sans Display";
  src: url("./assets/SBSansDisplay-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  min-width: 280px;
  min-height: 100%;
  color: white;
  background: #2c467c;
  font-family: "SB Sans Display", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  min-height: 100dvh;
  /* Keep content clear of iPhone cutouts while the sky fills the viewport. */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.sky {
  --sky-contrast: 1.06;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  transform: scaleX(-1);
  filter: contrast(var(--sky-contrast));
  pointer-events: none;
  user-select: none;
}

.sky-video { opacity: 0; }
.sky-video[data-playing] { opacity: 1; }

main {
  position: relative;
  display: grid;
  place-items: start;
  grid-template-columns: minmax(0, 440px);
  justify-content: start;
  align-content: start;
  gap: 24px;
  flex: 1;
  min-height: 0;
  padding: clamp(32px, 8svh, 112px) clamp(24px, 10vw, 200px) 38px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-bottom: 0;
  width: min(100%, 440px);
}

.app-icon {
  display: block;
  width: 106.667px;
  height: 106.667px;
  filter: drop-shadow(0 6.667px 16px rgb(22 81 150 / 15%));
  user-select: none;
}

h1 {
  margin: 27px 0 5.333px;
  font-size: clamp(37.333px, 3.533vw, 53.333px);
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 600;
  text-shadow: 0 2px 24px rgb(43 116 183 / 12%);
}

.brand-wordmark {
  display: block;
  width: 4.5em;
  max-width: 100%;
  height: auto;
  aspect-ratio: 866.109 / 304.997;
  object-fit: contain;
  object-position: left center;
  transform: translateX(-16px);
}

p {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.01em;
  font-weight: 400;
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgb(43 116 183 / 18%);
}

.description {
  margin-top: 8px;
  color: rgb(255 255 255 / 80%);
  font-weight: 500;
  /* SB Sans Display has Regular and SemiBold; lightly thicken the Regular face. */
  -webkit-text-stroke: .12px currentColor;
}

.download {
  position: relative;
  margin-top: 20px;
  align-self: start;
  justify-self: start;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 184px;
  gap: 10px;
  height: 61.88px;
  padding: 0 32px;
  border-radius: 999px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: scale .5s cubic-bezier(.34, 1.55, .5, 1);
}

.button-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: rgb(255 255 255 / 14%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 80%),
    inset 0 -1px 1px rgb(255 255 255 / 40%),
    inset 1px 0 1px rgb(255 255 255 / 30%),
    inset -1px 0 1px rgb(255 255 255 / 30%),
    0 5px 18px rgb(25 89 153 / 10%);
}

.button-glass canvas { width: 100%; height: 100%; display: block; }
.button-glass[data-lens] { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.button-glass::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 10%); }
.download-icon { display: block; width: 18px; height: 22px; flex-shrink: 0; transform: translateY(-2px); }
.download-label { text-shadow: 0 1px 6px rgb(38 103 162 / 10%); }
.download:hover { scale: 1.035; }
.download:active { scale: 1.05; transition-duration: .16s; transition-timing-function: cubic-bezier(.2, 0, .2, 1); }
.download:focus-visible { outline: 3px solid white; outline-offset: 6px; }

.footer {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-shrink: 0;
  padding: 16px clamp(24px, 10vw, 200px) 28px;
}

.disrupt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-width: 100%;
  padding: 5px 0;
  border-radius: 4px;
  opacity: .7;
  transform: translateX(-32px);
  transition: opacity .2s ease;
}

.disrupt-link img {
  display: block;
  width: 336px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.disrupt-link:hover,
.disrupt-link:focus-visible { opacity: .7; }
.disrupt-link:focus-visible { outline: 2px solid white; outline-offset: 4px; }

@media (max-width: 600px) {
  main { padding: 40px 16px; grid-template-columns: 1fr; gap: 24px; }
  .app-icon { width: 90.667px; height: 90.667px; }
  h1 { margin-top: 24px; font-size: 42.667px; }
  .brand-wordmark { transform: translateX(-4px); }
  .description { line-height: 1.334; }
  .download { margin-top: 8px; }
  .footer { padding: 16px 16px 20px; }
  .disrupt-link { min-height: 44px; transform: none; }
  .disrupt-link img { width: 168px; }
}

@media (max-height: 550px) and (min-width: 601px) {
  main { padding-top: 19px; padding-bottom: 19px; }
  .app-icon { width: 66.667px; height: 66.667px; }
  h1 { font-size: 36px; margin-top: 16px; }
  .download { height: 57.46px; }
}


@media (prefers-reduced-motion: reduce) {
  .download, .disrupt-link { transition: none; }
}

.avatar-card {
  padding: 0;
  border: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  background: #579bdc url("./assets/avatar/sky.webp") center / cover;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 70%), 0 6px 18px rgb(22 51 95 / 18%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.avatar-card:disabled { cursor: default; }
.avatar-card:active:not(:disabled) { scale: .95; }
.avatar-card:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.avatar-fallback, .avatar-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.avatar-canvas { opacity: 0; transition: opacity .2s ease; }
.avatar-card[data-ready] .avatar-canvas { opacity: 1; }
.avatar-card[data-ready] .avatar-fallback { visibility: hidden; }
.avatar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 70%), inset 0 -1px 2px rgb(255 255 255 / 28%);
  pointer-events: none;
}
@media (max-width: 600px) { .avatar-card { border-radius: 21px; } }
@media (max-height: 550px) and (min-width: 601px) { .avatar-card { border-radius: 15px; } }
@media (prefers-reduced-motion: reduce) {
  .avatar-canvas { transition: none; }
  .avatar-card:active:not(:disabled) { scale: 1; }
}

.download[aria-disabled="true"] { cursor: default; scale: 1; }


.sky-edge-top { display: none; }

/* iOS Safari extends solid colors from fixed elements into its browser chrome.
   Keep the moving landscape in document flow and extend each edge's own color. */
@supports (-webkit-touch-callout: none) {
  html { background: #495b37; }
  body {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
  }
  .sky {
    position: absolute;
    z-index: -1;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
  }
  .sky-edge-top {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    height: 64px;
    background: #2c467c;
    pointer-events: none;
    z-index: 0;
  }
  body::after {
    content: "";
    position: absolute;
    inset: 64px 0 auto;
    height: 64px;
    background: linear-gradient(#2c467c, transparent);
    pointer-events: none;
  }
  main, .footer { z-index: 1; }
  .footer { padding-bottom: 52px; }
}


/* Safari 26+ floating controls can reveal the landscape behind the toolbar.
   The anchor-name feature guard retains the tested iOS 18 treatment. */
@supports (-webkit-touch-callout: none) and (anchor-name: --waifu-edge) {
  .sky {
    min-height: calc(100lvh + 64px);
    -webkit-mask-image: none;
    mask-image: none;
  }
}