/* Hero stage: an animated AI-native conversation, replacing the static
   dashboard screenshot.

   Pure CSS so it paints with the first frame -- the hero is the LCP element and
   should not wait on JavaScript, and the markup is real text, so crawlers that
   do not render still read what the product does.

   Timing: one 12s cycle. Each turn has its own keyframes rather than a shared
   set with animation-delay, because a delayed infinite animation drifts out of
   phase with its siblings after the first loop. */

.hero-stage {
    position: relative;
}

.hero-stage__glow {
    position: absolute;
    inset: -1rem;
    z-index: -1;
    border-radius: 1.5rem;
    background: rgba(37, 99, 235, 0.10);
    filter: blur(2rem);
    opacity: 0.6;
}

.hero-panel {
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* ---------- bar ---------- */

.hero-panel__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: #94a3b8;
}

.hero-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: heroPulse 2s ease-out infinite;
}

.hero-chip {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    font-size: 0.6875rem;
}

.hero-latency {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
}

.hero-latency b {
    color: #fff;
    font-weight: 500;
}

/* ---------- waveform ---------- */

/* Dense thin bars growing from the centre line. Earlier attempts were chunky
   full-height bars (read as a bar chart) and then sparse ticks (read as a
   ruler); what makes it look like audio is density plus uneven heights. */
.hero-wave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2rem;
    padding: 0 1rem;
    margin-top: 0.75rem;
}

.hero-wave span {
    flex: 1;
    max-width: 2px;
    min-width: 2px;
    border-radius: 9999px;
    background: #60a5fa;
    opacity: 0.5;
    height: 14%;
}

/* Amplitude in threes and phase in fives: coprime, so the pattern only repeats
   every fifteen bars and reads as irregular rather than as a sine. */
.hero-wave span:nth-child(3n + 1) { animation: heroWaveA 1.4s ease-in-out infinite }
.hero-wave span:nth-child(3n + 2) { animation: heroWaveB 1.4s ease-in-out infinite }
.hero-wave span:nth-child(3n + 3) { animation: heroWaveC 1.4s ease-in-out infinite }

.hero-wave span:nth-child(5n + 2) { animation-delay: .16s; opacity: .7 }
.hero-wave span:nth-child(5n + 3) { animation-delay: .32s; opacity: .85 }
.hero-wave span:nth-child(5n + 4) { animation-delay: .48s; opacity: .7 }
.hero-wave span:nth-child(5n + 5) { animation-delay: .64s; opacity: .55 }

/* ---------- thread ---------- */

.hero-thread {
    list-style: none;
    margin: 0;
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 17rem;
}

.hero-turn {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    opacity: 0;
}

.hero-turn__who {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.125rem;
    opacity: 0.7;
}

.hero-turn--customer {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.hero-turn--ai {
    align-self: flex-end;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: #dbeafe;
}

.hero-turn--human {
    align-self: flex-end;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #ede9fe;
}

.hero-handoff {
    align-self: stretch;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.06);
    color: #cbd5e1;
    font-size: 0.75rem;
    opacity: 0;
}

.hero-handoff b {
    color: #fff;
    font-weight: 500;
}

.hero-handoff__tag {
    margin-left: auto;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.625rem;
    color: #e2e8f0;
    white-space: nowrap;
}

/* ---------- channels ---------- */

.hero-panel__channels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.6875rem;
    color: #94a3b8;
}

.hero-panel__channels span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ---------- keyframes ---------- */

@keyframes heroPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6) }
    70%  { box-shadow: 0 0 0 0.375rem rgba(74, 222, 128, 0) }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0) }
}

@keyframes heroWaveA { 0%, 100% { height: 16% } 50% { height: 92% } }
@keyframes heroWaveB { 0%, 100% { height: 10% } 50% { height: 46% } }
@keyframes heroWaveC { 0%, 100% { height: 20% } 50% { height: 68% } }

/* One 12s cycle. Turns 2-5 arrive in order and clear together near the end;
   turn 1 is pinned so the panel is never empty at the wrap. */
@keyframes heroTurn2 {
    0%, 14%   { opacity: 0; transform: translateY(8px) }
    19%, 90%  { opacity: 1; transform: none }
    95%, 100% { opacity: 0; transform: translateY(-6px) }
}
@keyframes heroTurn3 {
    0%, 29%   { opacity: 0; transform: translateY(8px) }
    34%, 90%  { opacity: 1; transform: none }
    95%, 100% { opacity: 0; transform: translateY(-6px) }
}
@keyframes heroTurn4 {
    0%, 44%   { opacity: 0; transform: translateY(8px) }
    49%, 90%  { opacity: 1; transform: none }
    95%, 100% { opacity: 0; transform: translateY(-6px) }
}
@keyframes heroTurn5 {
    0%, 58%   { opacity: 0; transform: translateY(8px) }
    63%, 90%  { opacity: 1; transform: none }
    95%, 100% { opacity: 0; transform: translateY(-6px) }
}

/* The opening line stays put: cycling it too left the panel blank for a
   moment on every loop, which reads as a broken hero. */
.hero-turn--1 { opacity: 1 }
.hero-turn--2 { animation: heroTurn2 12s ease-out infinite }
.hero-turn--3 { animation: heroTurn3 12s ease-out infinite }
.hero-turn--4 { animation: heroTurn4 12s ease-out infinite }
.hero-turn--5 { animation: heroTurn5 12s ease-out infinite }

/* The panel is tall next to a phone-sized hero, so give it less room to fill. */
@media (max-width: 640px) {
    .hero-thread {
        min-height: 13rem;
        padding: 0.75rem 0.75rem 0.875rem;
    }

    .hero-turn { font-size: 0.75rem; max-width: 92% }
    .hero-wave { height: 1.5rem; margin-top: 0.5rem }

    /* 90 bars in a phone-width panel leaves barely a pixel between them, which
       turns the waveform into a solid block. Drop every other bar. */
    .hero-wave span:nth-child(even) { display: none }
    .hero-handoff { font-size: 0.6875rem; flex-wrap: wrap }
    .hero-handoff__tag { margin-left: 0 }
}

/* Anyone who has asked for less motion gets the finished conversation, not a
   frozen empty panel. */
@media (prefers-reduced-motion: reduce) {
    .hero-dot,
    .hero-wave span,
    .hero-turn--2, .hero-turn--3, .hero-turn--4, .hero-turn--5 {
        animation: none !important;
    }

    .hero-turn,
    .hero-handoff {
        opacity: 1;
        transform: none;
    }

    .hero-wave span {
        height: 40%;
    }
}