/* Pitch//Black — referral gate
   Tokens from the site: pure black ground, white type, the lavender from the
   logo gradient and the "//" in the wordmark. */

:root {
  --pb-ground: #000;
  --pb-ink: #fff;
  --pb-accent: #a6a5c4;
  --pb-muted: rgb(255 255 255 / 0.5);
  --pb-faint: rgb(255 255 255 / 0.28);
  --pb-line: rgb(255 255 255 / 0.14);
  --pb-danger: #e5796f;
  --pb-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* N27, the site's typeface. Framer loads these on the homepage; declaring them
   here too means the standalone /invite/ page matches. Same files, so no double fetch. */
@font-face { font-family: "N27 Medium"; src: url("https://framerusercontent.com/assets/Cz7Kegu5ILFt8ddcXUwbH0W2sIM.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "N27 Bold"; src: url("https://framerusercontent.com/assets/28iyY1IBB3Wqw6cQ5kgLt47yIA4.woff2") format("woff2"); font-display: swap; }

.pb-gate {
  --stack: 26px;
  background: transparent;
  color: var(--pb-ink);
  /* the site's typeface: N27 Medium for text, N27 Bold for display */
  font-family: "N27 Medium", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  width: min(100%, 600px);
  margin-inline: auto;
}

.pb-gate > * + * { margin-top: var(--stack); }

/* ---- identity ---- */

.pb-gate__mark-wrap {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
}

.pb-gate__mark {
  display: block;
  width: 52px;
  height: 52px;
  opacity: 0.95;
  filter: drop-shadow(0 0 28px rgb(166 165 196 / 0.3));
}

/* a thin highlight, clipped to the mark's own silhouette */
.pb-gate__mark-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--pb-mark) center / contain no-repeat;
          mask: var(--pb-mark) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.7) 50%, transparent 70%);
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
}

/* when the popup opens, a soft highlight passes across the mark, then again
   every few seconds. No scale, no glow pulse -- just the shimmer. [hidden] is
   display:none, so each opening restarts it. */
.pb-overlay .pb-gate__mark-wrap::after { animation: pb-mark-sheen 5.5s ease-in-out 350ms infinite; }

/* easter egg: typing IYKYK sends one shimmer across the mark */
.pb-gate.is-knowing .pb-gate__mark-wrap::after { animation: pb-mark-sheen 2.4s ease-in-out 1; }

@keyframes pb-mark-sheen {
  0%        { opacity: 0; background-position: 130% 0; }
  6%        { opacity: 1; }
  30%       { opacity: 1; background-position: -30% 0; }
  36%, 100% { opacity: 0; background-position: -30% 0; }
}

.pb-gate__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;   /* flex container is full-width; centre its contents */
  gap: 12px;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.3em;
  text-indent: 0.3em;        /* offset the trailing tracking space */
  text-transform: uppercase;
  color: var(--pb-accent);
  margin: 0;
}
.pb-gate__eyebrow::before,
.pb-gate__eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pb-accent));
}
.pb-gate__eyebrow::after { transform: scaleX(-1); }

/* ---- copy ---- */

/* the locked panel is its own block, so the .pb-gate stack rule doesn't reach
   its children -- space them explicitly */
[data-gate="locked"] { width: 100%; }   /* else it shrinks to the headline and so does the field */
[data-gate="locked"] > * + * { margin-top: 18px; }
[data-gate="locked"] .pb-gate__title { margin-top: 26px; }

.pb-gate__title {
  font-family: "N27 Bold", Inter, system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.1vw, 2.65rem);
  font-weight: normal;   /* N27 Bold is its own family; a 700 here would be synthesised */
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.pb-gate__blurb {
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--pb-muted);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}

/* ---- the key field ---- */

.pb-gate__form {
  --h: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: calc(var(--stack) + 14px);
}

.pb-gate__field {
  width: 100%;
  height: var(--h);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  color: var(--pb-ink);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 1rem;              /* >= 16px, or iOS Safari zooms the page on focus */
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  padding: 0 20px;
  transition: border-color 180ms var(--pb-ease), background-color 180ms var(--pb-ease),
              box-shadow 180ms var(--pb-ease);
}
.pb-gate__field::placeholder { color: var(--pb-faint); letter-spacing: 0.2em; }
.pb-gate__field:focus-visible {
  outline: none;
  border-color: var(--pb-accent);
  background: rgb(166 165 196 / 0.08);
  box-shadow: 0 0 0 4px rgb(166 165 196 / 0.12);
}
.pb-gate__field:disabled { opacity: 0.45; }

