/* XIONGDA — the live screen face (assets/xd-face.js): the hero render's screen and the Emotion section's head.
   Eyes: the render's sky blue in a cool-white bloom, as the cursor eyes (buddy.js). --u = 1% of the screen's width. */

/* a face: shapes lit by the gradient; cut-outs, strokes and lenses as in the Figma frames */
.xdf{display:block;width:100%;height:100%}
.xdf .mk *{fill:#fff;stroke:none}
.xdf .mk .s{fill:none;stroke:#fff}
.xdf .mk .k{fill:#000}
.xdf .ink .k{fill:none}
.xdf .ink .s{fill:none;stroke:#a9dcfc}
.xdf .ink .l{fill:#c6e4ff}

/* ---------------------------------------------------------------- hero: the face on the render's screen */
.xd-hero-img{position:relative}
.xd-hface{position:absolute;inset:0;pointer-events:none}
.xd-hface__panel{position:absolute;overflow:hidden;border-radius:calc(var(--u,1px) * 2.4);
  background:linear-gradient(180deg,#161a21 0%,#1b1f28 50%,#22252d 100%);
  box-shadow:0 0 calc(var(--u,1px) * .7) calc(var(--u,1px) * .35) #1a1d24}
.xd-hface__look,.xd-hface__face{position:absolute;inset:0}
.xd-hface__look{will-change:transform}
.xd-hface__face{transform-origin:50% 47.6%}
.xd-hface .xdf{filter:drop-shadow(0 0 calc(var(--u,1px) * .55) rgba(240,248,255,.8)) drop-shadow(0 0 calc(var(--u,1px) * 1.7) rgba(236,246,255,.42)) drop-shadow(0 0 calc(var(--u,1px) * 4.2) rgba(130,195,250,.3))}
.xd-hface__hit{position:absolute;pointer-events:auto;margin:0;padding:0;border:0;background:none;border-radius:42%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xd-hface__hit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* phones: the square crop keeps the whole head (and its face) in frame instead of cutting the ears */
@media(max-width:900px){.xd-hero-img.has-face img{object-position:50% 15%}}

/* ---------------------------------------------------------------- #emotion: head left (stays in view), words and controls right */
.xd-emo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"stage txt" "stage ctl";
  column-gap:clamp(28px,5vw,72px);row-gap:30px;align-items:start}
.xd-emo:not(.is-live){grid-template-columns:minmax(0,1fr);grid-template-areas:"txt"}
.xd-emo__txt{grid-area:txt;padding-top:clamp(0px,2vw,24px)}
.xd-emo__txt h2{font-size:clamp(26px,3vw,38px);line-height:1.08;margin-bottom:16px}
.xd-emo__txt p{color:var(--ink-2);font-size:16px;max-width:52ch;margin:0 0 12px;line-height:1.55}
.xd-emo__stage{grid-area:stage;position:sticky;top:calc(var(--nav,56px) + 32px)}
.xd-emo__ctl{grid-area:ctl}
.xd-emo__board{margin-top:clamp(48px,7vw,88px)}

/* the head: drawn after the render (white shell, black visor, ears, the orange light), the face on its screen */
.xd-stage{position:relative;display:block;width:100%;margin:0;padding:9% 9% 0;border:0;border-radius:var(--r,26px);background:var(--tile);color:inherit;
  overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xd-stage__in{position:relative;display:block;width:100%;aspect-ratio:640/540;margin-bottom:-4%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.xd-stage:hover .xd-stage__in{transform:translateY(-4px)}
.xd-stage:active .xd-stage__in{transform:scale(.985);transition-duration:.12s}
.xd-stage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.xd-head{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 30px rgba(0,0,0,.08))}
[data-theme="dark"] .xd-head{filter:drop-shadow(0 18px 34px rgba(0,0,0,.55)) brightness(.96)}
.xd-screen{position:absolute;display:block;overflow:hidden;border-radius:calc(var(--u,3px) * 4.3)}
.xd-screen__look,.xd-screen__face,.xd-screen__glass{position:absolute;inset:0;display:block}
.xd-screen__look{will-change:transform}
.xd-screen__face{transform-origin:50% 46%}
.xd-screen .xdf{filter:drop-shadow(0 0 calc(var(--u,3px) * .45) rgba(240,248,255,.78)) drop-shadow(0 0 calc(var(--u,3px) * 1.5) rgba(236,246,255,.38)) drop-shadow(0 0 calc(var(--u,3px) * 3.6) rgba(130,195,250,.26))}
.xd-screen__glass{pointer-events:none;background:linear-gradient(162deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,0) 34%),
  radial-gradient(120% 90% at 50% 120%,rgba(0,0,0,.25),rgba(0,0,0,0) 60%)}

/* what it says / which face, and the hint (breathes; gone after the first touch) */
.xd-say{min-height:26px;margin:14px 0 0;text-align:center;font:600 17px/1.5 var(--display);letter-spacing:-.01em;color:var(--ink);
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.xd-say.on{opacity:1;transform:none}
.xd-say__n{margin-left:10px;font-size:13px;font-weight:500;color:var(--ink-2)}
.xd-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin:6px 0 0;font:600 12px var(--display);color:var(--ink-2);transition:opacity .6s ease}
.xd-hint i{flex:none;width:8px;height:8px;border-radius:50%;background:#5bb7f3;animation:xdBreathe 2.4s ease-out infinite}
.xd-emo.touched .xd-hint{opacity:0}
@keyframes xdBreathe{0%{box-shadow:0 0 0 0 rgba(91,183,243,.5)}70%,100%{box-shadow:0 0 0 9px rgba(91,183,243,0)}}

/* moments at work */
.xd-moments>b,.xd-lib__head b{display:block;font:600 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.xd-moments__row{display:flex;flex-wrap:wrap;gap:8px}
.xd-chip{margin:0;border:0;border-radius:999px;background:var(--tile);color:var(--ink);padding:9px 15px;font:600 14px/1.2 var(--display);cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .2s ease;-webkit-tap-highlight-color:transparent}
.xd-chip:hover{transform:translateY(-1px)}
.xd-chip[aria-pressed="true"]{background:#0b1018;color:#e6f6ff;box-shadow:0 0 0 3px rgba(91,183,243,.28),0 0 14px rgba(155,214,251,.35)}
[data-theme="dark"] .xd-chip[aria-pressed="true"]{background:#0e1622}
.xd-chip:focus-visible,.xd-thumb:focus-visible,.xd-lib__more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the full set */
.xd-lib{margin-top:32px}
.xd-lib__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.xd-lib__head span{font-size:13px;color:var(--ink-2)}
.xd-lib__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.xd-thumb{display:block;margin:0;padding:5% 6%;border:0;border-radius:10px;background:#0b1018;aspect-ratio:3/2;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.xd-thumb:hover{transform:translateY(-2px)}
.xd-thumb[aria-pressed="true"]{box-shadow:0 0 0 2px #5bb7f3,0 0 14px rgba(155,214,251,.45)}
.xd-thumb .xdf{pointer-events:none}
.xd-emo:not(.lib-open) .xd-thumb:nth-child(n+19){display:none}
.xd-lib__more{margin:12px 0 0;padding:6px 0;border:0;background:none;color:var(--accent);font:600 14px var(--display);cursor:pointer}
.xd-lib__more::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.xd-emo.lib-open .xd-lib__more::after{transform:translateY(0) rotate(-135deg)}

@media(max-width:900px){
  .xd-emo,.xd-emo.is-live{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "stage" "ctl";row-gap:22px}
  .xd-emo__txt{padding-top:0}
  .xd-emo__stage{position:relative;top:auto;max-width:520px;width:100%;justify-self:center}
  /* browsing the full set on a phone: the head stays at the top so each face shows as it is picked */
  .xd-emo.lib-open .xd-emo__stage{position:sticky;top:var(--nav,56px);z-index:2;max-width:none;padding:8px 0 6px;background:var(--bg);
    box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
  .xd-emo.lib-open .xd-stage{max-width:300px;margin:0 auto}
  .xd-emo.lib-open .xd-say{margin-top:8px}
  .xd-emo.lib-open .xd-hint{display:none}
  .xd-lib__grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .xd-emo:not(.lib-open) .xd-thumb:nth-child(n+17){display:none}
}
@media(max-width:560px){
  .xd-moments__row{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter,20px) * -1);padding:2px var(--gutter,20px) 6px;scrollbar-width:none}
  .xd-moments__row::-webkit-scrollbar{display:none}
  .xd-chip{flex:none}
  .xd-lib__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .xd-emo:not(.lib-open) .xd-thumb:nth-child(n+11){display:none}
  .xd-thumb{border-radius:8px}
}
@media(prefers-reduced-motion:reduce){
  .xd-hint i{animation:none}
  .xd-stage__in,.xd-stage:hover .xd-stage__in,.xd-stage:active .xd-stage__in,.xd-chip:hover,.xd-thumb:hover{transform:none;transition:none}
}