/* My Bingo Card - marketing site styles */

:root {
  --color-cream: #f7ead9;
  --color-pink-mid: #f6a7c4;
  --color-magenta: #e81f74;
  --color-badge-light: #ff86b8;
  --color-badge-dark: #7c2a78;
  --color-heading: #161616;
  --color-tagline: #6f6f75;
  --color-mint: #d3f0d9;
  --color-mint-hover: #c3e8cb;
  --color-icon: #1c1c1c;
  --color-footer: rgba(20, 20, 20, 0.55);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-heading);
  background: linear-gradient(to top right, var(--color-cream) 0%, var(--color-pink-mid) 45%, var(--color-magenta) 100%);
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

/* subtle decorative diagonal lines across the background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0px,
    rgba(255, 255, 255, 0.12) 1px,
    transparent 1px,
    transparent 70px
  );
  pointer-events: none;
  z-index: 0;
}

/* animated comet/ray streaks radiating outward from the center of the
   screen, layered above the static diagonal lines but behind the main
   content column. Kept faint and slow so it reads as ambient motion
   rather than a distraction. */
.bg-rays {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.ray-line {
  position: absolute;
  bottom: 0;
  left: -0.5px;
  width: 1px;
  height: 58vmax;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 78%);
  opacity: 0.12;
  transform-origin: bottom center;
}

.ray:nth-child(1) { transform: rotate(15deg); }
.ray:nth-child(2) { transform: rotate(60deg); }
.ray:nth-child(3) { transform: rotate(105deg); }
.ray:nth-child(4) { transform: rotate(150deg); }
.ray:nth-child(5) { transform: rotate(195deg); }
.ray:nth-child(6) { transform: rotate(240deg); }
.ray:nth-child(7) { transform: rotate(285deg); }
.ray:nth-child(8) { transform: rotate(330deg); }

@media (prefers-reduced-motion: no-preference) {
  .ray-line {
    animation: ray-drift 7s ease-in-out infinite;
  }

  .ray:nth-child(1) .ray-line { animation-delay: 0s; }
  .ray:nth-child(2) .ray-line { animation-delay: 0.7s; }
  .ray:nth-child(3) .ray-line { animation-delay: 1.4s; }
  .ray:nth-child(4) .ray-line { animation-delay: 2.1s; }
  .ray:nth-child(5) .ray-line { animation-delay: 2.8s; }
  .ray:nth-child(6) .ray-line { animation-delay: 3.5s; }
  .ray:nth-child(7) .ray-line { animation-delay: 4.2s; }
  .ray:nth-child(8) .ray-line { animation-delay: 4.9s; }
}

@keyframes ray-drift {
  0%, 100% {
    opacity: 0.08;
    transform: scaleY(0.92) translateY(0);
  }
  50% {
    opacity: 0.2;
    transform: scaleY(1.06) translateY(-8px);
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero */
.hero {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-badge {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--color-badge-light) 0%, var(--color-badge-dark) 100%);
  box-shadow: 0 16px 40px rgba(120, 20, 90, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
}

.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-size: 2.75rem;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

.tagline {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-tagline);
  margin: 0 auto 36px;
  max-width: 420px;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.store-link {
  display: inline-flex;
}

.store-badge {
  height: 52px;
  width: auto;
  display: block;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, transform 0.15s ease;
}

.icon-btn:hover {
  background: var(--color-mint-hover);
  transform: translateY(-2px);
}

.icon-btn svg {
  width: 24px;
  height: 24px;
}

/* Footer (kept small and low-key, still present for legal/compliance) */
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 18px 24px 24px;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}

.footer-links a {
  font-size: 0.75rem;
  color: var(--color-footer);
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links .divider {
  font-size: 0.75rem;
  color: var(--color-footer);
}

.copyright {
  font-size: 0.7rem;
  color: var(--color-footer);
  margin: 0;
}

/* Mobile */
@media (max-width: 480px) {
  .hero {
    padding: 56px 20px 32px;
  }

  .logo-badge {
    width: 140px;
    height: 140px;
    margin-bottom: 24px;
  }

  h1 {
    font-size: 2.1rem;
  }

  .tagline {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .store-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .store-badge {
    height: 48px;
  }

  .ray-line {
    height: 46vmax;
  }
}