/* AMIN APAC - closer-binary.css, adapted from the reference's css/closer-binary.css
   (+ its share of css/pixel-ui.css, folded in here since it has no separate file
   of its own for this component) for this app. Pairs with public/js/closer-binary.js,
   which adds .closer-bin to the band once it runs; without the script the band stays
   the plain purple Tailwind closer, which is the reference's own no-JS fallback.

   What changed from the reference file, and why: the reference hangs off
   base.css (--sec-lg, --lavender, --plum, --fill, --lift and the whole .btn
   system). This app's Closer block is Tailwind, so the rules that only existed
   to re-point base.css tokens are written out against the block's own classes
   (.cb-cta, .cb-ghost) and the tokens are resolved here. The look is the
   reference's: the hero's ground rather than purple, so the page opens and
   closes in the same world; the headline in the hero's bold, tight voice; a
   soft white ring round the button the twelve streams land on.

   Specificity note: .closer-brand.closer-bin is two classes, so it beats the
   block's single-class Tailwind `bg-[#7A00DF]` without !important.

   A NAMING COLLISION, flagged so it isn't confused for a typo: "Binary" means
   two different things in the reference, and this file sits at the point they
   collide. (1) the HERO STYLE — which of three hero LAYOUTS is on the page
   (Binary/Miniature/Aerial); js/closer-binary.js adds .closer-bin only while
   that style is Binary. (2) the UI LOOK — Binary/3D/Pixel, the data-ui
   attribute this whole look-styling effort is about. This app only has the
   first kind of Binary (StreetHero; Miniature/Aerial were cut from scope), so
   .closer-bin is ALWAYS present here — there is no plain-purple fallback state
   to build. But inside this file, rules with no data-ui guard at all are NOT
   a "default" look: they are the shared foundation for BOTH the Binary UI
   look and the Pixel UI look. Only the 3D UI look (data-ui="round") replaces
   the button system wholesale. Keep that straight reading every rule below. */
.closer-bin {
  --cb-lavender: #d3b9ff;
  --cb-plum: #3a2364;
  position: relative;
  overflow: clip;
  isolation: isolate;
  /* --sec-lg - 40px (base.css's --sec-lg is clamp(72px,8.4vw,120px), already
     this block's own Tailwind py-[clamp(72px,8.4vw,120px)]): the note's
     border-top already reads as the gap, so the band's own bottom padding
     is trimmed under it instead of stacking on top (the reference's own
     comment: "the note sat over ~130px of nothing"). Unlayered, so it beats
     the Tailwind py- utility without needing !important. */
  padding-bottom: calc(clamp(72px, 8.4vw, 120px) - 40px);
}
/* the hero's stage, centred on the button: #1E1534 into --sea (hero-street.css) —
   shared by the Binary AND Pixel UI looks (see the header note above) */
