/* SesionaDesk landing: MacBook background for the full-screen video hero. */
#top.video-hero {
  background:
    radial-gradient(circle at 72% 50%, rgba(21, 131, 199, .3), transparent 48%),
    linear-gradient(135deg, #031d37 0%, #063b69 54%, #0b679f 100%);
}

#top .video-hero__media {
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 48%, rgba(43, 164, 220, .28), transparent 48%),
    linear-gradient(135deg, #031d37 0%, #063b69 58%, #0b679f 100%);
}

#top .video-hero__media video {
  display: none !important;
}

#top .video-hero__macbook {
  position: absolute;
  top: 50%;
  right: clamp(-32px, -1.5vw, -12px);
  display: block;
  width: min(64vw, 1180px);
  max-width: none;
  max-height: calc(100svh - 170px);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(30vw, -50%, 0) scale(.98);
  filter:
    drop-shadow(0 42px 42px rgba(0, 10, 24, .42))
    drop-shadow(0 12px 18px rgba(0, 23, 45, .3));
  transition:
    opacity 680ms ease-out,
    transform 1100ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

#top.is-macbook-visible .video-hero__macbook {
  opacity: .94;
  transform: translate3d(0, -50%, 0) scale(1);
}

#top .video-hero__ai-float {
  position: absolute;
  z-index: 2;
  top: clamp(142px, 20vh, 210px);
  right: clamp(28px, 4vw, 76px);
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(290px, 25vw);
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 16px;
  background: rgba(4, 36, 67, .72);
  box-shadow: 0 18px 40px rgba(0, 16, 35, .3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-size: clamp(11px, .76vw, 13px);
  font-weight: 650;
  line-height: 1.4;
  opacity: 0;
  transform: translate3d(52px, 12px, 0);
  transition:
    opacity 500ms ease-out 520ms,
    transform 700ms cubic-bezier(.16, 1, .3, 1) 520ms;
}

#top.is-macbook-visible .video-hero__ai-float {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: video-hero-ai-float 4.2s ease-in-out 1.25s infinite;
}

#top .video-hero__ai-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #5eead4, #38bdf8);
  box-shadow: 0 5px 18px rgba(56, 189, 248, .3);
  color: #06345f;
  font-size: 18px;
}

@keyframes video-hero-ai-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

#top .video-hero__shade {
  background:
    linear-gradient(90deg, rgba(3, 29, 55, .98) 0%, rgba(3, 29, 55, .9) 34%, rgba(3, 29, 55, .38) 66%, rgba(3, 29, 55, .24) 100%),
    linear-gradient(180deg, rgba(3, 29, 55, .2), rgba(3, 29, 55, .72));
}

@media (max-width: 1024px) {
  #top .video-hero__macbook {
    right: -24vw;
    width: min(1180px, 112vw);
    max-height: calc(100svh - 150px);
    opacity: 0;
  }

  #top.is-macbook-visible .video-hero__macbook {
    opacity: .76;
  }

  #top .video-hero__shade {
    background:
      linear-gradient(90deg, rgba(3, 29, 55, .98), rgba(3, 29, 55, .72) 72%, rgba(3, 29, 55, .48)),
      linear-gradient(180deg, rgba(3, 29, 55, .18), rgba(3, 29, 55, .82));
  }

  #top .video-hero__ai-float {
    top: 132px;
    right: 22px;
    width: min(260px, 34vw);
  }
}

@media (max-width: 640px) {
  #top .video-hero__macbook {
    top: 57%;
    right: -48vw;
    width: 158vw;
    transform: translate3d(46vw, -50%, 0) scale(.98);
  }

  #top.is-macbook-visible .video-hero__macbook {
    opacity: .58;
    transform: translate3d(0, -50%, 0) scale(1);
  }

  #top .video-hero__shade {
    background: linear-gradient(180deg, rgba(3, 29, 55, .78), rgba(3, 29, 55, .94));
  }

  #top .video-hero__ai-float {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #top .video-hero__macbook,
  #top.is-macbook-visible .video-hero__macbook {
    opacity: .94;
    transform: translate3d(0, -50%, 0);
    transition: none;
  }

  #top .video-hero__ai-float,
  #top.is-macbook-visible .video-hero__ai-float {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* SesionaDesk landing: mobile product visual for the presentation hero. */
#presentacion .hero__visual-container {
  animation: none;
  overflow: visible;
}

#presentacion .hero__mobile-wrap {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate3d(clamp(72px, 11vw, 150px), 0, 0);
  transition:
    opacity 700ms ease-out,
    transform 900ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

#presentacion.is-mobile-hero-visible .hero__mobile-wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#presentacion .hero__mobile-img {
  display: block;
  width: auto;
  max-width: min(100%, 390px);
  max-height: min(560px, 61vh);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 26px 24px rgba(2, 17, 31, .25))
    drop-shadow(0 8px 10px rgba(7, 52, 97, .16));
  transition: transform 400ms var(--sd-ease, ease);
}

#presentacion .hero__visual-container:hover .hero__mobile-img {
  transform: translateY(-5px) scale(1.01);
}

@media (max-width: 1024px) {
  #presentacion .hero__mobile-img {
    max-width: min(82vw, 340px);
    max-height: min(520px, 52vh);
  }
}

@media (max-width: 640px) {
  #presentacion .hero__mobile-wrap {
    transform: translate3d(72px, 0, 0);
  }

  #presentacion.is-mobile-hero-visible .hero__mobile-wrap {
    transform: translate3d(0, 0, 0);
  }

  #presentacion .hero__mobile-img {
    max-width: min(78vw, 300px);
    max-height: min(470px, 48vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  #presentacion .hero__mobile-wrap,
  #presentacion.is-mobile-hero-visible .hero__mobile-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #presentacion .hero__mobile-img,
  #presentacion .hero__visual-container:hover .hero__mobile-img {
    transform: none;
    transition: none;
  }
}