/* ============================================================================
   animations.css — scroll reveals, hover behaviour, focus rings and ambient
   motion.

   Ordering note: this file must load AFTER components.css, and inside it the
   hover rules must stay BELOW `.reveal.is-in`. Both set `transform` at equal
   specificity, so source order is what lets a hover win once an element has
   entered.
   ========================================================================== */

/* ────────────────────────  scroll reveal  ─────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Cards arrive with a touch of scale so they feel like they settle. */
.step.reveal,
.why__card.reveal,
.panel.reveal,
.hero__card.reveal,
.passport.reveal,
.docs__list.reveal,
.chat.reveal { transform: translateY(34px) scale(0.985); }

/* ─────────────────────────  hover behaviour  ──────────────────────── */
.step, .why__card, .panel, .passport, .docs__list, .chat, .hero__card, .authorities__cell {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                background-color 0.4s ease;
}

.step:hover, .why__card:hover, .panel:hover, .passport:hover, .docs__list:hover, .chat:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 28px 64px -24px rgba(2, 6, 18, 0.85);
}
.panel--good:hover { border-color: rgba(229, 29, 40, 0.85); }

.hero__card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 28px 64px -24px rgba(2, 6, 18, 0.85);
}

.step:hover .step__num {
    background: var(--red);
    opacity: 1;
    transform: scale(1.06);
}
.step__num { transition: background-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease; }

.authorities__cell:hover { background: rgba(255, 255, 255, 0.04); }
.authorities__cell b, .authorities__cell span { transition: opacity 0.4s ease; }
.authorities__cell:hover b { opacity: 1; }
.authorities__cell:hover span { opacity: 0.65; }

.btn--primary { box-shadow: 0 12px 30px -14px rgba(229, 29, 40, 0.85); }
.btn--primary:hover { box-shadow: 0 18px 42px -14px rgba(229, 29, 40, 1); }
.btn:active { transform: translateY(0); }

.nav__logo img, .footer__brand img {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.nav__logo:hover img, .footer__logo:hover img { transform: scale(1.05); }

.footer__col a { transition: opacity 0.3s ease, translate 0.3s ease; }
.footer__col a:hover { opacity: 0.95; translate: -4px 0; }

.pill { transition: border-color 0.4s ease, opacity 0.4s ease; }
.why__card:hover .pill, .panel:hover .pill {
    border-color: rgba(255, 255, 255, 0.45);
    opacity: 0.95;
}

.qr { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.hero__card--voucher:hover .qr { transform: scale(1.06); }

.bubble { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.chat:hover .bubble--out { transform: translateX(4px); }
[dir="ltr"] .chat:hover .bubble--out { transform: translateX(-4px); }

/* Keyboard users get the same affordance as the mouse. */
a:focus-visible, .btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    border-radius: 99px;
}

/* ───────────────────────────  keyframes  ──────────────────────────── */

/* Split-flap: the panel falls away, the text is swapped at the midpoint,
   then the new panel drops in — the way a departure board turns over. */
@keyframes flap {
    0%   { transform: rotateX(0deg);   opacity: 1; }
    48%  { transform: rotateX(-90deg); opacity: 0.15; }
    52%  { transform: rotateX(90deg);  opacity: 0.15; }
    100% { transform: rotateX(0deg);   opacity: 1; }
}
.flap.is-flapping { animation: flap 380ms cubic-bezier(0.3, 0, 0.3, 1); }

/* Ambient motion — the floating hero cards and the live status dot. */
/* Keeps the -50% centring offset while drifting. */
@keyframes float {
    0%, 100% { translate: 0 -50%; }
    50%      { translate: 0 calc(-50% - 10px); }
}
.hero__card.is-in { animation: float 7s ease-in-out infinite; }
.hero__card--voucher.is-in { animation-delay: -3.5s; }

@keyframes pulse {
    0%, 100% { opacity: 0.5; scale: 1; }
    50%      { opacity: 1;   scale: 1.4; }
}
.chat__status img { animation: pulse 2.4s ease-in-out infinite; }

@keyframes nav-in {
    from { opacity: 0; translate: 0 -18px; }
    to   { opacity: 1; translate: 0 0; }
}
.nav { animation: nav-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.15s; }

/* ──────────────────────  reduced motion  ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal,
    .step.reveal,
    .why__card.reveal,
    .panel.reveal,
    .hero__card.reveal,
    .passport.reveal,
    .docs__list.reveal,
    .chat.reveal { opacity: 1; transform: none; transition: none; }
    .hero__card.is-in { animation: none; }
    .chat__status img { animation: none; }
    .hero__copy { transition: none; }
    /* The menu panel and the bars that become an X. Both still open and close — they just do it in
       one frame, which is what this preference asks for. */
    .nav__menu,
    .nav__toggle-bars,
    .nav__toggle-bars::before,
    .nav__toggle-bars::after { transition: none; }
    .nav { animation: none; }
}