/* Landing-page styles. All design tokens live in theme.css and all atoms in
   atoms.css: never redeclare either here, because this sheet loads after both
   at equal specificity and would silently win. */

/* ════════════════════════════════════════════════════════════════════ */
/* Landing page                                                         */
/* ════════════════════════════════════════════════════════════════════ */

/* Marketing type. `landing-type` sits on the marketing and pre-auth pages only
 * (/, /login, /join, /contact, /reset-password, /verify-email).
 *
 * Their headings pair a light lead-in with an emphasised <strong> run. The
 * heading carries its Figma text style plus `font-light`; the run is that
 * style as drawn, so it takes the style's own weight back here. The light
 * lead-in is the one marketing-only treatment: Figma has no light heading
 * style. Everything else on these pages is a plain `text-<style>` class. */
.landing-type,
.landing-type * { font-family: var(--font-sans); }
.landing-type .text-display strong { font-weight: var(--type-display-weight); }
.landing-type .text-h1 strong { font-weight: var(--type-h1-weight); }
.landing-type .text-h2 strong { font-weight: var(--type-h2-weight); }
.landing-type .text-h3 strong { font-weight: var(--type-h3-weight); }

/* Scroll reveal — section fades up once it enters the viewport. */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-reveal-child {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-reveal.is-visible .scroll-reveal-child {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-child { opacity: 1; transform: none; transition: none; }
}

/* Audience-section keyframes: glows in the accent green. */
@keyframes centrepulse {
  0%   { box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 48px color-mix(in srgb, var(--accent) 40%, transparent); }
  50%  { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent); }
  100% { box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 48px color-mix(in srgb, var(--accent) 40%, transparent); }
}
@keyframes incoming {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  10%  { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3); }
}
@keyframes shieldpulse {
  0%   { opacity: 0.5; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 30%, transparent)); }
  50%  { opacity: 1;   filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 80%, transparent)) drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 30%, transparent)); }
  100% { opacity: 0.5; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 30%, transparent)); }
}
@keyframes wave {
  0%   { opacity: 0; transform: scale(0.7); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes dotpulse {
  0%   { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent); }
  15%  { box-shadow: 0 0 48px color-mix(in srgb, var(--accent) 100%, transparent),   0 0 80px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 120px color-mix(in srgb, var(--accent) 30%, transparent); }
  50%  { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent); }
  100% { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent); }
}
@keyframes bloom {
  0%   { width: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  90%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
@keyframes playhead {
  0%   { left: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  90%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes balance {
  0%   { transform: rotate(-5deg); }
  50%  { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}

/* Rack-track building blocks for the shortlist animation. */
.rack-block {
  flex-shrink: 0;
  width: 20px;
  height: 90px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

/* Incoming-dot glyph for the "Inbound Signal" visual. Position and motion
   are set per-instance via inline style (top/left/animation-duration/delay
   and the --tx/--ty custom properties consumed by @keyframes incoming). */
.incoming-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  opacity: 0;
  z-index: 5;
  background: radial-gradient(circle, var(--accent-hover) 0%, var(--accent) 60%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
  animation-name: incoming;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}