/*
 * Stylesheet for the marketing home (pick.school/).
 * Loaded by index.html (FR) and en.html (EN) — copy lives in home.js, keyed
 * by each file's data-locale. Deliberately minimal: same few elements as the
 * original home (logo · tagline · one card · three lines · CTA · footer),
 * with the palette pulled from g.css so home + invite read as one product.
 */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-text-size-adjust: 100%; }
html { touch-action: manipulation; -webkit-touch-callout: none; }

:root {
  --ink-primary:    #14101F;
  --ink-secondary:  rgba(20, 16, 31, 0.60);
  --ink-muted:      rgba(20, 16, 31, 0.40);
  --gradient-start: #FF7BC2;
  --gradient-end:   #FF3D71;
  --page-bg:        #FFFFFF;
  --card-bg:        #FFFFFF;
  --card-border:    rgba(20, 16, 31, 0.08);
  --card-shadow:    0 6px 22px rgba(20, 16, 31, 0.07);
}
body {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--page-bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink-primary);
  -webkit-overflow-scrolling: touch;
}
a, button, div, span, p, h1, h2, h3 { -webkit-tap-highlight-color: transparent; }

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 24px;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

/* Logo — chunky white wordmark with the app's pink→red gradient sticker rim. */
.logo {
  font-family: 'Fredoka', 'Inter', sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: 14px;
  text-shadow:
    -3px -3px 0 var(--gradient-start),
    -1px -3px 0 var(--gradient-start),
    -3px -1px 0 var(--gradient-start),
    3px 3px 0 var(--gradient-end),
    1px 3px 0 var(--gradient-end),
    3px 1px 0 var(--gradient-end),
    -3px 3px 0 #FF5C9A,
    3px -3px 0 #FF5C9A,
    0 6px 16px rgba(20, 16, 31, 0.12);
}
.tagline {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink-secondary);
  text-align: center;
  margin-bottom: 40px;
}
.tagline em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* The demo card sits on a small deck — two cards peek out behind it, each
   slightly rotated, and the whole stack deals itself in on appear (like the
   Play-tab swipe deck / the onboarding intro slide). */
.card-stack { position: relative; width: 100%; margin-bottom: 40px; }
.card-pile {
  position: absolute; inset: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
}
.card-pile.mid  { transform: translateY(4px) rotate(-3.5deg); z-index: 1; animation: deal-mid 560ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both; }
.card-pile.back { transform: translateY(8px) rotate(4.5deg);  z-index: 0; animation: deal-back 560ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both; }
.card {
  --card-rot: -1.5deg; /* resting angle — cycled per question in home.js */
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 12px 34px rgba(20, 16, 31, 0.11);
  transform: rotate(var(--card-rot));
  animation: deal-front 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Front card drops in from above; the two piles peel out from behind it. */
@keyframes deal-front {
  from { opacity: 0; transform: translateY(-22px) rotate(calc(var(--card-rot) - 5deg)) scale(1.03); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--card-rot)) scale(1); }
}
@keyframes deal-mid {
  from { opacity: 0; transform: translateY(0) rotate(0deg); }
  to   { opacity: 1; transform: translateY(4px) rotate(-3.5deg); }
}
@keyframes deal-back {
  from { opacity: 0; transform: translateY(0) rotate(0deg); }
  to   { opacity: 1; transform: translateY(8px) rotate(4.5deg); }
}
/* Replayed by home.js on every question change: a fresh card pops down and
   rotates into its own resting angle (--card-rot, varied per question) so each
   card reads as a distinct one landing on the deck — not just a text swap. */
@keyframes card-pop {
  0%   { opacity: 0.35; transform: translateY(-18px) rotate(calc(var(--card-rot) - 6deg)) scale(1.06); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(var(--card-rot)) scale(1); }
}
/* The two piles nudge + settle back when the new card lands (replayed in JS). */
@keyframes pile-settle-mid {
  0%   { transform: translateY(4px) rotate(-3.5deg); }
  45%  { transform: translateY(7px) rotate(-6deg); }
  100% { transform: translateY(4px) rotate(-3.5deg); }
}
@keyframes pile-settle-back {
  0%   { transform: translateY(8px) rotate(4.5deg); }
  45%  { transform: translateY(12px) rotate(7.5deg); }
  100% { transform: translateY(8px) rotate(4.5deg); }
}
.notif-bar { display: flex; align-items: center; margin-bottom: 14px; }
.notif-icon {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
.notif-app {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  margin-left: 10px; flex: 1;
}
.notif-time { font-size: 11px; font-weight: 600; color: var(--ink-muted); text-transform: lowercase; }
.card-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gradient-start);
  margin-bottom: 6px;
}
.card-compliment {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px; font-weight: 700;
  line-height: 1.22; letter-spacing: -0.4px;
  min-height: 54px;
  transition: opacity 320ms ease;
}
.card-compliment .emoji { margin-right: 6px; }
.card-divider { height: 1px; background: var(--card-border); margin: 16px 0; }
.sender-row { display: flex; align-items: center; gap: 12px; }
/* A row of overlapping blurred + pixel-veiled faces — the app's masked-avatar
   look. The count + faces change per question. */
