/* Deft Digital Media — Home "04 / People": the founder minis (October 17, 2026). Ported from the approved prototype
   (sketches/founder-figures, v8 + v10 base): Camila left, Daniel right, 5 front angles with hard cuts and one settle
   pop, tap to bob, a clear glass bubble that opens into the real photo, a thick shaded Sunflower base and
   "Talk to me about" lines. Light per DECISIONS.md 5b: each stage traces its edge once as the pair rises in.
   Assets: https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/figures/web (source/prepare-figures.py). Script: scripts/people.js. */

.ddm-x .ddm-mini { margin:0; }
.ddm-x .ddm-mini:nth-child(2) { margin-top:72px; }
.ddm-x .ddm-mini-wrap { position:relative; container-type:inline-size; }
.ddm-x .ddm-mini-stage { position:relative; display:block; width:100%; aspect-ratio:3/4; border:0; padding:0; border-radius:var(--radius); overflow:hidden; cursor:grab; touch-action:pan-y; color:inherit; font:inherit;
  background:radial-gradient(120% 80% at 50% 30%,var(--paper),#E2E2DF); -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9), 0 1px 2px rgb(0 0 0/.05); }
.ddm-x .ddm-mini-stage:active { cursor:grabbing; }
.ddm-x .ddm-mini-tag { position:absolute; right:14px; top:14px; z-index:2; padding:5px 9px; border-radius:6px; background:var(--sun); font:500 .66rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.ddm-x .ddm-mini-deg { position:absolute; left:16px; top:16px; z-index:2; font:500 .7rem/1 var(--mono); letter-spacing:.08em; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.ddm-x .ddm-mini-rig { position:absolute; inset:0; will-change:transform; }
/* Sunflower puck: cylinder-shaded wall, satin top with a lit front bevel, soft ground shadow, ticks on the wall */
.ddm-x .ddm-mini-disc { position:absolute; left:50%; bottom:4.9%; width:62%; aspect-ratio:1/.295; translate:-50% 0; }
.ddm-x .ddm-mini-disc::before { content:""; position:absolute; inset:0; border-radius:50% / 42.4%;
  background:linear-gradient(180deg,rgb(0 0 0/0) 65%,rgb(0 0 0/.1)),linear-gradient(90deg,#CC9600 0%,#EBB000 16%,#FBC200 38%,#FFD02E 52%,#F6BC00 70%,#E1A800 88%,#C08D00 100%); }
.ddm-x .ddm-mini-disc::after { content:""; position:absolute; z-index:-1; left:2%; right:2%; top:58%; height:62%; border-radius:50%; background:radial-gradient(closest-side,rgb(0 0 0/.38),rgb(0 0 0/0)); filter:blur(4px); }
.ddm-x .ddm-mini-top { position:absolute; left:0; top:0; width:100%; aspect-ratio:4/1; border-radius:50%;
  background:radial-gradient(90% 120% at 38% 32%,#FFDB55 0%,#FFC800 46%,#F5BD00 100%);
  box-shadow:inset 0 -1.5px 0 rgb(255 255 255/.55), inset 0 2px 3px rgb(255 255 255/.35), inset 0 -6px 10px rgb(150 100 0/.18); }
.ddm-x .ddm-mini-disc svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ddm-x .ddm-mini-disc svg line { stroke:rgb(90 62 0/.5); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.ddm-x .ddm-mini-shadow { position:absolute; left:50%; bottom:9.6%; width:36%; aspect-ratio:5/1; translate:-50% 0; border-radius:50%; background:radial-gradient(closest-side,rgb(0 0 0/.3),rgb(0 0 0/0)); }
.ddm-x .ddm-mini-fig { position:absolute; left:50%; bottom:11%; width:76%; aspect-ratio:680/920; translate:-50% 0; transform-origin:50% 100%; }
.ddm-x .ddm-mini-fig img { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; user-select:none; -webkit-user-drag:none; opacity:0; }
.ddm-x .ddm-mini-fig img.is-shown { opacity:1; }
.ddm-x .ddm-mini-eye { position:absolute; width:2.6%; aspect-ratio:1; border-radius:50%; background:rgb(255 255 255/.95); box-shadow:0 0 4px rgb(255 255 255/.7); pointer-events:none; opacity:0; transition:opacity .25s; }

/* Glass bubble: clear until hovered, focused or tapped, then it opens into the real photo with the lens's light split */
.ddm-x .ddm-mini-irl { --d:17cqw; position:absolute; z-index:3; left:6cqw; top:13cqw; width:var(--d); height:var(--d); padding:0; border:0; border-radius:calc(var(--d) / 2); overflow:hidden; cursor:zoom-in; background:transparent;
  -webkit-backdrop-filter:saturate(130%); backdrop-filter:saturate(130%); box-shadow:0 12px 24px -14px rgb(0 0 0/.3);
  transition:width .7s var(--ease), height .7s var(--ease), border-radius .7s var(--ease), box-shadow .7s var(--ease); -webkit-tap-highlight-color:transparent; }
.ddm-x .ddm-mini-irl img { position:absolute; left:0; top:0; width:50cqw; height:calc(50cqw * 4 / 3); max-width:none; object-fit:cover; pointer-events:none;
  transform-origin:0 0; transform:translate(calc(var(--d) / 2 - var(--fx) * 50cqw * .62), calc(var(--d) / 2 - var(--fy) * 66.67cqw * .62)) scale(.62);
  opacity:0; transition:transform .7s var(--ease), opacity .45s var(--ease) .1s; }
.ddm-x .ddm-mini-irl::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 30% 20%,rgb(255 255 255/.55),rgb(255 255 255/0) 12%),radial-gradient(circle at 70% 86%,rgb(255 255 255/.25),rgb(255 255 255/0) 16%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), inset 0 -6px 12px rgb(0 0 0/.07), inset 0 4px 8px rgb(255 255 255/.25); transition:opacity .5s var(--ease); }
.ddm-x .ddm-mini-irl-tag { position:absolute; left:10px; bottom:10px; padding:5px 8px; border-radius:6px; background:var(--sun); color:var(--ink); font:500 .62rem/1 var(--mono); letter-spacing:.08em; opacity:0; translate:0 6px; transition:opacity .3s, translate .4s var(--ease); }
.ddm-x .ddm-mini-irl:is(:focus-visible,.is-open) { --d:50cqw; width:50cqw; height:calc(50cqw * 4 / 3); border-radius:16px; cursor:default; animation:ddm-split .8s var(--ease) 1; box-shadow:0 28px 50px -22px rgb(0 0 0/.5); }
.ddm-x .ddm-mini-irl:is(:focus-visible,.is-open) img { transform:none; opacity:1; }
.ddm-x .ddm-mini-irl:is(:focus-visible,.is-open)::after { opacity:.55; }
.ddm-x .ddm-mini-irl:is(:focus-visible,.is-open) .ddm-mini-irl-tag { opacity:1; translate:0 0; transition-delay:.35s; }
@media (hover:hover) {
  .ddm-x .ddm-mini-irl:hover { --d:50cqw; width:50cqw; height:calc(50cqw * 4 / 3); border-radius:16px; cursor:default; animation:ddm-split .8s var(--ease) 1; box-shadow:0 28px 50px -22px rgb(0 0 0/.5); }
  .ddm-x .ddm-mini-irl:hover img { transform:none; opacity:1; }
  .ddm-x .ddm-mini-irl:hover::after { opacity:.55; }
  .ddm-x .ddm-mini-irl:hover .ddm-mini-irl-tag { opacity:1; translate:0 0; transition-delay:.35s; }
}
/* Light splits into yellow and blue at the edge for a moment as it opens, like the hero lens */
@keyframes ddm-split { 0% { box-shadow:-5px 0 0 rgb(255 199 0/.75), 5px 0 0 rgb(59 91 255/.55), 0 14px 30px -14px rgb(0 0 0/.45) } 100% { box-shadow:0 0 0 rgb(255 199 0/0), 0 0 0 rgb(59 91 255/0), 0 28px 50px -22px rgb(0 0 0/.5) } }

/* Topic chips on the text side (Daniel, Oct 18): glass pills; the owner's name sits quietly at the end. Hover or focus turns
   that person's figure toward the text (scripts/people.js); the contour arc orbits the chip like the buttons. */
.ddm-x .ddm-people-head > p:not(.ddm-eyebrow) { max-width:40ch; }
.ddm-x .ddm-topics { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none; max-width:560px; }
.ddm-x .ddm-topic { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px 0 18px; border-radius:999px; color:var(--ink); font-size:.98rem; letter-spacing:-.01em;
  background:linear-gradient(180deg,rgb(255 255 255/.85),rgb(255 255 255/.45)); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.09), 0 8px 18px -12px rgb(0 0 0/.25);
  -webkit-backdrop-filter:blur(6px) saturate(130%); backdrop-filter:blur(6px) saturate(130%); transition:transform .45s var(--ease), box-shadow .3s var(--ease); }
.ddm-x .ddm-topic.ddm-contour::before { inset:-1px; padding:2px; }
.ddm-x .ddm-topic i { font:500 .62rem/1 var(--mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-left:10px; border-left:1px solid var(--line); transition:color .3s; }
.ddm-x .ddm-topic:hover, .ddm-x .ddm-topic:focus-visible { transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.14), 0 14px 24px -14px rgb(0 0 0/.35); }
.ddm-x .ddm-topic:hover i, .ddm-x .ddm-topic:focus-visible i { color:var(--ink); }

.ddm-x .ddm-mini figcaption { padding-top:16px; }
.ddm-x .ddm-mini h3 { font-size:1.25rem; letter-spacing:-.02em; }
.ddm-x .ddm-mini-role { margin:4px 0 0; font:500 .75rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-mini-talk { margin:10px 0 0; max-width:34ch; color:var(--ink-2); font-size:.95rem; line-height:1.45; }
.ddm-x .ddm-mini-talk b { font-weight:600; color:var(--ink); }

@media (max-width:820px) {
  .ddm-x .ddm-mini:nth-child(2) { margin-top:40px; }
  .ddm-x .ddm-mini-tag { font-size:.58rem; right:10px; top:10px; }
  .ddm-x .ddm-mini-deg { left:12px; top:12px; }
}
@media (max-width:520px) { .ddm-x .ddm-mini-deg { display:none; } }
@media (prefers-reduced-motion:reduce) { .ddm-x .ddm-topic { transition:none; } .ddm-x .ddm-topic:is(:hover,:focus-visible) { transform:none; } .ddm-x .ddm-mini-irl, .ddm-x .ddm-mini-irl img, .ddm-x .ddm-mini-irl-tag { animation:none; transition:none; } }
@media (prefers-reduced-transparency:reduce) { .ddm-x .ddm-topic { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; } .ddm-x .ddm-mini-irl { -webkit-backdrop-filter:none; backdrop-filter:none; } }
@media (forced-colors:active) { .ddm-x .ddm-mini-stage { border:1px solid CanvasText; } .ddm-x .ddm-mini-eye { display:none; } }
/* Link to the People page under the chips (Oct 18) */
.ddm-x .ddm-people-more { margin:26px 0 0; }