/* Word Sprint's identity, from its icon and in-game palette: a bright sky, a gold rim,
   green letter tiles, the yellow runner with a red headband. */

.ws {
  --ws-sky-top: #8fd3f5;
  --ws-sky: #5aa9e6;
  --ws-deep: #3f5bb8;
  --ws-gold: #f6c343;
  --ws-gold-lip: #d8931f;
  --ws-green: #7ad36a;
  --ws-green-lip: #3f9445;
  --ws-red: #e5566b;
  --ws-ink: #2e3372;
  --accent: var(--ws-gold);
  --accent-lip: var(--ws-gold-lip);
  color: #fff;
  background: linear-gradient(180deg, var(--ws-sky-top), var(--ws-sky) 45%, var(--ws-deep)) fixed;
  background-color: var(--ws-deep);
}

/* Soft rays turning behind everything, like the icon's background. */
.rays {
  position: fixed;
  left: 50%;
  top: 30vh;
  width: 220vmax;
  height: 220vmax;
  margin: -110vmax 0 0 -110vmax;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.09) 0 9deg, transparent 9deg 22deg);
  border-radius: 50%;
  animation: turn 90s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

.ws .home { color: #fff; opacity: 0.85; text-decoration: none; font-weight: 600; }
.ws .home:hover { opacity: 1; }

.ws .hero { text-align: center; padding: 20px 0 36px; }
.ws .icon { width: 120px; height: 120px; border-radius: 30px; box-shadow: 0 8px 0 rgba(20, 30, 90, 0.25); }

/* The name, spelled in the game's green tiles. Each tile drops in, then bobs gently. */
.title { margin: 22px 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.title .word { display: inline-flex; gap: 6px; }
.title b {
  display: grid;
  place-items: center;
  width: clamp(38px, 10vw, 60px);
  height: clamp(42px, 11vw, 66px);
  border-radius: 14px;
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 0 rgba(30, 90, 40, 0.45);
  background: linear-gradient(180deg, #9be58a, var(--ws-green));
  box-shadow: 0 6px 0 var(--ws-green-lip), inset 0 3px 0 rgba(255, 255, 255, 0.45);
  animation: drop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.5) both, bob 3.2s ease-in-out 1s infinite;
}
.title .word:first-child b:nth-child(1) { animation-delay: 0.05s, 1.0s; }
.title .word:first-child b:nth-child(2) { animation-delay: 0.10s, 1.2s; }
.title .word:first-child b:nth-child(3) { animation-delay: 0.15s, 1.4s; }
.title .word:first-child b:nth-child(4) { animation-delay: 0.20s, 1.6s; }
.title .word:last-child b:nth-child(1) { animation-delay: 0.30s, 1.8s; }
.title .word:last-child b:nth-child(2) { animation-delay: 0.35s, 2.0s; }
.title .word:last-child b:nth-child(3) { animation-delay: 0.40s, 2.2s; }
.title .word:last-child b:nth-child(4) { animation-delay: 0.45s, 2.4s; }
.title .word:last-child b:nth-child(5) { animation-delay: 0.50s, 2.6s; }
.title .word:last-child b:nth-child(6) { animation-delay: 0.55s, 2.8s; }

@keyframes drop {
  from { opacity: 0; transform: translateY(-40px) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}
@keyframes bob {
  0%, 20%, 100% { transform: translateY(0); }
  10% { transform: translateY(-5px); }
}

.ws .tagline { font-size: clamp(1.05rem, 3.6vw, 1.3rem); max-width: 26em; margin: 0 auto 26px; text-shadow: 0 2px 0 rgba(30, 50, 120, 0.25); }

.get { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ws .button { color: var(--ws-ink); }
.ws .button.secondary { background: #fff; box-shadow: 0 5px 0 #b9c7ec; }
.soon {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--ws-ink);
  background: var(--ws-gold);
  box-shadow: 0 5px 0 var(--ws-gold-lip);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.04); } }

/* The game running on a phone, beside what it is. */
.show { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.phone {
  justify-self: center;
  width: min(100%, 280px);
  padding: 10px;
  border-radius: 40px;
  background: #1f2556;
  box-shadow: 0 10px 0 rgba(20, 30, 90, 0.35), 0 30px 60px rgba(20, 30, 90, 0.35);
}
.phone video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 30px; background: #4e5bad; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.fact {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px;
  border-radius: 24px;
  color: var(--ws-ink);
  background: #fff;
  box-shadow: 0 6px 0 #b9c7ec;
}
.fact h2 { font-size: 1.2rem; margin: 0 0 4px; }
.fact p { margin: 0; color: #5a6096; }
.dot {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.3rem; color: #fff;
  background: var(--c);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.ws .footer, .ws .footer a { color: rgba(255, 255, 255, 0.85); }
.ws .footer a:hover { color: #fff; }

@media (max-width: 680px) {
  .show { grid-template-columns: 1fr; gap: 28px; }
}