:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Logo - CursorWaveMark (matches brand system) */
.cursor-wave-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.cursor-wave-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
  border-radius: inherit;
}

.cursor-wave-mark .cursor-line {
  animation: cursor-blink 1s ease-in-out infinite;
}

.cursor-wave-mark .wave-bar {
  transform-origin: center;
  animation: wave-pulse 0.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes wave-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.8); }
}

.marquee {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.marquee-left {
  animation: marquee-left 30s linear infinite;
}

.marquee-right {
  animation: marquee-right 25s linear infinite;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

#hero-demo {
  position: relative;
}

#hero-demo .hero-surface {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.5rem 6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#hero-demo[data-surface="claude"] .hero-surface[data-surface="claude"],
#hero-demo[data-surface="cursor"] .hero-surface[data-surface="cursor"],
#hero-demo[data-surface="terminal"] .hero-surface[data-surface="terminal"] {
  opacity: 1;
  pointer-events: auto;
}

.hero-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 10px;
  font-family: Satoshi, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.4);
}

.hero-tab.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-output {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#hero-demo[data-show-output="true"] .hero-output {
  opacity: 1;
  transform: translateY(0);
}

/* Red reveal flash for Cursor surface output (matches React Hero.tsx:191-192) */
#hero-demo[data-surface="cursor"][data-show-output="true"] .hero-output {
  animation: hero-red-reveal 0.5s ease-out forwards;
}

@keyframes hero-red-reveal {
  0% {
    opacity: 0;
    background-color: rgba(255, 46, 46, 0.3);
  }
  100% {
    opacity: 1;
    background-color: rgba(255, 46, 46, 0);
  }
}

.hero-prompt {
  display: none;
}

.hero-placeholder {
  display: inline;
}

#hero-demo[data-phase="paste"] .hero-prompt,
#hero-demo[data-phase="complete"] .hero-prompt {
  display: inline;
}

#hero-demo[data-phase="paste"] .hero-placeholder,
#hero-demo[data-phase="complete"] .hero-placeholder {
  display: none;
}

.hero-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.5);
  margin-left: 2px;
  vertical-align: middle;
  animation: caret-blink 0.8s infinite;
}

#hero-demo[data-phase="paste"] .hero-caret,
#hero-demo[data-phase="complete"] .hero-caret {
  opacity: 0;
}

.hero-voice-hud {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  animation: hero-hud-float 3s ease-in-out infinite;
}

@keyframes hero-hud-float {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -4px); }
}

.hero-hotkey {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 10px;
  font-family: Satoshi, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
}

#hero-demo[data-phase="hold"] .hero-hotkey,
#hero-demo[data-phase="speak"] .hero-hotkey {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.hero-wave-bar {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  animation: hero-wave 0.6s ease-in-out infinite;
  animation-delay: var(--delay, 0ms);
  animation-play-state: paused;
}

#hero-demo[data-phase="speak"] .hero-wave-bar {
  background: #8b5cf6;
  animation-play-state: running;
}

@keyframes hero-wave {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

.hero-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
}

#hero-demo[data-phase="hold"] .hero-status-dot {
  background: #ffffff;
  animation: pulse 1.5s ease-in-out infinite;
}

#hero-demo[data-phase="speak"] .hero-status-dot {
  background: #8b5cf6;
  animation: pulse 1.5s ease-in-out infinite;
}

#hero-demo[data-phase="paste"] .hero-status-dot,
#hero-demo[data-phase="complete"] .hero-status-dot {
  background: #8b5cf6;
}

.hero-transcript {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

#hero-demo[data-phase="speak"][data-has-words="true"] .hero-transcript {
  opacity: 1;
  transform: translateY(0);
}

.hero-word {
  display: inline-block;
  opacity: 0;
  animation: hero-word 0.3s ease forwards;
}

@keyframes hero-word {
  from { opacity: 0; color: #8b5cf6; }
  to { opacity: 1; color: #ffffff; }
}

.hero-transcript-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: #8b5cf6;
  margin-left: 4px;
  animation: caret-blink 0.6s infinite;
}

#hero-demo[data-phase="hold"],
#hero-demo[data-phase="speak"] {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 30px -5px rgba(139, 92, 246, 0.6);
}

#hero-demo[data-phase="hold"] .hero-voice-hud .glass-box,
#hero-demo[data-phase="speak"] .hero-voice-hud .glass-box {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 30px -5px rgba(139, 92, 246, 0.6);
}

