/* =============================================================
   ZARAS — Home Close section · home-close.v1.css
   Merges the former "How access works" ticket strip + the
   "Closing" CTA into ONE final, ambient-weight section before
   the footer. The page's emotional resolution: the access
   workflow resolves DOWN a connector spine into a single big
   arrival (headline + CTA), with the page's strongest teal
   bloom rising from the button up into the headline.

   Ambient weight (soft glow + centered shell column) — a clear
   finale, slightly stronger than Industries, but NOT a fourth
   hero and NOT a left/right split board.

   Reuses verbatim from index.html's inline <style>:
     .ticket-rail / .ticket* / .ticket-wire / .packet   (cards)
     .btn-primary / .btn-ghost                           (CTAs)
   Reuses from home-atmosphere.v4.css:
     .closing-modules / .cm-item                         (final rail)

   Namespace: zc-*. Consumes index.html :root tokens.
   ============================================================= */

/* =============================================================
   SECTION — full-bleed, ambient finale with a teal gradient arc
   ============================================================= */
.zc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  padding: 48px 0 56px;
}
/* finale sits close to the footer (footer's own padding-top is 104px) */
.zc + .site-footer { padding-top: 72px; }

/* Atmosphere arc: cooler/muted behind the workflow strip (top),
   warming into the page's strongest teal bloom behind the
   headline + CTA (bottom). No bottom fade — blooms into the footer. */
/* Section atmosphere only — faint top teal + a downward darkening wash. The
   former lower-lobe radial is GONE: the beam is now the sole teal-into-headline
   event, so a second soft radial there would re-create the duplication we just
   removed. Keeps a clean dark gap below the headline before the footer aurora. */
.zc::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 82% 46% at 50% 6%,  rgba(118,199,178,0.04), transparent 60%),
    linear-gradient(180deg, rgba(8,15,13,0.46) 0%, rgba(8,18,16,0.10) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%); }

.zc-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: 18px;
}

/* shared small eyebrow (kicker + climax) */
.zc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.zc-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(118,199,178,0.6);
}

/* =============================================================
   1. TOP KICKER — workflow framing (small, NOT a second H2)
   ============================================================= */
.zc-kicker { display: grid; gap: 12px; max-width: 60ch; }

/* =============================================================
   2. WORKFLOW STRIP — micro rail label + the 3 ticket cards
   ============================================================= */
.zc-flow { display: grid; gap: 18px; }
.zc-flow-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-label);
}
/* The strip is a quiet PRELUDE / proof, not a co-equal module. Demote its
   visual mass ~10–15% (scoped to .zc; card CONTENT is untouched). The live
   REVIEWING chip + the wire packets stay at full intensity — they're the
   live signal; only the cards' mass is reduced. */
.zc .ticket { padding: 12px 18px 11px 26px; background: rgba(255,250,240,0.012); }
.zc .ticket[data-state="open"],
.zc .ticket[data-state="approved"] { border-color: rgba(255,250,240,0.04); }
.zc .ticket-num   { font-weight: 300; color: var(--ink-sub); }
.zc .ticket-title { font-weight: 400; }
.zc .ticket-desc  { font-size: 13px; color: var(--ink-mute); opacity: 0.74; }

/* =============================================================
   3. CONNECTOR SPINE — repurposed dot+line, carries the eye DOWN
   from the strip into the climax (brightens toward the close)
   ============================================================= */
.zc-spine { position: relative; height: 36px; }
.zc-spine-line {
  position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg,
    rgba(118,199,178,0.07) 0%,
    rgba(118,199,178,0.16) 40%,
    var(--signal-rule) 100%);
}
.zc-spine-dot {
  position: absolute; left: 50%; top: -3px; margin-left: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(118,199,178,0.5);
  opacity: 0.7;
}
/* the approved application flowing DOWN into the system
   (reuses the wire-packet motif from between the cards) */
