/* new-home - FINALE (owner: agent 6)
   A closing film scene seen through an opening iris, rings on its edge, and the two doors.
   The scene is a dark surface in both themes (data-surface="dark" re-declares the cinema tokens). */

#nh-finale.fn-host { background: var(--nh-p-ink-950); }

.fn {
  --fn-s: 1; --fn-inv: 1;
  --fn-d: 200vmax; --fn-w: 100vw; --fn-h: 100vh;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--nh-bg);
  color: var(--nh-text);
}

/* ---------- stage: iris + rings + scrim ---------- */
.fn-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; contain: strict; }

.fn-iris {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--fn-d); height: var(--fn-d);
  margin: calc(var(--fn-d) / -2) 0 0 calc(var(--fn-d) / -2);
  border-radius: 50%;
  overflow: hidden;
  transform: scale(var(--fn-s));
  will-change: transform;
  background: var(--nh-p-ink-900);
}
.fn .fn-iris__media {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--fn-w); height: var(--fn-h);
  margin: calc(var(--fn-h) / -2) 0 0 calc(var(--fn-w) / -2);
  transform: scale(var(--fn-inv));
  will-change: transform;
  background: var(--nh-p-ink-900);
}
.fn-video {
  /* grade: a little contrast, less saturation, lower key - film, not stock */
  filter: contrast(1.08) saturate(0.82) brightness(0.86);
  animation: fn-push 26s var(--nh-ease-in-out) infinite alternate;
}
@keyframes fn-push { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(-1%, -0.5%, 0); } }

/* rings ride the iris edge while it opens, then drift out of frame */
.fn-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.fn-rings span {
  grid-area: 1 / 1;
  width: calc(var(--fn-d) * var(--fn-s) * var(--k));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(98, 214, 205, 0.6);
  opacity: calc((1.02 - var(--fn-s)) * 1.8);
}
.fn-rings span:nth-child(1) { --k: 1.04; border-color: rgba(166, 235, 227, 0.7); }
.fn-rings span:nth-child(2) { --k: 1.14; }
.fn-rings span:nth-child(3) { --k: 1.28; border-style: dashed; }
.fn-rings span:nth-child(4) { --k: 1.48; border-color: rgba(233, 242, 240, 0.22); }

/* at rest: one quiet set of concentric rings around the doors (the hero motif, closing the loop) */
.fn-stage::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: min(118vmin, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent calc(50% - 1px), rgba(233, 242, 240, 0.14) calc(50% - 1px), rgba(233, 242, 240, 0.14) 50%, transparent 50%),
    radial-gradient(circle, transparent calc(38% - 1px), rgba(98, 214, 205, 0.18) calc(38% - 1px), rgba(98, 214, 205, 0.18) 38%, transparent 38%),
    radial-gradient(circle, transparent calc(26% - 1px), rgba(233, 242, 240, 0.1) calc(26% - 1px), rgba(233, 242, 240, 0.1) 26%, transparent 26%);
  opacity: 0;
  transition: opacity var(--nh-dur-cinema) var(--nh-ease-out);
}
.fn-stage.is-open::after, .fn.is-open .fn-stage::after { opacity: 1; }

.fn .fn-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 55% at 50% 52%, rgba(5, 8, 8, 0.58) 0%, rgba(5, 8, 8, 0.34) 62%, rgba(5, 8, 8, 0.5) 100%),
    linear-gradient(180deg, rgba(5, 8, 8, 0.72) 0%, rgba(5, 8, 8, 0) 22%, rgba(5, 8, 8, 0) 70%, rgba(5, 8, 8, 0.9) 100%);
}

/* film grain: plain alpha noise, NO blend mode (an overlay blend over the revealed text layers drew
   a visible rectangle around the headline - seen 2026-09-27) */
.fn-grain {
  position: absolute; inset: -50%; z-index: 2; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.6 -0.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: fn-grain 0.9s steps(6) infinite;
  will-change: transform;
}
@keyframes fn-grain {
  0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -4%); } 100% { transform: translate(0, 0); }
}

/* ---------- content ---------- */
.fn-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: calc(64rem + 2 * var(--nh-gutter));
  padding: var(--nh-section-y) var(--nh-gutter);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--nh-space-4);
}
.fn-eyebrow {
  margin: 0;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-xs);
  font-weight: var(--nh-weight-medium);
  letter-spacing: var(--nh-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nh-accent);
}
.fn-title {
  margin: 0;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-display);
  font-weight: var(--nh-weight-medium);
  line-height: var(--nh-lh-tight);
  letter-spacing: var(--nh-tracking-display);
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.fn-lede {
  margin: 0;
  max-width: 40ch;
  font-size: var(--nh-fs-lg);
  line-height: 1.5;
  color: #fff;
  font-weight: var(--nh-weight-medium);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 18px rgba(0, 0, 0, 0.55);
}
/* a soft shade behind the heading block: the lede tells the visitor what the two cards are, so it must
   read at >= 4.5:1 over any frame of the film (QA F17: was 3.8-4.0:1) */
