/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@14.2.18_@babel+core@7.29.7_@playwright+test@1.49.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/.pnpm/next@14.2.18_@babel+core@7.29.7_@playwright+test@1.49.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/features/landing/ui/landing.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Landing atmosphere + motion — calm and spacious, matching the AuthShell
 * value-prop panel (PM-approved). FLAT navy gradients, no glow, no grid: the
 * restraint is the point. Every colour resolves to a DS token variable; only
 * decorative geometry (display scale, motion timing) is expressed directly.
 * All motion is load-triggered CSS and disabled under prefers-reduced-motion.
 */

/* flat, calm navy — hero + dark panels (how-it-works, owner card, closing CTA) */
.cs-hero,
.cs-panel {
  background: linear-gradient(155deg, hsl(var(--primary-900)), hsl(var(--ink)));
}

/* display scale for section titles (a touch above the 6xl token, still calm) */
.cs-h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.cs-num {
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

/* bars (score breakdown, leaderboard) — fill from 0 on load */
.cs-track { position: relative; overflow: hidden; }
.cs-fill { width: 0; animation: cs-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes cs-grow { from { width: 0; } }

/* photo card bottom scrim */
.cs-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, hsl(var(--primary-950) / 0.72));
}

/* motion: gentle load reveal */
.cs-rise { opacity: 0; transform: translateY(20px); animation: cs-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes cs-rise { to { opacity: 1; transform: none; } }
.cs-stagger > * { opacity: 0; transform: translateY(14px); animation: cs-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.cs-stagger > *:nth-child(1) { animation-delay: 0.06s; }
.cs-stagger > *:nth-child(2) { animation-delay: 0.14s; }
.cs-stagger > *:nth-child(3) { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  .cs-rise, .cs-stagger > *, .cs-fill {
    animation: none !important;
  }
  .cs-rise, .cs-stagger > * { opacity: 1; transform: none; }
  .cs-fill { width: var(--w, 0); }
}