.pb-gate__submit {
  flex-shrink: 0;
  height: var(--h);
  animation: pb-rise 420ms var(--pb-ease) both;
  padding: 0 32px;
  background: var(--pb-ink);
  color: var(--pb-ground);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-family: "N27 Bold", Inter, system-ui, sans-serif;
  font-weight: normal;
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 180ms var(--pb-ease), transform 180ms var(--pb-ease);
}
.pb-gate__submit:hover:not(:disabled) { opacity: 0.88; }
.pb-gate__submit:active:not(:disabled) { transform: scale(0.98); }
.pb-gate__submit:disabled { opacity: 0.4; cursor: progress; }
.pb-gate__submit:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 3px; }

/* key stretching takes a beat — show it rather than appear frozen */
.pb-gate.is-checking .pb-gate__field {
  animation: pb-pulse 1.1s var(--pb-ease) infinite;
}
@keyframes pb-pulse {
  0%, 100% { border-color: var(--pb-line); }
  50%      { border-color: var(--pb-accent); }
}

/* ---- feedback ---- */

.pb-gate__status {
  font-size: 0.85rem;
  min-height: 1.3em;
  margin-top: 14px;
  color: var(--pb-muted);
  letter-spacing: 0.01em;
}
.pb-gate__status[data-tone="error"] { color: var(--pb-danger); }

.pb-gate.is-invalid .pb-gate__form { animation: pb-shake 400ms var(--pb-ease); }
@keyframes pb-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

.pb-gate__footnote {
  font-size: 0.8rem;
  color: var(--pb-faint);
  margin-top: 6px;
}

/* ---- unlocked ---- */

.pb-gate__unlocked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack);
  animation: pb-reveal 760ms var(--pb-ease) both;
}

.pb-gate__contact {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-family: "N27 Bold", Inter, system-ui, sans-serif;
  font-weight: normal;
  letter-spacing: -0.012em;
  color: var(--pb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pb-accent);
  padding-bottom: 5px;
  transition: color 180ms var(--pb-ease);
}
.pb-gate__contact:hover { color: var(--pb-accent); }
.pb-gate__contact:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 4px; }

@keyframes pb-reveal {
  from { opacity: 0; transform: translateY(16px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: none; }
}

[hidden] { display: none !important; }

@media (max-width: 540px) {
  .pb-gate { --stack: 22px; }
  .pb-gate__field { letter-spacing: 0.18em; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-gate.is-invalid .pb-gate__form,
  .pb-gate.is-checking .pb-gate__field,
  .pb-gate__submit,
  .pb-gate__unlocked,
  .pb-overlay .pb-gate__mark-wrap::after,
  .pb-gate.is-knowing .pb-gate__mark-wrap::after { animation: none; }
}

/* ---------------------------------------------------------------
   Footer — the closing "Start a project" block (heading, Let's Collaborate,
   LinkedIn + envelope row) goes. visibility rather than display keeps its
   height, so the footer stays a full stage for the obsidian monogram.
   --------------------------------------------------------------- */

footer [data-framer-name="Text Content"] { visibility: hidden !important; }

/* ---------------------------------------------------------------
   Overlay — the gate shown in place of the site's mailto: links
   --------------------------------------------------------------- */

.pb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  /* solid: the site underneath has its own fixed chrome, and letting it bleed
     through put stray marks beside the gate and broke the composition */
  background:
    radial-gradient(120% 80% at 50% 38%, rgb(22 21 30 / 0.85), transparent 70%),
    var(--pb-ground);
  display: grid;
  place-items: center;
  padding: 48px 0;
  overflow-y: auto;
  animation: pb-fade 420ms var(--pb-ease) both;
}
.pb-overlay[hidden] { display: none !important; }

.pb-overlay__close {
  position: fixed;
  top: 24px;
  right: 26px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--pb-line);
  background: rgb(255 255 255 / 0.03);
  color: var(--pb-ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms var(--pb-ease), background-color 180ms var(--pb-ease),
              transform 180ms var(--pb-ease);
}
.pb-overlay__close:hover {
  border-color: var(--pb-accent);
  background: rgb(166 165 196 / 0.1);
  transform: rotate(90deg);
}
.pb-overlay__close:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 3px; }

