/* ABOUTME: Shared styles for the daymasterastrology.com pages. */
/* ABOUTME: Mirrors the app's sign-in screen (src/zodiac/SignInScreen.tsx) over its cloud sky. */
* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --celestial-yellow: #fff200;
  --electric: #1500ff;
  /* The sky's color along its top edge; Safari tints its status bar with the page background. */
  --sky-top: #256692;
}

/* Taller than the viewport, so the page scrolls far enough for iOS Safari to
   collapse its toolbars and let the sky run under them. */
body {
  position: relative;
  min-height: 130lvh;
  background: var(--sky-top);
  overflow-x: hidden;
}

/* The sky: electric ground, the cloud shader, then a dark scrim, as in src/zodiac/Sky.tsx.
   It covers the whole page and scrolls with it; Safari won't draw fixed layers under its bars. */
.ground,
#sky,
.scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ground {
  background: var(--electric);
}

.scrim {
  background: rgba(0, 0, 0, 0.28);
}

/* Before the page scrolls, Safari fills the status bar with the flat page
   background; fading the sky's top edge into that color hides the seam. */
.top-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, var(--sky-top), transparent);
  pointer-events: none;
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top) 32px env(safe-area-inset-bottom);
}

header {
  width: calc(100vw - 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(88px, 18svh, 180px);
  margin-bottom: 14px;
  color: var(--celestial-yellow);
}

h1,
.subtitle {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

h1 {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(68px, 19vw, 90px);
  line-height: 1;
  white-space: nowrap;
}

.subtitle {
  margin-top: -12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(16px, 4.3vw, 21px);
  line-height: 1.4;
  white-space: nowrap;
}

.hero {
  width: min(320px, 100vw - 64px);
  aspect-ratio: 1989 / 1192;
}

.avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
}

.person {
  margin-top: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
}

.buttons {
  width: 100%;
  max-width: 320px;
  margin-top: calc(clamp(12px, 2svh, 20px) + 10px);
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 48px;
  width: 100%;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 120ms ease-out;
}

.button:active {
  transform: scale(0.97);
}

.button svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: #ffffff;
}