/* ============================================================
   Founder card (#authority) · Magic UI Pixel Image port + layer act.
   Attribution and every changed value: assets/FOUNDER-PIXEL-SOURCE.md.
   The card keeps every word of copy; it only gets new wrappers, the
   pixel reveal on the portrait, a depth frame and the hero's plane
   language: far halo, one silk masked plane, floor fade to the CTA ground.
   ============================================================ */

/* ---------- depth bed: full section width, painted from inside .container ----------
   The act lives inside .container (the only markup this snippet owns), so it stretches
   to the viewport with inset-inline and back to the section edges with the section's own
   padding token. z-index -1 keeps it under everything in the container's stacking context. */
.founder-act{
  position:absolute; z-index:-1;
  inset-inline:calc(50% - 50vw);
  top:calc(-1 * var(--sec)); bottom:calc(-1 * var(--sec));
  overflow:hidden; pointer-events:none;
}
.founder-plane{
  position:absolute; pointer-events:none;
  will-change:transform;              /* moved per scroll frame by hero-layers.js; never transition it */
}
/* Far plane: soft lavender halo behind the portrait column, blurred as distance. */
.founder-plane-far{
  inset:-10% -10% -24%;
  background:radial-gradient(34% 44% at 90% 56%,rgba(167,139,250,.3),rgba(167,139,250,.1) 48%,transparent 72%);
  filter:blur(40px);
}
/* Mid plane: silk ribbons (a different frame than the hero) as a luminance mask over the
   lavender tint, sitting behind the portrait column and fading toward the copy. */