@keyframes pb-rise {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pb-overlay { animation: none; }
  .pb-overlay__close:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Footer monogram — the obsidian mark, alone in the footer.
   Framer's backdrop is hidden only while the layer is present, so a script failure leaves the footer intact.
   --------------------------------------------------------------- */

.pb-footmark {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(24% 36% at 50% 50%, rgb(140 132 196 / 0.22), rgb(64 56 108 / 0.1) 55%, transparent 76%);
}
.pb-footmark canvas { width: 100%; height: 100%; display: block; }
footer:has(.pb-footmark) [data-framer-name="bg animation"] { display: none !important; }
/* the nav mark steps aside while the footer mark is on screen (fade set in the nav CSS) */
/* !important: Framer sets an inline opacity on the header for its entrance animation */
/* ---------------------------------------------------------------
   Easter eggs (eggs.js)
   --------------------------------------------------------------- */

/* Konami code: the whole site in negative; hue-rotate keeps the lavender lavender */
html.pb-konami { filter: invert(1) hue-rotate(180deg); }
.pb-toast {
  position: fixed; left: 0; right: 0; bottom: 28px; z-index: 2147483000; width: max-content; margin: 0 auto;
  padding: 10px 18px; border-radius: 999px; background: #000; color: #fff;
  border: 1px solid rgb(166 165 196 / 0.4);
  font: 13px/1.2 "N27 Medium", Inter, system-ui, sans-serif; letter-spacing: 0.04em;
  animation: pb-rise 420ms var(--pb-ease, ease) both; transition: opacity 0.5s ease;
}
.pb-toast.is-out { opacity: 0; }

/* the studio line, set by footer-mark.js in rows broken around the mark */
.pb-foot-copy {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  column-gap: clamp(28px, 3.4vw, 56px); padding: 0 var(--pb-foot-pad, 80px);
  color: #fff; font-family: "N27 Medium", Inter, system-ui, sans-serif;
  font-size: clamp(22px, 2.45vw, 40px); line-height: 1.16; letter-spacing: -0.015em;
}
.pb-foot-row { display: grid; grid-template-columns: 1fr var(--pb-mark-w, 280px) 1fr; column-gap: inherit; }
.pb-foot-row p { margin: 0; white-space: nowrap; }
.pb-foot-row p:first-child { grid-column: 1; text-align: right; }
.pb-foot-row p:last-child { grid-column: 3; text-align: left; }
/* words light up in reading order, a soft three-word edge, as the footer comes in */
.pb-foot-copy span {
  opacity: clamp(0.14, calc((var(--pb-reveal, 1) * (var(--n) + 3) - var(--i)) / 3), 1);
  transition: opacity 0.25s linear;
}
/* phones: the footer stacks, so the whole line sits centred above the mark */
.pb-foot-copy.is-stacked {
  display: block; inset: 28px 20px auto; padding: 0; text-align: center; max-width: 30ch; margin: 0 auto;
  font-size: 15px; line-height: 1.5; letter-spacing: 0;
}
.pb-foot-copy.is-stacked .pb-foot-row, .pb-foot-copy.is-stacked p { display: inline; white-space: normal; }
html.pb-at-footer header:has(> [data-framer-name="Nav Wrapper"]) { opacity: 0 !important; pointer-events: none; }

/* ---------------------------------------------------------------
   Hero — the glass cube (hero-cube.js) in place of Framer's hero.
   Framer's hero content is hidden only while the stage is mounted,
   so a script failure leaves the original hero in place.
   --------------------------------------------------------------- */

[data-framer-name="Hero Section"]:has(> .pb-hero) > :not(.pb-hero) { visibility: hidden !important; }
/* desktop: leave room for the logo ticker above the fold (reserve measured by hero-cube.js) */
@media (min-width: 810px) {
  [data-framer-name="Hero Section"]:has(> .pb-hero) { height: calc(100svh - var(--pb-fold-reserve, 95px)) !important; }
}

.pb-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  color: #fff;
  background: #000;
  font-family: "N27 Medium", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;   /* double-clicking the cube is an easter egg, not a text selection */
}
.pb-hero p { margin: 0; }
.pb-hero__wordmark {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 1;
  font-family: "N27 Bold", Arial, sans-serif; font-weight: normal; line-height: 0.82;
  letter-spacing: -0.02em; white-space: nowrap; font-size: 15vw;
}
/* the glow lives on a layer of its own so the "black" easter egg can fade it out */
.pb-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; transition: opacity 1.2s ease;
  background: radial-gradient(60% 55% at 50% 58%, rgb(38 34 56 / 0.55), transparent 70%);
}
.pb-hero__wordmark span {
  display: inline-block; color: var(--pb-accent, #a6a5c4);
  transition: color 1.2s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.6s ease;
}
/* easter egg: hovering the // leans it further into the logo's slant */
.pb-hero__wordmark.is-tilted span { transform: skewX(-14deg); text-shadow: 0 0 0.25em rgb(166 165 196 / 0.45); }
/* easter egg: type "black" and the lavender goes out -- Pitch  Black, literally */
.pb-hero.is-black::before { opacity: 0; }
.pb-hero.is-black .pb-hero__wordmark span { color: #000; }
.pb-hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; }
.pb-hero__fallback { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); width: 22vmin; z-index: 2; display: none; }
.pb-hero.is-static .pb-hero__fallback { display: block; }
@media (max-width: 640px) {
  .pb-hero__wordmark { top: 30%; }
}