.zc-spine-packet {
  position: absolute; left: 50%; margin-left: -3px; top: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px rgba(118,199,178,0.85);
  animation: zc-spine-packet 5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes zc-spine-packet {
  0%   { top: -4px;  opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  96%  { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}
/* landing node where the spine meets the bloom — flares as the packet arrives */
.zc-spine-land {
  position: absolute; left: 50%; bottom: -5px; margin-left: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(118,199,178,0.07), 0 0 16px rgba(118,199,178,0.55);
  animation: zc-land 5s ease-in-out infinite;
}
@keyframes zc-land {
  0%, 82%  { opacity: 0.45; transform: scale(0.9); }
  92%      { opacity: 1;    transform: scale(1.25); box-shadow: 0 0 0 6px rgba(118,199,178,0.10), 0 0 22px rgba(118,199,178,0.8); }
  100%     { opacity: 0.55; transform: scale(1); }
}

/* =============================================================
   4. CLIMAX — the single big arrival (largest type on the page-end)
   ============================================================= */
.zc-climax { position: relative; display: grid; justify-items: center; text-align: center; gap: 0; scroll-margin-top: 96px; }
.zc-climax > :not(.zc-bloom) { position: relative; z-index: 1; }
.zc-climax .zc-eyebrow { margin-bottom: 18px; }

/* ACCESS APERTURE — replaces the convergence beam.
   A faint elliptical threshold the headline emerges from. The spine docks into
   its top edge; the sweep registers the arrival on the 5s cadence.
   Calibration (v5): the glow radial is FLATTENED (38% vertical) so the bright
   core spreads horizontally instead of forming a vertical column through the
   headline; the legible structure now comes from the ::before hairline ring,
   not the box-edge inset ring (which sat at 100% radius, past the mask's
   transparent edge, so it never showed). position/z-index/pointer-events/left
   carry the invariant slot; .zc-climax > :not(.zc-bloom) keeps text at z:1. */
.zc-bloom {
  position: absolute; z-index: 0; pointer-events: none; left: 50%;
  top: -22px; transform: translateX(-50%);
  width: clamp(340px, 64vw, 940px); height: clamp(280px, 26vw, 380px);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 46%, #000 34%, rgba(0,0,0,.5) 58%, transparent 80%);
          mask-image: radial-gradient(ellipse 58% 60% at 50% 46%, #000 34%, rgba(0,0,0,.5) 58%, transparent 80%);
  background: radial-gradient(ellipse 56% 38% at 50% 50%,
    rgba(118,199,178,.085) 0%, rgba(118,199,178,.04) 42%, transparent 70%);
  box-shadow: inset 0 0 60px -10px rgba(118,199,178,.10);
}
/* engineered field structure — a horizontal elliptical hairline the headline
   sits within (the literal "aperture"). Inset so it lands inside the visible
   glow rather than at the masked box edge; the left/right tips are faded so the
   long top + bottom arcs read as horizontal field rails, not a closed bubble. */
.zc-bloom::before {
  content: ""; position: absolute; inset: 15% 7%;
  border-radius: 50%;
  border: 1px solid rgba(118,199,178,.20);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
}
.zc-bloom::after {                                /* single sweep across the aperture */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  width: auto; height: auto; margin-left: 0; filter: none;
  background: linear-gradient(100deg, transparent 40%, rgba(118,199,178,.11) 50%, transparent 60%);
  background-size: 300% 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 42%, transparent 74%);
          mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 42%, transparent 74%);
  animation: zc-aperture-sweep 5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes zc-aperture-sweep {
  0%   { background-position: 130% 0; opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: .85; }
  90%  { background-position: -30% 0; opacity: 0; }
  100% { background-position: -30% 0; opacity: 0; }
}

.zc-h2 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(37px, 5.4vw, 70px);
  max-width: 17ch;
  color: var(--ink);
  text-wrap: balance;
}
.zc-h2 em { font-style: normal; color: var(--signal-ink); }
.zc-sub {
  margin-top: 22px;
  color: var(--ink-sub);
  font-size: 16px;
  line-height: 1.55;
  max-width: 52ch;
}
.zc-actions {
  margin-top: 34px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px;
}

/* =============================================================
   5. FINAL RAIL — quiet capability list (reuses .closing-modules)
   ============================================================= */
.zc .closing-modules { margin-top: 24px; justify-content: center; }

/* MODULE RAIL boots online in sequence after the climax. The rail carries
   data-reveal, so scroll-reveal.v1.js adds .is-in on intersection; the
   per-item transition-delays then light each label teal in turn. (cm-items
   themselves have no data-reveal, so the JS never overwrites these delays;
   the home rail has exactly 5 items, matching the nth-child stagger.) */
.zc .closing-modules .cm-item { opacity: .30; transition: opacity 700ms ease, color 700ms ease; }
.zc .closing-modules.is-in .cm-item { opacity: .85; color: var(--signal-ink); }
.zc .closing-modules.is-in .cm-item:nth-child(1) { transition-delay: .10s; }
.zc .closing-modules.is-in .cm-item:nth-child(2) { transition-delay: .28s; }
.zc .closing-modules.is-in .cm-item:nth-child(3) { transition-delay: .46s; }
.zc .closing-modules.is-in .cm-item:nth-child(4) { transition-delay: .64s; }
.zc .closing-modules.is-in .cm-item:nth-child(5) { transition-delay: .82s; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 960px) {
  .zc { padding: 44px 0 48px; }
  .zc-inner { gap: 16px; }
  .zc + .site-footer { padding-top: 56px; }
}
@media (max-width: 720px) {
  .zc { padding: 40px 0 40px; }
  .zc-spine { height: 30px; }
  .zc-actions { gap: 16px; }
  .zc-sub { margin-top: 18px; }
  /* aperture sizing is clamp-driven (width/height scale with vw), so no
     per-breakpoint override is needed here. */
}

/* reduced motion: static, fully-on, no sweep (incl. the JS-never-fires case).
   scroll-reveal.v1.js bails under reduced-motion, so .is-in is never added and
   the boot stagger can't run — light the rail explicitly here. The spine's own
   animations are still pinned as before. */
@media (prefers-reduced-motion: reduce) {
  .zc-spine-dot, .zc-spine-packet, .zc-spine-land { animation: none; }
  .zc-spine-packet { display: none; }
  .zc-bloom::after { display: none; }
  .zc .closing-modules .cm-item { opacity: .85; transition: none; }
}