/* agent-booking.css
 *
 * Styles of the Terminbuchung product subpage (agent.feedbax.* /terminbuchung). Loaded on
 * top of agent-landing.css, which carries the shared la-* primitives (la-anim-rise,
 * la-anim-soft, la-orbit-blob, pills). Everything here is page-specific: the two
 * self-running option loops (11s each). The hero's demo is the scripted LeadWin demo
 * (_BookingHero.Demo), styled by its own components.
 * Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 */

/* ---------- option A: own booking, 11s loop ---------- */

/* Three availability rows tick in, then the mini calendar rises, a cursor picks the 20th
   and the confirmation chip appears. */
@keyframes la-tb-own-tick-1 {
    0%, 5% { opacity: 0; transform: scale(.5); }
    9%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tb-own-tick-2 {
    0%, 11% { opacity: 0; transform: scale(.5); }
    15%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tb-own-tick-3 {
    0%, 17% { opacity: 0; transform: scale(.5); }
    21%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tb-own-cal {
    0%, 26% { opacity: 0; transform: translateY(14px); }
    32%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-tb-own-cursor {
    0%, 34% { opacity: 0; transform: translate(70px, 60px); }
    39% { opacity: 1; }
    44%, 46% { opacity: 1; transform: translate(0, 0); }
    48% { transform: translate(0, 0) scale(.8); }
    50%, 52% { opacity: 1; transform: translate(0, 0) scale(1); }
    57%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* Colour-carrying keyframes go through var() so the dark theme needs no duplicate. */
@keyframes la-tb-own-day {
    0%, 46% { background: var(--la-tb-day-bg); color: var(--la-tb-day-text); }
    50%, 92% { background: var(--la-tb-day-bg-on); color: var(--la-tb-day-text-on); }
    98%, 100% { background: var(--la-tb-day-bg); color: var(--la-tb-day-text); }
}

@keyframes la-tb-own-ok {
    0%, 56% { opacity: 0; transform: translateY(8px); }
    62%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}

.la-tb-own-tick-1 { animation: la-tb-own-tick-1 11s linear infinite; }
.la-tb-own-tick-2 { animation: la-tb-own-tick-2 11s linear infinite; }
.la-tb-own-tick-3 { animation: la-tb-own-tick-3 11s linear infinite; }
.la-tb-own-cal { animation: la-tb-own-cal 11s linear infinite; }
.la-tb-own-cursor { animation: la-tb-own-cursor 11s linear infinite; }
.la-tb-own-ok { animation: la-tb-own-ok 11s linear infinite; }

.la-tb-own-day {
    --la-tb-day-bg: #f2f1ff;
    --la-tb-day-text: #18181b;
    --la-tb-day-bg-on: #0000ff;
    --la-tb-day-text-on: #ffffff;
    animation: la-tb-own-day 11s linear infinite;
}

.dark .la-tb-own-day {
    --la-tb-day-bg: #232040;
    --la-tb-day-text: #fafafa;
    --la-tb-day-bg-on: #4338ca;
    --la-tb-day-text-on: #ffffff;
}

/* ---------- option B: embedded Calendly, 11s loop ---------- */

@keyframes la-tb-cl-link {
    0%, 6% { opacity: 0; transform: translateY(8px); }
    11%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-tb-cl-active {
    0%, 16% { opacity: 0; transform: scale(.6); }
    21%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tb-cl-card {
    0%, 28% { opacity: 0; transform: translateY(16px) scale(.96); }
    34%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-tb-cl-note {
    0%, 55% { opacity: 0; transform: translateY(8px); }
    61%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}

.la-tb-cl-link { animation: la-tb-cl-link 11s linear infinite; }
.la-tb-cl-active { animation: la-tb-cl-active 11s linear infinite; }
.la-tb-cl-card { animation: la-tb-cl-card 11s linear infinite; }
.la-tb-cl-note { animation: la-tb-cl-note 11s linear infinite; }

/* ---------- reduced motion: freeze the self-running loops in a readable state ---------- */

@media (prefers-reduced-motion: reduce) {
    .la-tb-own-tick-1, .la-tb-own-tick-2, .la-tb-own-tick-3,
    .la-tb-own-cal, .la-tb-own-ok,
    .la-tb-cl-link, .la-tb-cl-active, .la-tb-cl-card, .la-tb-cl-note {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .la-tb-own-cursor {
        animation: none;
        opacity: 0;
    }

    .la-tb-own-day {
        animation: none;
        background: var(--la-tb-day-bg-on);
        color: var(--la-tb-day-text-on);
    }
}