/* ============================================================
   Beauty polish layer — palette-agnostic refinements.
   Scoped under html[data-vw-polish="1"] (Tweaks toggle).
   ============================================================ */

html[data-vw-polish="1"] { scroll-behavior: smooth; }
html[data-vw-polish="1"] ::selection { background: color-mix(in srgb, var(--accent-2) 30%, transparent); }
html[data-vw-polish="1"] h1, html[data-vw-polish="1"] h2 { text-wrap: balance; letter-spacing: -0.022em; }

/* frosted glass nav */
html[data-vw-polish="1"] nav {
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
}

/* hero demo + journey frames: gradient hairline border (amber → teal) + deeper, softer shadow */
html[data-vw-polish="1"] .lp-frame {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 55%, var(--border)), var(--border) 40%, color-mix(in srgb, var(--vw-teal, var(--accent-2)) 50%, var(--border))) border-box;
  box-shadow:
    0 1px 2px rgba(20, 12, 0, .05),
    0 12px 32px -12px rgba(20, 12, 0, .18),
    0 32px 72px -32px color-mix(in srgb, var(--accent-2) 30%, transparent);
}

/* cards & features: gentle lift on hover */
html[data-vw-polish="1"] .card,
html[data-vw-polish="1"] .step,
html[data-vw-polish="1"] .lp-feature {
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
html[data-vw-polish="1"] .card:hover,
html[data-vw-polish="1"] .step:hover,
html[data-vw-polish="1"] .lp-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -16px rgba(20, 12, 0, .22);
}

/* steps: colored top hairline echoing each number chip */
html[data-vw-polish="1"] .step { box-shadow: inset 0 3px 0 var(--accent-2); }
html[data-vw-theme="colorburst"][data-vw-polish="1"] .step:nth-child(2) { box-shadow: inset 0 3px 0 var(--vw-teal); }
html[data-vw-theme="colorburst"][data-vw-polish="1"] .step:nth-child(3) { box-shadow: inset 0 3px 0 var(--vw-coral); }
html[data-vw-polish="1"] .step:hover { box-shadow: inset 0 3px 0 var(--accent-2), 0 14px 34px -16px rgba(20,12,0,.22); }
html[data-vw-theme="colorburst"][data-vw-polish="1"] .step:nth-child(2):hover { box-shadow: inset 0 3px 0 var(--vw-teal), 0 14px 34px -16px rgba(20,12,0,.22); }
html[data-vw-theme="colorburst"][data-vw-polish="1"] .step:nth-child(3):hover { box-shadow: inset 0 3px 0 var(--vw-coral), 0 14px 34px -16px rgba(20,12,0,.22); }

/* hero input: glow when focused, button lifts */
html[data-vw-polish="1"] .lp-input:focus-within {
  border-color: var(--accent-2);
  box-shadow: var(--ring), 0 8px 24px -10px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
html[data-vw-polish="1"] #go-btn { transition: transform .2s, box-shadow .2s, filter .2s; }
html[data-vw-polish="1"] #go-btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: var(--cta-glow); }

/* example chips: lift + accent edge */
html[data-vw-polish="1"] .chip { transition: transform .2s, border-color .2s, box-shadow .2s; }
html[data-vw-polish="1"] .chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border));
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent-2) 45%, transparent);
}

/* final CTA band: layered light for depth */
html[data-vw-polish="1"] .lp-cta {
  position: relative;
  overflow: hidden;
}
html[data-vw-polish="1"] .lp-cta::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 18% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(45% 70% at 85% 100%, rgba(0,0,0,.14), transparent 60%);
}
html[data-vw-polish="1"] .lp-cta > div { position: relative; z-index: 1; }

/* bolder hero headline */
html[data-vw-polish="1"] .lp-hero h1 { font-size: clamp(42px, 4.8vw, 66px); font-weight: 800; line-height: 1.06; }

/* animated hero demo: transcript rows glow in sequence, summary sparkle pulses */
@media (prefers-reduced-motion: no-preference) {
  html[data-vw-polish="1"] .lp-demo-row { animation: vwRowGlow 7.5s infinite; border-radius: 8px; }
  html[data-vw-polish="1"] .lp-demo-row:nth-child(2) { animation-delay: 2.5s; }
  html[data-vw-polish="1"] .lp-demo-row:nth-child(3) { animation-delay: 5s; }
  html[data-vw-polish="1"] .lp-demo-btn.primary svg { animation: vwSparkle 3s infinite; }
  html[data-vw-polish="1"] .lp-demo-search { position: relative; }
  html[data-vw-polish="1"] .lp-demo-search::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-2); transform: translateY(-50%); animation: vwPing 3s infinite;
  }
}
@keyframes vwRowGlow {
  0%, 28%, 100% { background: transparent; }
  6%, 20% { background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
}
@keyframes vwSparkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25) rotate(12deg); opacity: .85; }
}
@keyframes vwPing {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 50%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* footer: faint tinted top band */
html[data-vw-polish="1"] footer {
  border-top: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 240px), var(--surface-2, transparent);
}

/* sticky mini-CTA slide-in */
@keyframes vwBarUp { from { transform: translateY(110%); } to { transform: none; } }