/* ============================================================
   Yourswaiting — components
   Built on top of tokens.css. Anti-AI-slop discipline enforced.
   ============================================================ */

/* — Typography ——————————————————————————————————————— */
.yw-hero    { font-family: var(--yw-font-display); font-size: var(--yw-text-hero);    line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; margin: 0; text-wrap: balance; }
.yw-display { font-family: var(--yw-font-display); font-size: var(--yw-text-display); line-height: 1.04; letter-spacing: -0.04em;  font-weight: 600; margin: 0; text-wrap: balance; }
.yw-h1      { font-family: var(--yw-font-display); font-size: var(--yw-text-h1);      line-height: 1.06; letter-spacing: -0.035em; font-weight: 600; margin: 0; text-wrap: balance; }
.yw-h2      { font-family: var(--yw-font-display); font-size: var(--yw-text-h2);      line-height: 1.1;  letter-spacing: -0.028em; font-weight: 600; margin: 0; text-wrap: balance; }
.yw-h3      { font-family: var(--yw-font-display); font-size: var(--yw-text-h3);      line-height: 1.2;  letter-spacing: -0.022em; font-weight: 600; margin: 0; }
.yw-lede    { font-size: var(--yw-text-lede); line-height: 1.45; letter-spacing: -0.011em; color: var(--yw-fg-muted); text-wrap: pretty; margin: 0; }
.yw-body    { font-size: var(--yw-text-body); line-height: 1.55; color: var(--yw-fg); margin: 0; }
.yw-small   { font-size: var(--yw-text-small); line-height: 1.5; color: var(--yw-fg-muted); letter-spacing: -0.005em; margin: 0; }
.yw-micro   { font-size: var(--yw-text-micro); line-height: 1.4; color: var(--yw-fg-subtle); margin: 0; }

.yw-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--yw-fg-subtle);
  margin: 0;
}
.yw-eyebrow::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--yw-accent);
  flex-shrink: 0;
}
.yw-eyebrow--inverse { color: rgba(250,250,249,0.65); }
.yw-eyebrow--inverse::before { background: var(--yw-accent); }

.yw-accent-text { color: var(--yw-accent); }
.yw-muted { color: var(--yw-fg-muted); }
.yw-subtle { color: var(--yw-fg-subtle); }
.yw-center { text-align: center; }

/* — Layout primitives ——————————————————————————————— */
.yw-section { padding: var(--yw-space-section) var(--yw-space-edge); position: relative; }
.yw-section--tight { padding: var(--yw-space-block) var(--yw-space-edge); }
.yw-section--dark  { background: var(--yw-bg-deep); color: var(--yw-fg-inverse); }
.yw-section--dark .yw-muted   { color: rgba(250,250,249,0.65); }
.yw-section--dark .yw-subtle  { color: rgba(250,250,249,0.55); }

.yw-container { max-width: var(--yw-content-max); margin: 0 auto; }
.yw-wide      { max-width: var(--yw-wide-max);    margin: 0 auto; }
.yw-prose     { max-width: var(--yw-prose-max);   margin: 0 auto; }

/* — Top nav (sticky liquid line, NOT a floating pill) ——————— */
.yw-nav {
  position: sticky; top: 0; z-index: var(--yw-z-nav);
  background: rgba(250, 250, 249, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--yw-dur-base) var(--yw-ease);
}
.yw-nav.is-scrolled { border-bottom-color: var(--yw-line); }
.yw-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  max-width: var(--yw-wide-max);
  margin: 0 auto;
  padding: 18px var(--yw-space-edge);
}
.yw-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--yw-font-display);
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--yw-fg);
  text-decoration: none;
}
.yw-brand::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: var(--yw-accent);
}
.yw-nav-links {
  display: flex; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.yw-nav-links li { margin: 0; }
.yw-nav-link {
  font-size: 14px; font-weight: 500;
  color: var(--yw-fg-muted);
  text-decoration: none;
  transition: color var(--yw-dur-fast) var(--yw-ease);
}
.yw-nav-link:hover { color: var(--yw-fg); }
.yw-nav-link.is-active { color: var(--yw-fg); }

@media (max-width: 760px) {
  .yw-nav-links { display: none; }
}

/* — Buttons ——————————————————————————————————————— */
.yw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--yw-font-text);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  padding: 12px 22px;
  border-radius: var(--yw-radius-pill);
  border: none; cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--yw-dur-fast) var(--yw-ease),
    color var(--yw-dur-fast) var(--yw-ease),
    transform var(--yw-dur-fast) var(--yw-ease),
    box-shadow var(--yw-dur-fast) var(--yw-ease);
}
.yw-btn .yw-arrow {
  display: inline-block;
  transition: transform var(--yw-dur-base) var(--yw-ease);
}
.yw-btn:hover .yw-arrow { transform: translateX(4px); }

