/* Landline Party: splash page styles. No build step. */

@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --red: #E1302A;        /* brand red */
  --red-deep: #B8221D;   /* shadows, small red text (AA on cream) */
  --cream: #FFF8EC;
  --cream-2: #FFEFD6;
  --ink: #2A1A14;        /* body text */
  --ink-soft: #5A4238;
  --yellow: #FFC83D;
  --blue: #2D9CDB;
  --green: #2BB673;
  --pink: #FF7AB6;
  --purple: #9B51E0;
  --radius: 22px;
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 200, 61, .22), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(255, 122, 182, .14), transparent 40%),
    var(--cream);
  overflow-x: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 12px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Confetti ---------- */
.confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.confetti i {
  position: absolute; top: -5vh; left: var(--x);
  width: 10px; height: 18px; border-radius: 3px;
  background: var(--c); opacity: .6;
  transform: rotate(var(--r));
  animation: fall var(--t) linear var(--d) infinite;
}
.confetti i.dot { width: 11px; height: 11px; border-radius: 50%; }

@keyframes fall {
  0%   { transform: translate3d(0, -5vh, 0) rotate(var(--r)); }
  25%  { transform: translate3d(18px, 25vh, 0) rotate(calc(var(--r) + 90deg)); }
  50%  { transform: translate3d(-14px, 55vh, 0) rotate(calc(var(--r) + 180deg)); }
  75%  { transform: translate3d(16px, 85vh, 0) rotate(calc(var(--r) + 270deg)); }
  100% { transform: translate3d(0, 110vh, 0) rotate(calc(var(--r) + 360deg)); }
}

/* ---------- Layout ---------- */
main, .footer { position: relative; z-index: 1; }

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 2rem;
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: min(70vh, 600px);
}

.wordmark {
  margin: 0 0 .9rem;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--red);
  line-height: 1;
}

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1.1rem;
  padding: .35rem .9rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  box-shadow: 3px 3px 0 var(--ink);
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.7rem, 6.4vw, 5.3rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
}
h1 .invited {
  color: var(--red);
  position: relative;
  white-space: nowrap;
}
h1 .invited::after {           /* squiggly underline */
  content: "";
  position: absolute; left: 0; right: .2em; bottom: -.12em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%23FFC83D' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
  z-index: -1;
}

.lede {
  margin: 0 0 1.8rem;
  max-width: 34ch;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  color: var(--ink-soft);
  font-weight: 450;
}

.hero__art { display: grid; place-items: center; }
.logo {
  width: min(100%, 520px); height: auto;
  filter: drop-shadow(0 18px 30px rgba(184, 34, 29, .18));
  transform-origin: 50% 70%;
  animation: ring 5s ease-in-out 1s infinite;
}
@keyframes ring {
  0%, 82%, 100% { transform: rotate(0); }
  84% { transform: rotate(-5deg); }
  86% { transform: rotate(5deg); }
  88% { transform: rotate(-4deg); }
  90% { transform: rotate(4deg); }
  92% { transform: rotate(-2deg); }
  94% { transform: rotate(0); }
}

/* ---------- Signup (coming soon: no form until a real backend exists) ---------- */
.signup { max-width: 520px; }
.signup:focus { outline: none; }
.signup__title {
  margin: 0 0 .6rem;
  font-size: 1.15rem; font-weight: 600;
}
.signup__soon {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin: 0;
  padding: .95rem 1.5rem;
  background: #fff;
  border: 2.5px dashed var(--ink);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--yellow);
  font-size: 1.2rem; font-weight: 600;
  color: var(--ink);
}
.signup__note { margin: .9rem 0 0; font-size: .95rem; color: var(--ink-soft); }

/* ---------- Features ---------- */
.features { padding: clamp(1.5rem, 4vw, 2.5rem) 0 1rem; }
.features__title {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
}
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.card {
  position: relative;
  padding: 1.6rem 1.5rem 1.5rem;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--accent);
  transition: transform .2s ease;
}
.card:nth-child(1) { transform: rotate(-1deg); }
.card:nth-child(3) { transform: rotate(1deg); }
.card:hover { transform: rotate(0) translateY(-3px); }
.card--yellow { --accent: var(--yellow); }
.card--blue   { --accent: var(--blue); }
.card--pink   { --accent: var(--pink); }
.card__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; margin-bottom: .8rem;
  font-size: 1.5rem;
  background: var(--accent);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.card p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 2.5rem 1rem 2.5rem;
  color: var(--ink-soft);
  font-size: .95rem;
}
.footer p { margin: 0; }
.footer__tag { color: var(--red-deep); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; text-align: center; gap: .5rem; }
  .hero__art { order: -1; }
  .logo { width: min(62vw, 260px); }
  .lede { margin-left: auto; margin-right: auto; }
  .signup { margin: 0 auto; }
  .cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .card:nth-child(n) { transform: none; }
}

@media (max-width: 480px) {
  body { font-size: 1.05rem; }
  .signup__soon { border-radius: 26px; font-size: 1.1rem; }
}

/* ---------- Reduced motion: confetti stays put, phone stops ringing ---------- */
@media (prefers-reduced-motion: reduce) {
  .confetti i {
    animation: none;
    top: var(--y); /* scattered statically */
    opacity: .45;
  }
  .logo { animation: none; }
  * { transition: none !important; }
}