/* ═══════════════════════════════════════════════════════════════
   Restaurant guest journey — cinematic scene phases
   ═══════════════════════════════════════════════════════════════ */

.scene-svg {
    width: min(100%, 480px);
    height: auto;
    position: relative;
    z-index: 1;
}

/* ── Customer base ── */
.scene-customer {
    transform: translate(52px, 0);
    opacity: 0;
}

.scene-customer__shadow {
    transition: transform 0.3s ease;
}

.scene-leg--l { transform-origin: 18px 206px; }
.scene-leg--r { transform-origin: 30px 206px; }
.scene-customer__arm-l { transform-origin: 12px 178px; }
.scene-customer__arm-r { transform-origin: 38px 176px; }

.scene-receipt {
    transform-origin: 244px 170px;
    transform-box: fill-box;
}

.scene-handoff-bag {
    transform-origin: 273px 167px;
    transform-box: fill-box;
}

.scene-served-plate {
    transform-origin: 370px 176px;
    transform-box: fill-box;
}

.scene-contactless {
    transform-box: fill-box;
}

.scene-check {
    transform-box: fill-box;
}

.scene-customer__bag,
.scene-handoff-bag,
.scene-receipt,
.scene-contactless,
.scene-check,
.scene-served-plate,
.scene-food-steam {
    opacity: 0;
    pointer-events: none;
}

.scene-staff__arm--serve { opacity: 0; }
.scene-staff__arm--rest { opacity: 1; }

/* ── Walk cycle ── */
@keyframes sceneLegL {
    0%, 100% { transform: rotate(-22deg); }
    50% { transform: rotate(16deg); }
}

@keyframes sceneLegR {
    0%, 100% { transform: rotate(16deg); }
    50% { transform: rotate(-22deg); }
}

@keyframes sceneArmWalkL {
    0%, 100% { transform: rotate(14deg); }
    50% { transform: rotate(-12deg); }
}

@keyframes sceneArmWalkR {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(14deg); }
}

