/*
 * QuickLead Casa demo video player — shared presentation layer.
 *
 * Extracted verbatim from the inline <style> block that shipped on
 * /real-estate/ so the deeper product pages (save-properties, compare,
 * nearby-places, shared-family-portfolio) reuse ONE stylesheet instead of
 * each carrying its own copy. The markup, the controller
 * (assets/verticals/demo-player.js), the scene timeline and the single
 * master MP4 are shared the same way - there is exactly one player
 * implementation on the site.
 *
 * Depends on the design tokens in landing.css (--radius-lg, --radius-xl,
 * --shadow, --primary...), so it must be linked AFTER that stylesheet.
 */

/* Grid/flex items default to min-width:auto, which lets content's
   min-content size force the track wider than the viewport on mobile.
   /real-estate/ already opts .demo-player into this via a grouped rule of
   its own; repeating it here is what makes the deeper pages correct too. */
.demo-player { min-width: 0; }

/* ---------- Section 2: single continuous chaptered product demo ---------- */
.demo-section .section-head { max-width: 720px; }

.demo-player {
  margin-top: 28px;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, #17131d 0%, #241e33 62%, #1c3a63 100%);
  box-shadow: var(--shadow);
}

.demo-player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0b0d14;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.demo-master-video {
  display: block;
  width: 100%;
  height: 100%;
  /* The master recording is exactly 1920x1080 (16:9), matching this
     frame's aspect-ratio, so `contain` shows the complete recording —
     full width, full height, no lateral or bottom crop of the
     recorded desktop UI — while still filling the frame edge-to-edge. */
  object-fit: contain;
  background: #0b0d14;
}

/* ---------- Narrative overlay: title + one sentence, INSIDE the video
   frame (lower-left, like premium product-demo narration - not
   subtitles). pointer-events:none throughout so it never blocks the
   native video controls beneath it; only the chapter-nav footer
   below the frame stays interactive. The gradient is scoped to a
   box noticeably smaller than the full frame width (max-width),
   not a full-bleed strip, so it never noticeably darkens the video. */
.demo-narrative {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: min(650px, 78%);
  padding: 72px 56px 84px 36px;
  pointer-events: none;
  text-align: left;
  /* Reaches further than a "corner glow" would - the copy line can run
     most of max-width, and light scenes (e.g. Portal access) proved a
     gradient that started fading at 46% left the tail end of that line
     under-covered. Stays meaningfully dark to ~58% before tapering, so
     text-shadow alone never has to carry a bright background alone. */
  background: linear-gradient(115deg, rgba(3, 5, 12, 0.78) 0%, rgba(3, 5, 12, 0.6) 58%, rgba(3, 5, 12, 0.16) 86%, rgba(3, 5, 12, 0) 100%);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.demo-narrative.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .demo-narrative { transition: none; }
}

.demo-scene-title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8), 0 0 26px rgba(0, 0, 0, 0.55);
}

.demo-scene-copy {
  margin: 0;
  max-width: 580px;
  color: #f8f7fb;
  font-size: 19px;
  line-height: 1.42;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.8), 0 0 22px rgba(0, 0, 0, 0.5);
}

/* ---------- Chapter nav footer: previous / current / next only ----------
   The footer no longer duplicates the current title/copy (that now
   lives inside the video frame above) - just the compact 3-position
   navigator, so this block is deliberately short. */
.demo-chapter-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

/* See the matching comment on .demo-orientation-hint[hidden] - an
   author `display: flex` otherwise beats the UA stylesheet's
   `[hidden] { display: none }` at equal specificity. */
.demo-chapter-nav[hidden] { display: none; }

.demo-chapter {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #a49dae;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  max-width: 32%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 14px;
}