.faces-row { display: flex; align-items: center; flex-shrink: 0; }
.face-chip {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 15px; /* app squircle ratio: size × 0.4 (Avatar shape="rounded") */
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(20, 16, 31, 0.14);
  background: rgba(20, 16, 31, 0.05);
}
.face-chip:not(:first-child) { margin-left: -12px; }
/* Each face pops/zooms in on a stagger (delay set per-index in home.js) so a
   grow travels across the row every time a new question card lands. */
.face-chip { animation: face-pop 440ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes face-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
.face-chip img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(5px) saturate(1.1); transform: scale(1.2);
}
/* Gender-tinted pixel mosaic over the blur — cells filled inline in home.js. */
.pixel-veil { position: absolute; inset: 0; display: flex; flex-wrap: wrap; }
.pixel-veil > i { width: 20%; height: 20%; display: block; }
.sender-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--gradient-end); text-decoration: none; }
.sender-label:active { opacity: 0.7; }
.sender-lock {
  font-size: 16px;
  display: inline-block;
  transform-origin: 50% 30%;
  /* Periodic wiggle to draw the tap toward "clique pour révéler". */
  animation: lock-wiggle 2.6s ease-in-out infinite;
}
@keyframes lock-wiggle {
  0%, 80%, 100% { transform: rotate(0deg) scale(1); }
  84% { transform: rotate(-13deg) scale(1.12); }
  88% { transform: rotate(10deg); }
  92% { transform: rotate(-7deg); }
  96% { transform: rotate(4deg); }
}

/* Three quiet feature lines — same shape as the original home. */
.features { width: 100%; margin-bottom: 34px; }
.feature { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(20, 16, 31, 0.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  /* The three icons bounce one after another, on a loop, to walk the eye down
     the list (tu réponds → tu devines → tu reçois). */
  animation: icon-bounce 2.4s ease-in-out infinite;
}
.feature:nth-child(1) .feature-icon { animation-delay: 0s; }
.feature:nth-child(2) .feature-icon { animation-delay: 0.26s; }
.feature:nth-child(3) .feature-icon { animation-delay: 0.52s; }
@keyframes icon-bounce {
  0%, 24%, 100% { transform: scale(1); }
  9%            { transform: scale(1.18); }
}
.feature-content h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.feature-content p { font-size: 13px; color: var(--ink-secondary); line-height: 1.45; }

/* CTA */
.cta-button {
  position: relative;
  overflow: hidden; /* clip the sweeping shine band to the pill */
  display: block; width: 100%;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  color: white; font-size: 17px; font-weight: 700;
  padding: 17px; border: none; border-radius: 16px;
  text-decoration: none; text-align: center;
  box-shadow: 0 6px 22px rgba(255, 61, 113, 0.32);
  /* Quick recurring bounce to call the eye to tap (on top of the shimmer). */
  animation: cta-bounce 1.3s ease-in-out infinite;
}
/* Press feedback via brightness (not transform — that would fight the bounce). */
.cta-button:active { filter: brightness(0.94); }
@keyframes cta-bounce {
  0%, 46%, 100% { transform: scale(1); }
  15%           { transform: scale(1.055); }
  30%           { transform: scale(0.992); }
}
/* Glass-sheen sweep — same look as the app's ShimmerCta: a skewed white band
   crosses the pill (~1.1s), then rests off-screen (~1.8s), on a loop. */
.cta-button::after {
  content: '';
  position: absolute; top: 0; height: 100%; width: 90px; left: -90px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0));
  transform: skewX(-18deg);
  pointer-events: none;
  animation: cta-shine 2900ms ease-in-out infinite;
}
@keyframes cta-shine {
  0%   { left: -90px; }
  38%  { left: 100%; }
  100% { left: 100%; }
}
.cta-hint { margin-top: 12px; font-size: 13px; color: var(--ink-secondary); text-align: center; }

/* Social proof — blinking green dot + a live-feeling count. */
.social-proof {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-primary);
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Footer */
.footer { padding: 24px; text-align: center; border-top: 1px solid var(--card-border); }
.footer-links { display: flex; justify-content: center; gap: 22px; margin-bottom: 10px; }
.footer-links a { font-size: 13px; color: var(--ink-secondary); text-decoration: none; }
.footer-links a:active { color: var(--gradient-start); }
.footer-text { font-size: 12px; color: var(--ink-muted); }