/* 52' Exploration homepage. Oxanium only. The page begins under a transparent header. */
@font-face{font-family:'Oxanium';font-weight:200;src:url('assets/Oxanium-ExtraLight.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Oxanium';font-weight:300;src:url('assets/Oxanium-Light.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Oxanium';font-weight:400;src:url('assets/Oxanium-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Oxanium';font-weight:500;src:url('assets/Oxanium-Medium.ttf') format('truetype');font-display:swap}
:root{
  --paper:#f3f1eb;--ink:#0f1d2b;--mute:#66727d;--line:rgba(15,29,43,.16);--deep:#07161f;--sea:#0f7b7b;--sea-light:#7fd1cc;--paper-sea:#eaf0ee;
  --ease:cubic-bezier(.22,.61,.36,1);--gutter:clamp(20px,4.2vw,64px);--head-h:88px;--stops:7;--leg:110vh;--tail:10vh;
}
:where(.x52-content) *{box-sizing:border-box}
body.x52-homepage .x52-content,body.x52-homepage .x52-content{margin:0;background:var(--deep);color:#fff;font-family:'Oxanium',system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
:where(.x52-content) img{display:block;max-width:100%}
:where(.x52-content) a{color:inherit}
:where(.x52-content) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.x52-content) h1,:where(.x52-content) h2,:where(.x52-content) p,:where(.x52-content) dl,:where(.x52-content) dd,:where(.x52-content) dt{margin:0}
:where(.x52-content) :focus-visible{outline:2px solid #fff;outline-offset:4px}
:where(.x52-content) .cap{font-weight:500;font-size:10px;letter-spacing:.24em;text-transform:uppercase}

/* header: family nav as a transparent overlay */
:where(.x52-content) .site-head{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--head-h);display:flex;align-items:center;padding:0 var(--gutter);color:#fff;transition:color .5s var(--ease),background .5s var(--ease)}
:where(.x52-content) .site-head::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,22,31,.32),rgba(7,22,31,0));transition:opacity .5s;pointer-events:none}
:where(.x52-content) .site-head.is-paper{color:var(--ink);background:rgba(243,241,235,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:where(.x52-content) .site-head.is-paper::before{opacity:0}
:where(.x52-content) .site-head.is-deep{color:#fff;background:rgba(7,22,31,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:where(.x52-content) .site-head.is-deep::before{opacity:0}
:where(.x52-content) .brand{display:flex;align-items:center;height:100%;position:relative;z-index:1;margin-right:auto}
:where(.x52-content) .brand img{height:13px;width:auto;transition:filter .4s}
:where(.x52-content) .site-head.is-paper .brand img{filter:invert(1) brightness(.2)}
:where(.x52-content) .site-nav{display:flex;gap:clamp(18px,3vw,46px);align-items:flex-start;position:relative;z-index:1}
:where(.x52-content) .site-nav a{text-decoration:none;font-weight:400;font-size:17px;letter-spacing:.06em;line-height:1;display:flex;flex-direction:column;gap:6px;opacity:.9;transition:opacity .3s}
:where(.x52-content) .site-nav a:hover{opacity:1}
:where(.x52-content) .site-nav a .t{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid transparent}
:where(.x52-content) .site-nav a.is-current .t{border-bottom-color:currentColor}
:where(.x52-content) .site-nav a small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;opacity:.6}
:where(.x52-content) .chev{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);display:inline-block;opacity:.7}
:where(.x52-content) .burger{width:40px;height:40px;display:grid;place-items:center;position:relative;z-index:1;margin-left:clamp(10px,2vw,28px)}
:where(.x52-content) .burger span,:where(.x52-content) .burger span::before,:where(.x52-content) .burger span::after{content:"";display:block;width:22px;height:1.5px;background:currentColor;position:relative}
:where(.x52-content) .burger span::before{position:absolute;top:-7px}
:where(.x52-content) .burger span::after{position:absolute;top:7px}

/* the story: one sticky stage, the viewer inside it, scroll drives the camera */
/* one leg of scroll per camera stop, a short tail that keeps the stage pinned at the last stop, then the stage's own height to let it go */
:where(.x52-content) .story{height:calc((var(--stops) - 1) * var(--leg) + var(--tail) + 100vh);position:relative;background:var(--deep)}
/* the page stops: every scroll settles on a camera stop (the leg boundaries), the last stop, then each section; nothing rests between two */
html.is-locked{overflow:hidden}
:where(.x52-content) .stops i{position:absolute;left:0;right:0;top:calc(var(--i) * var(--leg));height:1px;pointer-events:none}
:where(.x52-content) .stop{min-height:100svh;position:relative}
:where(.x52-content) .sheet .end{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none}
/* the last stop: enquiries under the header, the footer along the bottom; taller than a phone screen, it scrolls freely inside and its end is the page's end */
:where(.x52-content) .last{display:flex;flex-direction:column}
:where(.x52-content) .last .contact{padding-top:calc(var(--head-h) + 32px)}
:where(.x52-content) .last .site-foot{margin-top:auto}
:where(.x52-content) .stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;background:#1c6fbe}
:where(.x52-content) .stage .poster,:where(.x52-content) .stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* the frame is laid out and visible from the first paint (browsers throttle the animation clock of frames they consider invisible); the poster sits over it until the yacht is ready */
:where(.x52-content) .stage .poster{object-fit:cover;object-position:64% center;transition:opacity 1.2s var(--ease);pointer-events:none}
:where(.x52-content) .stage.is-ready .poster{opacity:0}
/* fallback: the same six stops as still frames, when WebGL is missing, too slow, or Save-Data is on */
:where(.x52-content) .stills{position:absolute;inset:0;transition:opacity .9s var(--ease)}
:where(.x52-content) .stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s linear}
:where(.x52-content) .stills img.is-on{opacity:1}
/* while the 3D loads the stills are the hero; once it is ready they fade and the live yacht shows through */
:where(.x52-content) .stage.is-ready:not(.is-fallback) .stills{opacity:0;pointer-events:none}
:where(.x52-content) .stage.is-fallback iframe{display:none}
:where(.x52-content) .stage.is-fallback .poster{opacity:0}
:where(.x52-content) .to3d{position:absolute;right:var(--gutter);bottom:22px;z-index:2;color:#fff;font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:10px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(7,22,31,.25);backdrop-filter:blur(6px)}
:where(.x52-content) .to3d:hover{background:#fff;color:var(--ink)}
:where(.x52-content) .title{position:absolute;left:var(--gutter);bottom:clamp(88px,13vh,140px);color:#fff;pointer-events:none;transition:opacity .4s linear;z-index:1}
:where(.x52-content) .title h1{font-weight:200;font-size:clamp(40px,6.3vw,100px);line-height:.98;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 24px rgba(7,22,31,.35)}
:where(.x52-content) .title h1 b{font-weight:500}
:where(.x52-content) .title p{margin-top:14px;font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.9}
:where(.x52-content) .more{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:28px;height:28px;color:#fff;opacity:.85;pointer-events:none;transition:opacity .4s;z-index:1}
:where(.x52-content) .more::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translate(-50%,-70%) rotate(45deg);animation:more 2.2s var(--ease) infinite}
@keyframes more{0%,100%{transform:translate(-50%,-90%) rotate(45deg);opacity:.4}50%{transform:translate(-50%,-40%) rotate(45deg);opacity:1}}
:where(.x52-content) .story.is-moving .title,:where(.x52-content) .story.is-moving .more{opacity:0}
/* the yacht is loading: the poster waits under a veil, the word and a hairline that fills with the boot stand in the middle of the
   screen, and the scroll cue appears only when the 3D can follow a scroll */
:where(.x52-content) .stage::after{content:"";position:absolute;inset:0;background:rgba(7,22,31,.58);transition:opacity 1.2s var(--ease);pointer-events:none}
:where(.x52-content) .stage.is-ready::after,:where(.x52-content) .stage.is-fallback::after{opacity:0}
:where(.x52-content) .load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,88vw);text-align:center;color:#fff;z-index:1;transition:opacity .8s var(--ease)}
:where(.x52-content) .load .ring{display:block;width:136px;height:136px;margin:0 auto;transform:rotate(-90deg)}
:where(.x52-content) .load .ring circle{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}
:where(.x52-content) .load .track{opacity:.2}
:where(.x52-content) .load .arc{stroke-dasharray:377;stroke-dashoffset:377}
:where(.x52-content) .load .spin{stroke-dasharray:34 343;opacity:.75;transform-origin:68px 68px;animation:load-spin 2.4s linear infinite}
@keyframes load-spin{to{transform:rotate(360deg)}}
:where(.x52-content) .load .pct{position:absolute;left:50%;top:68px;transform:translate(-50%,-50%);font-weight:200;font-size:42px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
:where(.x52-content) .load span{display:block;margin-top:24px;font-weight:500;font-size:13px;letter-spacing:.32em;text-transform:uppercase}
:where(.x52-content) .load small{display:block;margin-top:10px;font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.6}
/* V8 fixer F (PH02): the faded loading panel no longer catches the thumb over the yacht */
:where(.x52-content) .stage.is-ready .load,:where(.x52-content) .stage.is-fallback .load{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s var(--ease),visibility 0s linear .8s}
:where(.x52-content) .stage:not(.is-ready) .more{opacity:0}

/* the film: a frame and a play ring, nothing else */
/* one gradient down the whole section, its stops pinned to the cover's edges: the story's water above, the frame's sky at the
   cover's top edge, the frame's water at its bottom edge, then on into the sheet; so the frame melts into its surround at every height */
:where(.x52-content) .film{--film-pad:clamp(28px,4vh,48px);--sea3d:#08b29f;--frame-top:#afcbe4;--frame-bottom:#163254;--band:calc(var(--head-h) + 20px);--cover-h:min(calc((100vw - 2 * var(--gutter)) * 9 / 16),calc(100svh - var(--band) - var(--film-pad)));padding:0;display:grid;grid-template-rows:var(--band) auto minmax(var(--film-pad),1fr);justify-items:center;background:linear-gradient(180deg,var(--sea3d) 0,var(--frame-top) var(--band),var(--frame-bottom) calc(var(--band) + var(--cover-h)),#12294a 100%)}
/* two gradients meet the cover's edges: above it the story's water runs into the frame's sky, below it the frame's water runs on into the sheet */
:where(.x52-content) .cover{position:relative;grid-row:2;display:block;width:calc(100% - 2 * var(--gutter));aspect-ratio:16/9;max-height:calc(100svh - var(--band) - var(--film-pad));overflow:hidden;background:var(--frame-bottom);cursor:pointer}
:where(.x52-content) .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1.8s var(--ease)}
:where(.x52-content) .cover:hover img{transform:scale(1.02)}
:where(.x52-content) .cover .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(24,44,64,.35);backdrop-filter:blur(6px);display:grid;place-items:center;transition:background .3s}
:where(.x52-content) .cover:hover .play{background:#fff}
:where(.x52-content) .cover .play::after{content:"";width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;transition:border-left-color .3s}
:where(.x52-content) .cover:hover .play::after{border-left-color:var(--ink)}
:where(.x52-content) .modal{position:fixed;inset:0;z-index:60;background:rgba(3,10,15,.96);display:none;align-items:center;justify-content:center}
:where(.x52-content) .modal.is-open{display:flex}
:where(.x52-content) .modal iframe{width:min(100vw,177.78vh);height:min(56.25vw,100vh);border:0;background:#000}
:where(.x52-content) .modal .close{position:absolute;top:18px;right:18px;color:#fff;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;padding:12px 14px;border:1px solid rgba(255,255,255,.3);border-radius:999px}

/* the sheet: every line of the yard's sheet, one icon each */
:where(.x52-content) .sheet{padding:calc(var(--head-h) + 24px) var(--gutter) clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
:where(.x52-content) .specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(36px,4vw,56px) clamp(24px,3vw,48px)}
:where(.x52-content) .specs li,:where(.x52-content) .option{display:flex;gap:18px;align-items:flex-start;min-width:0}
:where(.x52-content) .ic{width:34px;height:34px;flex:0 0 34px;fill:currentColor;color:var(--ink);margin-top:2px}
:where(.x52-content) .specs b,:where(.x52-content) .option b{display:block;font-weight:400;font-size:15px;letter-spacing:.02em;color:var(--ink);margin-bottom:6px}
:where(.x52-content) .specs .v,:where(.x52-content) .option .v{display:block;font-weight:200;font-size:clamp(24px,2vw,30px);line-height:1.05;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
:where(.x52-content) .specs .u,:where(.x52-content) .option .u{display:block;font-size:13px;color:var(--mute);margin-top:6px;letter-spacing:.02em}
:where(.x52-content) .option{margin-top:clamp(48px,6vw,80px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
:where(.x52-content) .option ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:24px clamp(24px,3vw,48px)}
:where(.x52-content) .option .v{font-size:clamp(22px,1.7vw,26px)}
:where(.x52-content) .contact{padding:clamp(40px,5vw,72px) var(--gutter) clamp(48px,6vw,88px);border-top:1px solid var(--line);margin:clamp(40px,5vw,72px) var(--gutter) 0;padding-left:0;padding-right:0}
:where(.x52-content) .contact .cap{color:var(--mute);margin-bottom:14px}
:where(.x52-content) .contact .addr{display:inline-block;text-decoration:none;font-size:clamp(20px,1.8vw,26px);font-weight:200;border-bottom:1px solid var(--line);padding-bottom:5px;transition:border-color .3s}
:where(.x52-content) .contact .addr:hover{border-color:var(--ink)}

/* footer: the family columns in this site's ink */
/* overflow clipped: the entry rise of its last block must not lengthen the page while the scroll settles on the footer's end */
:where(.x52-content) .site-foot{background:var(--deep);color:#fff;padding:clamp(48px,6vw,80px) var(--gutter) 0;overflow:clip}
:where(.x52-content) .site-foot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px;padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.12)}
:where(.x52-content) .site-foot h2{font-weight:500;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:22px}
:where(.x52-content) .site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
:where(.x52-content) .site-foot li a{text-decoration:none;font-size:15px;font-weight:300;color:rgba(255,255,255,.8);transition:color .3s}
:where(.x52-content) .site-foot li a:hover{color:#fff}
:where(.x52-content) .site-foot li small{display:block;font-size:12px;color:rgba(255,255,255,.45);margin-top:2px}
:where(.x52-content) .notify{margin-top:34px}
:where(.x52-content) .notify form{display:flex;gap:10px;margin-top:14px;max-width:360px}
:where(.x52-content) .notify input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:0 18px;font:inherit;font-size:14px}
:where(.x52-content) .notify button{height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.55);color:#fff;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .3s,color .3s}
:where(.x52-content) .notify button:hover{background:#fff;color:var(--deep)}
:where(.x52-content) .site-foot .bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 0 36px;flex-wrap:wrap}
:where(.x52-content) .site-foot .bottom img{height:16px;width:auto}
:where(.x52-content) .social{display:flex;gap:10px}
:where(.x52-content) .social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:rgba(255,255,255,.75);text-decoration:none;transition:border-color .3s,color .3s}
:where(.x52-content) .social a:hover{border-color:#fff;color:#fff}
:where(.x52-content) .social svg{width:15px;height:15px;fill:currentColor}
:where(.x52-content) .legal{font-size:12.5px;color:rgba(255,255,255,.5);text-align:right;line-height:1.7}
:where(.x52-content) .legal a{color:rgba(255,255,255,.7);text-decoration:none}

@media (max-width:900px){
  :root{--head-h:72px}
  :where(.x52-content) .site-nav{display:none}
  :where(.x52-content) .site-head{justify-content:center}
  :where(.x52-content) .site-head .brand{margin:0 auto}
  :where(.x52-content) .site-head .burger{position:absolute;left:calc(var(--gutter) - 10px);top:50%;transform:translateY(-50%);margin:0}
  :where(.x52-content) .brand img{height:12px}
  :where(.x52-content) .title{bottom:clamp(84px,12vh,120px)}
  :where(.x52-content) .title h1{white-space:normal;font-size:clamp(40px,12.5vw,56px)}
  :where(.x52-content) .specs{grid-template-columns:1fr 1fr;gap:34px 20px}
  :where(.x52-content) .option ul{grid-template-columns:1fr 1fr}
  :where(.x52-content) .ic{width:28px;height:28px;flex-basis:28px}
  :where(.x52-content) .film{--cover-h:calc(100svh - var(--band) - var(--film-pad))}
  :where(.x52-content) .cover{width:100%;aspect-ratio:auto;height:var(--cover-h)}
  :where(.x52-content) .specs .v,:where(.x52-content) .option .v{font-size:clamp(20px,5.4vw,30px)}
  :where(.x52-content) .load .ring{width:120px;height:120px}
  :where(.x52-content) .load .pct{top:60px;font-size:36px}
  :where(.x52-content) .load span{letter-spacing:.26em}
  :where(.x52-content) .cover .play{width:68px;height:68px}
  :where(.x52-content) .site-foot .cols{grid-template-columns:1fr 1fr;gap:34px 20px}
  :where(.x52-content) .legal{text-align:left}
}
@media (max-width:520px){:where(.x52-content) .site-foot .cols{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1180px){:where(.x52-content) .specs,:where(.x52-content) .option ul{grid-template-columns:repeat(3,1fr)}}

/* ---- lower page, read from the whole: the story's water runs into the frame's sky above the cover, the frame's deep water
   runs out below it and descends through the sheet and enquiries into the footer's ink; white type, the frame's sky for
   icons and caps ---- */
:where(.x52-content) .paper{color:#fff}
:where(.x52-content) .sheet{background:linear-gradient(180deg,#12294a 0%,#0c2038 100%)}
:where(.x52-content) .contact{background:linear-gradient(180deg,#0c2038 0%,#091a2c 100%);margin:0;padding-left:var(--gutter);padding-right:var(--gutter);border-top:0}
:where(.x52-content) .site-foot{background:linear-gradient(180deg,#091a2c 0%,var(--deep) 100%)}
:where(.x52-content) .contact .cap{color:#afcbe4}
:where(.x52-content) .contact .addr{color:#fff;border-bottom-color:rgba(175,203,228,.35)}
:where(.x52-content) .contact .addr:hover{border-color:#afcbe4;color:#afcbe4}
:where(.x52-content) .specs b,:where(.x52-content) .option b,:where(.x52-content) .specs .v,:where(.x52-content) .option .v{color:#fff}
:where(.x52-content) .specs .u,:where(.x52-content) .option .u{color:rgba(175,203,228,.7)}
:where(.x52-content) .specs .ic,:where(.x52-content) .option .ic{color:#afcbe4}
:where(.x52-content) .option{border-top-color:rgba(175,203,228,.22)}
:where(.x52-content) .site-foot h2{color:#afcbe4;opacity:.85}
:where(.x52-content) .notify button{border-color:rgba(175,203,228,.6);color:#afcbe4}
:where(.x52-content) .notify button:hover{background:#afcbe4;color:var(--deep)}
:where(.x52-content) .social a:hover{border-color:#afcbe4;color:#afcbe4}
:where(.x52-content) .site-foot .cols{border-bottom-color:rgba(175,203,228,.18)}

/* entries: one slow rise per element, staggered by --i; icons give one soft beat (Font Awesome's fa-beat, once) */
:where(.x52-content) .enter{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
:where(.x52-content) .enter.is-in{opacity:1;transform:none}
:where(.x52-content) .fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}
:where(.x52-content) .fa-fade{animation-name:fa-fade;animation-delay:var(--fa-animation-delay,0s);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}
@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}
@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}
:where(.x52-content) .specs .ic,:where(.x52-content) .option .ic,:where(.x52-content) .cover .play{--fa-animation-iteration-count:1;--fa-animation-duration:1.5s;--fa-beat-scale:1.14;transform-origin:50% 50%}
:where(.x52-content) .cover .play{--fa-beat-scale:1.08;--fa-animation-duration:1.8s}
:where(.x52-content) .cover .play.fa-beat{transform:translate(-50%,-50%)}
@keyframes play-beat{0%,90%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(var(--fa-beat-scale,1.08))}}
:where(.x52-content) .cover .play.fa-beat{animation-name:play-beat}