.demo-chapter:hover { color: #e7e4f2; }
.demo-chapter:focus-visible { outline: 2px solid #6aa6ff; outline-offset: 2px; }

.demo-chapter-prev,
.demo-chapter-next {
  opacity: 0.6;
  font-size: 12px;
  padding: 7px 12px;
}

.demo-chapter-current {
  opacity: 1;
  color: #ffffff;
  background: rgba(106, 166, 255, 0.28);
  border-color: rgba(106, 166, 255, 0.5);
  font-size: 13px;
  padding: 9px 18px;
  cursor: default;
  max-width: 44%;
}

/* ---------- Chapter footer row: nav centred, contextual link right ----------
   Three columns (spacer | nav | link) rather than a plain flex row, so the
   chapter navigator stays optically centred in the card whether or not the
   current scene happens to have a "learn more" destination. The row owns the
   margin above it; .demo-chapter-nav's own margin-top is zeroed here so the
   two never stack. */
.demo-chapter-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.demo-chapter-footer .demo-chapter-nav {
  grid-column: 2;
  margin-top: 0;
}

.demo-learn-more {
  grid-column: 3;
  justify-self: end;
  color: #b9cdf0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 205, 240, 0.35);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-learn-more::after { content: ' \2192'; }
.demo-learn-more:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.75); }
.demo-learn-more:focus-visible { outline: 2px solid #6aa6ff; outline-offset: 3px; }

/* Same author-vs-UA-stylesheet trap as .demo-chapter-nav[hidden] below:
   the grid-column/justify-self above do not set `display`, but the
   controller toggles this element with .hidden, so make the intent explicit
   rather than relying on the element's default inline display. */
.demo-learn-more[hidden] { display: none; }

/* ---------- End state ---------- */
.demo-end-card {
  margin-top: 14px;
  padding: 26px 20px;
  text-align: center;
}

.demo-end-eyebrow {
  margin: 0 0 6px;
  color: #8fb8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-end-title {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.demo-end-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.demo-end-replay {
  border: 0;
  background: none;
  color: #c9c4d6;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Mobile orientation prompt ---------- */
.demo-orientation-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
  background: rgba(11, 13, 20, 0.92);
}

/* An author-stylesheet `display` declaration otherwise beats the
   user-agent stylesheet's `[hidden] { display: none }` rule even at
   equal specificity (author origin wins), so `.hidden = true` alone
   would leave this actually visible - it needs an explicit override. */
.demo-orientation-hint[hidden] { display: none; }

.demo-orientation-phone {
  width: 46px;
  height: 78px;
  margin-bottom: 14px;
  border: 3px solid #e7e4f2;
  border-radius: 10px;
  animation: demo-orientation-rotate 1s ease-in-out 1;
}

@keyframes demo-orientation-rotate {
  0% { transform: rotate(0deg); }
  60% { transform: rotate(96deg); }
  80% { transform: rotate(84deg); }
  100% { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-orientation-phone { animation: none; transform: rotate(90deg); }
}

.demo-orientation-title {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  max-width: 260px;
}

.demo-orientation-copy {
  margin: 0 0 16px;
  color: #c9c4d6;
  font-size: 13px;
  line-height: 1.5;
  max-width: 260px;
}

.demo-orientation-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.demo-orientation-dismiss,
.demo-orientation-watch {
  padding: 9px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.demo-orientation-dismiss {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #e7e4f2;
}

.demo-orientation-watch {
  border: 1px solid transparent;
  background: var(--primary);
  color: #ffffff;
}

/* ---------- Mobile (mostly portrait): the video frame itself is much
   smaller here, so the overlay needs materially smaller type/padding
   than desktop - it must stay legible without covering "most of the
   video" per spec. Matches the site-wide 760px breakpoint used by
   landing.css for .nav/.mobile-nav. ---------- */
@media (max-width: 760px) {
  .demo-player { padding: 12px; }
  .demo-narrative {
    max-width: 78%;
    padding: 18px 14px 40px 14px;
  }
  .demo-scene-title { font-size: 15px; margin-bottom: 3px; line-height: 1.2; }
  .demo-scene-copy { font-size: 11px; line-height: 1.32; max-width: none; }
  .demo-chapter-nav { margin-top: 10px; gap: 6px; }
  .demo-chapter { font-size: 11px; padding: 6px 10px; }
  .demo-chapter-current { font-size: 12px; padding: 7px 14px; }
  .demo-end-card { margin-top: 10px; padding: 20px 16px; }
  /* No room for a third column beside the navigator at this width: stack
     the contextual link under the centred nav instead of squeezing both. */
  .demo-chapter-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    margin-top: 10px;
  }
  .demo-chapter-footer .demo-chapter-nav { grid-column: 1; }
  .demo-learn-more { grid-column: 1; justify-self: center; }
}

/* ---------- Mobile landscape: video dominant, compact overlay+nav ----------
   Comes after the general 760px block on purpose: at narrow landscape
   widths (e.g. 667px) both blocks match, and this one must win. */
@media (max-width: 900px) and (orientation: landscape) {
  .demo-player { padding: 10px; }
  /* Fit by HEIGHT rather than width: on a landscape phone, filling
     100% of the width makes a 16:9 frame taller than the viewport
     (e.g. 844px wide -> ~475px tall frame in a ~390px-tall viewport),
     forcing a scroll just to see the whole video - defeating the
     point of asking the visitor to rotate. 100dvh (not vh) so mobile
     browser chrome showing/hiding doesn't leave stale sizing.
     120px reserves: the sticky .topbar (~57px, position:sticky - it
     stays pinned and keeps eating into the viewport even once
     scrolled past, so it has to come out of this budget too, not
     just the footer), the card's own top/bottom padding (20px), and
     the compact footer below the frame (margin-top + nav row,
     ~40px) - so frame + footer both fit in the space actually left
     once the sticky header has claimed its share. Desktop is
     untouched; this rule only exists inside this landscape query. */
  .demo-player-frame {
    width: min(100%, calc((100dvh - 120px) * 16 / 9));
    margin-inline: auto;
  }
  .demo-narrative {
    max-width: 58%;
    padding: 16px 20px 54px 18px;
  }
  .demo-scene-title { font-size: 21px; margin-bottom: 4px; line-height: 1.15; }
  .demo-scene-copy { font-size: 15px; line-height: 1.32; max-width: none; }
  .demo-chapter-nav { margin-top: 8px; gap: 6px; }
  .demo-chapter { font-size: 11px; padding: 6px 10px; }
  .demo-chapter-current { font-size: 12px; padding: 7px 14px; }
  .demo-end-card { margin-top: 8px; }
  /* The footer's height is part of the 120px reserve the frame is sized
     against, so the contextual link must NOT add a second row here - a
     stacked link would push the frame taller than the viewport again and
     undo the height-fit above. It is a secondary affordance; on a landscape
     phone the video gets the space and the link is simply not shown. The
     same destinations remain reachable from the page's own related-links
     section further down. */
  .demo-chapter-footer {
    grid-template-columns: auto;
    justify-items: center;
    margin-top: 8px;
  }
  .demo-chapter-footer .demo-chapter-nav { grid-column: 1; margin-top: 0; }
  .demo-learn-more { display: none; }
}