/* About: one floating 3D liquid-glass card in the sapphire world. Only what differs from portfolio-plate.css. Plate pixels. */

/* the world: the Portfolio's own light. A soft, blurred copy of the Portfolio scene for the colours and glow,
   the crisp Portfolio sky on top (streaks, network clusters, the real glass nav pills), and a cyan light behind the card */
.ab-world { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ab-world::before { content: ""; position: absolute; inset: -60px; background: url('../../assets/portfolio/plate/stage-empty.webp') center / 1706px 1112px no-repeat;
  filter: blur(34px) brightness(1.18) saturate(1.4); }
.ab-world::after { content: ""; position: absolute; left: 0; top: 0; width: 1586px; height: 262px; background: url('../../assets/portfolio/plate/stage-about.webp') 0 0 / 1586px 992px no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.ab-light { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 52% 62%, rgba(110,215,255,.5), rgba(45,150,255,.26) 50%, transparent 80%),
    radial-gradient(ellipse 34% 40% at 4% 82%, rgba(40,170,255,.55), transparent 70%),
    radial-gradient(ellipse 34% 40% at 96% 82%, rgba(40,170,255,.55), transparent 70%),
    radial-gradient(ellipse 120% 40% at 50% 100%, rgba(30,120,240,.35), transparent 70%),
    radial-gradient(ellipse 95% 90% at 50% 56%, transparent 66%, rgba(2,10,34,.38) 100%); }
.pp-fx { mix-blend-mode: screen; }

.ab-identity { top: 112px; }
.ab-identity h1 { font-size: 64px; }
.ab-role { margin: 14px 0 0; width: 660px; font: 400 21px/1.4 var(--serif); color: #f4ebe0; text-shadow: 0 0 18px rgba(255,200,150,.12); }

/* milestones: upright labels above the nodes of one straight lit line */
.ab-miles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ab-miles li { position: absolute; transform: translate(-50%, -150%); white-space: nowrap;
  font: 400 15px/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: rgba(236,244,252,.95); text-shadow: 0 0 12px rgba(40,110,220,.9), 0 1px 2px rgba(0,8,24,.9); }
.ab-miles li.next { color: #f6d7ad; text-shadow: 0 0 12px rgba(255,170,90,.7), 0 1px 2px rgba(0,8,24,.9); }

/* the floating card and its shadow */
.ab-float { position: absolute; left: 140px; top: 378px; width: 1306px; height: 568px; }
.ab-shadow { position: absolute; left: 8%; right: 8%; bottom: -46px; height: 40px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,4,16,.75), transparent 70%); filter: blur(8px); transform: scale(calc(1 - var(--fl, 0) * .04)); opacity: calc(.9 - var(--fl, 0) * .15); }
.ab-card { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 30px 46px 0; border-radius: 30px; transform-style: preserve-3d; will-change: transform;
  background: linear-gradient(180deg, rgba(4,14,36,.88), rgba(1,7,22,.9));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 0 0 9px rgba(150,200,255,.07), inset 0 1px 0 rgba(255,255,255,.5), inset 1px 0 0 rgba(255,255,255,.14), inset 0 -26px 46px -26px rgba(90,175,255,.45), inset 0 0 70px rgba(40,110,230,.12),
    0 0 0 1px rgba(170,215,255,.26), 0 50px 90px -20px rgba(0,3,12,.85), 0 0 90px -10px rgba(90,200,255,.65), 0 0 200px 30px rgba(40,160,255,.32); }
.ab-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 50% at 100% 100%, rgba(80,170,255,.08), transparent 60%); }
.ab-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 210deg, rgba(255,255,255,.95), rgba(140,195,255,.35) 25%, rgba(230,242,255,.8) 50%, rgba(80,140,230,.3) 75%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* glass thickness: inner ridge (bevel), top highlight, lower and side edges */
.ab-ridge { position: absolute; inset: 9px; border-radius: 22px; pointer-events: none;
  border: 1px solid rgba(200,230,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(0,8,24,.35), inset 0 0 18px rgba(120,190,255,.08); }
.ab-ridge::before { content: ""; position: absolute; left: 6%; right: 6%; top: -10px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 20%, rgba(220,240,255,.75) 55%, rgba(255,255,255,.95) 80%, transparent); filter: blur(.4px); box-shadow: 0 0 10px rgba(170,220,255,.8); }
.ab-ridge::after { content: ""; position: absolute; top: 14%; bottom: 14%; left: -10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(220,240,255,.7), transparent); box-shadow: 0 0 8px rgba(150,210,255,.7); }
.ab-edge { position: absolute; left: 14px; right: 14px; bottom: -9px; height: 12px; border-radius: 0 0 26px 26px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(150,200,255,.55), rgba(60,120,210,.35) 45%, rgba(10,30,70,.6));
  box-shadow: 0 1px 0 rgba(200,230,255,.5), 0 10px 22px rgba(0,4,14,.7), 0 0 26px rgba(80,160,255,.4); }
