/* Scene 6 · Outro card
   Full-viewport still that stands in for a video on the 6th scroll
   stop. Hidden by default; main.js toggles .is-visible on transition
   in/out of scene index 5 (the outro). Sits BELOW the bottom chrome
   (.hero__chrome z:1010) so the More button + brand stay usable, and
   ABOVE the video hero and hero-chat bubbles. */

.scene-outro {
  position: fixed;
  inset: 0;
  z-index: 900;                        /* above hero (auto) + chat (500), below chrome (1010) */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 500ms cubic-bezier(0.65, 0.02, 0.24, 1),
              visibility 0s linear 500ms;
  color: #f0f2f1;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.scene-outro.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 500ms cubic-bezier(0.65, 0.02, 0.24, 1),
              visibility 0s linear 0s;
}

/* Background image - motorcycle POV on the peak. Full cover.
   On desktop, the distortion canvas sits above this img and hides
   it visually. Img is kept in the DOM as the fallback (WebGL fail
   / three.js load fail / touch device). */
.scene-outro__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* Canvas mount for the Grid Distortion effect (desktop only). The
   effect's canvas fills this container; pointer events pass through
   so text and CTAs above it stay interactive - the effect listens
   for mousemove on .scene-outro itself, not this element. Mobile
   hides the mount entirely; the plain img shows through. */
.scene-outro__distortion {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene-outro__distortion canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content wrapper. Grid centred vertically; left column = headline,
   right column = body copy + CTAs. Whole cluster capped so the design
   reads at the intended proportions on 1440 px+ viewports. */
.scene-outro__wrap {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 80px 60px 140px;            /* bottom leaves room for the chrome (~120 px) */
  display: flex;                       /* content-sized columns, centred as a group */
  align-items: center;                 /* keep both columns content-sized, then match height via min-height below */
  justify-content: center;
  gap: 2vw;                            /* 2% of viewport width per Arun 2026-09-09 */
  max-width: 1440px;
  margin: 0 auto;
}

/* Headline column - flush right so the SVG hugs the tight gap. */
.scene-outro__headline {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.scene-outro__headline__svg {
  display: block;
  width: 409px;                        /* fixed so the column doesn't collapse */
  max-width: 100%;
  height: auto;
}

/* Body copy column. Min-height locked to the SVG's rendered height
   so the intro sits at the top edge of the SVG and the CTAs land at
   its bottom edge - a clean "same height" match.
   SVG viewBox is 474 × 268; at width 409 px the rendered height is
   409 × 268 / 474 ≈ 231 px. justify-content: space-between
   distributes intro/paras/CTAs across that height. Content taller
   than 231 px just makes the body grow naturally (never truncated). */
.scene-outro__body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;                           /* min separation between rows if content is short */
  width: 420px;
  max-width: 100%;
  min-height: calc(409px * 268 / 474);
}
.scene-outro__intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  color: #ffffff;
}
.scene-outro__para {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

/* CTAs - both buttons match the About page's "View the case study"
   pill exactly (`.contact__row__cta` in css/about.css) - white pill,
   black text, invert to black-with-white-outline on hover. Per Arun
   2026-09-09. */
.scene-outro__ctas {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.scene-outro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}
.scene-outro__btn:hover,
.scene-outro__btn:focus-visible {
  background: #000;
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
  outline: none;
  text-decoration: none;
}

/* Rise-reveal on visible: headline SVG + body lines rise into place
   as the scene enters, staggered like the site's other reveals. */
.scene-outro__headline__svg,
.scene-outro__intro,
.scene-outro__para,
.scene-outro__ctas {
  transform: translateY(20px);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(0.22, 1.4, 0.36, 1),
    opacity  400ms cubic-bezier(0.65, 0.02, 0.24, 1);
}
.scene-outro.is-visible .scene-outro__headline__svg               { transition-delay: 200ms; transform: translateY(0); opacity: 1; }
.scene-outro.is-visible .scene-outro__intro                       { transition-delay: 320ms; transform: translateY(0); opacity: 1; }
.scene-outro.is-visible .scene-outro__para                        { transition-delay: 420ms; transform: translateY(0); opacity: 1; }
/* Second paragraph rises a beat after the first for a clean cascade. */
.scene-outro.is-visible .scene-outro__para + .scene-outro__para   { transition-delay: 520ms; }
.scene-outro.is-visible .scene-outro__ctas                        { transition-delay: 640ms; transform: translateY(0); opacity: 1; }

/* ── Tablet ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .scene-outro__wrap {
    padding: 60px 40px 140px;
    gap: 2vw;
  }
  .scene-outro__body { width: 380px; }
  .scene-outro__intro, .scene-outro__para { font-size: 16px; }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Reserve the bottom 164 px for the mobile chrome (brand + audio
     line + more button). The outro's image + content now stops
     above the chrome instead of bleeding underneath it, so image
     and menu sit as two stacked regions rather than overlapping.
     Per Arun 2026-09-09. */
  .scene-outro {
    top: 0;
    right: 0;
    bottom: 164px;
    left: 0;
  }
  .scene-outro__wrap {
    padding: 40px 24px 32px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }
  .scene-outro__headline { justify-content: center; width: 100%; }
  /* SVG headline - centred inside its column with a fixed max width
     so it doesn't stretch off to one side on the mobile SVG's aspect
     ratio. */
  .scene-outro__headline__svg {
    width: 66%;
    max-width: 66%;
    margin: 0 auto;
  }

  /* Body copy - matches the home page's "Take your time. There's a
     bit to discover." subtext exactly (Inter 600 / 11 px / line-height
     1.3), narrower column so lines don't stretch across the viewport.
     Per Arun 2026-09-09. */
  .scene-outro__body {
    width: 100%;
    max-width: 280px;
    gap: 16px;
    text-align: center;
    /* Mobile stacks vertically; the "match SVG height" rule from
       the desktop block doesn't apply. Reset so body sizes to
       content, no reserved vertical space. */
    min-height: 0;
    justify-content: flex-start;
  }
  .scene-outro__intro,
  .scene-outro__para {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.3;
  }
  .scene-outro__ctas { justify-content: center; }
  .scene-outro__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .scene-outro__btn {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 8px 18px;
  }
  /* Anchor the mobile bg image's bottom to the outro's bottom edge
     (just above the chrome). Cropping (if any) happens from the top
     so the motorcycle handles at the bottom of scene6_mobile.jpg
     always stay visible. Height fills the full outro area. */
  .scene-outro__bg { object-position: center bottom; }
  /* Mobile - hide the distortion canvas mount (touch devices have
     no cursor to drive the effect; the plain <img> is enough). */
  .scene-outro__distortion { display: none; }
}

/* Reduced motion - no rises. */
@media (prefers-reduced-motion: reduce) {
  .scene-outro,
  .scene-outro__headline__svg,
  .scene-outro__intro,
  .scene-outro__para,
  .scene-outro__ctas {
    transition-duration: 0ms !important;
    transform: none !important;
  }
}