html.do-padel-opening,html.do-padel-opening body{overflow:hidden}
html.do-padel-opening #doPlatformGateway,html.do-padel-opening #doPlatformGateway *,html.do-padel-opening #doPlatformGateway *::before,html.do-padel-opening #doPlatformGateway *::after{animation-play-state:paused!important}
/* The landing is fully covered by the opening, so it is not painted beneath it: its turning
   racket's layers would otherwise be held in memory alongside EVERY SHOT™'s own. */
html.do-padel-opening #doPlatformGateway,html.do-padel-opening.do-advert-arriving #doPlatformGateway,html.do-padel-opening.do-advert-handover #doPlatformGateway{visibility:hidden}
#doPadelOpening{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);background:#000;overflow:hidden;overscroll-behavior:contain;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
/* THE SUPPLIED PHOTOGRAPH (1284×2778), shown exactly as given: contained, never
   cropped or stretched. On a phone it takes the full width so she and the whole
   racket are visible; on a shorter or wider screen its height is capped so LET THE
   GAME BEGIN → always sits directly beneath it on the first screen. */
#doPadelOpening picture{display:block;flex:0 1 auto;min-height:0;width:100%;aspect-ratio:1284/2778;max-height:calc(100% - 132px - env(safe-area-inset-bottom,0px))}
@media (min-width:700px){#doPadelOpening picture{max-height:calc(100% - 168px - env(safe-area-inset-bottom,0px))}}
#doPadelOpening img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%;visibility:hidden;pointer-events:none;-webkit-user-drag:none}
#doPadelOpening.is-ready img{visibility:visible}
/* WELCOME TO THE WORLD OF PADEL — live text over the photograph's own black band
   (the old painted wording was cleared from the image). It tracks the image's
   contained box: --w/--h are the drawn image size, and its centre sits mid-band
   above her head (row 80 of 1890), lifted 28px on mobile for more air above her head. */
#doPadelOpening picture{position:relative}
#doPadelOpening .do-padel-opening-title{--w:min(100cqw,calc(100cqh * 1284 / 1890));--h:min(100cqh,calc(100cqw * 1890 / 1284));--lift:0px;position:absolute;left:0;right:0;top:max(1.4em,calc((100cqh - var(--h)) / 2 + var(--h) * 80 / 1890 - var(--lift)));transform:translateY(-50%);margin:0;padding:0 2%;box-sizing:border-box;color:#E9CCA1;-webkit-text-fill-color:#E9CCA1;font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;font-size:calc(var(--w) * 0.0394);font-weight:500;-webkit-text-stroke:.016em #E9CCA1;line-height:1.3;text-align:center;text-transform:uppercase;pointer-events:none}
/* Two lines: WELCOME TO THE in champagne gold, centred over WORLD OF PADEL in the
   platform emerald, set 20% larger. The first line keeps its old size and the
   second lands at the old second line's size (.84 x 1.2 = 1.008em), so the
   heading's height is unchanged. Both lines are 14 characters, narrower than the
   old 18-character second line, so nothing new can clip on a phone. The left
   padding equals the letter spacing so each line's trailing space is balanced. */
#doPadelOpening .do-padel-opening-title span{display:block;white-space:nowrap;letter-spacing:.17em;padding-left:.17em}
#doPadelOpening .do-padel-opening-title .l1{font-size:.84em}
#doPadelOpening .do-padel-opening-title .l2{font-size:1.008em;color:var(--brand-green);-webkit-text-fill-color:var(--brand-green);-webkit-text-stroke-color:var(--brand-green)}
/* Once the image is decoded (is-ready) it is held fully invisible for one second,
   then fades in from softly blurred to fully sharp over three seconds, easing into
   its normal brightness with no snap. The heading and EXPLORE start invisible too and
   fade in on the same trigger, delay, duration and easing — opacity only, so they
   stay crisp throughout. */
#doPadelOpening img,#doPadelOpening .do-padel-opening-title,#doPadelOpening .do-padel-opening-enter{opacity:0}
@keyframes doPadelOpeningFade{from{opacity:0}to{opacity:1}}
@keyframes doPadelOpeningIn{from{filter:blur(6px);opacity:0}to{filter:blur(0);opacity:1}}
#doPadelOpening.is-ready img{opacity:1;animation:doPadelOpeningIn 3s ease-in-out 1s both}
/* SHE FADES UP FROM THE BLACK — on every device. The fade itself is carried by the
   photograph's own <picture> as a plain opacity animation, which the browser runs off
   the main thread, so it stays smooth while the rest of the page is still loading
   underneath (iPhone Safari could otherwise drop the blur-and-fade frames and show
   her all at once). The image keeps only the soft blur-to-sharp. Under Reduce Motion
   (a common iPhone setting) the blur is left out but the fade from darkness stays:
   a dissolve is not motion. Same trigger, 1s delay, 3s and easing as before. */
@keyframes doPadelOpeningFocus{from{filter:blur(6px)}to{filter:blur(0)}}
#doPadelOpening picture:not(.do-padel-opening-badge){opacity:0}
#doPadelOpening.is-ready picture:not(.do-padel-opening-badge){opacity:1;animation:doPadelOpeningFade 3s ease-in-out 1s both}
#doPadelOpening.is-ready picture:not(.do-padel-opening-badge) img{animation:doPadelOpeningFocus 3s ease-in-out 1s both}
@media (prefers-reduced-motion:reduce){#doPadelOpening.is-ready picture:not(.do-padel-opening-badge) img{animation:none}}
/* THE OPENING COIN — the approved DO→PADEL™ coin, alone on the black from the moment
   the opening appears, centred in the visible screen (52.5% of the width on a phone — half as wide again
   as before — and capped by height so it stays balanced on laptop and desktop).
   It fades out on the photograph's own trigger, delay, duration and easing, so she
   replaces it with no added wait; under reduced motion it goes as she appears. */
#doPadelOpening picture.do-padel-opening-badge{position:absolute;left:50%;top:50%;z-index:1;flex:none;width:min(52.5vw,46vh);height:min(52.5vw,46vh);container-type:normal;transform:translate(-50%,-50%);pointer-events:none}
#doPadelOpening .do-padel-opening-badge img,#doPadelOpening.is-ready .do-padel-opening-badge img{width:100%;height:100%;visibility:visible;opacity:1;filter:none;animation:none}
@keyframes doPadelOpeningOut{from{opacity:1}to{opacity:0}}
#doPadelOpening.is-ready .do-padel-opening-badge{animation:doPadelOpeningOut 3s ease-in-out 1s both}
@media (prefers-reduced-motion:reduce){#doPadelOpening.is-ready .do-padel-opening-badge{animation:none;opacity:0}}
#doPadelOpening.is-ready .do-padel-opening-title,#doPadelOpening.is-ready .do-padel-opening-enter{opacity:1;animation:doPadelOpeningFade 3s ease-in-out 1s both}
@media (prefers-reduced-motion:reduce){#doPadelOpening.is-ready img,#doPadelOpening.is-ready .do-padel-opening-title,#doPadelOpening.is-ready .do-padel-opening-enter{animation:none}}
@media (max-width:767px){#doPadelOpening .do-padel-opening-title{--lift:28px}}
/* BEGIN YOUR GLOBAL PADEL JOURNEY — centred directly beneath the photograph, no
   outline: the words in champagne gold with the emerald right-pointing arrow
   centred underneath. Words, arrow and the space between them are the one control,
   with generous invisible padding and at least a 44px target. */
#doPadelOpening .do-padel-opening-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:100%;height:auto;margin-top:clamp(10px,2.2vh,22px);padding-bottom:env(safe-area-inset-bottom,0px)}
#doPadelOpening .do-padel-opening-enter{-webkit-appearance:none;appearance:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:64px;max-width:calc(100vw - 128px);box-sizing:border-box;margin:0;padding:10px clamp(20px,5vw,34px);border:0;border-radius:10px;background:transparent;color:#E9CCA1;-webkit-text-fill-color:#E9CCA1;font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;font-size:clamp(11px,3.1vw,15px);font-weight:600;letter-spacing:.2em;line-height:1;text-transform:uppercase;white-space:nowrap;text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#doPadelOpening .do-padel-opening-enter *{pointer-events:none}
#doPadelOpening .do-padel-opening-enter .do-padel-opening-words{display:block;padding-left:.2em}
#doPadelOpening .do-padel-opening-enter .do-padel-opening-arrow{display:block;color:var(--brand-green);-webkit-text-fill-color:var(--brand-green);font-size:1.25em;line-height:1;letter-spacing:0}
@media (min-width:700px){#doPadelOpening .do-padel-opening-enter{font-size:15px}}
#doPadelOpening .do-padel-opening-enter:focus{outline:none}
/* Advertise your brand here — small, quiet champagne-gold link beneath the main control,
   a separate 44px target with 24px of clear space above it. Fades in with the button. */
#doPadelOpening .do-padel-opening-sponsor{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:24px 0 0;padding:0 14px;color:rgba(233,204,161,.78);-webkit-text-fill-color:rgba(233,204,161,.78);font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;font-size:12px;font-weight:400;letter-spacing:.04em;line-height:1;text-transform:none;text-decoration:underline;text-decoration-color:rgba(243,221,175,.35);text-underline-offset:4px;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0}
#doPadelOpening .do-padel-opening-sponsor:hover{color:#E9CCA1;-webkit-text-fill-color:#E9CCA1}
#doPadelOpening .do-padel-opening-sponsor:focus{outline:none}
#doPadelOpening .do-padel-opening-sponsor:focus-visible{outline:1px solid #F3DDAF;outline-offset:2px}
#doPadelOpening.is-ready .do-padel-opening-sponsor{opacity:1;animation:doPadelOpeningFade 3s ease-in-out 1s both}
@media (prefers-reduced-motion:reduce){#doPadelOpening.is-ready .do-padel-opening-sponsor{animation:none}}
@media (min-width:700px){#doPadelOpening .do-padel-opening-sponsor{font-size:13px}}
#doPadelOpening .do-padel-opening-enter:focus-visible{outline:2px solid #F3DDAF;outline-offset:2px}
/* ON A PHONE SHE SPANS NEARLY THE FULL WIDTH. The same complete photograph at its
   own proportions (never cropped or stretched), drawn 92% of the screen width so
   every part of her legs stays in. The opening scrolls vertically from the very top,
   so her whole head is on the first screen. BEGIN YOUR PADEL JOURNEY → rides in a
   compact black footer pinned to the bottom of the visible screen (clear of the
   home indicator and of Safari's toolbar, expanded or collapsed) while she scrolls
   behind it; the advertising link sits in the scrolling content just below her, so
   it and her lower edge both scroll fully clear of the footer.
   The content is stacked from the top (justify-content:flex-start): a centred column
   taller than the screen overflows upwards past the scroll origin, where it can never
   be scrolled to, which is what cut her head off in iPhone Safari. The footer is
   position:fixed to the same screen edge as the opening itself (not sticky inside the
   overflowing column), lifted by --dp-open-lift wherever the browser reports its
   bottom controls covering the layout edge, and a spacer of the footer's own height
   ends the scroll so the link clears it.
   HER HEAD NEAR THE TOP. The photograph's first 180 of 2778 rows are plain black
   above her hair, so on a phone it is drawn that much higher (a negative top margin
   in the same 92vw units, so scale, proportions and centring are untouched), leaving
   a small 10-18px margin below the safe area. Only black passes above the screen
   top, and more of her legs show on arrival.
   Desktop is unchanged. */
@media (max-width:699px){
#doPadelOpening{--dp-open-foot:calc(80px + max(8px,env(safe-area-inset-bottom,0px)));justify-content:flex-start;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:0}
#doPadelOpening::after{content:"";display:block;flex:0 0 auto;order:3;width:1px;height:calc(var(--dp-open-foot) + var(--dp-open-lift,0px) + 24px)}
#doPadelOpening picture:not(.do-padel-opening-badge){flex-shrink:0;margin-top:calc(clamp(10px,1.8vh,18px) - 92vw * 180 / 1284);width:92vw;height:calc(92vw * 2778 / 1284);max-height:none;aspect-ratio:auto}
#doPadelOpening .do-padel-opening-bar{order:2;position:fixed;left:0;right:0;bottom:var(--dp-open-lift,0px);z-index:2;box-sizing:border-box;width:auto;height:auto;margin-top:0;padding:8px env(safe-area-inset-right,0px) max(8px,env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);background:#000}
#doPadelOpening .do-padel-opening-enter{min-height:64px;max-width:calc(100vw - 24px);padding:18px clamp(16px,4.4vw,28px) 2px;letter-spacing:.12em}
#doPadelOpening .do-padel-opening-enter .do-padel-opening-words{padding-left:.12em}
#doPadelOpening .do-padel-opening-sponsor{order:1;flex-shrink:0;min-height:44px;margin:6px 0 0}
}