.ab-edge.side { left: auto; right: -9px; top: 16px; bottom: 6px; width: 12px; height: auto; border-radius: 0 26px 26px 0;
  background: linear-gradient(90deg, rgba(150,200,255,.5), rgba(60,120,210,.32) 45%, rgba(10,30,70,.6)); box-shadow: 1px 0 0 rgba(200,230,255,.45), 10px 0 22px rgba(0,4,14,.6); }

/* two facing pages, Kindle style */
.ab-bio { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.ab-bio .col + .col { border-left: 1px solid rgba(160,210,255,.14); padding-left: 56px; margin-left: -28px; }
.ab-bio p { margin: 0; font: 400 17.4px/1.52 var(--serif); color: rgba(238,244,251,.97); text-align: justify; -webkit-hyphens: none; hyphens: none; text-indent: 1.6em; }
.ab-bio .col:first-child p:first-child { text-indent: 0; }
.ab-bio .col:first-child p:first-child::first-letter { float: left; margin: 6px 10px 0 0; font: 400 74px/.82 var(--serif);
  background: linear-gradient(180deg, #fff3dc 10%, #f3cf9f 55%, #c98d4e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,190,120,.35)); }
.ab-bio .sc { font-variant: small-caps; letter-spacing: .05em; color: #fff; }
.ab-orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.ab-orn::before, .ab-orn::after { content: ""; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,207,159,.7)); }
.ab-orn::after { transform: scaleX(-1); }
.ab-orn i { width: 7px; height: 7px; border-radius: 50%; background: #fff1dc; box-shadow: 0 0 10px rgba(255,200,140,1); }

/* recruiter facts along the bottom of the card */
.ab-facts { position: relative; display: flex; justify-content: center; margin: 0 -46px; padding: 13px 0 15px; list-style: none; border-top: 1px solid rgba(160,210,255,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); border-radius: 0 0 30px 30px; }
.ab-facts li { position: relative; padding: 2px 22px; font: 400 17px/1.3 var(--serif); color: rgba(236,244,252,.95); white-space: nowrap; }
.ab-facts li + li::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: linear-gradient(180deg, transparent, rgba(170,215,255,.6), transparent); }
.ab-facts li:first-child { color: #f6d7ad; }
.pp-foot { top: 962px; }

/* phones and portrait tablets */
.pp-compact .ab-light, .pp-compact .ab-world { display: none; }
.pp-compact .ab-role { width: auto; font-size: 17px; }
.pp-compact .ab-miles { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 22px 0 6px; }
.pp-compact .ab-miles li { position: static; transform: none !important; font-size: 12px; }
.pp-compact .ab-float { position: relative; left: auto; top: auto; width: auto; height: auto; max-width: 680px; margin: 18px auto 0; }
.pp-compact .ab-shadow { display: none; }
.pp-compact .ab-card { position: relative; padding: 22px 20px 0; }
.pp-compact .ab-ridge { inset: 7px; border-radius: 18px; }
.pp-compact .ab-bio { display: block; }
.pp-compact .ab-bio .col + .col { border: 0; padding: 0; margin: 14px 0 0; }
.pp-compact .ab-bio p { font-size: 16.5px; line-height: 1.65; text-align: left; }
.pp-compact .ab-bio .col:first-child p:first-child::first-letter { font-size: 62px; }
.pp-compact .ab-facts { flex-wrap: wrap; margin: 16px -20px 0; }
.pp-compact .ab-facts li { font-size: 14px; padding: 4px 12px; }