/* Road Tennis: Barbados. Page-only styles; loads after theme.css. Film colours: blue, gold, clay. Motion is transform/opacity only. */
body.rt{--acc:#FFC94A;--accf:#0B0A09;--rt-blue:#1A4FD8;--rt-clay:#A8402A;--ink:#F6EBD0;--black:#0B0A09}
.rt .nav{position:fixed}
.rt .tag{display:flex;gap:10px;align-items:center;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;color:var(--acc)}
.rt .tag i{width:34px;height:12px;border-radius:99px;background:currentColor;opacity:.7}
.rt .sub{max-width:56ch;margin-top:16px;font-size:clamp(17px,1.5vw,20px);color:#F6EBD0}
.rt .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.rt h2{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.sec{padding:clamp(64px,9vw,120px) 0;position:relative}

/* ---------- opener ---------- */
.hx{position:relative;min-height:min(94svh,860px);display:flex;align-items:center;padding:calc(72px + 28px) 0 clamp(56px,8vw,96px);overflow:hidden;isolation:isolate;background:#0B0A09}
.hx-bg{position:absolute;inset:0;z-index:-2}
.hx-bg i{position:absolute;inset:0;background:var(--bg) center/cover no-repeat;opacity:0;animation:hxfade 32s infinite}
.hx-bg i:nth-child(2){animation-delay:8s}.hx-bg i:nth-child(3){animation-delay:16s}.hx-bg i:nth-child(4){animation-delay:24s}
@keyframes hxfade{0%{opacity:0;transform:scale(1) translate3d(0,0,0)}4%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1.16) translate3d(-2%,-1%,0)}100%{opacity:0;transform:scale(1.16)}}
.hx-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,.6) 50%,rgba(11,10,9,.25) 100%),linear-gradient(0deg,rgba(11,10,9,.85) 0%,transparent 40%)}
.hx-in{position:relative;width:100%}
.hx-kick{display:inline-flex;align-items:center;gap:10px;font:700 14px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.hx-kick .dot{width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.hx-title{font-size:clamp(64px,12.5vw,190px);line-height:.88;max-width:11ch;margin:0}
.hx-title .w{display:inline-block;opacity:0;animation:slam .7s cubic-bezier(.2,1.4,.4,1) forwards}
.hx-title .w1{animation-delay:.1s}.hx-title .w2{animation-delay:.3s}.hx-title .w3{animation-delay:.5s}
.hx-title .out{color:transparent;-webkit-text-stroke:3px var(--acc);text-stroke:3px var(--acc)}
@keyframes slam{0%{opacity:0;transform:translate3d(0,-60px,0) scale(1.3) rotate(-3deg)}100%{opacity:1;transform:none}}
.hx-lead{max-width:34ch;margin-top:22px;font-size:clamp(19px,2vw,26px);color:#F6EBD0;opacity:0;animation:rise .7s .9s forwards}
.hx .actions{opacity:0;animation:rise .7s 1.1s forwards}
@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.hx-badge{position:absolute;right:var(--gutter);top:2%;width:clamp(110px,15vw,210px);transform:rotate(10deg);filter:drop-shadow(6px 6px 0 rgba(0,0,0,.45));animation:badge 4s ease-in-out infinite}
.hx-badge .spin{transform-origin:100px 100px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes badge{50%{transform:rotate(4deg) scale(1.05)}}
/* a road tennis ball bouncing along the bottom of the opener */
.ball{position:absolute;left:-40px;bottom:26px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9784f,#A8402A 60%,#6f2a1a);animation:roll 7s linear infinite;box-shadow:0 0 0 2px rgba(246,235,208,.25)}
.ball::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:6px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(2px)}
@keyframes roll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(calc(100vw + 80px),0,0)}}
.ball{animation:roll 7s linear infinite,hop .7s cubic-bezier(.3,0,.7,1) infinite alternate}
@keyframes hop{from{margin-bottom:0}to{margin-bottom:70px}}

.strip{background:var(--acc);color:#0B0A09;border-block:2px solid #0B0A09;overflow:hidden;white-space:nowrap;padding:12px 0;font:400 24px var(--poster);text-transform:uppercase;letter-spacing:.04em}
.strip-run{display:inline-block;animation:marq 28s linear infinite}
.strip-run span{padding-right:34px}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}

/* ---------- sections with film frames behind ---------- */
.bgsec{isolation:isolate;overflow:hidden}
.bgimg{position:absolute;inset:-12% 0;z-index:-2;background:var(--bg) center/cover no-repeat;will-change:transform}
.scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,10,9,.84),rgba(11,10,9,.66) 45%,rgba(11,10,9,.86))}
.scrim.heavy{background:linear-gradient(180deg,rgba(11,10,9,.9),rgba(11,10,9,.78) 45%,rgba(11,10,9,.92))}