.yw-btn--primary {
  background: var(--yw-accent); color: #fff;
  box-shadow: var(--yw-shadow-emerald);
}
.yw-btn--primary:hover  { background: var(--yw-accent-hover); transform: translateY(-1px); color: #fff; }
.yw-btn--primary:active { transform: scale(0.98); }

.yw-btn--ghost {
  background: transparent; color: var(--yw-fg);
  box-shadow: inset 0 0 0 1px var(--yw-line-strong);
}
.yw-btn--ghost:hover { background: var(--yw-fg); color: var(--yw-fg-inverse); }

.yw-btn--ghost-inverse {
  background: transparent; color: var(--yw-fg-inverse);
  box-shadow: inset 0 0 0 1px var(--yw-line-dark);
}
.yw-btn--ghost-inverse:hover { background: var(--yw-fg-inverse); color: var(--yw-fg); }

.yw-btn--sm { padding: 8px 16px; font-size: 13.5px; }
.yw-btn--lg { padding: 16px 28px; font-size: 16px; }

/* — Hero ——————————————————————————————————————— */
.yw-hero-section {
  position: relative;
  padding: clamp(56px, 8vw, 96px) var(--yw-space-edge) clamp(96px, 12vw, 160px);
  overflow: hidden;
}
.yw-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: var(--yw-wide-max);
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .yw-hero-grid { grid-template-columns: 1fr; gap: 56px; }
}
.yw-hero-content { max-width: 760px; }
.yw-hero-eyebrow { margin-bottom: 28px; }
.yw-hero-headline {
  font-family: var(--yw-font-display);
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--yw-fg);
  margin: 0 0 28px;
  text-wrap: balance;
  hyphens: none;
}
.yw-hero-subhead {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--yw-fg-muted);
  margin: 0 0 36px;
  max-width: 480px;
  text-wrap: pretty;
}
.yw-hero-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; }

/* — Hero right: floating browser mockup ——————————————— */
.yw-hero-mockup {
  position: relative;
  transform: rotate(2.5deg);
  transform-origin: center;
  transition: transform var(--yw-dur-slow) var(--yw-ease-out);
  filter: drop-shadow(0 24px 48px hsl(var(--yw-shadow-color) / 0.18));
}
.yw-hero-mockup:hover { transform: rotate(0deg) translateY(-4px); }
.yw-browser {
  background: var(--yw-bg-elev);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--yw-line);
}
.yw-browser-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: var(--yw-bg-alt);
  border-bottom: 1px solid var(--yw-line);
}
.yw-browser-dot { width: 11px; height: 11px; border-radius: 50%; background: #d4d4d4; }
.yw-browser-dot:nth-child(1) { background: #ff5f57; }
.yw-browser-dot:nth-child(2) { background: #febc2e; }
.yw-browser-dot:nth-child(3) { background: #28c840; }
.yw-browser-body { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.yw-browser-body img { width: 100%; height: 100%; object-fit: cover; }

/* — Fade-up entry animation ——————————————————————— */
.yw-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--yw-dur-slower) var(--yw-ease-out),
    transform var(--yw-dur-slower) var(--yw-ease-out);
}
.yw-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.yw-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--yw-dur-slow) var(--yw-ease-out),
    transform var(--yw-dur-slow) var(--yw-ease-out);
}
.yw-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.yw-stagger.is-visible > *:nth-child(1) { transition-delay:   0ms; }
.yw-stagger.is-visible > *:nth-child(2) { transition-delay:  80ms; }
.yw-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.yw-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.yw-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.yw-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* — Word-by-word reveal (apply via data-yw-words attribute) ——— */
.yw-word {
  display: inline-block;
  margin-right: 0.25em;     /* visible gap between words, robust against inline-block whitespace collapse */
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(6px);
  animation: yw-word-in 800ms var(--yw-ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  will-change: transform, opacity, filter;
}
.yw-word:last-child { margin-right: 0; }
[data-yw-words] { white-space: normal; }
@keyframes yw-word-in {
  0%   { opacity: 0; transform: translateY(0.4em); filter: blur(6px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .yw-word { opacity: 1; transform: none; filter: none; animation: none; }
}

/* — Grain overlay (apply to dark sections that need texture) ——— */
.yw-grain {
  position: relative;
  isolation: isolate;
}
.yw-grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.yw-grain > * { position: relative; z-index: 2; }

/* — Marquee (infinite horizontal scroll) ——————————————— */
.yw-marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.yw-marquee-track {
  display: inline-flex;
  gap: 56px;
  white-space: nowrap;
  animation: yw-marquee 40s linear infinite;
}
.yw-marquee-track > * { flex-shrink: 0; }
@keyframes yw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .yw-marquee-track { animation: none; }
}