@keyframes sceneBobWalk {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.scene[data-phase="walk-counter"] .scene-customer__legs .scene-leg--l,
.scene[data-phase="walk-table"] .scene-customer__legs .scene-leg--l {
    animation: sceneLegL 0.44s ease-in-out infinite;
}

.scene[data-phase="walk-counter"] .scene-customer__legs .scene-leg--r,
.scene[data-phase="walk-table"] .scene-customer__legs .scene-leg--r {
    animation: sceneLegR 0.44s ease-in-out infinite;
}

.scene[data-phase="walk-counter"] .scene-customer__arm-l,
.scene[data-phase="walk-table"] .scene-customer__arm-l {
    animation: sceneArmWalkL 0.44s ease-in-out infinite;
}

.scene[data-phase="walk-counter"] .scene-customer__arm-r,
.scene[data-phase="walk-table"] .scene-customer__arm-r {
    animation: sceneArmWalkR 0.44s ease-in-out infinite;
}

.scene[data-phase="walk-counter"] .scene-customer__body,
.scene[data-phase="walk-table"] .scene-customer__body {
    animation: sceneBobWalk 0.44s ease-in-out infinite;
}

/* ── Door ── */
@keyframes sceneDoorOpen {
    from { transform: translateX(0); }
    to { transform: translateX(-20px); }
}

@keyframes sceneDoorClose {
    from { transform: translateX(-20px); }
    to { transform: translateX(0); }
}

.scene-door__panel {
    transform-origin: left center;
}

/* ── Customer paths ── */
@keyframes sceneCustomerFadeIn {
    from { opacity: 0; transform: translate(40px, 6px) scale(0.94); }
    to { opacity: 1; transform: translate(52px, 0) scale(1); }
}

@keyframes sceneWalkToCounter {
    from { transform: translate(52px, 0); }
    to { transform: translate(168px, 0); }
}

@keyframes sceneWalkToTable {
    from { transform: translate(168px, 0); }
    to { transform: translate(312px, 10px) scale(0.94); }
}

@keyframes sceneCustomerFadeOut {
    from { opacity: 1; transform: translate(312px, 10px) scale(0.94); }
    to { opacity: 0; transform: translate(330px, 10px) scale(0.9); }
}

/* ── POS & receipt ── */
@keyframes scenePosPulse {
    0%, 100% { fill: #0d2818; filter: none; }
    50% { fill: #143d28; filter: drop-shadow(0 0 6px rgba(110, 231, 160, 0.55)); }
}

@keyframes scenePosTap {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@keyframes sceneReceiptSlide {
    0% { opacity: 0; transform: translateY(16px) scale(0.82); }
    25% { opacity: 1; transform: translateY(0) scale(1); }
    85% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0.9; transform: translateY(-4px) scale(1); }
}

/* ── Contactless pay ── */
@keyframes sceneCardTap {
    0% { opacity: 0; transform: translate(200px, 188px) rotate(-8deg); }
    15% { opacity: 1; transform: translate(200px, 188px) rotate(-8deg); }
    45% { opacity: 1; transform: translate(258px, 168px) rotate(-2deg); }
    55% { opacity: 1; transform: translate(258px, 168px) rotate(-2deg) scale(0.96); }
    100% { opacity: 0; transform: translate(258px, 164px) rotate(-2deg) scale(0.9); }
}

@keyframes scenePayCheck {
    0%, 40% { opacity: 0; transform: translate(272px, 138px) scale(0.5); }
    55% { opacity: 1; transform: translate(272px, 138px) scale(1.1); }
    70% { opacity: 1; transform: translate(272px, 138px) scale(1); }
    100% { opacity: 0; transform: translate(272px, 134px) scale(0.9); }
}

/* ── Handoff ── */
@keyframes sceneStaffServe {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

@keyframes sceneBagToCustomer {
    0% { opacity: 0; transform: scale(0.8); }
    15% { opacity: 1; transform: scale(1); }
    70% { opacity: 1; transform: translate(-48px, 8px) scale(1); }
    100% { opacity: 0; transform: translate(-48px, 8px) scale(0.85); }
}

@keyframes sceneCustomerBagHold {
    0%, 30% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

/* ── Dining ── */
@keyframes scenePlateAppear {
    from { opacity: 0; transform: scale(0.55); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes sceneSteamRise {
    0% { opacity: 0; transform: translateY(6px); }
    30% { opacity: 0.75; }
    100% { opacity: 0; transform: translateY(-16px); }
}

/* ── Phase states ── */
.scene[data-phase="enter"] .scene-door__panel {
    animation: sceneDoorOpen 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.scene[data-phase="enter"] .scene-customer {
    animation: sceneCustomerFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.scene[data-phase="walk-counter"] .scene-customer {
    opacity: 1;
    animation: sceneWalkToCounter 2.8s linear forwards;
}

.scene[data-phase="order"] .scene-customer {
    opacity: 1;
    transform: translate(168px, 0);
}

.scene[data-phase="order"] .scene-pos__screen {
    animation: scenePosPulse 1.1s ease-in-out infinite;
}

.scene[data-phase="order"] .scene-pos__tap {
    animation: scenePosTap 1.1s ease-in-out infinite;
}

.scene[data-phase="order"] .scene-receipt {
    animation: sceneReceiptSlide 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 1;
}

.scene[data-phase="pay"] .scene-customer {
    opacity: 1;
    transform: translate(168px, 0);
}

.scene[data-phase="pay"] .scene-contactless {
    animation: sceneCardTap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 1;
}

.scene[data-phase="pay"] .scene-check {
    animation: scenePayCheck 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 1;
}

.scene[data-phase="pay"] .scene-pos__screen {
    fill: #143d28;
    filter: drop-shadow(0 0 8px rgba(110, 231, 160, 0.5));
}

.scene[data-phase="receive"] .scene-customer {
    opacity: 1;
    transform: translate(168px, 0);
}

.scene[data-phase="receive"] .scene-staff__arm--serve {
    animation: sceneStaffServe 2.2s ease forwards;
    opacity: 1;
}

.scene[data-phase="receive"] .scene-staff__arm--rest {
    opacity: 0;
}

.scene[data-phase="receive"] .scene-handoff-bag {
    animation: sceneBagToCustomer 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 1;
}

.scene[data-phase="receive"] .scene-customer__bag {
    animation: sceneCustomerBagHold 2.2s ease 1s forwards;
    opacity: 1;
}

.scene[data-phase="walk-table"] .scene-customer {
    opacity: 1;
    animation: sceneWalkToTable 2.6s linear forwards;
}

.scene[data-phase="walk-table"] .scene-customer__bag {
    opacity: 1;
}

.scene[data-phase="dine"] .scene-customer {
    opacity: 1;
    transform: translate(312px, 10px) scale(0.94);
}

.scene[data-phase="dine"] .scene-customer__bag {
    opacity: 0;
}

.scene[data-phase="dine"] .scene-served-plate {
    animation: scenePlateAppear 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 1;
}

.scene[data-phase="dine"] .scene-food-steam {
    opacity: 1;
}

.scene[data-phase="dine"] .scene-steam__wisp--1 {
    animation: sceneSteamRise 3s ease-out infinite;
}

.scene[data-phase="dine"] .scene-steam__wisp--2 {
    animation: sceneSteamRise 3.4s ease-out 0.6s infinite;
}

.scene[data-phase="dine"] .scene-steam__wisp--3 {
    animation: sceneSteamRise 3.2s ease-out 1.2s infinite;
}

.scene[data-phase="reset"] .scene-customer {
    animation: sceneCustomerFadeOut 0.7s ease forwards;
}

.scene[data-phase="reset"] .scene-door__panel {
    animation: sceneDoorClose 0.6s ease forwards;
}

.scene[data-phase="reset"] .scene-served-plate,
.scene[data-phase="reset"] .scene-food-steam {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Static fallback when reduced motion */
.scene[data-phase="static"] .scene-customer {
    opacity: 1;
    transform: translate(168px, 0);
}

.scene[data-phase="static"] .scene-door__panel {
    transform: translateX(-20px);
}

.scene-caption {
    transition: opacity 0.35s ease;
}

.scene-caption.is-changing {
    opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
    .scene[data-phase] .scene-customer,
    .scene[data-phase] .scene-door__panel,
    .scene[data-phase] .scene-receipt,
    .scene[data-phase] .scene-contactless,
    .scene[data-phase] .scene-check,
    .scene[data-phase] .scene-handoff-bag,
    .scene[data-phase] .scene-customer__bag,
    .scene[data-phase] .scene-served-plate,
    .scene[data-phase] .scene-customer__legs .scene-leg--l,
    .scene[data-phase] .scene-customer__legs .scene-leg--r,
    .scene[data-phase] .scene-customer__arm-l,
    .scene[data-phase] .scene-customer__arm-r,
    .scene[data-phase] .scene-customer__body,
    .scene[data-phase] .scene-pos__screen,
    .scene[data-phase] .scene-pos__tap,
    .scene[data-phase] .scene-staff__arm--serve,
    .scene[data-phase] .scene-steam__wisp--1,
    .scene[data-phase] .scene-steam__wisp--2,
    .scene[data-phase] .scene-steam__wisp--3 {
        animation: none !important;
    }
}