/* game */
.how{list-style:none;counter-reset:s;margin-top:24px;display:grid;gap:14px;max-width:52ch}
.how li{counter-increment:s;padding-left:54px;position:relative;font-size:18px}
.how li::before{content:counter(s);position:absolute;left:0;top:-3px;width:40px;height:40px;border-radius:50%;background:var(--acc);color:#0B0A09;display:grid;place-items:center;font:400 22px var(--poster)}
.how b{color:#fff}
.screen{min-width:0}
.gamebox{position:relative;aspect-ratio:16/10;border:4px solid var(--acc);border-radius:10px;overflow:hidden;background:#000;box-shadow:10px 10px 0 var(--rt-clay);transform:rotate(1.2deg);transition:transform .25s}
.gamebox:hover{transform:rotate(0) scale(1.01)}
.court{position:absolute;inset:0;width:100%;height:100%;display:block}
.bx{animation:bxm 2.4s linear infinite alternate}
.by{animation:bym .6s cubic-bezier(.3,0,.7,1) infinite alternate}
@keyframes bxm{from{transform:translate(30px,50px)}to{transform:translate(130px,50px)}}
@keyframes bym{from{transform:translateY(8px)}to{transform:translateY(-14px)}}
.gamebox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.gamecta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(11,10,9,.32);text-align:center;padding:20px}
.btn.big{font-size:20px;padding:18px 34px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.note{max-width:36ch;font-size:15px;color:#F6EBD0;background:rgba(11,10,9,.82);padding:10px 14px;border-radius:8px}

/* countdown */
.count{display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap;margin-top:34px}
.count div{min-width:clamp(78px,14vw,150px);border:3px solid var(--acc);border-radius:8px;background:rgba(11,10,9,.7);padding:14px 12px 10px;text-align:center}
.count b{display:block;font:400 clamp(44px,8vw,104px)/1 var(--poster);color:var(--acc);font-variant-numeric:tabular-nums}
.count span{display:block;margin-top:4px;font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#F6EBD0}
.notify{margin-top:34px;max-width:560px;display:grid;gap:10px}
.notify label{font:600 15px var(--body)}
.notify-row{display:flex;gap:10px;flex-wrap:wrap}
.notify input{flex:1 1 220px;min-width:0;padding:13px 16px;border-radius:999px;border:2px solid #F6EBD0;background:rgba(11,10,9,.8);color:#F6EBD0;font:500 16px var(--body)}
.notify .btn{background:var(--acc);color:#0B0A09;border-color:var(--acc)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* clips */
.clips{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,28px);margin:32px 0 8px}
.clips li{display:grid;gap:10px;min-width:0;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.clips li:nth-child(odd){transform:rotate(-1.2deg)}.clips li:nth-child(even){transform:rotate(1.2deg)}
.clips li:hover{transform:rotate(0) scale(1.03)}
.clips video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:3px solid #F6EBD0;border-radius:6px;background:#000;box-shadow:6px 6px 0 rgba(0,0,0,.55)}
.clips span{font:700 14px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}

/* history timeline */
.time{list-style:none;margin-top:34px;display:grid;gap:0;max-width:760px;border-left:4px solid var(--acc);padding-left:0}
.time li{position:relative;padding:0 0 30px 34px}
.time li::before{content:"";position:absolute;left:-12px;top:6px;width:20px;height:20px;border-radius:50%;background:#0B0A09;border:4px solid var(--acc)}
.time b{display:block;font:400 clamp(30px,4vw,48px)/1 var(--poster);color:var(--acc);text-transform:uppercase}
.time p{margin-top:8px;font-size:18px;color:#F6EBD0;max-width:56ch}
.time .hot::before{background:var(--acc)}
.time .hot b{background:var(--acc);color:#0B0A09;display:inline-block;padding:0 .2em;transform:rotate(-2deg)}

/* partner */
.partner{background:#15110E}
.gets{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-top:26px;max-width:720px}
.gets li{padding-left:30px;position:relative;font-size:18px}
.gets li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--acc)}

/* the site's scroll-reveal adds an 8px blur; keep the fade, drop the blur so frames stay sharp */
.js .rt .rv{filter:none}

@media (max-width:860px){
  .two{grid-template-columns:minmax(0,1fr)}
  .gets{grid-template-columns:minmax(0,1fr)}
  .clips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-badge{position:relative;right:auto;top:auto;margin-top:26px;width:130px}
  .gamebox{box-shadow:6px 6px 0 var(--rt-clay)}
  .hx-title .out{-webkit-text-stroke-width:2px}
}
@media (max-width:520px){.clips{grid-template-columns:minmax(0,1fr)}.count div{flex:1 1 72px;min-width:0}}
@media (prefers-reduced-motion:reduce){
  .hx-bg i{animation:none}.hx-bg i:first-child{opacity:1}
  .hx-title .w,.hx-lead,.hx .actions{animation:none;opacity:1}
  .hx-badge,.hx-badge .spin,.ball,.strip-run,.bx,.by,.btn.big,.hx-kick .dot{animation:none}
  .ball{display:none}.clips li,.gamebox{transform:none}
}
html,body{overflow-x:clip}
.gamebox video.court{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.sub.small{font-size:.95rem;opacity:.8}

/* trailer + fullscreen */
.trailer{position:relative;margin-top:30px;max-width:880px;aspect-ratio:16/9;border:4px solid var(--acc);border-radius:10px;overflow:hidden;background:#000;box-shadow:10px 10px 0 var(--rt-clay)}
.trailer-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.trailer-btn img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .2s}
.trailer-btn:hover img{opacity:1}
.trailer-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--acc)}
.trailer-play::after{content:"";position:absolute;left:34px;top:25px;border-left:26px solid #0B0A09;border-top:17px solid transparent;border-bottom:17px solid transparent}
.trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gamebox .fs{position:absolute;right:10px;top:10px;z-index:2;padding:8px 14px;border:2px solid var(--acc);border-radius:99px;background:rgba(11,10,9,.8);color:var(--acc);font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
@media (max-width:700px){.trailer{box-shadow:6px 6px 0 var(--rt-clay)}.trailer-play{width:64px;height:64px;margin:-32px 0 0 -32px}.trailer-play::after{left:26px;top:19px;border-left:20px solid #0B0A09;border-top:13px solid transparent;border-bottom:13px solid transparent}}