.fn-content::before {
  content: "";
  position: absolute;
  left: 50%; top: calc(var(--nh-section-y) - 3rem);
  width: min(100%, 62rem);
  height: clamp(16rem, 12rem + 16vw, 26rem);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(5, 8, 8, 0.66), rgba(5, 8, 8, 0.42) 62%, rgba(5, 8, 8, 0) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ---------- the two doors ---------- */
.fn-doors {
  list-style: none;
  margin: var(--nh-space-6) 0 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.875rem, 0.5rem + 1vw, 1.5rem);
  text-align: left;
}
.fn-doors__item { display: flex; }
.fn-door {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nh-space-3);
  min-height: clamp(15rem, 12rem + 6vw, 19rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--nh-radius-xl);
  border: 1px solid transparent;
  text-decoration: none;
  transition:
    transform var(--nh-dur-slow) var(--nh-ease-out),
    box-shadow var(--nh-dur-slow) var(--nh-ease-out),
    background-color var(--nh-dur-base) var(--nh-ease-out),
    border-color var(--nh-dur-base) var(--nh-ease-out);
}
.fn-door:hover { transform: translateY(calc(-4px * var(--nh-move))); text-decoration: none; }
.fn-door:focus-visible { border-radius: var(--nh-radius-xl); outline-offset: 4px; }

.fn-door--platform {
  background: var(--nh-btn-primary-bg);
  color: var(--nh-btn-primary-text);
  box-shadow: 0 30px 80px -30px rgba(47, 186, 179, 0.65);
}
.fn-door--platform:hover { background: var(--nh-btn-primary-bg-hover); box-shadow: 0 36px 90px -26px rgba(47, 186, 179, 0.8); }
.fn-door--partner {
  background: rgba(12, 18, 17, 0.5);
  color: #fff;
  border-color: rgba(233, 242, 240, 0.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.fn-door--partner:hover { background: rgba(12, 18, 17, 0.62); border-color: rgba(233, 242, 240, 0.8); }

/* concentric icon badge - two rings around a line icon */
.fn-door__ring {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  margin: 7px 0 var(--nh-space-2) 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-shadow: 0 0 0 6px transparent, 0 0 0 7px color-mix(in srgb, currentColor 35%, transparent);
}
.fn-door__title {
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-2xl);
  font-weight: var(--nh-weight-medium);
  line-height: 1.1;
  letter-spacing: var(--nh-tracking-heading);
}
.fn-door__line { font-size: var(--nh-fs-base); line-height: 1.5; max-width: 36ch; }
.fn-door--platform .fn-door__line { color: rgba(2, 19, 18, 0.82); }
.fn-door--partner .fn-door__line { color: rgba(243, 246, 245, 0.86); }
.fn-door__go {
  margin-top: auto;
  padding-top: var(--nh-space-3);
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--nh-font-display);
  font-size: var(--nh-fs-sm);
  font-weight: var(--nh-weight-semibold);
  letter-spacing: 0.02em;
}
.fn-door__go .nh-icon { transition: transform var(--nh-dur-base) var(--nh-ease-out); }
.fn-door:hover .fn-door__go .nh-icon { transform: translateX(calc(4px * var(--nh-move))); }

.fn-demo {
  margin: var(--nh-space-5) 0 0;
  font-size: var(--nh-fs-sm);
  color: rgba(243, 246, 245, 0.8);
}
.fn-demo__link.nh-link { color: #fff; background-size: 100% 1px; font-weight: var(--nh-weight-medium); }
.fn-demo__link.nh-link:hover { color: var(--nh-accent); }

/* ---------- video pause / play ---------- */
.fn-play {
  position: absolute;
  right: var(--nh-gutter);
  bottom: var(--nh-gutter);
  z-index: 4;
  display: inline-grid; place-items: center;
  width: var(--nh-tap); height: var(--nh-tap);
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(233, 242, 240, 0.35);
  background: rgba(12, 18, 17, 0.5);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--nh-dur-fast) var(--nh-ease-out), border-color var(--nh-dur-fast) var(--nh-ease-out);
}
.fn-play:hover { background: rgba(12, 18, 17, 0.75); border-color: rgba(233, 242, 240, 0.7); }
.fn-play:focus-visible { border-radius: 50%; }
.fn-play__ico { display: inline-grid; place-items: center; grid-area: 1 / 1; }
.fn-play .fn-play__ico--play { display: none; }
.fn-play[aria-pressed="true"] .fn-play__ico--play { display: inline-grid; }
.fn-play[aria-pressed="true"] .fn-play__ico--pause { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .fn-doors { grid-template-columns: 1fr; }
  .fn-door {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--nh-space-4);
    row-gap: var(--nh-space-2);
    align-items: center;
    padding: var(--nh-space-5);
  }
  .fn-door__ring { width: 46px; height: 46px; margin: 7px 0; }
  .fn-door__title { font-size: var(--nh-fs-xl); }
  .fn-door__line, .fn-door__go { grid-column: 1 / -1; }
  .fn-door__go { padding-top: var(--nh-space-2); min-height: var(--nh-tap); }
  .fn-content { padding-bottom: calc(var(--nh-section-y) + var(--nh-tap)); }
  /* phone: the heading block is narrow and tall, so the shade is a wide, flatter band with a stronger core */
  .fn-content::before {
    width: 140%;
    top: calc(var(--nh-section-y) - 4rem);
    height: 24rem;
    background: radial-gradient(closest-side, rgba(5, 8, 8, 0.74), rgba(5, 8, 8, 0.56) 70%, rgba(5, 8, 8, 0) 100%);
  }
}

/* ---------- reduced motion: the iris is open, nothing drifts ---------- */
@media (prefers-reduced-motion: reduce) {
  .fn { --fn-s: 1 !important; --fn-inv: 1 !important; }
  .fn-video, .fn-grain { animation: none; }
  .fn-rings { display: none; }
  .fn-stage::after { opacity: 1; transition: none; }
}

@media print {
  .fn-stage, .fn-play { display: none; }
  .fn { min-height: 0; background: none; color: #000; }
  .fn-title, .fn-door, .fn-door__line, .fn-lede, .fn-demo { color: #000 !important; text-shadow: none; }
}