/* Reusable hero agenda illustration. */
.v4 .activity-scene.agenda-illustration{width:min(44vw,620px);height:auto;max-width:none;aspect-ratio:1444/1376;perspective:none;overflow:visible;transform:translateY(-14px);container-type:inline-size}
.agenda-illustration .agenda-art{display:block;position:relative;z-index:1;width:100%;height:auto;overflow:visible;transform:scale(1.17);transform-origin:center}
.agenda-illustration>.agenda-halo,.agenda-illustration>.agenda-grain{position:absolute;z-index:0;width:94.5%;aspect-ratio:1;left:.75%;top:-9%;pointer-events:none}
.agenda-illustration>.agenda-halo{--halo-color:.58;transform:rotate(-18deg)}
.agenda-illustration>.agenda-grain{border-radius:50%;background-image:var(--nocturne-grain);background-size:190px 190px;opacity:.27;mix-blend-mode:multiply;mask-image:radial-gradient(circle,#000 0 18%,#000a 36%,#0005 52%,#0001 66%,transparent 84%)}
.agenda-illustration .notifications{position:absolute;inset:0;z-index:2;pointer-events:none}



    .agenda-illustration .card { transform-box: fill-box; transform-origin: center; }
    .agenda-illustration .phone { --dx: -4px; --dy: -3px; --sway: 3px; --lift: 3px; --period: 5.1s; }
    .agenda-illustration .confirm { --dx: 4px; --dy: -3px; --sway: -2px; --lift: 3px; --period: 4.7s; }
    .agenda-illustration .message { --dx: -4px; --dy: 3px; --sway: 2px; --lift: 3px; --period: 5.6s; }
    .agenda-illustration .chart { --dx: 4px; --dy: 3px; --sway: -3px; --lift: 3px; --period: 6.2s; }
    .agenda-illustration .week-layer { opacity: 0; transform: translateX(850px); }
    .agenda-illustration .week-layer.arrived { opacity: 1; transform: translateX(0); transition: transform 1.1s cubic-bezier(.4,0,.2,1); }
    .agenda-illustration .week-layer.departing { opacity: 1; transform: translateX(-850px); transition: transform 1.1s cubic-bezier(.4,0,.2,1); }
    .agenda-illustration .booking-visual { opacity: 0; transform: translateY(12px) scale(.94); transform-box: fill-box; transform-origin: center; }
    .agenda-illustration .booking.shown .booking-visual { opacity: 1; transform: translateY(0) scale(1); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.85,.3,1.15); }
    .agenda-illustration .nav-pulse { opacity: 0; transform-box: fill-box; transform-origin: center; }
    .agenda-illustration.motion-visible .card { animation: agenda-card-float var(--period) ease-in-out infinite; }
    .agenda-illustration .nav-pulse.pulsing { animation: agenda-nav .7s ease-out both; }
    @keyframes agenda-card-float {
      0%, 100% { transform: translate(var(--dx),var(--dy)); }
      50% { transform: translate(calc(var(--dx) + var(--sway)),calc(var(--dy) - var(--lift))); }
    }
    @keyframes agenda-nav {
      0%, 100% { opacity: 0; transform: scale(.75); }
      45% { opacity: .65; transform: scale(1.05); }
    }
    .agenda-illustration .notification {
      position: absolute; padding: clamp(5px,1.05cqw,8px) clamp(7px,1.58cqw,12px); border: 1px solid #fff; border-radius: 999px;
      background: #7561ce; box-shadow: 0 12px 24px #bd7fa833;
      color: #fff; font: 700 clamp(9px,1.7cqw,13px)/1.2 system-ui, sans-serif; white-space: nowrap;
      opacity: 0; transform: translateY(10px) scale(.88);
      transition: opacity .6s ease, transform .5s cubic-bezier(.2,.9,.3,1.12);
    }
    .agenda-illustration .notification.visible { opacity: 1; transform: translateY(0) scale(1); }

@media(max-width:760px){.v4 .activity-scene.agenda-illustration{width:100%;height:auto;max-width:390px;transform:none}.agenda-illustration>.agenda-halo,.agenda-illustration>.agenda-grain{width:94.5%;left:2.75%;top:-9%}}
@media(prefers-reduced-motion:reduce){.agenda-illustration *{animation:none!important;transition:none!important}}

.agenda-illustration .phone-receiver,.agenda-illustration .check-symbol,.agenda-illustration .message-dot{transform-box:fill-box;transform-origin:center}
.agenda-illustration.motion-visible .phone-receiver{animation:agenda-ring 4.8s ease-in-out infinite}
.agenda-illustration.motion-visible .phone-signal{animation:agenda-signal 2.4s ease-in-out infinite}
.agenda-illustration.motion-visible .message-back{animation:agenda-chat 4.6s ease-in-out infinite}
.agenda-illustration.motion-visible .message-front{animation:agenda-chat 4.6s ease-in-out -2.3s infinite}
.agenda-illustration.motion-visible .message-dot{animation:agenda-signal 2.8s ease-in-out infinite}
.agenda-illustration .audio-bar{transform-box:fill-box;transform-origin:center}
.agenda-illustration.motion-visible .audio-bar{animation:agenda-audio 1.25s ease-in-out var(--beat-delay) infinite both}
.agenda-illustration .confetti rect{opacity:0;transform-box:fill-box;transform-origin:center}
.agenda-illustration.motion-visible .check-symbol{animation:agenda-heartbeat 2.2s ease-in-out infinite}
.agenda-illustration.celebrating .confetti rect{animation:agenda-confetti 1.65s cubic-bezier(.15,.55,.4,1) var(--burst-delay) both}
@keyframes agenda-ring{0%,12%,100%{transform:rotate(0)}2%,6%,10%{transform:rotate(-3deg)}4%,8%{transform:rotate(3deg)}}
@keyframes agenda-signal{0%,40%,100%{opacity:1}20%{opacity:.35}}
@keyframes agenda-chat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes agenda-heartbeat{0%,50%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(1.03)}34%{transform:scale(1.09)}}
@keyframes agenda-confetti{0%{opacity:0;transform:translate(0,0) scale(.5)}8%{opacity:1}55%{opacity:1;transform:translate(var(--mx),var(--my)) rotate(var(--turn)) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(calc(var(--turn) * 1.5)) scale(.8)}}
@keyframes agenda-audio{0%,100%{opacity:.15;transform:scaleY(.35)}22%{opacity:1;transform:scaleY(1.3)}46%{opacity:.65;transform:scaleY(.65)}70%{opacity:1;transform:scaleY(1.05)}}