/* ==========================================================================
   NetrAI — Homepage-only cinematic close
   The "Cinematic Finale" closing section.
   Loaded on index.html ONLY. Every other page keeps .site-footer.
   (The ambient background that used to live here is now css/effects/ambient.css,
   loaded on every page.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ambient page background — MOVED OUT to css/effects/ambient.css

   It used to live here, which meant only index.html (the one page that loads
   this file) had it. In dark mode that left the other six pages flat black
   while the homepage had atmosphere. It is now loaded site-wide from its own
   stylesheet; this file keeps only the homepage-exclusive finale below.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Cinematic Finale — homepage-only closing section
   Full-bleed, edge-to-edge panel (breaks out of the 1200px container) with
   a big cinematic headline flanked by nav columns, echoing a "hero-close"
   footer treatment: bold, immersive, brand-forward rather than a quiet
   link list.
   -------------------------------------------------------------------------- */
.site-finale {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  background: transparent;
}

/* Breakout: ignore the page's centered container and run edge-to-edge */
.finale-shell {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--line);
  /* No grain in this stack — the shell sits inside .finale, whose ::after
     already lays the shared grain layer over everything here. Carrying it
     twice was most of why the closing band looked sandy. */
  background: var(--surface-canvas);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 8px clamp(24px, 5vw, 64px) 0;
}

/* Slow animated mesh gradient — the "very slow movement" ambient layer */
.finale-mesh {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background: none;
  animation: none;
  filter: none;
}
@keyframes meshDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 100% 100%; transform: rotate(0deg) scale(1); }
  50%  { background-position: 20% 30%, 70% 20%, 40% 70%, 80% 90%; transform: rotate(4deg) scale(1.06); }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 100% 100%; transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .finale-mesh { animation: none; } }

/* Faint topographic-style contour lines, like the reference's background texture */
.finale-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.finale-shell > * { position: relative; z-index: 2; }

/* ---------- Giant headline ---------- */
.finale-hero {
  text-align: center;
  padding: clamp(48px, 9vw, 96px) 12px 8px;
}
.finale-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--mist-dim);
  margin-bottom: 18px;
}
.finale-giant {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: var(--leading-display);
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 auto;
}
.finale-giant .gradient-text {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}

/* ---------- Flanking nav columns + centerpiece video ---------- */
.finale-flanks {
  display: grid;
  grid-template-columns: 0.85fr 1.7fr 0.85fr;
  align-items: center;
  gap: 32px;
  margin-top: clamp(20px, 4vw, 48px);
}

.finale-flank-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--mist-dim);
  margin-bottom: 18px;
}
.finale-flank-right { display: flex; flex-direction: column; align-items: flex-end; }
.finale-flank-right .finale-flank-label { text-align: right; }

.finale-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.finale-links-right { align-items: flex-end; }

.finale-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mist);
  transition: color var(--transition), transform var(--transition);
  width: fit-content;
}
.finale-links-right a { flex-direction: row-reverse; }
.finale-links a:hover { color: var(--accent); transform: translateX(3px); }
.finale-links-right a:hover { transform: translateX(-3px); }
.finale-links a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

.finale-video {
  width: 100%;
  aspect-ratio: 16 / 11;
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: none;
  box-shadow: none; border: 1px solid var(--line);
  align-self: end;
}
.finale-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.finale-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.finale-video-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 20%, rgba(0, 113, 227, 0.22), transparent 55%),
    radial-gradient(circle at 78% 80%, var(--accent-tint-strong), transparent 55%);
  z-index: 0;
}
.finale-video-placeholder > * { position: relative; z-index: 1; }
.finale-play-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
  transition: transform var(--transition);
  position: relative;
}
.finale-play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--iris-cyan);
  opacity: 0.5;
  animation: playPulse 2.4s ease-out infinite;
  animation-delay: 1.2s;
}
.finale-play-btn svg { width: 26px; height: 26px; margin-left: 3px; position: relative; z-index: 1; }
.finale-video:hover .finale-play-btn { transform: scale(1.06); }
.finale-video-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--mist);
}
@media (prefers-reduced-motion: reduce) {
  .finale-video:hover .finale-play-btn { transform: none; }
  .finale-play-btn::before { animation: none; }
}

/* ---------- Bottom capability row, styled like a partner/logo strip ---------- */
.finale-capabilities {
  margin-top: clamp(32px, 6vw, 64px);
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.finale-capabilities-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: clamp(20px, 4vw, 48px);
  animation: capabilitiesDrift 28s linear infinite;
}
.finale-capabilities:hover .finale-capabilities-track { animation-play-state: paused; }
.finale-capabilities span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--mist-dim);
  white-space: nowrap;
  transition: color var(--transition);
}
.finale-capabilities span:hover { color: var(--accent); }
@keyframes capabilitiesDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .finale-capabilities-track { animation: none; }
}

/* ---------- Baseline legal bar — sits below the panel, on the page bg ---------- */
.finale-baseline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--mist-dim);
}
/* The text wordmark that lived here — "Netr" in ink with "AI" tinted blue —
   was removed with the 2026 logo. The slot now holds the real lockup; see
   .finale-logo in css/base/style.css. These rules are kept as a tombstone so the
   next person greps for the blue "AI" and finds out where it went. */
.finale-legal { display: flex; gap: 24px; }
.finale-legal a { transition: color var(--transition); }
.finale-legal a:hover { color: var(--ink); }
.finale-copy { order: 3; width: 100%; text-align: center; }

@media (min-width: 561px) {
  .finale-copy { order: 0; width: auto; text-align: left; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .finale-shell { border-radius: var(--radius) var(--radius) 0 0; padding: 26px 24px 0; }
  .finale-flanks { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .finale-flank-left, .finale-flank-right { align-items: center; }
  .finale-flank-right .finale-flank-label { text-align: center; }
  .finale-links { align-items: center; }
  .finale-links-right { align-items: center; }
  .finale-links-right a { flex-direction: row; }
  .finale-links-right a:hover { transform: translateX(3px); }
  .finale-video { order: -1; border-radius: var(--radius-lg); border-bottom: 1px solid var(--line-strong); }
}
@media (max-width: 560px) {
  .finale-shell { border-radius: var(--radius) var(--radius) 0 0; padding: 22px 18px 0; }
  .finale-hero { padding: 40px 0 4px; }
  .finale-capabilities { gap: 16px 28px; }
  .finale-capabilities span { font-size: 0.82rem; }
  .finale-baseline { justify-content: center; text-align: center; }
}

/* ---- showreel: play affordance is a real <button> now ---- */
button.finale-play-btn {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}
button.finale-play-btn:focus-visible {
  outline: 2px solid var(--iris-cyan);
  outline-offset: 4px;
}
.finale-video-placeholder {
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.finale-video-placeholder > * { pointer-events: auto; }
/* Dim the bright ocean footage so it sits in the dark page rather than
   glaring out of it — and so the play button stays legible on top. */
.finale-video-el { filter: none; }
.finale-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}
.finale-video-placeholder { z-index: 2; }