/* Native, dependency-free adaptations of the four selected React Bits interactions.
   Black cards, a visible grid and the 1:2 split are explicit user requirements. */
:root { --grid-ground:#0b0e11; --card-black:#000; --split-gap:24px; }
body { background:var(--grid-ground); }
.cursor-grid { position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0; }
main,.site-footer { position:relative;z-index:1; }
.site-header { background:#0b0e11; }
/* Global navigation uses the window edges; case content retains its reading width. */
.site-header .header-inner { width:100%;max-width:none;margin-inline:0;padding-inline:40px; }
/* The return anchor belongs to the case body, below the global menu. */
.case-page { padding-top:var(--header-height); }
.case-return-rail { position:sticky;top:var(--header-height);z-index:40;padding-block:12px;background:var(--grid-ground); }
.case-return-rail .back-link { display:inline-flex;align-items:center;gap:12px;min-height:52px;min-width:156px;padding:10px 20px;font-size:19px;line-height:1.4;font-weight:500;color:var(--ink);background:#19232b;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s; }
.case-return-rail .back-link>span:first-child { font-size:22px; }
.case-return-rail .back-link:hover { background:#26333e;color:var(--accent);text-decoration:none; }
.case-page .case-hero { margin-top:24px; }
.case-page .case-aside { top:calc(var(--header-height) + 100px); }
.case-page .case-stories .case-story { scroll-margin-top:76px; }

/* React Bits Electric Logo replaces the old image translation with local electricity. */
.hero-art.hero-art--electric { position:relative;transform:none;transition:none; }
.hero-art--electric>.hero-logo { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .25s; }
.hero-art--electric>.electric-logo-canvas { position:absolute;inset:0;width:100%;height:100%;display:block; }
.hero-art--electric:is([data-electric-state="ready"],[data-electric-state="paused"])>.hero-logo { opacity:0; }

/* The identity control follows the selected panel's black/white surface. */
.role-switch { background:var(--card-black);color:var(--ink);transition:background-color .2s,color .2s; }
.role-switch button { color:inherit; }
.role-switch:has([data-role="creator"][aria-pressed="true"]) { background:var(--paper);color:var(--on-paper); }
.role-switch:has([data-role="creator"][aria-pressed="true"]) button:focus-visible { outline-color:var(--link-on-paper); }

/* Opaque contact stage: symmetric vertical crop, full circular width. */
.contact-scene { --contact-stage-height:clamp(500px,68svh,640px);padding-bottom:0; }
.contact-stage { width:min(1200px,calc(100% - 160px));height:var(--contact-stage-height);min-height:0;margin-inline:auto;padding:0;background:var(--card-black);isolation:isolate; }
.motion-on .contact-scene { height:calc(var(--contact-stage-height) + 440px); }
.motion-on .contact-stage { top:calc(var(--header-height) + 24px);height:var(--contact-stage-height); }
.contact-stage .contact-rings,.motion-on .contact-stage .contact-rings { top:50%;left:50%;width:100%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible; }
.contact-orbit { transform-origin:600px 600px; }
.contact-orbit text { pointer-events:none;letter-spacing:-.035em; }
.contact-orbit-hit { fill:none;stroke:transparent;stroke-width:48;pointer-events:stroke; }
.contact-stage .contact-disc { width:440px;z-index:1;pointer-events:auto; }
.motion-on .contact-stage .contact-disc { transform:scale(calc(.28 + var(--contact-p)*.72)); }
.contact-stage .contact-content { width:360px;max-width:360px;padding:24px 20px; }
.contact-stage .contact-content h2 { display:flex;flex-direction:column;align-items:center;gap:0;font-weight:500;line-height:.9;margin:0 0 22px;letter-spacing:-.065em; }
.contact-stage .contact-name-first { display:block;font-size:78px;color:var(--on-paper);transform:translateX(-26px) rotate(-5deg); }
.contact-stage .contact-name-last { display:block;font-size:62px;color:var(--link-on-paper);transform:translate(50px,-4px) rotate(4deg); }
.contact-stage .contact-content>p { margin:0 0 0 18px;text-align:left;font-size:15px; }
.contact-stage .contact-intents { gap:22px;align-items:start;margin-top:12px; }
.contact-stage .contact-intents a:first-child { font-size:17px;transform:rotate(-3deg); }
.contact-stage .contact-intents a:last-child { font-size:14px;margin-top:14px;transform:rotate(3deg); }
.contact-stage .copy-email { display:block;margin:0 0 0 36px;font-size:13px; }
.contact-stage .contact-foot { z-index:3;left:24px;right:24px;bottom:16px;gap:24px;pointer-events:none;font-size:12px; }
.contact-stage .contact-foot>a,.contact-stage .contact-foot>span { background:var(--card-black);padding:4px 8px;pointer-events:auto; }
.projects-section,.projects-stage,.projects-flow { background:transparent; }
.projects-toolbar { padding-bottom:28px; }
/* taste-skill-ignore: hairline — user requested shared project boundaries. */
.projects-flow .project-entry { grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--split-gap);padding-block:24px;border-color:#7d929b66; }
.projects-flow .project-title-zone { background:transparent; }
/* taste-skill-ignore: hairline — user requested a pale divider between the two zones. */
.project-title-zone::after { content:"";position:absolute;right:calc(var(--split-gap) / -2);top:0;bottom:0;width:1px;background:#7d929b66; }
.projects-flow .project-heading { background:transparent;padding:0; }
.project-title-card { width:100%;background:var(--card-black);padding:32px 28px; }
.motion-on .projects-flow .project-heading { top:calc(var(--header-height) + 24px);height:calc(100svh - var(--header-height) - 48px); }
.projects-flow .project-content-zone { border:0;padding:24px 24px 40px;background:var(--card-black); }
.projects-flow .project-copy { margin-top:0;padding-top:40px; }
.project-introduction { margin-bottom:36px; }
.project-introduction .project-lead { font-size:24px;line-height:1.55;max-width:22em;margin-bottom:20px; }
.project-introduction .project-summary { font-size:16px;line-height:1.9;color:var(--muted); }
.projects-flow .project-detail-block { margin-top:40px; }
.projects-flow .project-detail-block h4 { font-size:21px;line-height:1.5; }
.projects-flow .project-detail-block p { font-size:16px;line-height:1.95; }

/* The expandable surface is clipped by its own frame, never by the left column. */
.scroll-expand-scene { --expand-p:1;position:relative;min-width:0; }
.scroll-expand-stage { position:relative;height:clamp(300px,52vw,570px); }
.expand-frame { position:relative;height:100%;width:100%;overflow:hidden;isolation:isolate;background:#182229; }
.expand-image-layer { height:100%;width:100%; }
.expand-image-layer .project-media,.expand-image-layer .image-zoom,.expand-image-layer .media-placeholder { position:relative;top:auto;width:100%;height:100%;max-width:none;aspect-ratio:auto; }
.expand-image-layer .project-media figcaption { display:none; }
.expand-image-layer .image-zoom { background:#11191d; }
.expand-image-layer .image-zoom img { width:100%;height:100%;object-fit:cover;object-position:left center; }
.expand-image-layer .image-zoom>span { position:absolute;bottom:0;right:0;background:#000c;color:var(--ink);font-size:12px; }
.expand-caption { display:none; }
.expand-ready .scroll-expand-scene { height:calc(var(--expand-height) + var(--expand-travel)); }
.expand-ready .scroll-expand-stage { position:sticky;top:calc(var(--header-height) + 24px);height:var(--expand-height); }
.expand-ready .expand-frame { transform:scale(calc(.76 + .24 * var(--expand-p)));border-radius:calc((1 - var(--expand-p)) * 20px);transform-origin:center center; }
.expand-ready .expand-image-layer { transform:scale(calc(1.12 - .12 * var(--expand-p)));filter:blur(calc((1 - var(--expand-p)) * 7px)); }
.expand-ready .expand-caption { position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;background:rgb(0 0 0 / calc(.5 * (1 - var(--expand-p))));opacity:calc(1 - var(--expand-p));transform:translateY(calc(var(--expand-p) * -36px));pointer-events:none; }
.expand-caption>span { font-size:clamp(26px,3vw,42px);font-weight:500;line-height:1.3;letter-spacing:-.04em; }
.expand-caption>p { font-size:15px;line-height:1.7;margin-top:20px;max-width:21em; }
.expand-caption .expand-scroll-hint { font-size:12px;font-weight:400;letter-spacing:0;margin-top:32px;color:var(--muted); }

/* Every project expands across the viewport, then brings the same image into the right column. */
.expand-ready .project-entry--cinematic { --split-p:0; }
.expand-ready .project-entry--cinematic .project-content-zone { position:relative;z-index:2;background:rgb(0 0 0 / var(--split-p)); }
.expand-ready .project-entry--cinematic .project-title-zone { z-index:1; }
.expand-ready .project-entry--cinematic .project-title-card { opacity:var(--title-alpha,0); }
.expand-ready .project-entry--cinematic .scroll-expand-scene { height:var(--opening-runway); }
.expand-ready .project-entry--cinematic .scroll-expand-stage { top:calc(var(--header-height) + var(--opening-inset));height:var(--opening-stage-height); }
.expand-ready .project-entry--cinematic .expand-frame { width:var(--opening-width);height:var(--opening-height);transform:translate3d(var(--opening-x),var(--opening-y),0);border-radius:var(--opening-radius); }
.expand-ready .project-entry--cinematic .expand-caption { opacity:var(--opening-caption-alpha);transform:translateY(var(--opening-caption-y));background:rgb(0 0 0 / var(--opening-veil)); }
.expand-ready .project-entry--cinematic .expand-caption>span { font-size:clamp(32px,4.5vw,64px); }
.expand-ready .project-entry--cinematic .expand-caption>p { font-size:clamp(15px,1.7vw,22px);max-width:26em; }
.expand-ready .project-entry--cinematic .expand-caption>.expand-scroll-hint { font-size:12px;letter-spacing:0;color:var(--ink); }
[data-expand-fit="contain"] .expand-frame,[data-expand-fit="contain"] .image-zoom { background:#000; }
[data-expand-fit="contain"] .expand-image-layer .image-zoom img { object-fit:contain; }

/* Focus-style Fade Content: a measured reveal, once per reading session. */
.fade-ready [data-fade].fade-pending { opacity:0;filter:blur(7px);transform:translate3d(0,24px,0); }
.fade-ready [data-fade].fade-entered { transition:opacity .85s ease,filter .85s ease,transform .85s cubic-bezier(.2,.65,.2,1); }
.fade-ready [data-fade="picture"].fade-pending { filter:blur(10px) grayscale(1);transform:translate3d(0,32px,0) scale(.97); }
[data-fade].fade-entered { opacity:1;filter:none;transform:none; }

/* Article gallery: semantic HTML cards laid on a draggable, curved track. */
.articles-scene { background:transparent;color:var(--ink);overflow:hidden; }
.articles-stage { padding-block:100px 56px; }
.articles-heading { align-items:center; }
.articles-heading>div:first-child { background:#000;padding:32px; }
.articles-heading h2 { font-size:clamp(30px,3vw,42px); }
.articles-heading p { color:var(--muted); }
.article-navigation button { background:#000;color:var(--ink); }
.article-navigation button:hover { background:#263a46; }
.articles-scene a:focus-visible,.articles-scene button:focus-visible,.articles-scene [tabindex]:focus-visible { outline-color:var(--accent); }
.article-viewport { overflow:visible;scroll-snap-type:none; }
.article-track { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:28px; }
.article-card {
  width:auto;
  color:var(--ink);
  background:rgba(27,33,39,.82);
  -webkit-backdrop-filter:blur(12px) saturate(110%); /* taste-skill-ignore: user requested subtle frosted glass. */
  backdrop-filter:blur(12px) saturate(110%); /* taste-skill-ignore: user requested subtle frosted glass. */
  border:1px solid rgba(224,235,244,.18); /* taste-skill-ignore: user requested visible card borders. */
  border-radius:12px;
  overflow:hidden;
}
.article-cover { background:#fff; }
.article-cover img { object-fit:contain; }
.article-copy { min-height:270px; }
.article-state { color:var(--accent); }
.article-copy p { color:var(--muted); }
.article-pending .pending-cover { background:#14202a;color:#456171; }
.article-pending .pending-cover.alternate { background:#1a252e; }
.pending-cover>span:last-child { color:var(--muted); }
.gallery-ready .article-viewport { position:relative;height:580px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;outline-offset:0; }
.gallery-ready .article-viewport.is-dragging { cursor:grabbing; }
.gallery-ready .article-track { position:absolute;inset:0;display:block;transform:none!important; }
.gallery-ready .article-card { position:absolute;left:50%;top:22px;width:var(--gallery-card-width,350px);margin:0;transform-origin:center center;will-change:transform; }
.gallery-ready .article-cover { height:150px;background:#fff; }
.gallery-ready .article-cover img { object-fit:contain; }
.gallery-ready .article-copy { height:390px;min-height:390px;padding:24px; }
.gallery-ready .article-copy h3 { font-size:22px;line-height:1.4;min-height:4.2em;margin-block:12px; }
.gallery-ready .article-cover img { -webkit-user-drag:none;pointer-events:none; }
.article-bottom { color:var(--muted); }
.article-bottom>span:first-child { display:inline; }
.article-mobile-hint { display:none; }

/* Reading pages share the same material: opaque content, exposed background. */
.case-hero { margin-top:calc(var(--header-height) + 32px);padding:40px;background:#000; }
.case-hero h1 { margin-top:20px; }
.case-media { background:#000;margin-top:24px;padding:24px; }
.case-body { gap:24px;padding-block:24px 72px;align-items:stretch; }
.case-aside { top:calc(var(--header-height) + 24px);align-self:start;background:#000;padding:32px; }
.case-stories { background:#000;padding:40px;min-width:0; }
.case-story:last-child { padding-bottom:0; }
.case-story h2 { font-size:28px; }
.next-case,.simple-contact { background:#000; }
.simple-contact { padding:48px 40px;margin-top:24px;margin-bottom:64px; }
.reader { background:#000;padding-inline:40px;margin-top:calc(var(--header-height) + 24px);padding-top:40px; }
:is(.case--shangzhi,.case--zhili,.case--live) .case-media .image-zoom img { max-height:none;object-fit:contain;background:#000; }
:is(.case--shangzhi,.case--zhili,.case--live) .case-media .image-zoom { background:#000; }
.case-demo-note { color:var(--muted);font-size:14px;line-height:1.8;margin-top:32px;max-width:64em; }
.case-demo-note a { display:inline-flex;align-items:center;min-height:44px;margin-left:16px; }
:is(.case--shangzhi,.case--zhili,.case--live) .case-aside nav { gap:8px; }
:is(.case--shangzhi,.case--zhili,.case--live) .case-aside nav a { display:flex;align-items:center;min-height:44px; }
.case-evidence { margin-top:28px;min-width:0; }
.case-evidence .image-zoom { background:#000; }
.case-evidence .image-zoom,:is(.case--shangzhi,.case--zhili,.case--live) .case-media .image-zoom,[data-expand-fit="contain"] .image-zoom { text-decoration:none; }
.case-evidence .image-zoom img { width:100%;height:auto; }
.case-evidence .image-zoom>span,:is(.case--shangzhi,.case--zhili,.case--live) .case-media .image-zoom>span { background:#192128;color:var(--ink);min-height:44px;display:flex;align-items:center;padding:10px 16px;font-size:13px; }
.case-evidence figcaption { color:var(--muted);font-size:13px;line-height:1.7;margin-top:12px; }
.case-story--visual { padding-bottom:72px; }
:is(.case--shangzhi,.case--zhili,.case--live) .case-story { scroll-margin-top:0; }
.image-original { display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--accent);margin-top:8px; }

@media(max-width:900px) {
  :root { --split-gap:20px; }
  .project-title-card { padding:24px 20px; }
  .projects-flow .project-content-zone { padding:20px 20px 32px; }
  .project-introduction .project-lead { font-size:22px; }
  .projects-flow .project-detail-block h4 { font-size:20px; }
  .case-aside { padding:24px; }
  .case-stories { padding:32px; }
  .gallery-ready .article-viewport { height:570px; }
}
@media(max-width:600px) {
  :root { --split-gap:12px; }
  .projects-flow .project-entry { padding-block:16px; }
  .project-title-card { padding:20px 10px; }
  .projects-flow .project-content-zone { padding:12px 12px 28px; }
  .motion-on .projects-flow .project-heading { top:calc(var(--header-height) + 16px);height:calc(100svh - var(--header-height) - 32px); }
  .projects-flow .project-kind,.projects-flow .project-status,.projects-flow .project-role { font-size:11px;line-height:1.7; }
  .projects-flow .project-heading h3 { font-size:23px;line-height:1.35;overflow-wrap:anywhere; }
  .projects-flow .project-values { margin-top:28px;gap:20px; }
  .projects-flow .project-values h4 { font-size:13px;line-height:1.7; }
  .projects-flow .project-copy { padding-top:28px; }
  .project-introduction .project-lead { font-size:19px;line-height:1.6; }
  .project-introduction .project-summary,.projects-flow .project-detail-block p { font-size:14px;line-height:1.9; }
  .projects-flow .project-detail-block h4 { font-size:17px;line-height:1.6; }
  .projects-flow .project-detail-block { margin-top:32px; }
  .scroll-expand-stage { height:280px; }
  .expand-ready .scroll-expand-stage { top:calc(var(--header-height) + 16px); }
  .expand-caption { padding:12px; }
  .expand-caption>span { font-size:24px; }
  .expand-caption>p { font-size:12px;margin-top:14px; }
  .expand-image-layer .placeholder-caption { left:12px;right:12px;bottom:16px; }
  .expand-image-layer .placeholder-caption>span:first-child { font-size:12px; }
  .articles-stage { padding-block:72px 32px; }
  .articles-heading { display:flex;gap:16px;align-items:end; }
  .articles-heading>div:first-child { padding:20px; }
  .articles-heading h2 { font-size:27px; }
  .articles-heading p { font-size:13px;margin-top:16px; }
  .article-navigation { gap:4px;flex-direction:column; }
  .article-navigation button { min-width:44px;min-height:44px; }
  .gallery-ready .article-viewport { height:520px;margin-inline:-12px;max-width:calc(100% + 24px); }
  .gallery-ready .article-cover { height:170px; }
  .gallery-ready .article-copy { padding:20px;min-height:250px; }
  .gallery-ready .article-copy h3 { font-size:22px; }
  .article-track { grid-template-columns:minmax(0,1fr); }
  .article-bottom { font-size:11px;gap:12px; }
  .case-hero { margin-top:calc(var(--header-height) + 20px);padding:24px; }
  .case-media { padding:12px; }
  .case-body { grid-template-columns:minmax(0,1fr);gap:16px;padding-top:16px; }
  .case-aside { position:static;padding:24px; }
  .case-stories { padding:28px 24px; }
  .case-story h2 { font-size:24px; }
  :is(.case--shangzhi,.case--zhili,.case--live) .case-aside nav { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px; }
  .case-demo-note a { margin-left:0;display:flex;width:max-content; }
  .case-evidence { margin-top:24px; }
  .simple-contact,.reader { padding-inline:24px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-fade] { opacity:1!important;filter:none!important;transform:none!important;transition:none!important; }
}