:root{--total-duration: 50s}.stage{position:relative;width:100%;height:800px;border-radius:var(--border-radius-large);background:var(--color-background2);box-shadow:0 3px 5px -1px rgba(var(--elevation-color),.2),0 6px 10px rgba(var(--elevation-color),.14),0 1px 18px rgba(var(--elevation-color),.12);overflow:hidden;margin:0 auto}.scene-hook,.scene-flow,.scene-reconcile,.scene-dashboard,.scene-scale{opacity:0}.scene-hook{animation:scene1 var(--total-duration) ease-in-out infinite}.scene-flow{animation:scene2 var(--total-duration) ease-in-out infinite}.scene-reconcile{animation:scene3 var(--total-duration) ease-in-out infinite}.scene-dashboard{animation:scene4 var(--total-duration) ease-in-out infinite}.scene-scale{animation:scene5 var(--total-duration) ease-in-out infinite}@keyframes scene1{0%{opacity:0;transform:translateY(16px)}2%,18%{opacity:1;transform:translateY(0)}20%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene2{0%,19%{opacity:0;transform:translateY(16px)}21%,38%{opacity:1;transform:translateY(0)}40%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene3{0%,39%{opacity:0;transform:translateY(16px)}41%,58%{opacity:1;transform:translateY(0)}60%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene4{0%,59%{opacity:0;transform:translateY(16px)}61%,78%{opacity:1;transform:translateY(0)}80%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene5{0%,79%{opacity:0;transform:translateY(16px)}81%,97%{opacity:1;transform:translateY(0)}99%,to{opacity:0;transform:translateY(-16px)}}.scene-title h1{font-family:var(--font-family-headings);font-size:42px;font-weight:var(--font-weight-regular);color:var(--color-text-primary);line-height:1.2;margin-bottom:24px;position:relative;z-index:1}.scene-title h1 strong{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.scene-timeline{display:flex;align-items:center;justify-content:center;gap:0;width:100%;position:relative}.scene-node{display:flex;flex-direction:column;align-items:center;position:relative;flex-shrink:0;z-index:2;min-width:130px}.scene-icon{width:72px;height:72px;border-radius:var(--border-radius-base);display:flex;justify-content:center;align-items:center;margin-bottom:10px;position:relative;background:var(--color-white);border:2px solid var(--color-border-divider);color:var(--color-text-secondary);transition:none}.scene-icon svg{width:48px;height:48px}.scene-icon.icon-1{animation:icon1 var(--total-duration) ease-in-out infinite}.scene-icon.icon-2{animation:icon2 var(--total-duration) ease-in-out infinite}.scene-icon.icon-3{animation:icon3 var(--total-duration) ease-in-out infinite}.scene-icon.icon-4{animation:icon4 var(--total-duration) ease-in-out infinite}.scene-icon.icon-5{animation:icon5 var(--total-duration) ease-in-out infinite}@keyframes icon1{0%,20%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}24%,26%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}}@keyframes icon2{0%,26%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}28%,30%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}}@keyframes icon3{0%,30%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}32%,34%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}}@keyframes icon4{0%,33%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}35%,37%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}}@keyframes icon5{0%,36%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}38%,39%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}}.scene-label-text{font-size:10px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.scene-connector{width:100px;height:2px;background:var(--color-border-divider);position:relative;margin:0 -50px 35px;border-radius:2px;overflow:hidden;align-self:center}.scene-connector:after{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--color-brand-primary);border-radius:2px}.scene-connector:nth-of-type(2):after{animation:connector1 var(--total-duration) ease-in-out infinite}.scene-connector:nth-of-type(4):after{animation:connector2 var(--total-duration) ease-in-out infinite}.scene-connector:nth-of-type(6):after{animation:connector3 var(--total-duration) ease-in-out infinite}.scene-connector:nth-of-type(8):after{animation:connector4 var(--total-duration) ease-in-out infinite}@keyframes connector1{0%,24%{left:-100%}26%,98%{left:0}to{left:100%}}@keyframes connector2{0%,28%{left:-100%}30%,98%{left:0}to{left:100%}}@keyframes connector3{0%,32%{left:-100%}34%,98%{left:0}to{left:100%}}@keyframes connector4{0%,36%{left:-100%}38%,98%{left:0}to{left:100%}}.scene-hook{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px;background:linear-gradient(45deg,var(--color-white) 0%,var(--color-brand-primary2) 100%)}.scene-hook:before{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 50 L25 25 L50 50 L75 25 L100 50' fill='none' stroke='%23CBD5E1' stroke-width='0.5' opacity='0.3'/%3E%3Cpath d='M0 60 L25 35 L50 60 L75 35 L100 60' fill='none' stroke='%23CBD5E1' stroke-width='0.5' opacity='0.3'/%3E%3Cpath d='M0 70 L25 45 L50 70 L75 45 L100 70' fill='none' stroke='%23CBD5E1' stroke-width='0.5' opacity='0.3'/%3E%3Ccircle cx='25' cy='25' r='1.5' fill='%2394A3B8' opacity='0.4'/%3E%3Ccircle cx='50' cy='50' r='1.5' fill='%2394A3B8' opacity='0.4'/%3E%3Ccircle cx='75' cy='25' r='1.5' fill='%2394A3B8' opacity='0.4'/%3E%3Ccircle cx='25' cy='35' r='1.5' fill='%2394A3B8' opacity='0.4'/%3E%3Ccircle cx='50' cy='60' r='1.5' fill='%2394A3B8' opacity='0.4'/%3E%3Ccircle cx='75' cy='35' r='1.5' fill='%2394A3B8' opacity='0.4'/%3E%3C/svg%3E");background-size:120px 120px;opacity:.6;pointer-events:none}.scene-hook .accent-line{width:60px;height:4px;background:var(--color-brand-primary);border-radius:2px;position:relative;z-index:1}.scene-hook p{font-size:16px;color:var(--color-text-secondary);max-width:560px;line-height:1.6;position:relative;z-index:1}.scene-flow{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 40px 20px;opacity:0}.booking-card-container{position:relative;top:20px;left:60px;width:220px;z-index:10;animation:cardAppear var(--total-duration) ease-in-out infinite}@keyframes cardAppear{0%,20%{transform:translate(calc(-100% - 100px));opacity:0}26%{transform:translate(calc(-100% - 100px))}27%,30%{opacity:1;transform:translate(calc(-100% + 24px))}31%,33%{opacity:1;transform:translate(calc(-100% + 154px))}34%,37%{opacity:1;transform:translate(calc(-100% + 284px))}38%,40%,to{opacity:1;transform:translate(calc(-100% + 424px))}}.booking-card{background:var(--color-background);border:1px solid var(--color-border-divider);border-radius:var(--border-radius-base);padding:14px 16px;box-shadow:0 3px 5px -1px rgba(var(--elevation-color),.2),0 6px 10px rgba(var(--elevation-color),.14),0 1px 18px rgba(var(--elevation-color),.12)}.booking-card .booking-id{font-size:11px;font-weight:700;color:var(--color-text-primary);margin-bottom:6px}.booking-card .booking-guest{font-size:12px;color:var(--color-text-primary);margin-bottom:3px}.booking-card .booking-detail{font-size:11px;color:var(--color-text-secondary);margin-bottom:4px}.booking-card .booking-revenue{font-size:11px;font-weight:600;color:var(--color-brand-primary);margin-bottom:4px}.booking-card .booking-status{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;display:inline-block;animation:statusChange var(--total-duration) ease-in-out infinite}@keyframes statusChange{0%,26%{background:var(--color-blue2);color:var(--color-blue)}27%,30%{background:var(--color-green2);color:var(--color-green)}31%,33%{background:var(--color-orange2);color:var(--color-orange)}34%,37%{background:var(--color-gray2);color:var(--color-gray)}40%,98%,to{background:var(--color-green2);color:var(--color-green)}}.comparison-container{position:relative;top:0;left:0;display:flex;align-items:center;gap:16px;opacity:0;animation:comparisonAppear var(--total-duration) ease-in-out infinite}.comparison-card{background:var(--color-white);border:1px solid var(--color-border-divider);border-radius:8px;padding:12px 16px;width:160px;box-shadow:0 3px 5px -1px rgba(var(--elevation-color),.2),0 6px 10px rgba(var(--elevation-color),.14),0 1px 18px rgba(var(--elevation-color),.12)}.comparison-card.before{border-left:3px solid var(--color-border-divider)}.comparison-card.after{border-left:3px solid var(--color-green)}.comparison-card .comp-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin-bottom:6px}.comparison-card .comp-value{font-size:13px;font-weight:600;color:var(--color-text-primary)}.comparison-card .comp-value.changed{color:var(--color-green)}.comparison-arrow{font-size:20px;color:var(--color-brand-primary);font-weight:700}@keyframes comparisonAppear{0%,32%{opacity:0;transform:translateY(0)}34%,36%{opacity:1;transform:translateY(60px)}98%,to{opacity:0;transform:translateY(60px)}}.scene-reconcile{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 60px;opacity:0}.scene-reconcile .scene-icon.icon-1{animation:iconReconcile1 var(--total-duration) ease-in-out infinite}.scene-reconcile .scene-icon.icon-2{animation:iconReconcile2 var(--total-duration) ease-in-out infinite}.scene-reconcile .scene-icon.icon-3{animation:iconReconcile3 var(--total-duration) ease-in-out infinite}@keyframes iconReconcile1{0%,40%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}42%,44%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white);transform:scale(1.1)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}}@keyframes iconReconcile2{0%,46%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}48%,50%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white);transform:scale(1.1)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}}@keyframes iconReconcile3{0%,50%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}52%,54%{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-white);transform:scale(1.1)}98%,to{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}}.scene-reconcile .scene-connector:nth-of-type(3):after{animation:connectorReconcile1 var(--total-duration) ease-in-out infinite}.scene-reconcile .scene-connector:nth-of-type(6):after{animation:connectorReconcile2 var(--total-duration) ease-in-out infinite}@keyframes connectorReconcile1{0%,43%{left:-100%}45%,98%{left:0}to{left:100%}}@keyframes connectorReconcile2{0%,48%{left:-100%}50%,98%{left:0}to{left:100%}}.scene-check{width:24px;height:24px;color:var(--color-green);opacity:0;display:flex;justify-content:center;align-items:center}.scene-check svg{width:20px;height:20px}.scene-check:nth-of-type(2){animation:reconcileCheck1 var(--total-duration) ease-in-out infinite}.scene-check:nth-of-type(5){animation:reconcileCheck2 var(--total-duration) ease-in-out infinite}@keyframes reconcileCheck1{0%,44%{opacity:0;transform:scale(0)}46%,48%{opacity:1;transform:scale(1.1)}49%,to{opacity:1;transform:scale(1)}}@keyframes reconcileCheck2{0%,49%{opacity:0;transform:scale(0)}51%,53%{opacity:1;transform:scale(1.1)}54%,to{opacity:1;transform:scale(1)}}.scene-dashboard{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 50px;opacity:0}.dash-header{font-family:var(--font-family-headings);font-size:16px;font-weight:600;color:var(--color-text-secondary);letter-spacing:2px;margin-bottom:20px}.dash-mockup{width:100%;background:var(--color-white);border-radius:10px;border:1px solid var(--color-border-divider);box-shadow:0 3px 5px -1px rgba(var(--elevation-color),.2),0 6px 10px rgba(var(--elevation-color),.14),0 1px 18px rgba(var(--elevation-color),.12);overflow:hidden}.dash-mockup-header{background:var(--color-text-primary);padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.dash-mockup-header span{font-size:12px;font-weight:600;color:#ffffffb3}.dash-mockup-header .dash-title{font-size:13px;font-weight:700;color:var(--color-white)}.dash-row-head{display:grid;grid-template-columns:repeat(9,1fr);align-items:center;padding:10px 16px;border-bottom:1px solid var(--color-border-divider);font-size:9px;font-weight:var(--font-weight-bold);text-transform:uppercase}.dash-row{display:grid;grid-template-columns:repeat(9,1fr);align-items:center;padding:10px 16px;border-bottom:1px solid var(--color-border-divider);opacity:0}.dash-row:nth-child(3){animation:rowAppear1 var(--total-duration) ease-in-out infinite}.dash-row:nth-child(4){animation:rowAppear2 var(--total-duration) ease-in-out infinite}.dash-row:nth-child(5){animation:rowAppear3 var(--total-duration) ease-in-out infinite}.dash-row:nth-child(6){animation:rowAppear4 var(--total-duration) ease-in-out infinite}.dash-row:nth-child(7){animation:rowAppear5 var(--total-duration) ease-in-out infinite}@keyframes rowAppear1{0%,62%{opacity:0;transform:translate(-8px)}65%,79%{opacity:1;transform:translate(0)}80%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear2{0%,64%{opacity:0;transform:translate(-8px)}67%,79%{opacity:1;transform:translate(0)}80%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear3{0%,66%{opacity:0;transform:translate(-8px)}69%,79%{opacity:1;transform:translate(0)}80%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear4{0%,68%{opacity:0;transform:translate(-8px)}71%,79%{opacity:1;transform:translate(0)}80%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear5{0%,70%{opacity:0;transform:translate(-8px)}73%,79%{opacity:1;transform:translate(0)}80%,to{opacity:0;transform:translate(0)}}.dash-row:last-child{border-bottom:none}.dash-cell{font-size:11px;text-align:left}.dash-cell.commission{text-align:right;font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.dash-cell.fx{text-align:right}.status-badge{font-size:9px;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;display:inline-block;line-height:2}.status-estimated{background:var(--color-orange2);color:var(--color-orange)}.status-inreview,.status-open{background:var(--color-blue2);color:var(--color-blue)}.status-collected{background:var(--color-orange2);color:var(--color-orange)}.status-paid{background:var(--color-green2);color:var(--color-green)}.status-confirmed{background:var(--color-blue2);color:var(--color-blue)}.status-checkedout{background:var(--color-gray2);color:var(--color-gray)}.scene-scale{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px;background:linear-gradient(135deg,var(--color-white) 0%,var(--color-brand-primary2) 100%);opacity:0}.scale-number{font-size:64px;font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1;margin-bottom:8px;opacity:0;animation:countUp var(--total-duration) ease-in-out infinite}@keyframes countUp{0%,81%{opacity:0;transform:scale(.88)}84%,98%{opacity:1;transform:scale(1)}to{opacity:0}}.scale-label,.scale-sublabel{font-size:16px;color:var(--color-text-secondary);margin-bottom:32px;opacity:0;animation:scaleLabel var(--total-duration) ease-in-out infinite}@keyframes scaleLabel{0%,83%{opacity:0;transform:translateY(8px)}86%,98%{opacity:1;transform:translateY(0)}to{opacity:0}}.scale-sublabel{animation:scaleSubLabel var(--total-duration) ease-in-out infinite}@keyframes scaleSubLabel{0%,84%{opacity:0;transform:translateY(8px)}87%,98%{opacity:1;transform:translateY(0)}to{opacity:0}}a.scale-cta{background:var(--color-brand-primary);color:var(--color-white);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:14px 28px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;opacity:0;animation:ctaPulse var(--total-duration) ease-in-out infinite}@keyframes ctaPulse{0%,85%{opacity:0;transform:scale(.96)}86%,87%{opacity:1;transform:scale(1.04)}88%,98%{opacity:1;transform:scale(1)}to{opacity:0}}.scale-img{opacity:0;margin-top:var(--spacing-16);animation:scaleImg var(--total-duration) ease-in-out infinite}@keyframes scaleImg{0%,86%{opacity:0;transform:translateY(8px)}87%,98%{opacity:1;transform:translateY(0)}to{opacity:0}}.progress-dots{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:20}.dot{height:8px;border-radius:50%;background:var(--color-border-divider)}.dot:nth-child(1){animation:dot1 var(--total-duration) ease-in-out infinite}.dot:nth-child(2){animation:dot2 var(--total-duration) ease-in-out infinite}.dot:nth-child(3){animation:dot3 var(--total-duration) ease-in-out infinite}.dot:nth-child(4){animation:dot4 var(--total-duration) ease-in-out infinite}.dot:nth-child(5){animation:dot5 var(--total-duration) ease-in-out infinite}@keyframes dot1{0%,18%{border-radius:500px;width:16px;background:var(--color-brand-primary)}20%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot2{0%,19%{width:8px;background:var(--color-border-divider)}21%,38%{border-radius:500px;width:16px;background:var(--color-brand-primary)}40%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot3{0%,39%{width:8px;background:var(--color-border-divider)}41%,58%{border-radius:500px;width:16px;background:var(--color-brand-primary)}60%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot4{0%,59%{width:8px;background:var(--color-border-divider)}61%,78%{border-radius:500px;width:16px;background:var(--color-brand-primary)}80%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot5{0%,79%{width:8px;background:var(--color-border-divider)}81%,97%{border-radius:500px;width:16px;background:var(--color-brand-primary)}99%,to{width:8px;background:var(--color-border-divider)}}
