/* Three photographs share a frame and one booking action. All copy is visible without JS. */
#tables{--pad:72px}
#tables .head{max-width:none;margin-bottom:32px}
#tables-h span{display:inline-block}
.experience-scenes{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:var(--midnight)}
.experience-scenes::after{content:"";position:absolute;inset:10px;z-index:3;border:1px solid #c9a96e73;pointer-events:none}
.experience-scene{--scene-light:#d6b77c;position:relative;isolation:isolate;display:flex;align-items:flex-end;min-width:0;min-height:440px;overflow:hidden;background:var(--navy)}
.experience-scene+.experience-scene{border-left:1px solid #c9a96e59}
.experience-scene picture{display:block;position:absolute;inset:0;z-index:-3}
.experience-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.experience-scene::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#020a1e05 18%,#020a1e20 40%,#020a1ecc 75%,#020a1efa 100%);pointer-events:none}
.experience-scene::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 105%,var(--scene-light),transparent 62%);opacity:.16;pointer-events:none}
.experience-pool img{object-position:64% center}
.experience-race{--scene-light:#4bc0cd}
.experience-race img{object-position:55% center}
.experience-night{--scene-light:#b768d5}
.experience-night img{object-position:60% bottom}
.experience-copy{padding:32px 30px 42px;width:100%;color:var(--cream)}
.experience-copy h3{font-size:38px;line-height:1.1;letter-spacing:-.015em;margin:0 0 10px}
.experience-copy p{font-size:17px;line-height:1.45;color:var(--cream)}
.experience-connection{position:absolute;z-index:4;bottom:0;left:0;right:0;height:2px;overflow:hidden;background:linear-gradient(90deg,#d6b77c99,#4bc0cd99,#b768d599);pointer-events:none}
.experience-connection::after{content:"";position:absolute;inset:0 auto 0 0;width:18%;background:linear-gradient(90deg,transparent,#fbf8f2,transparent);transform:translateX(-110%);box-shadow:0 0 14px 2px #4bc0cd}
.experience-booking{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:32px}
.experience-booking .btn{min-width:230px}
.experience-booking p{font-size:16px;line-height:1.5;color:var(--cream-2)}
@media(prefers-reduced-motion:no-preference){
 .experience-scene.is-in-view::after{animation:experience-light 5s ease-in-out infinite alternate}
 .experience-race.is-in-view::after{animation-delay:-1.6s}
 .experience-night.is-in-view::after{animation-delay:-3.2s}
 .experience-scenes.is-in-view .experience-connection::after{animation:experience-relay 8s cubic-bezier(.25,.1,.3,1) infinite}
 .experience-scene img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.experience-scene:hover img{transform:scale(1.035)}}
@keyframes experience-light{from{opacity:.10}to{opacity:.23}}
@keyframes experience-relay{0%,10%{transform:translateX(-110%)}75%,100%{transform:translateX(660%)}}
.page-hidden .experience-scene::after,.page-hidden .experience-connection::after{animation-play-state:paused!important}
.motion-paused .experience-scene img{transform:none!important}
@media(min-width:1024px){#tables{--pad:88px}}
@media(min-width:900px) and (max-width:1100px){.experience-copy{padding-inline:22px}.experience-copy h3{font-size:31px}.experience-copy p{font-size:16px}}
@media(max-width:899px){
 .experience-scenes{grid-template-columns:minmax(0,1fr)}
 .experience-scene{min-height:250px}
 .experience-scene+.experience-scene{border-left:0;border-top:1px solid #c9a96e59}
 .experience-copy{padding:50px 28px 28px}
 .experience-copy h3{font-size:34px;margin-bottom:7px}
 .experience-copy p{font-size:16px}
 .experience-pool img{object-position:center 56%}
 .experience-race img{object-position:center 30%}
 .experience-night img{object-position:60% bottom}
 .experience-connection{top:0;right:auto;bottom:0;width:2px;height:auto;background:linear-gradient(#d6b77c99,#4bc0cd99,#b768d599)}
 .experience-connection::after{inset:0 0 auto;width:auto;height:18%;background:linear-gradient(transparent,#fbf8f2,transparent);transform:translateY(-110%)}
 @keyframes experience-relay{0%,10%{transform:translateY(-110%)}75%,100%{transform:translateY(660%)}}
}
@media(max-width:600px){
 #tables{--pad:60px}
 #tables .head{margin-bottom:28px}
 .experience-scene{min-height:230px}
 .experience-booking{flex-direction:column;gap:12px;margin-top:26px;text-align:center}
 .experience-booking .btn{width:100%}
 .experience-booking p{font-size:14px}
}
@media(max-width:359px){.experience-copy{padding-inline:23px}.experience-copy h3{font-size:31px}.experience-copy p{font-size:15px}}