/* ============================================================
   Molly Maynard — single-page creator landing
   ============================================================ */

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Fallback chain, weakest first: percentage, then the --vh custom property
     set by script.js for legacy in-app browsers, then real viewport units. */
  min-height: 100%;
  min-height: calc(var(--vh, 1vh) * 100);
  min-height: 100svh;
  overflow-x: hidden;
  background-color: #0d0d0f;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Backdrop for wide viewports.
   A portrait photo stretched edge-to-edge across a landscape screen crops into
   an extreme close-up, so the sharp photo is confined to a phone-width column
   (`.page`, below) and this blurred, darkened copy fills the space around it.
   On portrait phones the column spans the full width and this layer is never
   seen, so the mobile design is unaffected.
   A fixed pseudo-element is used instead of background-attachment: fixed,
   which is unreliable on iOS Safari and in-app webviews. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("assets/background.jpg");
  background-size: cover;
  background-position: 50% 28%;
  background-repeat: no-repeat;
  filter: blur(34px) brightness(0.45) saturate(0.9);
  /* Scaled up so the blur does not bleed transparent edges into the viewport. */
  transform: scale(1.12);
  transform-origin: center;
}

/* ---------- Layout ---------- */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 100svh;
  min-height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-top: calc(40px + env(safe-area-inset-top));
  padding-bottom: calc(clamp(44px, 13vh, 132px) + env(safe-area-inset-bottom));
  text-align: center;
  /* The sharp portrait, plus the readability overlay on top of it.
     Per-layer values are spelled out so the short-viewport override below can
     retarget the photo without disturbing the two gradients. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.48)),
    linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 42%),
    url("assets/background.jpg");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, 50% 30%;
  background-repeat: no-repeat;
}

/* Once the column no longer fills the screen, lift it off the blurred backdrop. */
@media (min-width: 520px) {
  .page {
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.55);
  }
}

@supports (min-height: 100dvh) {
  body,
  .page {
    min-height: 100dvh;
  }
}

/* ---------- Profile image ---------- */

.avatar {
  display: block;
  width: clamp(120px, 34vw, 165px);
  height: clamp(120px, 34vw, 165px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.42),
    0 2px 8px rgba(0, 0, 0, 0.28);
  animation: rise 500ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
}

/* ---------- Creator name ---------- */

.name {
  margin: clamp(20px, 4.4vh, 30px) 0 0;
  font-size: clamp(2.125rem, 8.6vw, 3.375rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  animation: rise 500ms cubic-bezier(0.22, 0.68, 0.36, 1) 120ms both;
}

/* ---------- Call to action ---------- */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(220px, 71vw, 320px);
  min-height: 56px;
  margin-top: clamp(26px, 5vh, 38px);
  padding: 0 24px;
  border-radius: 999px;
  background-color: #fff;
  color: #101013;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.2);
  transition:
    transform 220ms cubic-bezier(0.22, 0.68, 0.36, 1),
    box-shadow 220ms ease,
    background-color 220ms ease;
  animation: rise 500ms cubic-bezier(0.22, 0.68, 0.36, 1) 240ms both;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover: hover) {
  .cta:hover {
    transform: scale(1.035);
    background-color: #fbfbfc;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.38),
      0 3px 8px rgba(0, 0, 0, 0.22);
  }
}

.cta:active {
  transform: scale(0.975);
}

/* White ring plus a dark halo, so the indicator stays visible whether the
   photo behind the button is light or dark. */
.cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 0 9px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.32);
}

/* ---------- Motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar,
  .name,
  .cta {
    animation: none;
  }

  .cta {
    transition: none;
  }

  .cta:hover,
  .cta:active {
    transform: none;
  }
}

/* Very short viewports (small phones, in-app browsers with large chrome):
   tighten the spacing, and zoom the photo so its focal window sits lower down
   the frame. Without this the subject's face rises into the content zone and
   ends up directly behind the circular avatar. */
@media (max-height: 620px) {
  .page {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
    background-size: 100% 100%, 100% 100%, auto 132%;
    background-position: 0 0, 0 0, 50% 80%;
  }

  .name {
    margin-top: 18px;
  }

  .cta {
    margin-top: 22px;
  }
}