/* Motion supports the story. Text, prices and primary actions stay in normal flow. */
.reveal-ready [data-reveal]{transform:translateY(12px);transition-duration:.48s;transition-delay:var(--reveal-delay,0ms)}
.reveal-ready [data-reveal]:focus-within{opacity:1;transform:none;transition:none}
.pricing-grid>.price-card:nth-child(2){--reveal-delay:70ms}
.pricing-grid>.price-card:nth-child(3){--reveal-delay:140ms}
.extra-grid>.extra-card:nth-child(2){--reveal-delay:90ms}
.price-card,.extra-card{transition:border-color .2s,box-shadow .2s}
@media(hover:hover){
 .price-card:hover,.extra-card:hover{border-color:#78d69a;box-shadow:0 18px 34px -29px #25252566}
 .button>span:last-child,.text-link>span:last-child{transition:translate .2s ease}
 .button:hover>span:last-child{translate:2px -2px}
 .text-link:hover>span:last-child{translate:2px -1px}
}
.price-card:focus-within,.extra-card:focus-within{border-color:#3ec46f}

/* A CSS fit remains available when JavaScript is disabled. JS keeps the exact fit. */
.hero-overview,.booking-scene{container-type:inline-size}
@supports(transform:scale(tan(atan2(100cqw,1000px)))){
 .overview-stage{transform:scale(var(--overview-fit,tan(atan2(100cqw,1000px))))}
 .booking-stage{transform:scale(var(--fit,tan(atan2(100cqw,1200px))))}
}

/* Finite arrivals replace independent perpetual bobs. Rotation and scale are retained. */
.hero-overview .overview-element,.conversation-art .depth-motion,.map-art .depth-motion,
.booking-motion .depth-motion{animation:none;will-change:auto;translate:0 0}
.hero-overview .overview-element{--card-angle:0deg;--card-depth:.6;transform:translateY(calc(var(--scene-y,0px) * var(--card-depth))) rotate(var(--card-angle))}
.hero-overview .overview-club-creteil{--card-angle:-6deg;--card-depth:.45}
.hero-overview .overview-club-casa{--card-angle:4deg;--card-depth:.6}
.hero-overview .overview-club-map{--card-angle:4deg;--card-depth:-.3}
.hero-overview .overview-message-invitation{--card-angle:-3deg;--card-depth:.85}
.hero-overview .overview-message-reply{--card-angle:2deg;--card-depth:.95}
.hero-overview .overview-tournament{--card-angle:-4deg;--card-depth:.75}
.hero-overview .overview-booking{--card-angle:3deg;--card-depth:.85}
.hero-overview .overview-player{--card-depth:.55}
.hero-overview .overview-player-a{--card-angle:4deg}
.hero-overview .overview-player-b{--card-angle:-6deg}
.hero-overview .overview-player-c{--card-angle:-5deg}
.hero-overview .overview-player-d{--card-angle:6deg}
.conversation-art .depth-layer{transform:translateY(calc(var(--scene-y,0px) * .55))}
.conversation-art .depth-layer:nth-child(-n+2){transform:translateY(calc(var(--scene-y,0px) * .3))}
.map-art .depth-layer:first-child{transform:translateY(calc(var(--scene-y,0px) * -.35))}
.map-art .depth-layer:last-child{transform:translateY(calc(var(--scene-y,0px) * .85))}
.website-preview .mock-site{transform:translateY(calc(var(--scene-y,0px) * .55))}
.app-preview .phone-frame{transform:translateY(calc(var(--scene-y,0px) * .8)) rotate(6deg)}
.final-cta .court-one{transform:translateY(var(--scene-y,0px)) rotate(20deg)}
.final-cta .court-two{transform:translateY(calc(var(--scene-y,0px) * -1)) rotate(20deg)}

/* Decorative story parts can wait for entry; important page content never waits. */
html.motion-ready:not(.motion-paused):not(.document-hidden) [data-story]:not(.story-seen) [data-story-part]{opacity:0}
.booking-motion .slot.booking-selected{background:linear-gradient(145deg,#eefbf3,#e0f7e9);border-color:#7cd79d}
.booking-motion .slot.booking-selected strong{color:#1a6636}
.booking-steps>span{position:relative}
.booking-steps>span:after{content:"";position:absolute;bottom:-5px;left:0;right:0;height:1px;background:#3cc36d;transform:scaleX(0);transform-origin:left}
.booking-steps.booking-complete>span:after{transform:scaleX(1);transition:transform .4s ease}
.booking-steps.booking-complete>span:nth-of-type(2):after{transition-delay:90ms}
.booking-steps.booking-complete>span:nth-of-type(3):after{transition-delay:180ms}
.start-step{position:relative}
.step-trace{position:absolute;left:0;right:0;top:-1px;height:1px;background:#bfc8c1;transform-origin:left}
.flow-signal{fill:none;stroke:#207f43;stroke-width:2.2;stroke-linecap:butt;pointer-events:none;vector-effect:non-scaling-stroke}
.flow-signal.flow-software-link{opacity:var(--flow-software-opacity)}
.motion-ready .faq-list details[open]>div{animation:faq-answer-in .22s ease both}
@keyframes faq-answer-in{from{opacity:.3;translate:0 5px}to{opacity:1;translate:0 0}}

.motion-paused [data-parallax-scene],.document-hidden [data-parallax-scene]{--scene-y:0px!important}
.document-hidden [data-reveal]{transition:none}
.motion-paused .faq-list details[open]>div,.document-hidden .faq-list details[open]>div{animation:none}
.motion-paused .booking-steps>span:after{transition:none}
.motion-paused [data-reveal]{opacity:1;transform:none;transition:none}
.motion-paused .button>span:last-child,.motion-paused .text-link>span:last-child{translate:0 0;transition:none}
@media(max-width:700px){
 .reveal-ready [data-reveal]{transform:translateY(8px);transition-duration:.4s}
 .pricing-grid>.price-card,.extra-grid>.extra-card{--reveal-delay:0ms}
}
@media(prefers-reduced-motion:reduce){
 [data-parallax-scene]{--scene-y:0px!important}
 .reveal-ready [data-reveal]{opacity:1;transform:none;transition:none}
 .motion-ready .faq-list details[open]>div{animation:none}
 .button>span:last-child,.text-link>span:last-child{translate:0 0!important}
}


/* Slow buoyancy shares the existing rotation/parallax transform, never the entry translate. */
.floating-scene{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.floating-scene:focus-visible{outline:2px solid #29a456;outline-offset:7px;border-radius:24px}
.buoyancy-scene .float-item{animation:scene-buoyancy var(--bob-duration,8s) ease-in-out var(--bob-delay,-2s) infinite;will-change:auto}
.hero-overview .float-item{--bob-depth:var(--card-depth);--bob-amplitude:9px;--bob-duration:8.5s;--bob-delay:-2s}
.hero-overview .overview-club-map{--bob-amplitude:6px;--bob-duration:11s;--bob-delay:-4s}
.hero-overview .overview-club-casa{--bob-duration:9.5s;--bob-delay:-4s}
.hero-overview .overview-message-invitation{--bob-amplitude:7px;--bob-duration:8s;--bob-delay:-3s}
.hero-overview .overview-message-reply{--bob-amplitude:7px;--bob-duration:8.8s;--bob-delay:-1s}
.hero-overview .overview-player{--bob-amplitude:8px;--bob-duration:8s;--bob-delay:-2.5s}
.hero-overview .overview-tournament{--bob-duration:9s;--bob-delay:-5s}
.hero-overview .overview-booking{--bob-amplitude:7px;--bob-duration:10s;--bob-delay:-3s}
.conversation-art .depth-layer{--bob-depth:.55;--bob-amplitude:6px;--bob-duration:8.3s;--bob-delay:-1.5s}
.conversation-art .depth-layer:nth-child(-n+2){--bob-depth:.3;--bob-amplitude:4px;--bob-duration:9.4s;--bob-delay:-2s}
.conversation-art .depth-layer:nth-child(4){--bob-amplitude:7px;--bob-duration:9.1s;--bob-delay:-3.2s}
.conversation-art .depth-layer:nth-child(5){--bob-amplitude:5px;--bob-duration:8.8s;--bob-delay:-4.2s}
.map-art .depth-layer:first-child{--bob-depth:-.35;--bob-amplitude:3px;--bob-duration:10s;--bob-delay:-2s}
.map-art .depth-layer:last-child{--bob-depth:.85;--bob-amplitude:7px;--bob-duration:8s;--bob-delay:-4s}
.booking-motion .club-identity{--bob-amplitude:6px;--bob-duration:9s;--bob-delay:-2s}
.booking-motion .plane{--bob-amplitude:9px;--bob-duration:8s;--bob-delay:-3s}
.booking-motion .apple-pay-mark{--bob-amplitude:5px;--bob-duration:10s;--bob-delay:-1s}
.booking-motion .confirmation{--bob-amplitude:8px;--bob-duration:8.6s;--bob-delay:-4s}
@keyframes scene-buoyancy{
 0%,100%{transform:translateY(calc(var(--scene-y,0px) * var(--bob-depth,0) + var(--bob-amplitude,6px))) rotate(var(--card-angle,0deg))}
 50%{transform:translateY(calc(var(--scene-y,0px) * var(--bob-depth,0) - var(--bob-amplitude,6px))) rotate(var(--card-angle,0deg))}
}
.buoyancy-scene:not(.is-in-view) .float-item,
.motion-paused .buoyancy-scene .float-item,
.document-hidden .buoyancy-scene .float-item{animation-play-state:paused}
@media(max-width:700px){
 .buoyancy-scene .float-item{animation-name:scene-buoyancy-mobile}
 @keyframes scene-buoyancy-mobile{
  0%,100%{transform:translateY(calc(var(--scene-y,0px) * var(--bob-depth,0) + var(--bob-amplitude,6px) * .65)) rotate(var(--card-angle,0deg))}
  50%{transform:translateY(calc(var(--scene-y,0px) * var(--bob-depth,0) - var(--bob-amplitude,6px) * .65)) rotate(var(--card-angle,0deg))}
 }
}
@media(prefers-reduced-motion:reduce){.buoyancy-scene .float-item{animation:none!important}}