/* ==========================================================================
   Animation: reminder-timeline
   The LFS remortgage-reminder timeline. Ported value-for-value from
   "Case Study - LFS.dc.html" (the data-lfs-tl section and its lfs*
   keyframes). One 10s loop; every element's keyframes are timed against it.
   Self-contained: literal brand colours, no dependency on site.css.
   ========================================================================== */

@keyframes lfsEnv {
    0%       { left: -10px; opacity: 0; }
    4%       { opacity: 1; }
    12%, 20% { left: calc((100% - 120px) * 0.25 - 22px); }
    30%, 38% { left: calc((100% - 120px) * 0.5 - 22px); }
    48%, 56% { left: calc((100% - 120px) * 0.75 - 22px); }
    66%      { left: calc(100% - 92px); opacity: 1; transform: scale(1); }
    70%, 100% { left: calc(100% - 92px); opacity: 0; transform: scale(.4); }
}
@keyframes lfsDot0 {
    0%, 12%   { background: #fff8f1; transform: scale(1); }
    14%       { background: #ffc93c; transform: scale(1.35); }
    17%, 92%  { background: #ffc93c; transform: scale(1); }
    96%, 100% { background: #fff8f1; }
}
@keyframes lfsBub0 {
    0%, 12%   { opacity: 0; transform: translate(-50%, 10px) scale(.5); }
    14%, 22%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    25%, 100% { opacity: 0; transform: translate(-50%, -6px) scale(.8); }
}
@keyframes lfsDot1 {
    0%, 30%   { background: #fff8f1; transform: scale(1); }
    32%       { background: #ffc93c; transform: scale(1.35); }
    35%, 92%  { background: #ffc93c; transform: scale(1); }
    96%, 100% { background: #fff8f1; }
}
@keyframes lfsBub1 {
    0%, 30%   { opacity: 0; transform: translate(-50%, 10px) scale(.5); }
    32%, 40%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    43%, 100% { opacity: 0; transform: translate(-50%, -6px) scale(.8); }
}
@keyframes lfsDot2 {
    0%, 48%   { background: #fff8f1; transform: scale(1); }
    50%       { background: #ffc93c; transform: scale(1.35); }
    53%, 92%  { background: #ffc93c; transform: scale(1); }
    96%, 100% { background: #fff8f1; }
}
@keyframes lfsBub2 {
    0%, 48%   { opacity: 0; transform: translate(-50%, 10px) scale(.5); }
    50%, 58%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    61%, 100% { opacity: 0; transform: translate(-50%, -6px) scale(.8); }
}
@keyframes lfsWin    { 0%, 66% { fill: #fff8f1; } 69%, 92% { fill: #ffc93c; } 97%, 100% { fill: #fff8f1; } }
@keyframes lfsDoor   { 0%, 66% { transform: scaleX(1); } 70%, 90% { transform: scaleX(.35); } 95%, 100% { transform: scaleX(1); } }
@keyframes lfsBooked {
    0%, 68%   { opacity: 0; transform: scale(.4) rotate(-12deg); }
    72%, 90%  { opacity: 1; transform: scale(1) rotate(-4deg); }
    95%, 100% { opacity: 0; transform: scale(.6); }
}
@keyframes lfsFill { 0% { width: 0; } 66%, 92% { width: 100%; } 97%, 100% { width: 0; } }

.anim-tl { position: relative; height: 200px; max-width: 1100px; margin: 0 auto; color: #3b1758; }

.anim-tl__bar {
    position: absolute; left: 0; right: 120px; bottom: 62px; height: 10px;
    border-radius: 5px; background: #ece2fb; border: 3px solid #3b1758; overflow: hidden;
}
.anim-tl__fill { height: 100%; background: #28D2D5; animation: lfsFill 10s linear infinite; }

/* A zero-width anchor at each stop; its children hang off it. */
.anim-tl__stop { position: absolute; bottom: 0; width: 0; }
.anim-tl__stop--0 { left: calc((100% - 120px) * 0.25); }
.anim-tl__stop--1 { left: calc((100% - 120px) * 0.5); }
.anim-tl__stop--2 { left: calc((100% - 120px) * 0.75); }

.anim-tl__dot {
    position: absolute; left: -14px; bottom: 54px; width: 28px; height: 28px;
    border-radius: 50%; border: 3px solid #3b1758; background: #fff8f1;
}
.anim-tl__stop--0 .anim-tl__dot { animation: lfsDot0 10s infinite; }
.anim-tl__stop--1 .anim-tl__dot { animation: lfsDot1 10s infinite; }
.anim-tl__stop--2 .anim-tl__dot { animation: lfsDot2 10s infinite; }

.anim-tl__day {
    position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); white-space: nowrap;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px;
}

.anim-tl__bub {
    position: absolute; left: 0; bottom: 132px; white-space: nowrap;
    background: #fff; border: 3px solid #3b1758; box-shadow: 0 4px 0 #3b1758;
    border-radius: 16px 16px 16px 4px; padding: 6px 14px;
    font-weight: 800; font-size: 15px; opacity: 0;
}
.anim-tl__stop--0 .anim-tl__bub { animation: lfsBub0 10s cubic-bezier(.34, 1.6, .5, 1) infinite; }
.anim-tl__stop--1 .anim-tl__bub { animation: lfsBub1 10s cubic-bezier(.34, 1.6, .5, 1) infinite; }
.anim-tl__stop--2 .anim-tl__bub { animation: lfsBub2 10s cubic-bezier(.34, 1.6, .5, 1) infinite; }

.anim-tl__env {
    position: absolute; bottom: 84px; left: 0; width: 44px; height: 32px;
    animation: lfsEnv 10s cubic-bezier(.5, 0, .3, 1) infinite;
}
.anim-tl__env svg { display: block; }

.anim-tl__house { position: absolute; right: 0; bottom: 40px; width: 120px; height: 150px; }
.anim-tl__house svg { display: block; overflow: visible; }

/* The prototype's windows had no fill of their own (the keyframes supplied
   it); a base fill keeps them cream when animation is off. */
.anim-tl__win  { fill: #fff8f1; animation: lfsWin 10s infinite; }
.anim-tl__door { transform-origin: 46px 129px; animation: lfsDoor 10s infinite; }

.anim-tl__booked {
    position: absolute; left: 50%; top: -34px; margin-left: -58px; width: 116px; text-align: center;
    background: #ffc93c; border: 3px solid #3b1758; box-shadow: 0 4px 0 #3b1758;
    border-radius: 18px 18px 18px 4px; padding: 6px 0;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px;
    opacity: 0; animation: lfsBooked 10s cubic-bezier(.34, 1.6, .5, 1) infinite;
}

/* Phones: lay it out at a fixed 620px and zoom it down, as the prototype did,
   so the stops keep their spacing instead of colliding. */
@media (max-width: 640px) { .anim-tl { width: 620px; max-width: none; zoom: .56; margin: 0 auto; } }
@media (max-width: 420px) { .anim-tl { zoom: .5; } }

/* Reduced motion: a still picture — the bar empty, the envelope parked at the
   start and every bubble hidden, as the prototype's [data-art] rule left it. */
@media (prefers-reduced-motion: reduce) {
    .anim-tl, .anim-tl * { animation: none !important; }
}