.closer-brand.closer-bin {
  background: radial-gradient(70% 70% at 50% 58%, #1e1534 0%, #0d0a16 72%);
}
/* the copy sits over the streams (the reference lifts its .wrap the same way) */
.closer-bin > *:not(.cb-world) {
  position: relative;
  z-index: 1;
}
.cb-world {
  display: none;
}
.closer-bin .cb-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the headline in the hero's voice: bold and tight, like its H1 */
.closer-bin h2 {
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* an LED-board ground — 2px lavender squares on an 8px pitch, radially masked
   so it reads brightest round the button and falls off toward the edges.
   Shared by Binary and Pixel; removed outright in 3D (below), which gets its
   own floor instead. */
.closer-bin::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='2' height='2' fill='%23D3B9FF'/%3E%3C/svg%3E")
    3px 3px / 8px 8px repeat;
  opacity: 0.2;
  -webkit-mask-image: radial-gradient(42% 60% at 50% 58%, #000 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.28) 100%);
  mask-image: radial-gradient(42% 60% at 50% 58%, #000 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.28) 100%);
}

/* registered so hover's colour swap (background AND the box-shadow layers
   that reuse it) transition smoothly instead of snapping — looks like a
   no-op declaration, but hover will snap without it */
@property --cb-px {
  syntax: '<color>';
  inherits: true;
  initial-value: #fff;
}

/* =========================================================================
   The primary button (.cb-cta = the reference's .btn-on-dark) — richer than
   any other CTA in the app: real per-look colour (not just shape), a
   registered custom property driving a smooth face transition, a shape
   mechanism (box-shadow steps, not clip-path) used nowhere else on the site.

   This is also why it needs excluding from src/styles/btn-look.css's
   generic .btn treatment — see that file's own :not(.closer-bin .btn)
   guards, mirroring the reference's identical exclusion in pixel-ui.css.

   THE SHARED BLOCK BELOW HAS NO data-ui GUARD — it is Binary's AND Pixel's
   button (see the file header): a square, stepped-stair face via eight
   box-shadow layers (NOT clip-path — the reference is explicit that
   clip-path would also clip the soft glow sitting outside the box, which
   this shape must keep), a blinking block caret, a fade to lavender on
   hover. Binary only re-shapes it afterward (ring instead of stairs,
   brackets, a thinner caret, the ">" prompt restored). Pixel has NO
   override block at all: it simply IS this shared recipe, unchanged. */
.closer-bin .cb-cta {
  --cb-px: #fff;
  border-radius: 0;
  padding: 14px 16px 14px 18px; /* the stairs add ~8px visually beyond this */
  margin-inline: 8px; /* lines the stairs up with the copy edge when left-aligned (phone) */
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--cb-px);
  --cb-ring: 0 0 48px rgb(211 185 255 / 0.22);
  --cb-shadow:
    0 -4px 0 0 var(--cb-px),
    0 4px 0 0 var(--cb-px),
    -4px 0 0 0 var(--cb-px),
    4px 0 0 0 var(--cb-px),
    0 -12px 0 -4px var(--cb-px),
    0 12px 0 -4px var(--cb-px),
    -12px 0 0 -4px var(--cb-px),
    12px 0 0 -4px var(--cb-px),
    var(--cb-ring);
  box-shadow: var(--cb-shadow);
  transition:
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    --cb-px 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* the component's own Tailwind scaleX wipe is switched off — every look
   either replaces it (3D's sheen, below) or doesn't use a wipe at all */
.closer-bin .cb-cta::before {
  display: none;
}
.closer-brand.closer-bin .cb-cta:hover,
.closer-brand.closer-bin .cb-cta:focus-visible {
  --cb-px: var(--cb-lavender);
  background: var(--cb-px);
  color: var(--cb-plum);
  box-shadow: var(--cb-shadow);
  transform: translateY(-2px);
}
.closer-brand.closer-bin .cb-cta:active {
  transform: translateY(0);
}
.closer-bin .cb-cta:focus-visible {
  outline: 2px solid var(--cb-lavender);
  outline-offset: 12px;
}
/* a blinking block caret — Binary thins it to an underscore (below); 3D
   removes it outright */
.closer-bin .cb-cta::after {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.5em;
  vertical-align: -0.18em;
  background: currentColor;
  animation: cb-caret 1.06s steps(2, jump-none) infinite;
}
@keyframes cb-caret {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .closer-bin .cb-cta {
    transition: none;
  }
  .closer-bin .cb-cta::after {
    animation: none;
  }
  .closer-brand.closer-bin .cb-cta:hover,
  .closer-brand.closer-bin .cb-cta:focus-visible {
    transform: none;
  }
}

/* ---- Binary's shape: a ring instead of stairs, corner brackets, the ">"
   prompt restored, a thin underscore caret — not the tall block above ---- */
html:not([data-ui='round']):not([data-ui='pixel']) .closer-bin .cb-cta {
  --cb-shadow:
    0 0 0 6px rgb(255 255 255 / 0.06),
    0 0 48px rgb(211 185 255 / 0.22);
  box-shadow: var(--cb-shadow);
  border-radius: 2px;
  margin-inline: 0;
  padding: 15px 22px 15px 20px;
  /* corner brackets: four lavender L-ticks pushed OUT via border-image-
     outset, so the button's own size and place never move; they close in
     toward the face on hover/focus, as a selection frame would */
  border-style: solid;
  border-width: 0;
  border-color: transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M.75 9V.75H9M21 .75h8.25V9M29.25 21v8.25H21M9 29.25H.75V21' fill='none' stroke='%23D3B9FF' stroke-width='1.5'/%3E%3C/svg%3E");
  border-image-slice: 10;
  border-image-width: 10px;
  border-image-outset: 7px;
  border-image-repeat: stretch;
  transition:
    background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-image-outset 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
html:not([data-ui='round']):not([data-ui='pixel']) .closer-bin .cb-cta::before {
  display: inline;
  content: '>';
  position: static;
  inset: auto;
  z-index: auto;
  transform: none;
  background: none;
  margin-right: 0.65em;
  opacity: 0.55;
}
html:not([data-ui='round']):not([data-ui='pixel']) .closer-bin .cb-cta::after {
  width: 0.62em;
  height: 2px;
  vertical-align: baseline;
  margin-left: 0.4em;
}
html:not([data-ui='round']):not([data-ui='pixel']) .closer-bin .cb-cta:is(:hover, :focus-visible) {
  border-image-outset: 4px;
}
html:not([data-ui='round']):not([data-ui='pixel']) .closer-bin .cb-cta:active {
  border-image-outset: 2px;
  transition-duration: 90ms;
}

/* ---- 3D: the hero's own lit key — a pill again, not pixel stairs; a face
   lit from above, a halo, a sheen on hover in place of the colour fade ---- */
html[data-ui='round'] .closer-bin .cb-cta {
  --key-edge: color-mix(in srgb, var(--cb-lavender) 70%, var(--cb-plum));
  padding: 0 34px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  margin-inline: 0;
  font-family: var(--font, 'Libre Franklin', sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  background: linear-gradient(180deg, #fff 0%, #fff 45%, #efe7ff 100%);
  box-shadow:
    0 5px 0 0 var(--key-edge),
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 10px 24px -6px rgb(0 0 0 / 0.35),
    0 0 64px 6px rgb(211 185 255 / 0.32);
  transition:
    background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* the sheen IS shown here (the reverse of Binary/Pixel) — a diagonal light
   sweep in place of the colour fade, since a gradient face can't blend into
   a flat colour without snapping */
html[data-ui='round'] .closer-bin .cb-cta::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(211 185 255 / 0.6) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0s;
}
html[data-ui='round'] .closer-bin .cb-cta::after {
  display: none;
}
html[data-ui='round'] .closer-brand.closer-bin .cb-cta:is(:hover, :focus-visible)::before {
  transform: translateX(110%);
  transition: transform 700ms cubic-bezier(0.3, 0.6, 0.2, 1);
}
/* the WINNING hover recipe (the page's single most important CTA gets a
   wider halo than the generic 3D button elsewhere) — the face stays lit,
   not swapped for a flat colour */
html[data-ui='round'] .closer-brand.closer-bin .cb-cta:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #fff 0%, #fff 45%, #efe7ff 100%);
  color: var(--cb-plum);
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 0 var(--key-edge),
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 18px 32px -6px rgb(0 0 0 / 0.45),
    0 0 96px 14px rgb(211 185 255 / 0.48);
}
html[data-ui='round'] .closer-brand.closer-bin .cb-cta:active {
  transform: translateY(5px);
  transition-duration: 80ms;
  box-shadow:
    0 0 0 0 var(--key-edge),
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 4px 10px -4px rgb(0 0 0 / 0.3),
    0 0 40px 0 rgb(211 185 255 / 0.28);
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui='round'] .closer-bin .cb-cta {
    transition: none;
  }
  html[data-ui='round'] .closer-bin .cb-cta::before {
    display: none;
  }
  html[data-ui='round'] .closer-brand.closer-bin .cb-cta:is(:hover, :focus-visible) {
    transform: none;
  }
}

/* ---- the background, per look ------------------------------------------
   Binary and Pixel share the dark radial gradient + LED grid set above; 3D
   swaps to a horizon-blue night (matching the hero's own 3D ground) and the
   grid is removed outright — the particle streams become points of light
   instead (public/js/closer-binary.js; out of scope for this styling pass,
   see that file's own header for the engine gap it still has). */
html[data-ui='round'] .closer-bin::before {
  display: none;
}
html[data-ui='round'] .closer-brand.closer-bin {
  background: radial-gradient(75% 85% at 50% 100%, #2e3a78 0%, #191c44 48%, #0e0c1c 100%);
}

/* ---- the secondary/ghost button (.cb-ghost = the reference's .btn-on-dark-
   ghost) — NOT used on the landing page today (this Closer renders only one
   action); the reference's three-look treatment for it is real but not
   built here. Port it if/when a second action is ever added to THIS closer,
   rather than speculatively now. The minimal override below (inherited from
   before this pass) just keeps it quiet beside a primary that now has a
   glow. */
.closer-bin .cb-ghost {
  box-shadow: none;
}

/* the caret/sheen pause when the section scrolls offscreen
   (public/js/closer-binary.js sets .anim-off) */
.closer-brand.anim-off *::after,
.closer-brand.anim-off *::before {
  animation-play-state: paused !important;
}