/* =================================================================
 * Planostic.AI — Robot stage
 *
 * Subtiele animatie onderaan het scherm: drie robotjes verwerken
 * berichten die van links binnenkomen en rechts vertrekken.
 *
 * Flow:
 *   - envelope komt links het scherm binnen  → robot 1 (inbox)
 *   - robot 1 leest het, briefje schuift IN de envelop
 *   - envelop + briefje reizen door naar robot 2 (verwerk)
 *   - robot 2 verwerkt en stuurt door naar robot 3 (verzend)
 *   - envelop + briefje vertrekken rechts het scherm uit
 *
 * Beweging: ease-in-out (versnelt bij start, remt af bij aankomst),
 * niet langer constante snelheid.
 *
 * Cyclisch, ~14s per cyclus, lage opacity zodat het de content
 * niet overheerst. Respecteert prefers-reduced-motion.
 * ================================================================= */

.robot-stage {
    position: fixed;
    bottom: 100px; /* boven de sticky contact bar */
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.22;
    overflow: hidden;
}

@media (max-width: 767px) {
    .robot-stage {
        height: 140px;
        bottom: 160px; /* sticky bar is hoger op mobiel */
        opacity: 0.14;
    }
}

/* --- Drie robotposities --- */
.robot {
    position: absolute;
    bottom: 16px;
    width: 64px;
    height: 80px;
    filter: drop-shadow(0 4px 12px rgba(45, 212, 255, 0.35));
}

@media (max-width: 767px) {
    .robot { width: 48px; height: 60px; }
}

.robot--1 { left: 18%; }
.robot--2 { left: 48%; }
.robot--3 { left: 78%; }

@media (max-width: 767px) {
    .robot--1 { left: 12%; }
    .robot--2 { left: 46%; }
    .robot--3 { left: 80%; }
}

/* --- Robot lichaam --- */
.robot svg { width: 100%; height: 100%; }