.paste-sheen {
  animation: paste-sheen 1s ease-in-out infinite;
}

@keyframes paste-sheen {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.5; }
}

.db-bar {
  width: 0.375rem;
  height: 10%;
  background: linear-gradient(to top, rgba(139, 92, 246, 0.2), #8b5cf6);
  border-radius: 9999px;
  transition: height 0.15s ease;
}

.bento-bar {
  flex: 1;
  background: #8b5cf6;
  height: 10%;
  transition: height 0.5s ease;
  transition-delay: var(--delay, 0ms);
}

.bento-bars.is-visible .bento-bar {
  height: var(--target-height, 50%);
}

.speed-bar {
  height: 100%;
  width: 0;
  border-radius: 0.75rem;
  transition: width 1.2s ease-out;
}

.speed-bar-muted {
  background: rgba(255, 255, 255, 0.2);
}

.speed-bar-primary {
  background: #8b5cf6;
  position: relative;
  overflow: hidden;
}

.speed-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-12deg);
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(100%) skewX(-12deg); }
}

#speed-visualizer.is-visible .speed-bar {
  width: var(--bar-target, 0%);
}

.waitlist {
  width: 100%;
  max-width: 28rem;
}

.waitlist-success,
.waitlist-error {
  display: none;
}

.waitlist .waitlist-loader {
  display: none;
}

.waitlist.is-loading .waitlist-button-text,
.waitlist.is-loading .waitlist-button-icon {
  display: none;
}

.waitlist.is-loading .waitlist-loader {
  display: inline-flex;
}

.waitlist.is-success .waitlist-form {
  display: none;
}

.waitlist.is-success .waitlist-success {
  display: flex;
}

.waitlist.is-error .waitlist-error {
  display: block;
}

.waitlist.is-error input {
  border-color: rgba(239, 68, 68, 0.5);
}

.particle {
  position: absolute;
  border-radius: 9999px;
  background: #8b5cf6;
  opacity: var(--opacity, 0.3);
  width: var(--size, 3px);
  height: var(--size, 3px);
  left: var(--x, 0%);
  top: var(--y, 0%);
  box-shadow: 0 0 calc(var(--size, 3px) * 3) rgba(139, 92, 246, 0.4);
  animation: var(--drift, particle-float-0) var(--duration, 10s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.particle-glow {
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(139, 92, 246, 0.12) 0%, transparent 60%);
}

/* 8 animation patterns for more variety - simulating 3D rotation */
@keyframes particle-float-0 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -30px) scale(1.15); }
  50% { transform: translate(-20px, -50px) scale(0.85); }
  75% { transform: translate(-40px, -15px) scale(1.1); }
}

@keyframes particle-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, 30px) scale(1.2); }
  66% { transform: translate(30px, 40px) scale(0.8); }
}

@keyframes particle-float-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(30px, 40px) rotate(90deg); }
  50% { transform: translate(50px, 15px) rotate(180deg); }
  75% { transform: translate(15px, -30px) rotate(270deg); }
}

@keyframes particle-float-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-40px, -40px) rotate(180deg) scale(1.3); }
}

@keyframes particle-float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(20px, -35px) scale(1.25); }
  40% { transform: translate(-35px, -20px) scale(0.75); }
  60% { transform: translate(-20px, 35px) scale(1.15); }
  80% { transform: translate(35px, 20px) scale(0.85); }
}

/* New patterns for more 3D-like orbital movement */
@keyframes particle-float-5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-45px, -20px) rotate(-90deg); }
  50% { transform: translate(-30px, -45px) rotate(-180deg); }
  75% { transform: translate(15px, -35px) rotate(-270deg); }
}

@keyframes particle-float-6 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  16% { transform: translate(25px, -40px) scale(1.1); }
  33% { transform: translate(50px, -20px) scale(0.9); }
  50% { transform: translate(35px, 25px) scale(1.2); }
  66% { transform: translate(-10px, 40px) scale(0.85); }
  83% { transform: translate(-30px, 10px) scale(1.05); }
}

@keyframes particle-float-7 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(-35px, 25px) rotate(120deg) scale(1.15); }
  66% { transform: translate(25px, -35px) rotate(240deg) scale(0.9); }
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.workflow-key {
  transition: transform 0.2s ease;
}

.workflow-key:hover {
  transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-left,
  .marquee-right,
  .hero-voice-hud,
  .hero-wave-bar,
  .paste-sheen,
  .speed-shimmer,
  .db-bar,
  .bento-bar,
  .particle {
    animation: none !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}