/* =========================================================
   HERO DEMO DECK — cross-fading desktop + mobile product slides
   Shared by the homepage hero (strategy-hero.ejs) and the /m
   funnel (mobile-landing.ejs). Markup: partials/hero-deck.ejs.
   ========================================================= */

.hero-deck {
  width: min(660px, 100%);
  flex: none;
  animation: heroDeckRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;

  /* Slide timing. The phone lags the desktop so the eye is led from the big
     screen down to the small one instead of both changing at once. */
  --deck-fade: 0.75s;
  --deck-phone-lag: 1s;
}

@keyframes heroDeckRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Stage aspect = 1280×800 screenshot + the 4.5%-of-width chrome bar. */
.hero-deck-stage {
  position: relative;
  aspect-ratio: 1280 / 858;
}

/* Slides stack and cross-fade. Deliberately NO z-index on the slide: that
   would make each one a stacking context, trapping its phone beneath the
   incoming slide's desktop — and the outgoing phone has to stay on top for a
   full second after the desktop behind it has already changed. Instead the
   three layers are ordered globally below (desktop 1, caption 2, phone 3), so
   every phone outranks every desktop regardless of which slide owns it.
   Opacity lives on the children, not the slide, so the halves fade apart. */
.hero-deck-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  /* Held visible for the whole fade-out, then dropped so the six idle slides
     stop compositing (the caption's backdrop-filter is not free) and stay
     untabbable. */
  visibility: hidden;
  transition: visibility 0s linear calc(var(--deck-fade) + var(--deck-phone-lag));
}
.hero-deck-slide.is-active {
  visibility: visible;
  transition-delay: 0s;
}

/* Desktop frame + its caption change together, immediately. */
.hero-deck-slide .hero-deck-desktop,
.hero-deck-slide .hero-deck-caption {
  opacity: 0;
  transition: opacity var(--deck-fade) ease-in-out;
}
.hero-deck-slide.is-active .hero-deck-desktop,
.hero-deck-slide.is-active .hero-deck-caption {
  opacity: 1;
}

/* Phone follows one second later — both the outgoing and incoming phones
   carry the same lag, so the old screen holds while the desktop changes. */
.hero-deck-slide .hero-deck-phone {
  opacity: 0;
  transition: opacity var(--deck-fade) ease-in-out var(--deck-phone-lag);
}
.hero-deck-slide.is-active .hero-deck-phone {
  opacity: 1;
}

/* Desktop capture in a browser frame. Layer 1 — the bottom of the stack. */
.hero-deck-desktop {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-970, #0a1420);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 44px 90px -26px rgba(2, 8, 18, 0.78),
    0 0 72px rgba(0, 212, 255, 0.12);
}
.hero-deck-chrome {
  position: relative;
  /* Scales with the frame so the stage aspect-ratio stays exact. */
  padding-top: 4.5%;
  background: linear-gradient(180deg, #16283c, #0e1d2e);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-deck-chrome span {
  position: absolute;
  top: 50%;
  width: 1.55%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.22);
}
.hero-deck-chrome span:nth-child(1) { left: 2.6%; background: #ff5f57; }
.hero-deck-chrome span:nth-child(2) { left: 5.2%; background: #febc2e; }
.hero-deck-chrome span:nth-child(3) { left: 7.8%; background: #28c840; }
.hero-deck-chrome-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.14em 1.4em;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
  font-size: 0.62rem;
  line-height: 1.5;
  white-space: nowrap;
}
.hero-deck-desktop img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile capture in a phone frame, hovering over the bottom-right corner.
   Layer 3 — above every desktop frame and caption in the deck, so the caption
   passes behind it and the outgoing phone survives the desktop hand-off. */
.hero-deck-phone {
  position: absolute;
  right: -3.5%;
  bottom: -7%;
  width: 24.5%;
  z-index: 3;
  border-radius: 12.5% / 5.8%;
  overflow: hidden;
  border: 3px solid #0a1420;
  background: #0a1420;
  box-shadow:
    0 24px 55px -18px rgba(2, 8, 18, 0.92),
    0 0 0 1px rgba(255, 255, 255, 0.16);
  /* Slow idle hover so the composition never sits completely still. Every
     slide's phone runs the same animation from page load, so they stay in
     lockstep and the cross-fade lands with no positional jump. Percentage
     translate keeps the travel proportional to the frame at any width. */
  animation: heroDeckPhoneHover 3.6s ease-in-out infinite alternate;
}

@keyframes heroDeckPhoneHover {
  from { transform: translateY(-2%); }
  to   { transform: translateY(2%); }
}
.hero-deck-phone img {
  display: block;
  width: 100%;
  height: auto;
}

/* Caption bar, alpha-blended over the bottom of the desktop frame. Layer 2 —
   over the desktop, under the phone. Right padding keeps the text clear of
   the hovering phone. */
.hero-deck-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.72rem 26% 0.8rem 1.05rem;
  border-radius: 0 0 14px 14px;
  background: rgba(26, 30, 37, 0.82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.hero-deck-caption strong {
  display: block;
  color: #ffffff;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: clamp(0.88rem, 1.5vw, 1.02rem);
  line-height: 1.3;
}
.hero-deck-caption span {
  display: block;
  margin-top: 0.14rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.76rem, 1.2vw, 0.87rem);
  line-height: 1.45;
}

/* Slide picker dots. Cleared past the phone's bottom overhang. */
.hero-deck-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(2.1rem, 9.5%, 3.4rem);
}
.hero-deck-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero-deck-dot:hover { background: rgba(255, 255, 255, 0.55); }
.hero-deck-dot.is-active { background: var(--cyan-500, #00d4ff); transform: scale(1.25); }
.hero-deck-dot:focus-visible { outline: 2px solid var(--cyan-500, #00d4ff); outline-offset: 3px; }

@media (max-width: 560px) {
  /* Keep the phone overhang on-screen, and drop the caption to its title
     line only — the two-line description swallows the small frame. */
  .hero-deck-phone { right: -2%; bottom: -5%; width: 27%; }
  .hero-deck-caption { padding: 0.55rem 29% 0.6rem 0.85rem; }
  .hero-deck-caption span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-deck {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* The deck still cycles so every screen remains reachable, but each change
     becomes an instant swap and the phone stops hovering. */
  .hero-deck-slide .hero-deck-desktop,
  .hero-deck-slide .hero-deck-caption,
  .hero-deck-slide .hero-deck-phone {
    transition: none !important;
  }
  .hero-deck-phone {
    animation: none !important;
    transform: none !important;
  }
}