.video-popup{--video-popup-surface:var(--wp--preset--color--blackblue);--video-popup-edge:color-mix(in srgb,var(--wp--preset--color--white) 12%,transparent);--video-popup-radius:22px;--video-popup-chip:color-mix(in srgb,var(--wp--preset--color--white) 4%,transparent);--video-popup-chip-edge:color-mix(in srgb,var(--wp--preset--color--white) 14%,transparent);--video-popup-chip-ink:var(--wp--preset--color--white);--video-popup-chip-radius:12px;--video-popup-chip-border:1px;--video-popup-chip-weight:600;--video-popup-chosen:var(--wp--preset--gradient--royalblue-to-cyan);--video-popup-chosen-ink:var(--wp--preset--color--dark);--video-popup-arrow:var(--wp--preset--color--cyan);--video-popup-arrow-chosen:var(--video-popup-chosen-ink);--video-popup-bar:linear-gradient(90deg,var(--wp--preset--color--royalblue),var(--wp--preset--color--cyan));--video-popup-caption-font:inherit;--video-popup-caption-size:0.96875rem;--video-popup-frame-ratio:9/12;--video-popup-frame-radius:0;background:var(--video-popup-surface);border:1px solid var(--video-popup-edge);border-radius:var(--video-popup-radius);box-shadow:0 40px 90px -24px rgba(0,0,0,.85);box-sizing:border-box;color:var(--wp--preset--color--white);font-size:1rem;line-height:1.4;overflow:hidden;i{display:block;font-style:normal}.video-popup__frame{aspect-ratio:var(--video-popup-frame-ratio);background:var(--wp--preset--color--darkestblue);border-radius:var(--video-popup-frame-radius);overflow:hidden;position:relative;&:after{background:linear-gradient(180deg,rgba(5,7,13,.35),rgba(5,7,13,0) 25%,rgba(5,7,13,0) 55%,rgba(5,7,13,.85));content:"";inset:0;pointer-events:none;position:absolute}}.video-popup__image{display:block;height:100%;object-fit:cover;width:100%}.video-popup__tag{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(5,7,13,.6);border-radius:999px;color:var(--wp--preset--color--light);font-size:.65625rem;font-weight:700;left:12px;letter-spacing:.06em;line-height:1.4;margin:0;padding:4px 9px;position:absolute;text-transform:uppercase;top:12px;z-index:2}.video-popup__close{align-items:center;background:rgba(5,7,13,.55);border-radius:50%;display:flex;font-size:1rem;height:26px;justify-content:center;line-height:1;right:12px;top:10px;width:26px}.video-popup__caption,.video-popup__close{color:var(--wp--preset--color--white);position:absolute;z-index:2}.video-popup__caption{bottom:18px;font-family:var(--video-popup-caption-font);font-size:var(--video-popup-caption-size);font-weight:700;left:14px;line-height:1.3;margin:0;right:14px;text-shadow:0 2px 12px rgba(0,0,0,.5)}.video-popup__progress{background:hsla(0,0%,100%,.2);bottom:0;display:block;height:3px;left:0;position:absolute;right:0;z-index:2;i{background:var(--video-popup-bar);height:100%;width:var(--video-popup-progress,62%)}}.video-popup__chips{display:flex;flex-direction:column;gap:7px;padding:12px}.video-popup__chip{align-items:center;background:var(--video-popup-chip);border:var(--video-popup-chip-border) solid var(--video-popup-chip-edge);border-radius:var(--video-popup-chip-radius);box-sizing:border-box;color:var(--video-popup-chip-ink);display:flex;font:inherit;font-size:.84375rem;font-weight:var(--video-popup-chip-weight);gap:10px;justify-content:space-between;line-height:1.35;margin:0;padding:10px 13px;text-align:left;width:100%;&:after{color:var(--video-popup-arrow);content:"\2192";flex:none}&.is-selected{background:var(--video-popup-chosen);border-color:transparent;color:var(--video-popup-chosen-ink);&:after{color:var(--video-popup-arrow-chosen)}}}}.wp-block-lohko-video-demo{--video-demo-play:2.6s;align-items:center;display:grid;gap:64px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);i{display:block;font-style:normal}.video-demo__steps{border-top:1px solid color-mix(in srgb,var(--wp--preset--color--white) 8%,transparent);display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.video-demo__step{align-items:flex-start;border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--white) 8%,transparent);display:flex;gap:18px;margin:0;padding:20px 0;transition:opacity .3s}.video-demo__number{align-items:center;background:var(--wp--preset--color--blackblue);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 14%,transparent);border-radius:50%;box-sizing:border-box;color:var(--wp--preset--color--greyblue);display:flex;flex-shrink:0;font-size:.875rem;font-weight:700;height:34px;justify-content:center;transition:background-color .3s,color .3s;width:34px}.video-demo__step-copy{display:flex;flex-direction:column;gap:4px}.video-demo__step-title{color:var(--wp--preset--color--white);font-size:1.125rem;font-weight:700;line-height:1.3;margin:0}.video-demo__step-text{color:var(--wp--preset--color--greyblue);font-size:.875rem;line-height:1.55;margin:0}&.is-ready .video-demo__step:not(.is-lit){opacity:.5}&:not(.is-ready) .video-demo__number,.video-demo__step.is-lit .video-demo__number{background:var(--wp--preset--gradient--royalblue-to-cyan);border-color:transparent;color:var(--wp--preset--color--dark)}.video-demo__try{align-items:center;background:var(--wp--preset--gradient--royalblue-to-cyan);border:0;border-radius:999px;box-shadow:0 12px 28px color-mix(in srgb,var(--wp--preset--color--royalblue) 32%,transparent);box-sizing:border-box;color:var(--wp--preset--color--dark);cursor:pointer;display:inline-flex;font:inherit;font-size:.9375rem;font-weight:700;gap:8px;height:50px;margin-top:28px;padding:0 28px;transition:box-shadow .18s ease;&:hover{box-shadow:0 14px 32px color-mix(in srgb,var(--wp--preset--color--royalblue) 45%,transparent)}&:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:2px}}.video-demo__arrow{height:18px;width:18px}.video-demo__note{color:var(--wp--preset--color--greyblue);font-size:.75rem;line-height:1.4;margin:12px 0 0}.video-demo__stage{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:640px;position:relative}.video-demo__glow{background:radial-gradient(circle,color-mix(in srgb,var(--wp--preset--color--royalblue) 35%,transparent),transparent 70%);border-radius:50%;filter:blur(64px);height:380px;left:10%;pointer-events:none;position:absolute;top:10%;width:380px}.video-demo__player{max-width:100%;position:relative;width:340px;z-index:2}.video-popup .video-popup__chips{box-sizing:border-box;min-height:150px}button.video-popup__chip{cursor:pointer;&:hover{background:color-mix(in srgb,var(--wp--preset--color--cyan) 12%,transparent);border-color:var(--wp--preset--color--cyan)}&:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:2px}}.video-demo__wait{align-items:center;color:var(--wp--preset--color--greyblue);display:none;font-size:.8125rem;gap:8px;padding:10px 4px;i{animation:video-demo-blink 1s infinite;background:var(--wp--preset--color--cyan);border-radius:50%;height:6px;width:6px}}&.is-ready .video-demo__scene{--video-popup-progress:0%;&.is-playing .video-popup__progress i{animation:video-demo-progress var(--video-demo-play) linear forwards}&.is-played{--video-popup-progress:100%}&:not(.is-played) .video-demo__wait{display:flex}&:not(.is-played) .video-demo__choice{display:none}&.is-played .video-demo__choice{animation:video-demo-rise .4s cubic-bezier(.16,1,.3,1) both;&:nth-of-type(2){animation-delay:80ms}&:nth-of-type(3){animation-delay:.16s}&:nth-of-type(n+4){animation-delay:.24s}}}.video-demo__endcard,.video-demo__form{display:flex;flex-direction:column;gap:10px}.video-demo__endcard{animation:video-demo-rise .4s both;padding:4px}.video-demo__form[hidden]{display:none}.video-demo__thanks{margin:0}.video-demo__end-title{color:var(--wp--preset--color--white);font-size:.9375rem;font-weight:700;line-height:1.35;margin:0}.video-demo__minipage{background:color-mix(in srgb,var(--wp--preset--color--paleblue) 25%,var(--wp--preset--color--white));border-radius:12px;display:flex;flex-direction:column;gap:7px;padding:12px;i{background:color-mix(in srgb,var(--wp--preset--color--lilyblue) 55%,var(--wp--preset--color--white));border-radius:4px;height:8px;&:first-child{background:color-mix(in srgb,var(--wp--preset--color--lilyblue) 85%,var(--wp--preset--color--white));height:10px;width:46%}&:nth-child(2){width:80%}&:nth-child(3){width:64%}}}.video-demo__field{background:color-mix(in srgb,var(--wp--preset--color--white) 4%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 14%,transparent);border-radius:9px;box-sizing:border-box;color:var(--wp--preset--color--greyblue);font-size:.8125rem;padding:0 12px}.video-demo__field,.video-demo__send{align-items:center;display:flex;height:38px}.video-demo__send{background:var(--wp--preset--gradient--royalblue-to-cyan);border:0;border-radius:999px;color:var(--wp--preset--color--dark);cursor:pointer;font:inherit;font-size:.84375rem;font-weight:700;justify-content:center}.video-demo__restart{align-self:flex-start;background:none;border:0;color:var(--wp--preset--color--cyan);cursor:pointer;font:inherit;font-size:.8125rem;font-weight:700;padding:4px 0;&:before{content:"\21BA\00A0"}&:hover{color:var(--wp--preset--color--lightblue)}}}@keyframes video-demo-progress{0%{width:0}to{width:100%}}@keyframes video-demo-blink{50%{opacity:.2}}@keyframes video-demo-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (max-width:991px){.wp-block-lohko-video-demo{gap:40px;grid-template-columns:minmax(0,1fr);.video-demo__stage{min-height:0}}}@media (prefers-reduced-motion:reduce){.wp-block-lohko-video-demo{.video-demo__choice,.video-demo__endcard,.video-demo__wait i{animation:none!important}&.is-ready .video-demo__scene.is-playing .video-popup__progress i{animation:none;width:100%}}}