/* Home page (oxxyz.com/). Positions live on the elements (see the note in site.css);
   this file has the backgrounds, the sticky stacks and the scroll-driven effects. */

/* ---------- scroll-driven effects ----------
   Each .sd element runs one CSS animation on a view timeline, with the range Wix used (--r0 .. --r1).
   Wix stacks its blur effects twice, so the blurs here are written twice too. */
.sd { animation-name: var(--an); animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
  animation-timeline: view(); animation-range: var(--r0) var(--r1); }
.sd-js .sd { animation-duration: 1000ms; animation-play-state: paused; }   /* site.js drives these when the browser can't */
@keyframes s-shrink03 { to { transform: scale(.3); } }
@keyframes s-grow03 { from { transform: scale(.3); } }
@keyframes s-blur5 { to { filter: blur(5px) blur(5px); } }
@keyframes s-grow15 { from { transform: scale(1.5); } }
@keyframes s-grow17 { from { transform: scale(1.7); } }
@keyframes s-blurin { from { filter: blur(var(--bl)) blur(var(--bl)); } }
@keyframes s-blurout { to { filter: blur(var(--bl)) blur(var(--bl)); } }
@keyframes s-shrink { to { transform: scale(var(--s)); } }
@keyframes s-fadeout { to { opacity: 0; } }
@keyframes s-zoomout { to { transform: scale(1.7); } }
@keyframes s-rise { from { transform: scale(.5); } }
@keyframes s-flyin { from { transform: translateX(calc(100vw - var(--L) * var(--u))) rotate(45deg); } }
@keyframes s-from-r { from { transform: translateX(var(--d)); } }
@keyframes s-from-l { from { transform: translateX(calc(var(--d) * -1)); } }
@keyframes s-from-b { from { transform: translateY(var(--db)); } }
@keyframes s-elevate { from { transform: scale(var(--es0)); } }

.s-shrink03 { --an: s-shrink03; --r0: cover 60%; --r1: cover 100%; }
.s-grow03 { --an: s-grow03; --r0: cover 19%; --r1: cover 47%; }
.s-blur5 { --an: s-blur5; --r0: cover 58%; --r1: cover 100%; }
.s-grow15 { --an: s-grow15; --r0: cover 0%; --r1: cover 50%; }
.s-grow17 { --an: s-grow17; --r0: cover 0%; --r1: cover 50%; }
.s-blurin { --an: s-blurin; --r0: cover 0%; --r1: cover 40%; }
.s-blurout { --an: s-blurout; --r0: cover 60%; --r1: cover 100%; }
.s-shrink { --an: s-shrink; animation-timeline: --svc; }
.s-fadeout { --an: s-fadeout; --r0: cover 50%; --r1: cover 70%; }
.s-rise { --an: s-rise; --r0: cover 0%; --r1: cover 20%; transform-origin: 50% 100%; }
.s-flyin { --an: s-flyin; --r0: cover 0%; --r1: cover 50%; --L: var(--left); }
.s-from-r, .s-from-l, .s-from-b { --r0: cover 0%; --r1: cover 50%; --d: 800px; --db: 788px; }
.s-from-r { --an: s-from-r; } .s-from-l { --an: s-from-l; } .s-from-b { --an: s-from-b; }
.s-elevate { --an: s-elevate; --r0: cover 0%; --r1: cover 20%; --es0: .5; transform-origin: 50% 0%; }
@media (max-width: 750px) {
  .s-fadeout { --an: s-zoomout; --r1: cover 100%; }
  .s-rise { --an: none; }
  .s-flyin { --L: var(--mleft); }
  .s-from-r, .s-from-l, .s-from-b { --d: 400px; --db: 400px; }
  .s-elevate { --r1: cover 50%; --es0: .3; transform-origin: 50% 50%; }
}