.founder-plane-mid{
  inset-inline-start:-4%; top:-18%; width:54%; height:136%;
  background:linear-gradient(165deg,#cdb9fb 0%,#9d7ff0 48%,#b9a3ea 100%);
  -webkit-mask-image:url("silk/f_100.webp"),linear-gradient(to left,#000 0%,#000 52%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:url("silk/f_100.webp"),linear-gradient(to left,#000 0%,#000 52%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-size:cover,100% 100%,100% 100%; mask-size:cover,100% 100%,100% 100%;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-composite:source-in,source-in; mask-composite:intersect,intersect;
  -webkit-mask-source-type:luminance; mask-mode:luminance,alpha,alpha;
  opacity:.62; filter:blur(2px);
}
/* Floor: fade to the closing CTA section's ground (#F7F4FF), above every plane. */
.founder-floor{
  position:absolute; left:0; right:0; bottom:0; height:min(320px,48%);
  background:linear-gradient(to bottom,rgba(247,244,255,0) 0%,rgba(247,244,255,.86) 62%,#F7F4FF 100%);
}
/* The section flows into the CTA through the floor, not a hairline; the legacy orb retires here. */
#authority:has(.founder-act) + .sec{border-top-color:transparent}
#authority:has(.founder-act) > .orb{display:none}

/* ---------- the card: a two column band that lets the sky through ---------- */
.founder-card{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:clamp(200px,24%,260px) minmax(0,1fr);
  gap:clamp(32px,4.2vw,64px);
  align-items:center;
  padding:clamp(28px,3.4vw,52px);
  border:1px solid var(--line,#E8E1FA);
  border-radius:var(--radius,22px);
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.92));
  box-shadow:0 8px 18px -4px rgba(60,30,120,.18),0 32px 64px -32px rgba(60,30,120,.2),inset 0 1px 0 rgba(255,255,255,.8);
}
/* Only while the logo marquee still sits directly above the card. */
.logo-marquee + .founder-act + .founder-card{margin-top:clamp(40px,5vw,64px)}

/* portrait column: inline start, so the founder looks into the copy */
.founder-fig{grid-column:1; grid-row:1; margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0}
.founder-body{grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0}

/* depth frame: an offset lavender plane behind the portrait (toward the outer edge and down)
   and a hairline plane the other way, so the photo sits between two sheets */
.founder-frame{position:relative; z-index:0; display:block; width:100%}
.founder-frame::before{
  content:""; position:absolute; z-index:-1;
  inset-inline-start:-20px; inset-inline-end:20px; top:20px; bottom:-20px;
  background:var(--lav-100,#EFE9FE);
  border:1px solid var(--lav-200,#DDD2FB);
  border-radius:var(--radius,22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.founder-frame::after{
  content:""; position:absolute; z-index:-2;
  inset-inline-start:18px; inset-inline-end:-18px; top:-18px; bottom:18px;
  border:1px solid var(--line,#E8E1FA);
  border-radius:var(--radius,22px);
  background:rgba(255,255,255,.5);
}
.founder-pix{
  position:relative; display:block; width:100%; aspect-ratio:4/5;
  border-radius:var(--radius,22px); overflow:hidden;
  background:var(--lav-050,#F7F4FF);
  box-shadow:0 24px 48px -18px rgba(60,30,120,.32),0 8px 18px -4px rgba(60,30,120,.18);
}
.founder-photo{display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:inherit}
.founder-edge{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.28);
}
.founder-cap{margin:24px 0 0; font-size:.85rem; color:var(--dim,#4A4566); text-align:center}

/* ---------- Pixel Image tiles (built by founder-pixel.js) ----------
   Every tile is a full size copy of the photo, clipped to its grid cell with the source's
   polygon; each tile fades in with its own random delay, and the whole set turns from
   grayscale to colour after colorRevealDelay. Timing values are written inline per tile. */
.founder-tiles{position:absolute; inset:0; display:block; border-radius:inherit}
.founder-tile{
  position:absolute; inset:0; display:block; opacity:0;
  transition-property:opacity;
  transition-timing-function:cubic-bezier(0,0,.2,1);   /* Tailwind ease-out */
}
.founder-tile img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:top;
  filter:grayscale(1);
  transition:filter 1000ms cubic-bezier(.4,0,.2,1);
}
.founder-pix.is-visible .founder-tile{opacity:1}
.founder-pix.is-color .founder-tile img{filter:grayscale(0)}
.founder-pix.has-tiles .founder-photo{opacity:0}
.founder-pix.is-done .founder-photo{opacity:1}

/* ---------- copy column ---------- */
.founder-body .label{display:inline-block}
.founder-body h3{
  margin:0; color:var(--ink,#1E1A33);
  font-size:clamp(1.35rem,2vw,1.7rem); font-weight:600; letter-spacing:-.01em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
}
.founder-body .role{font-size:.95rem; font-weight:400; color:var(--dim,#4A4566)}
.founder-body p{margin:0; font-size:1.0625rem; line-height:1.7; color:var(--ink,#1E1A33); max-width:none}
/* facts as a hairline list */
.founder-facts{list-style:none; margin:6px 0 0; padding:0; width:100%; display:flex; flex-direction:column}
.founder-facts li{
  display:flex; align-items:center; gap:14px; padding-block:12px;
  border-top:1px solid var(--line-strong,#DDD2FB);
  font-size:.9375rem; font-weight:500; color:var(--ink,#1E1A33);
}
.founder-facts li:last-child{border-bottom:1px solid var(--line-strong,#DDD2FB)}
.founder-facts li::before{content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--brand,#7C4DEE)}
.founder-body .link{margin-top:4px}

/* ---------- the card's own reveal (replaces .reveal; complete without JS) ---------- */
.founder-card.founder-armed .founder-item{opacity:0; transform:translate3d(0,12px,0) scale(.96)}
.founder-card.founder-armed.founder-in .founder-item{
  opacity:1; transform:none;
  transition:opacity .64s cubic-bezier(0,0,.2,1),transform .64s cubic-bezier(0,0,.2,1);
}
.founder-card.founder-in .founder-item:nth-child(2){transition-delay:70ms}
.founder-card.founder-in .founder-item:nth-child(3){transition-delay:140ms}
.founder-card.founder-in .founder-item:nth-child(4){transition-delay:210ms}
.founder-card.founder-in .founder-item:nth-child(5){transition-delay:280ms}

/* ---------- narrow: portrait above the copy ---------- */
@media (max-width:980px){
  .founder-card{grid-template-columns:minmax(0,1fr); gap:32px; padding:clamp(22px,4vw,36px)}
  .founder-fig{grid-column:1; grid-row:1; width:min(100%,260px); margin-inline:auto}
  .founder-body{grid-column:1; grid-row:2}
  .founder-frame::before{inset-inline-start:-14px; inset-inline-end:14px; top:14px; bottom:-14px}
  .founder-frame::after{inset-inline-start:12px; inset-inline-end:-12px; top:-12px; bottom:12px}
  .founder-cap{margin-top:16px}
}
@media (max-width:900px){
  .founder-plane-far{background:radial-gradient(80% 36% at 50% 22%,rgba(167,139,250,.44),rgba(167,139,250,.14) 50%,transparent 74%)}
  .founder-plane-mid{
    inset-inline-start:-20%; top:-6%; width:130%; height:64%; opacity:.5;
    -webkit-mask-image:url("silk/f_100.webp"),linear-gradient(to bottom,transparent 0%,#000 18%,#000 60%,transparent 100%),linear-gradient(to left,#000 0%,#000 100%);
    mask-image:url("silk/f_100.webp"),linear-gradient(to bottom,transparent 0%,#000 18%,#000 60%,transparent 100%),linear-gradient(to left,#000 0%,#000 100%);
  }
  .founder-floor{height:180px}
}

/* ---------- static final state under reduced motion and the site's motion toggle ---------- */
@media (prefers-reduced-motion:reduce){
  .founder-plane{transform:none !important}
  .founder-card .founder-item{opacity:1 !important; transform:none !important; transition:none !important}
  .founder-tile{opacity:1 !important; transition:none !important}
  .founder-tile img{filter:none !important; transition:none !important}
  .founder-pix .founder-photo{opacity:1 !important}
}
html.a11y-nomotion .founder-plane{transform:none !important}
html.a11y-nomotion .founder-card .founder-item{opacity:1 !important; transform:none !important}
html.a11y-nomotion .founder-tile{opacity:1 !important}
html.a11y-nomotion .founder-tile img{filter:none !important}
html.a11y-nomotion .founder-pix .founder-photo{opacity:1 !important}