/* Prizzy « Tirage » — shared styles for every landing page.
   Tokens mirror composeApp/src/commonMain/kotlin/com/prizzy/app/ui/Theme.kt
   (see design/tirage/README.md). One pink zone per screen section. */

:root {
  --plateau: #0D5745;
  --plateau-light: #0F6451;
  --boule: #FBFBF7;
  --chance: #FF8CC6;
  --encre: #06201A;
  --menthe: #BFE3D6;
  --menthe-soft: #D6EEE5;
  --gris-vert: #50625B;
  --body-text: #3F4F4A;
  --erreur: #B0124F;
  --erreur-soft: #FFEAF3;
  --field: #EEF3F0;
  --card-border: #DCE3DF;
  --placeholder: #7A8A84;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: 'Anybody', system-ui, sans-serif;
  --text: 'Hanken Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background: var(--plateau); color: #fff; font-family: var(--text); }
a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--chance); }
::selection { background: var(--chance); color: var(--encre); }
input { font-family: inherit; caret-color: var(--plateau); }
input::placeholder { color: var(--placeholder); }
.hidden { display: none !important; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Type */
.display { font-family: var(--display); font-stretch: 118%; font-weight: 900; letter-spacing: -0.03em; line-height: 0.94; margin: 0; text-wrap: balance; }
.label { font-size: 15px; font-weight: 700; color: var(--menthe); }

/* Balls */
.ball {
  width: var(--s, 44px); height: var(--s, 44px); border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--boule); color: var(--encre);
  font-family: var(--display); font-stretch: 120%; font-weight: 900; font-size: calc(var(--s, 44px) * 0.47);
}
.ball.lucky { background: var(--chance); }
.ball.green { background: var(--plateau); color: #fff; }
.ball.ink { background: var(--encre); color: #fff; }

/* Logo: six balls, fixed rotations and vertical offsets (Système « Tirage »). */
.logo { display: flex; gap: calc(var(--s) * 0.09); text-decoration: none; }
.logo .ball { font-size: calc(var(--s) * 0.53); }
.logo .ball:nth-child(1) { transform: rotate(-8deg); }
.logo .ball:nth-child(2) { transform: translateY(calc(var(--s) * 0.09)) rotate(6deg); }
.logo .ball:nth-child(3) { transform: translateY(calc(var(--s) * -0.05)); }
.logo .ball:nth-child(4) { transform: translateY(calc(var(--s) * 0.06)) rotate(-14deg); background: var(--chance); }
.logo .ball:nth-child(5) { transform: rotate(12deg); background: var(--chance); }
.logo .ball:nth-child(6) { transform: translateY(calc(var(--s) * 0.06)) rotate(-5deg); }

/* The drop-in: balls fall one by one, 110ms apart, 900ms, slight bounce. */
@keyframes prizzyDrop {
  0% { transform: translateY(-140px) rotate(var(--r0)); opacity: 0; }
  60% { transform: translateY(calc(var(--y) + 10px)) rotate(var(--r1)); opacity: 1; }
  80% { transform: translateY(calc(var(--y) - 4px)) rotate(var(--r1)); }
  100% { transform: translateY(var(--y)) rotate(var(--r1)); opacity: 1; }
}
.logo.drop .ball { animation: prizzyDrop 900ms var(--ease) both; }
.logo.drop .ball:nth-child(1) { --r0: -48deg; --r1: -8deg; --y: 0px; animation-delay: 120ms; }
.logo.drop .ball:nth-child(2) { --r0: -34deg; --r1: 6deg; --y: calc(var(--s) * 0.09); animation-delay: 230ms; }
.logo.drop .ball:nth-child(3) { --r0: -40deg; --r1: 0deg; --y: calc(var(--s) * -0.05); animation-delay: 340ms; }
.logo.drop .ball:nth-child(4) { --r0: -54deg; --r1: -14deg; --y: calc(var(--s) * 0.06); animation-delay: 450ms; }
.logo.drop .ball:nth-child(5) { --r0: -28deg; --r1: 12deg; --y: 0px; animation-delay: 560ms; }
.logo.drop .ball:nth-child(6) { --r0: -45deg; --r1: -5deg; --y: calc(var(--s) * 0.06); animation-delay: 670ms; }

/* Ambient balls float slowly (6–10 s). */
@keyframes prizzyBob {
  from { transform: translateY(0) rotate(var(--r)); }
  to { transform: translateY(-14px) rotate(calc(var(--r) + 6deg)); }
}
.floats { position: absolute; inset: 0; pointer-events: none; }
.floats .ball { position: absolute; animation: prizzyBob var(--d, 8s) ease-in-out var(--delay, 0s) infinite alternate; }
.floats .tonal { background: var(--plateau-light); color: transparent; }
/* Below 1280px the text column spans the hero, so numbered balls that could sit behind it go tonal and smaller. */
@media (max-width: 1279px) {
  .floats .ball { --s: calc(var(--big) * 0.7) !important; }
  .floats .ball:not(.keep) { background: var(--plateau-light); color: transparent; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Pills */
.pill {
  height: 54px; padding: 0 28px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 17px; cursor: pointer; user-select: none;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.pill:disabled { opacity: 0.6; cursor: default; }
.pill-chance { background: var(--chance); color: var(--encre); }
.pill-chance:hover:not(:disabled) { background: var(--encre); color: #fff; }
.pill-chance:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pill-ink { background: var(--encre); color: #fff; }
.pill-ink:hover:not(:disabled) { background: var(--plateau); }
.pill-ink:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.tag { border: 2px solid currentColor; border-radius: 999px; padding: 7px 18px; font-weight: 700; font-size: 14px; }

/* Email field + button in one Boule capsule. */
.capsule { display: flex; flex-wrap: wrap; gap: 6px; background: var(--boule); border-radius: 32px; padding: 6px; }
.capsule input {
  flex: 1 1 220px; min-width: 0; height: 54px; border: 0; border-radius: 999px; background: transparent;
  padding: 0 20px; font-size: 17px; font-weight: 500; color: var(--encre); outline: none;
}
.capsule .pill { flex: 0 0 auto; }
@media (max-width: 480px) { .capsule .pill { flex: 1 1 100%; } }

/* Forms on a light card. */
.card { background: var(--boule); color: var(--encre); border-radius: 28px; padding: clamp(22px, 4vw, 36px); }
.card a { color: var(--plateau); }
.card a:hover { color: var(--encre); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 16px; }
.field .hint { font-size: 14px; color: var(--gris-vert); margin: 0; }
.field input {
  width: 100%; height: 54px; border-radius: 16px; border: 2px solid transparent; background: var(--field);
  padding: 0 16px; font-size: 16px; font-weight: 500; color: var(--encre); outline: none;
}
.field input:focus { border-color: var(--plateau); }
.field input[aria-invalid=true] { border-color: var(--erreur); background: var(--erreur-soft); }

/* Header & footer shared by every page. */
.site-header { padding-top: 22px; padding-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer { padding-top: 36px; padding-bottom: 56px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--menthe-soft); }

/* Header links: organiser page + the two social accounts. */
.head-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-nav .organiser-link { font-size: 15px; font-weight: 700; color: var(--menthe-soft); margin-right: 6px; }
.icon-link { display: inline-flex; border-radius: 50%; }
.icon-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.icon-link .ball { transition: transform 160ms var(--ease); }
.icon-link:hover .ball { transform: rotate(-10deg); }
@media (max-width: 560px) { .head-nav .tag, .head-nav .organiser-link { display: none; } }

/* Big follow buttons for the two social accounts (home page section, organiser page). */
.follow-links { display: grid; gap: 12px; padding-top: 6px; }
.follow-link { display: flex; align-items: center; gap: 16px; padding: 10px 22px 10px 10px; border-radius: 999px; background: var(--link-bg, var(--plateau)); color: #fff; text-decoration: none; transition: background 160ms var(--ease); }
.follow-link:hover { background: var(--link-hover, var(--plateau-light)); color: #fff; }
.follow-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.follow-link span { flex: 1; min-width: 0; }
.follow-link small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--menthe); }
.follow-link b { font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: clamp(20px,2.2vw,26px); letter-spacing: -0.02em; }

/* Long-form pages (legal, callback) on a light sheet. */
.sheet { background: var(--boule); color: var(--encre); border-radius: 28px; padding: clamp(24px, 5vw, 48px); }
.sheet h1 { font-family: var(--display); font-stretch: 118%; font-weight: 900; font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.03em; line-height: 0.96; margin: 0 0 20px; }
.sheet h2 { font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
.sheet p, .sheet li { font-size: 16px; line-height: 1.55; color: var(--body-text); }
.sheet a { color: var(--plateau); }
.sheet a:hover { color: var(--encre); }