/* ============================================================
   screen-1-welcome.css — first impression screen.
   This is the highest-value file for CTR experiments. Edit copy
   in index.html, edit visuals here.

   Includes the following CTR-tuned changes:
   - Softer vignette + brighter mosaic so users SEE what they get
   - Compact one-line trust row (instead of boxed stats grid)
   - Pre-CTA trial pill so the offer is visible before the tap
   - Subtle CTA shimmer (idle attention cue)
   ============================================================ */

.welcome {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 0 22px;
}

/* ---- Animated mosaic background (brighter than original) ---- */
.mosaic-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  gap: 12px;
  padding: 12px;
  opacity: 0.85; /* CTR: was 0.7 — brighter so users see real content */
}

.mosaic-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: scrollDown 65s linear infinite; /* CTR: slowed from 50s for calmer feel */
}
.mosaic-col:nth-child(odd) {
  animation: scrollUp 75s linear infinite; /* CTR: slowed from 60s */
}

@keyframes scrollDown {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
@keyframes scrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.thumb {
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #1a1a25;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTR: softer vignette — was 55%/92%/99%, now 35%/72%/95%. Mosaic is
   readable end-to-end while text remains legible. */
.welcome-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(7,9,10,0.35) 0%,
    rgba(7,9,10,0.72) 60%,
    rgba(7,9,10,0.95) 100%);
  z-index: 1;
}

.welcome-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 30px;
}

.logo-mark {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 30px var(--green-glow));
}

.welcome h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.welcome h1 .accent { color: var(--green); }
.welcome h1 .serif-x {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--green);
  font-weight: 400;
}
/* CTR: bold callout for the "5 minutes a day" promise — the only
   concrete, credible claim on the screen */
.welcome h1 .promise {
  display: inline-block;
  color: var(--green);
}

.welcome p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto 18px;
}

/* CTR: compact inline trust row (replaces the old boxed stats grid).
   Frees ~70px of vertical space for the CTA + trial pill. */
.trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.trust-row .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.trust-row .trust-item strong {
  color: var(--text);
  font-weight: 600;
}
.trust-row .star { color: var(--green); }
.trust-row .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dimmer);
  display: inline-block;
}

/* CTR: trial pill above the CTA. Lowers perceived risk before tap. */
.trial-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(47, 208, 124, 0.12);
  border: 1px solid rgba(47, 208, 124, 0.32);
  color: var(--green-soft);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.trial-pill .dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green-glow);
  animation: trialPulse 1.8s ease-out infinite;
}
@keyframes trialPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 208, 124, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(47, 208, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 208, 124, 0); }
}

/* CTR: idle shimmer on the welcome CTA — subtle attention cue.
   Scoped to .welcome so we don't affect screens 2–4. */
.welcome .cta {
  position: relative;
  overflow: hidden;
}
.welcome .cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: ctaShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShimmer {
  0%   { left: -60%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}