:root{--total-duration: 60s}.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-rules,.scene-payout,.scene-dashboard,.scene-scale{opacity:0;animation:sceneAppearing var(--total-duration) ease-in-out infinite}.scene-hook{animation:scene1 var(--total-duration) ease-in-out infinite}.scene-flow{animation:scene2 var(--total-duration) ease-in-out infinite}.scene-rules{animation:scene3 var(--total-duration) ease-in-out infinite}.scene-payout{animation:scene4 var(--total-duration) ease-in-out infinite}.scene-dashboard{animation:scene5 var(--total-duration) ease-in-out infinite}.scene-scale{animation:scene6 var(--total-duration) ease-in-out infinite}@keyframes scene1{0%{opacity:0;transform:translateY(16px)}1.5%,15%{opacity:1;transform:translateY(0)}16.67%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene2{0%,16.67%{opacity:0;transform:translateY(16px)}18.17%,31.67%{opacity:1;transform:translateY(0)}33.33%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene3{0%,33.33%{opacity:0;transform:translateY(16px)}34.83%,48.33%{opacity:1;transform:translateY(0)}50%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene4{0%,50%{opacity:0;transform:translateY(16px)}51.5%,65%{opacity:1;transform:translateY(0)}66.67%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene5{0%,66.67%{opacity:0;transform:translateY(16px)}68.17%,81.67%{opacity:1;transform:translateY(0)}83.33%,to{opacity:0;transform:translateY(-16px)}}@keyframes scene6{0%,83.33%{opacity:0;transform:translateY(16px)}84.83%,97.5%{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%,17.33%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}18.33%,19.33%{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%,19.33%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}20.33%,21.33%{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%,21.33%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}22.33%,23.33%{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%,23.33%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}24.33%,25.33%{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%,25.33%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary)}26.33%,27.33%{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%,17%{left:-100%}19%,98%{left:0}to{left:100%}}@keyframes connector2{0%,19%{left:-100%}21%,98%{left:0}to{left:100%}}@keyframes connector3{0%,21%{left:-100%}23%,98%{left:0}to{left:100%}}@keyframes connector4{0%,23%{left:-100%}25%,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:0;left:0;width:220px;z-index:10;opacity:0;animation:cardAppear var(--total-duration) ease-in-out infinite}@keyframes cardAppear{0%,21.33%{opacity:0;transform:translateY(40px)}23%,98%{opacity:1;transform:translateY(20px)}to{opacity:0}}.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%,21.33%{background:var(--color-blue2);color:var(--color-blue)}25%,28%{background:var(--color-orange2);color:var(--color-orange)}28%,to{background:var(--color-green2);color:var(--color-green)}}.scene-rules{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}.rules-visual{display:flex;align-items:flex-start;gap:20px;width:100%;max-width:700px}.rule-card{flex:1;background:var(--color-white);border:1px solid var(--color-border-divider);border-radius:10px;padding:20px;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);opacity:0}.rule-card:nth-child(1){animation:ruleCardAppear1 var(--total-duration) ease-in-out infinite}.rule-card:nth-child(2){animation:ruleCardAppear2 var(--total-duration) ease-in-out infinite}.rule-card:nth-child(3){animation:ruleCardAppear3 var(--total-duration) ease-in-out infinite}@keyframes ruleCardAppear1{0%,35%{opacity:0;transform:translateY(16px)}36%,98%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}@keyframes ruleCardAppear2{0%,37%{opacity:0;transform:translateY(16px)}38%,98%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}@keyframes ruleCardAppear3{0%,39%{opacity:0;transform:translateY(16px)}40%,98%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}.rule-card .rule-icon{width:40px;height:40px;border-radius:8px;display:flex;justify-content:center;align-items:center;margin-bottom:12px;background:var(--color-white);border:2px solid var(--color-border-divider);color:var(--color-text-secondary)}.rule-card .rule-icon svg{width:20px;height:20px}.rule-card h3{font-size:14px;font-weight:700;color:var(--color-text-primary);margin-bottom:6px}.rule-card p{font-size:12px;color:var(--color-text-secondary);line-height:1.5}.scene-payout{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 60px 40px;opacity:0}.scene-payout .scene-icon.icon-1{animation:iconPayOut1 var(--total-duration) ease-in-out infinite}.scene-payout .scene-icon.icon-2{animation:iconPayOut2 var(--total-duration) ease-in-out infinite}.scene-payout .scene-icon.icon-3{animation:iconPayOut3 var(--total-duration) ease-in-out infinite}@keyframes iconPayOut1{0%,51.5%{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)}}@keyframes iconPayOut2{0%,53.5%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}54.5%,56.6%{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 iconPayOut3{0%,55.5%{background:var(--color-white);border-color:var(--color-border-divider);color:var(--color-text-secondary);transform:scale(1)}57.5%,59.5%{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-payout .scene-connector:nth-of-type(2):after{animation:connectorPayOut1 var(--total-duration) ease-in-out infinite}.scene-payout .scene-connector:nth-of-type(4):after{animation:connectorPayOut2 var(--total-duration) ease-in-out infinite}@keyframes connectorPayOut1{0%,52%{left:-100%}54%,98%{left:0}to{left:100%}}@keyframes connectorPayOut2{0%,54%{left:-100%}56%,98%{left:0}to{left:100%}}.speed-badge{position:absolute;bottom:-40px;left:0;background:var(--color-brand-secondary);color:var(--color-white);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:4px;white-space:nowrap;opacity:0;animation:speedBadge var(--total-duration) ease-in-out infinite}@keyframes speedBadge{0%,53.5%{opacity:0;transform:translateY(20px)}55.5%,98%{opacity:1;transform:translateY(0)}to{opacity:0}}.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(8,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(8,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%,67%{opacity:0;transform:translate(-8px)}68%,70%{opacity:1;transform:translate(0)}98%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear2{0%,69%{opacity:0;transform:translate(-8px)}70%,72%{opacity:1;transform:translate(0)}98%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear3{0%,71%{opacity:0;transform:translate(-8px)}72%,74%{opacity:1;transform:translate(0)}98%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear4{0%,73%{opacity:0;transform:translate(-8px)}74%,76%{opacity:1;transform:translate(0)}98%,to{opacity:0;transform:translate(0)}}@keyframes rowAppear5{0%,75%{opacity:0;transform:translate(-8px)}76%,78%{opacity:1;transform:translate(0)}98%,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.guest,.dash-cell.comm-status{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%,84%{opacity:0;transform:scale(.88)}85%,98%{opacity:1;transform:scale(1)}to{opacity:0}}.scale-label{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%,85%{opacity:0;transform:translateY(8px)}86%,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%,86%{opacity:0;transform:scale(.96)}87%,88%{opacity:1;transform:scale(1.04)}89%,98%{opacity:1;transform:scale(1)}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}.dot:nth-child(6){animation:dot6 var(--total-duration) ease-in-out infinite}@keyframes dot1{0%,15%{border-radius:500px;width:16px;background:var(--color-brand-primary)}16.67%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot2{0%,16.66%{width:8px;background:var(--color-border-divider)}18.17%,31.67%{border-radius:500px;width:16px;background:var(--color-brand-primary)}33.33%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot3{0%,33.32%{width:8px;background:var(--color-border-divider)}34.83%,48.33%{border-radius:500px;width:16px;background:var(--color-brand-primary)}50%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot4{0%,49.99%{width:8px;background:var(--color-border-divider)}51.5%,65%{border-radius:500px;width:16px;background:var(--color-brand-primary)}66.67%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot5{0%,66.66%{width:8px;background:var(--color-border-divider)}68.17%,81.67%{border-radius:500px;width:16px;background:var(--color-brand-primary)}83.33%,to{width:8px;background:var(--color-border-divider)}}@keyframes dot6{0%,83.32%{width:8px;background:var(--color-border-divider)}84.83%,97.5%{border-radius:500px;width:16px;background:var(--color-brand-primary)}99%,to{width:8px;background:var(--color-border-divider)}}
