/* Prevent any animation before the site is ready */
body.is-preloading .animate,
body.is-preloading .split-animate,
body.is-preloading .text-typing,
body.is-preloading .scramble-animate {
  visibility: hidden !important;
}

/* When page is ready, remove the hidden state */
body.page-ready .animate,
body.page-ready .split-animate,
body.page-ready .text-typing,
body.page-ready .scramble-animate {
  visibility: visible;
}

body.page-ready .text-typing {
  opacity: 1;
}

.animate,
.split-animate,
.text-typing,
.scramble-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: none !important;
  will-change: opacity, transform;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loader{width:400px;height:100px}
body.page-ready #preloader {
  opacity: 0;
  pointer-events: none;
}

.highlight-wrapper {
  flex-flow: column;
  align-items: flex-start;
  max-width: 84rem;
  display: flex;
  position: relative;

}


.is--highlight__dup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.is--highlight {
  color: var(--kosmo-color-primary);
  /* bottom visible text */
  z-index: 1;
}

.is--highlight__dup {
  color: var(--kosmo-color-secondary);
  /* same color initially */
  z-index: 2;
  pointer-events: none;
}

.is--highlight,
.is--highlight__dup {
  mix-blend-mode: normal;
  will-change: opacity, transform;
  backface-visibility: hidden;

}

.text-typing-wrapper {
  position: relative;
}

.text-typing {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
}

.text-typing-dup {
  opacity: 0;
}

.figure {
  overflow: hidden;
  height: 100%;
}

.figure img.img-blur {
  filter: blur(15px);
  transition: filter 0.6s ease, transform 0.6s ease;
  transform: scale(var(--hover-scale));
}

.figure img.img-blur.lazyloaded {
  filter: blur(0);
  transform: scale(1);
}

html.lenis, html.lenis body {
  height: auto
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip
}

.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain
}

.lenis.lenis-smooth iframe {
  pointer-events: none
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete
}

.single_podcast_hero {
  position: relative;
}

#yt-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 10;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: calc(100% - 1.125rem);
}


.yt-wrap {
  max-width: 90%;
  width: 100%;
  position: relative;
  max-height: 100%;
  height: 85%;
}

#yt-player {
  width: 100%;
  aspect-ratio: 16/9;
  height: 100%;
  max-height: 100%;
}

.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
}

.yt-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 24px;
}

.single_podcast_hero .progress_bar {
  cursor: pointer;
}

.single_podcast_hero .progress_bar .status {
  transition: all .3s linear;
}

/* ---------- Particle heading component ---------- */
.particle-heading {
  position: relative;
  /* canvas can't replicate CSS letter-spacing */
  -webkit-font-smoothing: antialiased;
  /* match canvas grayscale AA */
  font-kerning: none;
  font-feature-settings: "kern"0;
  color: transparent !important;
}

.particle-heading.ph-pending {
  color: transparent !important;
}

.particle-heading.ph-done {
  color: #ffffff !important;
}

.ph-word {
  position: relative;
  display: inline-block;
}

.ph-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  max-width: inherit;
}


@media screen and (orientation: portrait) {
  .yt-wrap {
    width: 90%;
    height: auto;
  }

}

/*****************/
.video-player.paused {}

.video-player.playing .play_btn {
    opacity: 0;
    visibility: hidden;
}

.video-player.playing:hover .play_btn {
    opacity: 1;
    visibility: visible;
}
.video-player .play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 31%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 20%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    transition: 0.3s ease-in-out;
}

.play_btn .icon {
    width: 24px;
    height: 24px;
}

.play_btn .play {
    background: url(../images/play-icon.svg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.main.product .play_btn .play {
  background: url(../../images/play-icon.svg) no-repeat;
  background-position: center center;
  background-size: contain;
}

.play_btn .pause {
    background: url(../images/pause-icon.svg) no-repeat;
    background-position: center center;
    background-size: contain;
}
.main.product .play_btn .pause {
  background: url(../../images/pause-icon.svg) no-repeat;
  background-position: center center;
  background-size: contain;
}

.play_btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255, 255, 255, .12);
}

@media screen and (max-width:767px){
  .video-player .play_btn {
    width: 40px;
    height: 40px;
  }
  .play_btn .icon {
    width: 16px;
    height: 16px;
  }
}