.robot-body { fill: #142340; stroke: #2DD4FF; stroke-width: 1.5; }
.robot-glow { fill: none; stroke: #2DD4FF; stroke-width: 1; opacity: 0.45; }
.robot-eye { fill: #2DD4FF; }
.robot-arm { fill: #142340; stroke: #2DD4FF; stroke-width: 1.2; transform-origin: 50% 30%; }

/* "Working" pulsatie op de ogen */
.robot--1 .robot-eye,
.robot--2 .robot-eye,
.robot--3 .robot-eye {
    animation: eye-pulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes eye-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* Armen bewegen per robot met offset */
.robot--1 .robot-arm-right { animation: arm-wave 2.4s ease-in-out infinite; }
.robot--2 .robot-arm-left  { animation: arm-wave 2.4s ease-in-out infinite -0.8s; }
.robot--3 .robot-arm-right { animation: arm-wave 2.4s ease-in-out infinite -1.6s; }

@keyframes arm-wave {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(18deg); }
}

/* =================================================================
 * Envelope + briefje reizen samen door de keten.
 *
 * De envelope is de "drager" — een wrapper div die horizontaal
 * van links naar rechts beweegt met ease-in-out per segment.
 *
 * Het briefje (note) is een child div die binnen de envelope zit.
 * Op het moment dat de envelope bij robot 1 is, schuift het
 * briefje van buiten het zicht (links van envelope) naar binnen
 * (centrum van envelope). Daarna reizen ze samen verder.
 *
 * Bewegings-timing per cyclus van 12s:
 *   0-4%   : startpositie, onzichtbaar (0.5s)
 *   4-23%  : links → robot 1 (trekken op + afremmen, ~2.3s)
 *   23-28% : korte pauze bij robot 1, briefje schuift erin (~0.6s)
 *   28-47% : robot 1 → robot 2 (~2.3s)
 *   47-52% : korte pauze bij robot 2 (~0.6s)
 *   52-71% : robot 2 → robot 3 (~2.3s)
 *   71-76% : korte pauze bij robot 3 (~0.6s)
 *   76-95% : robot 3 → rechts uit beeld (~2.3s)
 *   95-100%: laatste fade (~0.6s)
 *
 * Pauzes zijn kort gehouden (5% = 0.6s) zodat de animatie niet
 * "plakt" tussen de robots. cubic-bezier is mild (0.25 ease)
 * zodat 'ie niet te scherp afremt aan het einde van elk segment.
 * ================================================================= */

.envelope-wrapper {
    position: absolute;
    top: 40px;
    left: -80px;
    width: 36px;
    height: 24px;
    opacity: 0;
    animation: envelope-travel 12s linear infinite;
    will-change: left, opacity;
    filter: drop-shadow(0 0 10px rgba(45, 212, 255, 0.6));
}

@media (max-width: 767px) {
    .envelope-wrapper { width: 28px; height: 18px; top: 30px; }
}

.envelope-wrapper svg.envelope-svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Briefje schuift van links (buiten beeld) naar het centrum van de envelop
 * zodra de envelop bij robot 1 is aangekomen (23-28%). */
.note-sliding {
    position: absolute;
    top: 5px;
    left: -20px; /* begint buiten de envelop, links */
    width: 18px;
    height: 12px;
    background: linear-gradient(180deg, #FFB300 0%, #D69400 100%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.75);
    z-index: 1;
    animation: note-slide-in 12s linear infinite;
}

.note-sliding::before {
    content: '';
    position: absolute;
    top: 3px; left: 2px; right: 2px;
    height: 1px;
    background: rgba(10, 22, 40, 0.55);
    box-shadow: 0 3px 0 rgba(10, 22, 40, 0.55);
}

@keyframes envelope-travel {
    /* Start: onzichtbaar, links buiten beeld */
    0%   { left: -80px; opacity: 0; animation-timing-function: linear; }
    3%   { opacity: 0; animation-timing-function: linear; }
    4%   { opacity: 1; animation-timing-function: linear; }

    /* Segment 1: links → robot 1
       Vaste snelheid tot ~90% van de afstand, dan afremmen */
    12%  { left: 14%; animation-timing-function: ease-out; }   /* afremmen naar robot 1 */
    23%  { left: 18%; animation-timing-function: linear; }      /* bij robot 1 */

    /* Korte pauze bij robot 1 (briefje schuift erin) */
    28%  { left: 18%; animation-timing-function: ease-in; }     /* optrekken van robot 1 */

    /* Segment 2: robot 1 → robot 2
       Eerst optrekken (ease-in van vorige keyframe), dan vast, dan afremmen */
    37%  { left: 33%; animation-timing-function: linear; }      /* vaste snelheid */
    44%  { left: 45%; animation-timing-function: ease-out; }    /* afremmen naar robot 2 */
    47%  { left: 48%; animation-timing-function: linear; }      /* bij robot 2 */

    /* Korte pauze bij robot 2 */
    52%  { left: 48%; animation-timing-function: ease-in; }     /* optrekken van robot 2 */

    /* Segment 3: robot 2 → robot 3 */
    61%  { left: 63%; animation-timing-function: linear; }      /* vaste snelheid */
    68%  { left: 75%; animation-timing-function: ease-out; }    /* afremmen naar robot 3 */
    71%  { left: 78%; animation-timing-function: linear; }      /* bij robot 3 */

    /* Korte pauze bij robot 3 */
    76%  { left: 78%; animation-timing-function: ease-in; }     /* optrekken van robot 3 */

    /* Segment 4: robot 3 → rechts uit beeld */
    85%  { left: 95%; opacity: 1; animation-timing-function: linear; }
    95%  { left: 108%; opacity: 1; animation-timing-function: linear; }
    100% { left: 115%; opacity: 0; }
}

@keyframes note-slide-in {
    /* Briefje start onzichtbaar (links van envelop, buiten beeld) */
    0%, 23%  { left: -20px; opacity: 0; }
    24%      { left: -20px; opacity: 1; }
    28%      { left: 8px;   opacity: 1; }   /* geschoven naar centrum envelop */

    /* Vanaf nu reist briefje mee met de envelop — blijft binnen */
    90%      { left: 8px;   opacity: 1; }
    98%      { left: 8px;   opacity: 0.5; }
    100%     { left: 8px;   opacity: 0; }
}

@media (max-width: 767px) {
    @keyframes envelope-travel {
        0%   { left: -60px; opacity: 0; animation-timing-function: linear; }
        3%   { opacity: 0; animation-timing-function: linear; }
        4%   { opacity: 1; animation-timing-function: linear; }
        20%  { left: 8%;  animation-timing-function: ease-out; }
        23%  { left: 12%; animation-timing-function: linear; }
        28%  { left: 12%; animation-timing-function: ease-in; }
        37%  { left: 28%; animation-timing-function: linear; }
        44%  { left: 43%; animation-timing-function: ease-out; }
        47%  { left: 46%; animation-timing-function: linear; }
        52%  { left: 46%; animation-timing-function: ease-in; }
        61%  { left: 62%; animation-timing-function: linear; }
        68%  { left: 77%; animation-timing-function: ease-out; }
        71%  { left: 80%; animation-timing-function: linear; }
        76%  { left: 80%; animation-timing-function: ease-in; }
        85%  { left: 95%; opacity: 1; animation-timing-function: linear; }
        95%  { left: 108%; opacity: 1; animation-timing-function: linear; }
        100% { left: 115%; opacity: 0; }
    }
}

/* --- Verbindingslijnen tussen robots (data flow) --- */
.flow-line {
    position: absolute;
    top: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(45, 212, 255, 0.6) 50%, transparent 100%);
    opacity: 0.5;
    animation: line-pulse 4s ease-in-out infinite;
}

.flow-line--1 { left: 22%;  width: 22%; animation-delay: 0s; }
.flow-line--2 { left: 52%;  width: 22%; animation-delay: 1.5s; }

@keyframes line-pulse {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.7; }
}

@media (max-width: 767px) {
    .flow-line { top: 40px; }
}

/* --- Reduced motion: toon een statische, kalme versie --- */
@media (prefers-reduced-motion: reduce) {
    .robot-stage { opacity: 0.1; }
    .robot-eye, .robot-arm-right, .robot-arm-left,
    .envelope-wrapper, .note-sliding, .flow-line,
    .flow-arrow {
        animation: none !important;
    }
    .envelope-wrapper, .note-sliding { display: none; }
}