/* the containers of Wix "transparent videos" centre their canvas */
.av { display: grid; place-items: center; }
.chev { width: 100%; height: 100%; color: #fff; }

/* ---------- 1. hero ---------- */
.hero { background: #000; overflow: clip; }
.hero-art { object-fit: cover; object-position: 66% 63%; }
@media (max-width: 750px) { .hero-art { object-position: 50% 50%; } }
.confetti { opacity: .8; }
.mixd { mix-blend-mode: difference; }
@media (max-width: 750px) {
  .hero-title, .hero-copy { text-align: center; }
  /* on phones Wix keeps these lines at 13 px, and the two buttons follow 105 px below the text's top line */
  .hero-copy { font-size: 13px; line-height: 15.6px; }
  .hero > .a.bh { top: calc(112 * var(--u) + 105px); }
}

/* ---------- 2. imagined ---------- */
.imagined { background: #000; }
.imag-art { object-position: 51% 42%; }
.scroll-hint { display: flex; flex-direction: column; align-items: center; }
.scroll-hint .chev { width: calc(31 * var(--u)); height: calc(30 * var(--u)); }
@media (max-width: 750px) { .scroll-hint .chev { width: calc(22 * var(--u)); height: calc(21 * var(--u)); } }

/* ---------- 3. story cards ---------- */
.cards { background: #000; }
.cards .stack { height: calc(100% - 125.2 * var(--u)); }
.card { border-radius: calc(34.15 * var(--u)); object-fit: cover; }
.moment-img { border: 2px solid var(--amber); border-radius: calc(34.15 * var(--u)); }
@media (max-width: 750px) {
  .cards .stack { height: calc(100% - 32.6 * var(--u)); }
  .card, .moment-img { border-radius: calc(16.3 * var(--u)); }
}

/* ---------- 4. let's be honest ---------- */
.honest { background: #000; --bl: 20px; }
@media (max-width: 750px) { .honest { --bl: 10px; } }
.honest-bg { background:
  radial-gradient(circle at 20% 100%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 76.67% 100%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 47% 100%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 52.67% 3%, #000 0%, 18.59%, transparent 35%),
  radial-gradient(circle at 61.33% 70.17%, rgba(242, 12, 163, .95) 0%, 15%, rgba(242, 12, 163, 0) 50%),
  radial-gradient(circle at 31.33% 58.83%, #ff6a00 0%, 10.5%, rgba(255, 106, 0, 0) 35%),
  radial-gradient(circle at 71.67% 43.67%, #fe0c16 0%, 5.7%, rgba(254, 12, 22, 0) 19%),
  radial-gradient(circle at 13.67% 45.5%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 83.33% 48.83%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 33% 100%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 62.67% 100%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 50.33% 32.17%, #1a6aff 0%, 17.5%, rgba(26, 106, 255, 0) 35%),
  radial-gradient(circle at 21% 0%, #000 0%, 17.5%, transparent 35%),
  radial-gradient(circle at 70.33% 7%, #000 0%, 22.51%, transparent 35%),
  radial-gradient(circle at 40.67% 3%, #000 0%, 23.5%, transparent 47%),
  radial-gradient(circle at 92% 100%, #000 0%, 20%, transparent 40%),
  radial-gradient(circle at 6.67% 100%, rgba(0, 0, 0, .99) 0%, 71.3%, transparent 100%),
  radial-gradient(circle at 0% 0%, #000 0%, 42%, transparent 70%),
  radial-gradient(circle at 93.69% 11.43%, #000 0%, 42%, transparent 70%),
  radial-gradient(circle at 48.9% 49.52%, #fff 0%, 100%, rgba(255, 255, 255, 0) 100%); }
.honest-foot { background: #000; }
.honest .hl p, .honest .hl div { color: #fff; }
.honest em { font-style: italic; }
/* on Wix this button is the same 300 x 60 px at every width, centred on the page */
.a.call-wrap { left: calc(50% - 150px); width: 300px; }
.call-wrap .call { height: 60px; }
.call .btn { width: 300px; height: 60px; gap: 8px; font-family: var(--text); }
.call .btn svg { width: 25px; height: 25px; }
@media (max-width: 750px) { .call-wrap .call { position: sticky; top: 30px; } }

/* ---------- 5. what we create (stays fixed behind the posters) ---------- */
.wwc { position: sticky; top: 0; height: 105vh; background: #000; overflow: clip; display: flow-root; }
.wwc-art { mix-blend-mode: multiply; }
.wwc-title { mix-blend-mode: lighten; }
.vert { writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; margin: 0; white-space: nowrap; }
.vert-l { transform: rotate(180deg); }
@media (min-width: 751px) { .wwc .vert { height: calc(105vh - 62 * var(--u)); } }
@media (max-width: 750px) { .wwc .vert { height: calc(230 * var(--u)); } }
.wwc-labels { position: sticky; bottom: 0; margin-top: calc(105vh - 90 * var(--u)); height: calc(90 * var(--u)); color: #fff; }
.wwc-labels p { position: absolute; top: calc(29 * var(--u)); }
.wwc-labels p:first-child { left: calc(29 * var(--u)); }
.wwc-labels p:last-child { right: calc(28 * var(--u)); text-align: right; }

/* ---------- 6. the 12 posters: one sticky screen each ---------- */
.posters { view-timeline: --svc block; }
.slot { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.poster { display: block; width: calc(360 * var(--u)); height: calc(541 * var(--u)); border: 2px solid #fff; overflow: hidden;
  border-radius: calc(var(--r, 22.77) * var(--u)); transform-origin: 50% 50%; }
.slot:first-child .poster { width: calc(358 * var(--u)); height: calc(537 * var(--u)); }
.poster img { width: 100%; height: 100%; object-fit: contain; }
.click-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: calc(731 * var(--u)); }
@media (max-width: 750px) {
  .poster, .slot:first-child .poster { width: calc(315 * var(--u)); height: calc(473 * var(--u)); border-radius: calc(16.3 * var(--u)); }
}

/* ---------- 7. welcome ---------- */
/* Wix sizes this section to its cards (it has no fixed height): the captions keep a fixed 23 px font while
   everything else scales, so at other widths a caption can wrap and the section grows. The sizes below are
   Wix's, so the section grows by the same amount. */
.welcome { height: auto; background: #fff; color: #000; padding-top: calc(43.1875 * var(--u)); padding-bottom: calc(43.1875 * var(--u)); }
.welcome-stick { position: sticky; top: 0; margin-left: calc(43.1875 * var(--u)); width: calc(1353.63 * var(--u)); height: calc(800.531 * var(--u));
  display: flex; align-items: flex-start; justify-content: center; }
.welcome-title { margin-top: calc(349 * var(--u)); width: calc(1022 * var(--u)); }
.welcome-col { width: calc(401.66 * var(--u)); margin: 0 auto; display: flex; flex-direction: column; gap: calc(22.5016 * var(--u)); position: relative; }
/* Wix draws the card's 1 px border inside its padding, so the padding here is 1 px less */
.wcard { margin: 0; background: #f0f0f0; border: 1px solid var(--line); border-radius: 20px; box-shadow: 10.07px 11.12px 16px rgba(0, 0, 0, .06);
  padding: calc(20.0781 * var(--u) - 1px) calc(19.05 * var(--u) - 1px); }
.wcard img { width: calc(362.31 * var(--u)); height: calc(359.7 * var(--u)); object-fit: cover; border-radius: 20px; }
.wcard figcaption { margin-top: calc(25.54 * var(--u)); text-align: center; color: #000; font: 700 23px/27.6px var(--display); }
/* "Ads that stop the scroll." is set a little tighter on Wix: its lines take the paragraph's own line height */
.wcard .tight p { font: 400 20px/24px var(--text); }
.wcard .tight span { font: 700 23px var(--display); line-height: inherit; }
/* Wix's section dividers: four copies of the shape, all the same height (--dh), each standing on a solid strip of
   the same blue (60, 40, 20 and 0 px), which is what draws the stripes; the whole divider is at 20 %. Sizes are in
   real pixels at every width, as on Wix. */
.wave { position: absolute; left: 0; right: 0; height: calc(var(--dh) + 60px); pointer-events: none; opacity: .2; }
.wave i { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: content-box; height: var(--dh); border-bottom: 0 solid #007cff;
  background-repeat: repeat-x; background-size: 100% 100%; background-position: 50% 100%; }
.wave i:nth-child(1) { border-bottom-width: 60px; opacity: .25; }
.wave i:nth-child(2) { border-bottom-width: 40px; opacity: .3333; }
.wave i:nth-child(3) { border-bottom-width: 20px; opacity: .5; }
.wave-bottom { bottom: 0; --dh: 80px; }
.wave-bottom i { background-image: url("data:image/svg+xml,%3Csvg id='w' preserveAspectRatio='none' data-bbox='-0.755 100 1921.51 200' viewBox='-0.755 100 1921.51 200' height='100%25' width='100%25' xmlns='http://www.w3.org/2000/svg' data-type='shape'%3E%3Cdefs%3E%3Cstyle%3E%23w %7B fill: %23007CFF; %7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath d='M1920.755 300C1657.396 178.196 1323.641 100 960 100S261.905 178.196-.755 300h1921.51z'/%3E%3C/g%3E%3C/svg%3E"); }
@media (max-width: 750px) {
  .welcome { padding-top: calc(11.1562 * var(--u)); padding-bottom: calc(55.7969 * var(--u)); }
  .welcome-stick { margin-left: calc(12.63 * var(--u)); width: calc(349.75 * var(--u)); height: calc(358.469 * var(--u)); }
  .welcome-title { margin-top: calc(162 * var(--u)); width: 100%; }
  .welcome-col { width: calc(284.22 * var(--u)); gap: calc(14.4228 * var(--u)); }
  .wcard { padding: calc(14.2031 * var(--u) - 1px) calc(13.47 * var(--u) - 1px); }
  .wcard img { width: calc(256.39 * var(--u)); height: calc(256.52 * var(--u)); }
  .wcard figcaption { margin-top: calc(18.06 * var(--u)); }
  .wcard .tight p { font-size: calc(14.4231 * var(--u)); line-height: calc(17.3077 * var(--u)); }
}

/* ---------- 8. craft experiences / pronounce ---------- */
.craft { background: #fff; color: #000; }
/* Wix flips this whole divider upside down (on top of the flip inside the shape), strips and all */
.wave-top { top: 0; --dh: 200px; transform: scaleY(-1); }
.wave-top i { background-image: url("data:image/svg+xml,%3Csvg id='w' preserveAspectRatio='none' data-bbox='0 91 1920 209' viewBox='0 91 1920 209' height='100%25' width='100%25' xmlns='http://www.w3.org/2000/svg' data-type='shape'%3E%3Cdefs%3E%3Cstyle%3E%23w %3E g %7B transform: scaleY(-1) translateY(-391px); %7D %23w %7B fill: %23007CFF; %7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath fill-rule='evenodd' d='M1920 291C1656.8 169.2 1323.3 91 960 91S262.5 169.2 0 291v9h1920v-9z M0,90 h1920 v210 h-1920 Z'/%3E%3C/g%3E%3C/svg%3E"); }
.logo-big { object-fit: cover; }
.craft-left { background: linear-gradient(90deg, rgba(0, 124, 255, .2), rgba(0, 173, 244, .2));
  border-radius: calc(34.15 * var(--u)) 0 0 calc(34.15 * var(--u)); }
.craft-right { background: linear-gradient(90deg, rgba(0, 173, 244, .2), rgba(0, 124, 255, .2));
  border-radius: 0 calc(34.15 * var(--u)) calc(34.15 * var(--u)) 0; }
.girl { background: var(--sky); border: 3px solid var(--amber); border-radius: calc(34.15 * var(--u)); }
@media (max-width: 750px) {
  .wave-top { --dh: 50px; }
  .craft-left { border-radius: calc(16.3 * var(--u)) calc(16.3 * var(--u)) 0 0; }
  .craft-right { border-radius: 0 0 calc(16.3 * var(--u)) calc(16.3 * var(--u)); }
  .ccard, .ccard.c3 { border-radius: calc(12.5 * var(--u)); box-shadow: 6.99px 12.62px 15.38px rgba(0, 0, 0, .06); }
  .girl { border-radius: calc(8.89 * var(--u)); }
}

/* ---------- 9. creative without the chaos ---------- */
.chaos { background: #fff; color: #000; }
.chaos-stack { height: 100%; }
.chaos-panel { grid-area: 1 / 1; align-self: start; justify-self: start; margin-left: calc(var(--x) * var(--u)); margin-top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: #f0f0f0; border-radius: 20px; }
.chaos-panel > .stack { height: 100%; }
.cards-lane { grid-area: 1 / 1; align-self: start; width: 100%; height: calc(100% - 40 * var(--u)); }
.cards-lane > .stack { height: 100%; }
.balloons { border: 2px solid var(--royal); border-radius: 20px; overflow: hidden;
  box-shadow: inset 1px 1px 0 var(--royal), inset -1px 1px 0 var(--royal), inset 1px -1px 0 var(--royal), inset -1px -1px 0 var(--royal); }
.balloons video { width: 100%; height: 100%; object-fit: cover; }
.balloons.media-missing { display: block !important; background: radial-gradient(circle at 30% 40%, #ff4fc8, #c3007f 60%, #2a0420); }
.ccard { background: #f0f0f0; border: 1px solid var(--line); border-radius: 13px; box-shadow: -10.61px -10.61px 16px rgba(0, 0, 0, .06); color: #000; }
.ccard.c3 { border-radius: 14.8px; box-shadow: -12.08px -12.08px 18.21px rgba(0, 0, 0, .06); }
.thumb { border-radius: 8px; overflow: hidden; background: linear-gradient(#f1a6f7, #ebb3f7 10%, #e1c5f6 20%, #d6d9f5 30%, #cdeaf5 40%, #c9f2f4 50%, #ccedf4 60%, #d4dcf5 70%, #dfc7f5 80%, #eab4f6 90%, #f0a6f7) 50% 50% / 100% 500px repeat; display: grid; place-items: center; }
.thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .shape { position: relative; width: calc(81 * var(--u)); height: calc(81 * var(--u)); }
.thumb.media-missing { display: grid !important; }
@media (max-width: 750px) {
  .chaos-panel { margin-left: calc(var(--mx) * var(--u)); margin-top: calc(var(--my) * var(--u)); width: calc(var(--mw) * var(--u)); height: calc(var(--mh) * var(--u)); }
  .chaos .ccard, .chaos .balloons { position: relative; top: auto; }
  .thumb .shape { width: 100%; height: 100%; }
}

/* ---------- 10. why oxxyz ---------- */
.why { background: #f0f0f0; color: #000; }
.why-row.first { background: #f0f0f0; }
.why-stack { height: calc(100% - 43 * var(--u)); }
@media (max-width: 750px) { .why-stack { height: calc(100% - 11 * var(--u)); } }
.why .rule { display: block; height: 1px; background: var(--line); }
.why .dot { display: block; border-radius: 50%; background: var(--c); opacity: var(--o); }
@media (min-width: 751px) { .why-title { text-align: left; } }
@media (max-width: 750px) { .why-title { text-align: center; } }

/* ---------- 11. not here by accident (one screen tall) ---------- */
.accident { height: 100vh; background: #000; }
.accident-in { position: absolute; left: calc(145 * var(--u)); top: 50%; width: calc(1149 * var(--u)); height: calc(477 * var(--u)); transform: translateY(-50%); }
@media (max-width: 750px) { .accident-in { left: calc(47 * var(--u)); width: calc(281 * var(--u)); height: calc(396 * var(--u)); } }

/* ---------- 12. you know ---------- */
.know { overflow: clip; background:
  radial-gradient(circle at 99.67% 59.67%, #00adf4 0%, 27.35%, rgba(0, 173, 244, 0) 43%),
  radial-gradient(circle at 0% 61%, #00adf4 0%, 17.1%, rgba(0, 173, 244, 0) 57%),
  radial-gradient(circle at 53% 33%, #f20ca3 0%, 20.88%, rgba(242, 12, 163, 0) 29%),
  radial-gradient(circle at 34% 100%, #1a6aff 0%, 17.5%, rgba(26, 106, 255, 0) 35%),
  radial-gradient(circle at 76.33% 100%, #fe0c16 0%, 22.23%, rgba(254, 12, 22, 0) 30%),
  radial-gradient(circle at 99% 97.67%, #ff6a00 0%, 41.9%, rgba(255, 106, 0, 0) 100%),
  radial-gradient(circle at 10.33% 100%, rgba(26, 106, 255, .99) 0%, 25%, rgba(26, 106, 255, 0) 50%),
  radial-gradient(circle at 20.33% 0%, #007cff 0%, 70%, rgba(0, 124, 255, 0) 70%),
  radial-gradient(circle at 80.67% 23.83%, #00adf4 0%, 41.8%, rgba(0, 173, 244, 0) 65%),
  #fff; }
.know-bg { height: 100%; opacity: .7; }
/* Wix gives the film-and-text row a minimum height of 418.95 px, so below about 1,070 px wide the section
   stops shrinking with the window (2057 at 1440 px, as before) */
@media (min-width: 751px) {
  .know { height: calc(1559.83 * var(--u) + max(497.17 * var(--u), 418.95px - 67.69 * var(--u))); }
}
.circ { display: block; border-radius: 50%; background: rgba(0, 0, 0, var(--o)); }
.know-stack { position: absolute; left: 0; top: 0; width: 100%; height: calc(1404 * var(--u)); }
.know-line { font-family: var(--helv); font-weight: 400; font-size: 50px; line-height: 65px; }
.vbox { border: 2px solid #fff; border-radius: 20px; overflow: hidden;
  box-shadow: inset 1px 1px 0 #fff, inset -1px 1px 0 #fff, inset 1px -1px 0 #fff, inset -1px -1px 0 #fff; background: #000; }
.vbox video { width: 100%; height: 100%; object-fit: cover; }
.sound { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45);
  color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s; }
.sound svg { width: 22px; height: 22px; fill: currentColor; }
.vbox:hover .sound, .sound:focus-visible, .sound[aria-pressed="true"] { opacity: 1; }
@media (max-width: 750px) {
  .know-stack { height: calc(749 * var(--u)); }
  .know-line { font-size: calc(32.61 * var(--u)); line-height: calc(39.13 * var(--u)); }
  .know-h, .know-p { text-align: center; }
  .sound { opacity: 1; }
}

/* ---------- 13. this isn't a pitch (taller than one screen) ---------- */
.pitch { height: 117.44vh; background: linear-gradient(19deg, #ff6a00, #ffc600); }
.pitch-in { position: absolute; left: 50%; top: 50%; width: calc(708 * var(--u)); height: calc(346 * var(--u)); transform: translate(-50%, -50%); }
@media (max-width: 750px) { .pitch-in { width: calc(299 * var(--u)); height: calc(307 * var(--u)); } }