Blame for source/src/showcase.css

/* Motion and presentation layer. All diagrams are illustrative; source values stay intact. */
:root { --ease-out: cubic-bezier(.2,.75,.25,1); }
.site-header { gap:24px; height:82px; }
.site-header .brand { margin-right:auto; }
.site-header nav { gap:23px; order:2; }
.motion-control { order:3; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 0 8px 17px; background:none; border-left:1px solid var(--line); font-size:10px; white-space:nowrap; color:var(--muted); }
.motion-control>span:first-child { font-size:15px; line-height:1; color:var(--coral); }
.motion-control:disabled { opacity:1; }
.hero { gap:35px; grid-template-columns:.94fr 1.06fr; padding-top:50px; padding-bottom:48px; min-height:710px; }
.hero-copy { padding-bottom:10px; }
.hero h1 { font-size:clamp(58px,5.5vw,80px); letter-spacing:-2.7px; line-height:1.04; }
.hero-copy .eyebrow { font-size:9px; letter-spacing:1.9px; }
.hero-copy .eyebrow i { box-shadow:0 0 0 5px #b754350b; }
.hero-atlas-link { margin-top:32px; }
.hero-atlas-points i { animation:atlas-spark 4s ease-in-out infinite; }
.hero-atlas-points i:nth-child(3n) { animation-delay:-1.3s; }
.hero-atlas-points i:nth-child(3n + 1) { animation-delay:-2.6s; }
.hero-scene { container-type:inline-size; position:relative; min-width:0; width:100%; border:1px solid #d9dbcf; border-radius:18px; background:radial-gradient(ellipse at 62% 40%,#e9e3d376,transparent 58%),#f4f3ec; box-shadow:0 22px 64px -36px #56664c40; animation:hero-arrive 1s .12s var(--ease-out) both; }
.scene-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:20px 23px 0; color:var(--muted); }
.scene-topline .micro { font-size:8px; letter-spacing:1.45px; }
.scene-indicator { display:flex; gap:6px; align-items:center; font:7px var(--mono); letter-spacing:.5px; }
.scene-indicator i,.scene-provenance i { display:inline-block; width:5px; height:5px; background:#788e73; border-radius:50%; }
.scene-stage-art { position:relative; aspect-ratio:600/470; width:100%; isolation:isolate; }
.scene-grid { position:absolute; inset:2% 3%; z-index:-1; background-image:radial-gradient(#74836c2b .7px,transparent .7px); background-size:18px 18px; mask-image:radial-gradient(ellipse,#000 15%,transparent 70%); }
.scene-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.scene-orbit { stroke:#c3c7b95e; stroke-width:.8; }
.scene-orbit.outer { stroke-dasharray:2 9; transform-origin:340px 238px; animation:scene-orbit-turn 100s linear infinite; }
.path-base { stroke-width:1.1; opacity:.5; }
.path-stream { stroke-width:2.5; stroke-linecap:round; stroke-dasharray:10 200; animation:path-travel 7s linear infinite; }
.describe-path .path-stream { animation-delay:-2.3s; }
.design-path,.describe-path { transition:opacity .5s; }
.path-caption { position:absolute; font:italic 23px var(--serif); color:var(--coral); letter-spacing:.2px; transition:opacity .5s; }
.path-caption span { font:16px var(--sans, sans-serif); }
.design-caption { top:8.5%; left:41%; }
.describe-caption { bottom:5.5%; left:42%; color:var(--blue); }
.scene-molecule { position:absolute; left:26%; right:0; top:12%; height:70%; }
.scene-molecule .molecule { height:100%; }
.scene-language { position:absolute; left:4%; top:35%; width:36%; padding:16px 17px; background:#f4f8f4f5; border:1px solid #cbd8d4; border-radius:8px; box-shadow:0 8px 28px #304a4409; animation:card-drift 9s ease-in-out infinite; }
.scene-card-label { display:flex; align-items:center; gap:8px; font-size:7px; font-weight:600; letter-spacing:1px; color:var(--blue); white-space:nowrap; }
.scene-card-label>span:first-child { font:21px var(--serif); letter-spacing:-1px; }
.scene-language p { font:clamp(21px,4.8cqw,30px)/1.15 var(--serif); color:#365b70; margin:14px 0 16px; }
.scene-card-note { display:block; font:6.5px var(--mono); letter-spacing:1px; color:var(--muted); }
.language-spectrum { display:flex; align-items:end; height:13px; gap:3px; margin-bottom:12px; }
.language-spectrum i { background:#93aaa7; width:13px; height:4px; border-radius:1px; animation:language-wave 2.6s ease-in-out infinite alternate; transform-origin:bottom; }
.language-spectrum i:nth-child(2n) { height:9px; animation-delay:-1.7s; }
.language-spectrum i:nth-child(3n) { height:13px; animation-delay:-.8s; }
.scene-sequence { position:absolute; width:43%; left:52%; top:68%; border:1px solid #dcc4ad; border-radius:7px; background:#fcf5eafa; padding:12px 14px; box-shadow:0 8px 25px #8463400a; animation:card-drift 9s -4.5s ease-in-out infinite; }
.scene-sequence .scene-card-label { color:var(--coral); }
.scene-sequence .scene-card-label>span:first-child { font-size:22px; line-height:17px; }
.scene-residues { display:flex; flex-wrap:wrap; gap:3px; font:10px var(--mono); color:#8b5036; margin:10px 0; max-width:190px; }
.scene-residues>span { border-radius:2px; padding:2px; background:#f0e0cd; animation:residue-signal 5s var(--residue-delay) ease infinite; }
.scene-center-label { position:absolute; left:49%; top:54%; display:flex; align-items:center; gap:7px; font-size:6px; letter-spacing:1.2px; color:#69735e; pointer-events:none; }
.scene-center-label>span { font-size:20px; color:var(--coral); }
.scene-controls { position:relative; display:flex; gap:3px; background:#e6e8de; padding:4px; border:1px solid #dedfd2; border-radius:7px; margin:14px 24px 0; }
.scene-controls button { flex:1; padding:10px 6px; border-radius:4px; font-size:10px; background:none; transition:background .3s,box-shadow .3s,color .3s; white-space:nowrap; }
.scene-controls button[aria-pressed=true] { background:#fffdf6; box-shadow:0 1px 5px #26343312; color:var(--coral); }
.scene-controls button:hover { color:var(--coral); }
.scene-caption { min-height:43px; display:grid; place-content:center; margin:0 15px; text-align:center; color:var(--muted); font-size:9px; line-height:1.5; }
.scene-provenance { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:13px 20px; border-top:1px solid #dedfd2; font-size:8px; line-height:1.6; color:var(--muted); }
.scene-provenance>span { display:flex; align-items:center; gap:7px; }
.scene-provenance a { white-space:nowrap; color:var(--coral); }
.hero-scene[data-direction=design] .describe-path,.hero-scene[data-direction=design] .describe-caption,.hero-scene[data-direction=describe] .design-path,.hero-scene[data-direction=describe] .design-caption { opacity:.16; }
.hero-scene[data-direction=design] .scene-sequence { border-color:#b75435; box-shadow:0 0 0 4px #b7543508; }
.hero-scene[data-direction=describe] .scene-language { border-color:#3e6b88; box-shadow:0 0 0 4px #3e6b8808; }
.hero-scene[data-running=false] *,[data-in-view=false] *,html[data-motion=paused] *,html[data-motion=paused] *::before,html[data-motion=paused] *::after { animation-play-state:paused!important; }
html[data-motion=paused] { scroll-behavior:auto; }
/* Arrival remains readable when the visitor pauses animation during initial load. */
html[data-motion=paused] .hero-copy,html[data-motion=paused] .hero-scene,html[data-motion=paused] .key-case-example { animation:none; }
html[data-motion=paused] .scroll-reveal .section-heading,html[data-motion=paused] .scroll-reveal .atlas-intro,html[data-motion=paused] .scroll-reveal>h2 { opacity:1; transform:none; transition:none; }
.intro-strip { gap:0; padding:25px 0; }
.intro-strip>p { padding-right:24px; align-self:center; }
.intro-strip>a { position:relative; padding:6px 24px 6px 30px; transition:background .3s; }
.intro-strip>a:hover { background:#ebece256; }
.intro-strip>a>span { font-family:var(--mono); }
.intro-strip>a>small b { display:inline-block; transition:transform .3s; }
.intro-strip>a:hover b { transform:translate(3px,-3px); }
.section { padding-top:104px; }
.section-heading { position:relative; padding-top:22px; border-top:1px solid var(--line); }
.section-heading .eyebrow { margin-bottom:24px; }
.section-heading .eyebrow>span { display:inline-flex; width:25px; height:25px; border:1px solid #ddd5c5; border-radius:50%; align-items:center; justify-content:center; margin-right:4px; font-size:9px; }
.section-heading h2 { font-size:58px; }
.section-deck { border-left:1px solid var(--line); padding-left:23px; max-width:350px; }
.dual-experience { border-radius:12px; }
.dual-toolbar { flex-direction:column; align-items:stretch; gap:18px; padding:23px 30px 0; background:#f4f4ec; border-bottom:0; }
.dual-tour { justify-content:space-between; }
.dual-toolbar .segmented { padding:0; gap:0; background:none; border-radius:0; }
.dual-toolbar .segmented button { position:relative; display:flex; justify-content:center; align-items:center; gap:10px; border:0; border-bottom:2px solid #d9ded0; border-radius:0; padding:16px 12px; flex:1; font-size:12px; background:none; overflow:hidden; }
.dual-toolbar .segmented button[aria-pressed=true] { background:#fdfbf4; box-shadow:none; border-bottom-color:var(--coral); color:var(--coral); }
.tour-step-number { font:9px var(--mono); opacity:.65; }
.tour-step-progress { position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--coral); transform:scaleX(0); transform-origin:left; }
[data-tour-running=true] .segmented button[aria-pressed=true] .tour-step-progress { animation:tour-progress 6.5s linear infinite; }
.dual-diagram { position:relative; padding:40px 64px 35px; background-image:radial-gradient(#26343312 .65px,transparent .65px); background-size:19px 19px; }
.model-node { border-radius:7px; transition:opacity .4s,box-shadow .4s,transform .4s; }
.mode-t2p .node-text-encoder,.mode-t2p .node-protein-decoder,.mode-p2t .node-protein-encoder,.mode-p2t .node-text-decoder { transform:translateY(-3px); box-shadow:0 8px 25px #ba77581a; }
.flow path { stroke-width:1.5; }
.flow-particle { filter:drop-shadow(0 0 4px currentColor); }
.dual-explanation { padding:28px 36px; min-height:184px; }
.dual-explanation>div:first-child { animation:soft-arrive .4s var(--ease-out) both; }
.recorded-demo-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px 30px 0; border-top:1px solid var(--line); }
.recorded-demo-heading .micro { color:var(--coral); font-size:8px; }
.recorded-demo-heading p { font:25px var(--serif); }
.recorded-demo-heading>span:last-child { font-size:9px; color:var(--muted); }
.core-demo { padding-top:22px; }
.dual-experience>.pair-source { padding-bottom:25px; }
.dual-takeaways { gap:30px; }
.dual-takeaways>div { padding-top:16px; border-top:1px solid var(--line); }
/* Data remains visible; only chart geometry and headings animate on arrival. */
.section.is-visible .bar-track>span { animation:chart-grow 1s var(--ease-out) both; transform-origin:left; }
.section.is-visible .scale-bar-space i { animation:chart-rise 1s var(--ease-out) both; transform-origin:bottom; }
.section.is-visible .bar-row:nth-child(2) .bar-track>span { animation-delay:.06s; }
.section.is-visible .bar-row:nth-child(3) .bar-track>span { animation-delay:.12s; }
.section.is-visible .bar-row:nth-child(4) .bar-track>span { animation-delay:.18s; }
.section.is-visible .bar-row:nth-child(5) .bar-track>span { animation-delay:.24s; }
.scroll-reveal .atlas-intro { opacity:0; transform:translateY(22px); transition:opacity .8s,transform .9s var(--ease-out); }
.scroll-reveal.is-visible .atlas-intro { opacity:1; transform:none; }
.atlas-case { transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s; }
.atlas-case:hover { transform:translateY(-5px); box-shadow:0 12px 25px #3d4d3510; }
.atlas-case img { transition:transform .6s var(--ease-out); }
.atlas-case:hover img { transform:scale(1.05); }
.closing { position:relative; isolation:isolate; padding:85px 20px 55px; margin-top:110px; border-top:1px solid var(--line); overflow:hidden; }
.closing-loop { position:absolute; z-index:-1; font:340px/.8 var(--serif); color:#b4b8a215; left:50%; top:30px; transform:translateX(-50%); user-select:none; }
.closing .eyebrow { justify-content:center; color:var(--coral); }
.closing h2 { font-size:clamp(38px,4.4vw,64px); margin:22px 0 30px; }
.closing-actions { display:flex; justify-content:center; align-items:center; gap:28px; }
.closing-top { display:inline-block; margin-top:50px; font-size:10px; color:var(--muted); }
@keyframes path-travel { to { stroke-dashoffset:-420; } }
@keyframes scene-orbit-turn { to { transform:rotate(360deg); } }
@keyframes card-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes language-wave { to { transform:scaleY(.35); opacity:.45; } }
@keyframes residue-signal { 0%,60%,100% { background:#f0e0cd; } 20% { background:#dcb68f; } }
@keyframes atlas-spark { 0%,100% { transform:scale(1); } 50% { transform:scale(.6); opacity:.4; } }
@keyframes tour-progress { to { transform:scaleX(1); } }
@keyframes chart-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes chart-rise { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@media (min-width:1600px) { .hero { min-height:755px; padding-top:65px; padding-bottom:60px; } }
@media (max-width:1200px) {
 .site-header { gap:16px; } .site-header nav { gap:17px; font-size:12px; }
 .motion-control>span:last-child { display:none; }
 .hero { gap:25px; } .hero h1 { font-size:62px; }
 .scene-topline { padding:18px 17px 0; } .scene-indicator { font-size:6px; }
 .scene-card-label { font-size:6px; gap:6px; } .scene-language { padding:12px; }
 .scene-sequence { padding:10px; } .scene-residues { font-size:8px; }
 .scene-provenance { font-size:7px; padding:12px 15px; }
 .scene-center-label { font-size:5px; }
 .scene-controls { margin:12px 17px 0; }
 .intro-strip>a { padding-left:20px; padding-right:15px; }
 .dual-diagram { padding:32px 30px; }
}
@media (max-width:960px) and (min-width:781px) {
 .site-header { padding:0 28px; gap:13px; } .site-header .brand { font-size:21px; gap:6px; }
 .site-header nav { gap:13px; font-size:11px; } .nav-cta { padding:10px; gap:7px; }
 .motion-control { padding-left:10px; }
 .hero { gap:20px; padding:35px; min-height:625px; }
 .hero h1 { font-size:53px; letter-spacing:-1.6px; } .hero-copy .eyebrow { font-size:7px; letter-spacing:1.2px; }
 .hero-actions { flex-wrap:wrap; } .hero-atlas-link { margin-top:24px; }
 .scene-topline .micro { font-size:6px; } .scene-indicator { font-size:5px; gap:4px; }
 .scene-language p { font-size:22px; } .scene-card-label { font-size:5px; letter-spacing:.5px; }
 .scene-card-note { font-size:5px; letter-spacing:.6px; } .scene-sequence { top:67%; }
 .scene-provenance { flex-wrap:wrap; } .scene-controls button { font-size:9px; }
 .scene-caption { font-size:8px; } .path-caption { font-size:19px; }
 .scene-center-label { display:none; }
 .intro-strip>a>strong { font-size:12px; } .intro-strip>a>small { font-size:9px; }
 .recorded-demo-heading p { font-size:22px; } .recorded-demo-heading>span:last-child { display:none; }
}
@media (max-width:780px) {
 .site-header { height:72px; position:sticky; top:0; z-index:30; gap:16px; padding:0 24px; }
 .site-header nav { top:72px; padding:22px 24px; gap:20px; font-size:13px; max-height:calc(100dvh - 72px); overflow-y:auto; box-shadow:0 15px 20px #2634330a; }
 .menu-toggle { order:4; } .motion-control { border-left:0; padding:10px 0; }
 .hero { padding:38px 24px 32px; gap:30px; align-items:stretch; }
 .hero-copy { padding:0; } .hero h1 { font-size:clamp(50px,10.5vw,76px); letter-spacing:-1.8px; margin:22px 0; }
 .hero-copy .eyebrow { font-size:8px; letter-spacing:1.4px; }
 .hero-actions { margin-top:25px; } .hero-atlas-link { max-width:none; margin-top:24px; padding:15px 0; }
 .hero-scene { max-width:550px; align-self:center; border-radius:12px; }
 .scene-topline { padding:17px 15px 0; } .scene-topline .micro { font-size:7px; letter-spacing:1px; }
 .scene-indicator { font-size:6px; letter-spacing:0; }
 .scene-language { padding:12px; left:4%; width:38%; }
 .scene-language p { font-size:clamp(21px,5.2cqw,28px); margin:10px 0 12px; }
 .scene-card-label { font-size:6px; letter-spacing:.6px; }
 .scene-card-label>span:first-child { font-size:17px; }
 .scene-card-note { font-size:5.5px; letter-spacing:.6px; }
 .scene-sequence { top:68%; padding:10px; width:43%; }
 .scene-residues { font-size:8px; gap:2px; margin:7px 0; }
 .scene-residues>span { padding:1px 2px; }
 .language-spectrum { height:9px; margin-bottom:10px; } .language-spectrum i { width:9px; }
 .scene-center-label { left:49%; font-size:4.5px; gap:4px; letter-spacing:.6px; }
 .scene-center-label>span { font-size:16px; }
 .path-caption { font-size:20px; } .path-caption span { font-size:13px; }
 .scene-controls { margin:16px 14px 0; } .scene-controls button { font-size:9px; padding:11px 3px; }
 .scene-caption { font-size:8px; min-height:42px; margin:0 15px; }
 .scene-provenance { font-size:7px; padding:12px 14px; gap:5px; }
 .scene-provenance>span { gap:5px; }
 .intro-strip { padding:0; margin-top:0; gap:0 20px; }
 .intro-strip>p { padding:20px 0; font-size:23px; }
 .intro-strip>a { padding:20px 0; } .intro-strip>a:nth-child(2) { border-top:0; }
 .intro-strip>a>strong { font-size:12px; } .intro-strip>a>small { font-size:9px; }
 .section { padding-top:72px; } .section-heading { padding-top:20px; }
 .section-heading h2 { font-size:45px; } .section-deck { border:0; padding:0; }
 .dual-toolbar { padding:18px 14px 0; gap:12px; }
 .dual-tour .micro { font-size:6.5px; letter-spacing:.75px; }
 .dual-tour .text-button { font-size:9px; }
 .dual-toolbar .segmented button { font-size:9px; gap:5px; padding:13px 2px; }
 .tour-step-number { font-size:7px; }
 .dual-diagram { padding:25px 14px; }
 .model-node { padding:14px 8px; }
 .model-node strong { font-size:10px; }
 .modality-title h3 { font-size:12px; }
 .dual-explanation { padding:22px 18px; min-height:0; }
 .dual-explanation h3 { font-size:17px; } .dual-explanation p { font-size:11px; }
 .recorded-demo-heading { padding:23px 18px 0; display:block; }
 .recorded-demo-heading p { font-size:24px; margin-top:9px; }
 .recorded-demo-heading>span:last-child { display:block; margin-top:8px; font-size:8px; }
 .dual-experience>.pair-source { padding-bottom:20px; }
 .closing { padding:62px 0 40px; margin-top:75px; }
 .closing h2 { font-size:38px; line-height:1.12; }
 .closing-actions { gap:22px; flex-wrap:wrap; }
 .closing-top { margin-top:38px; }
}
@media (max-width:370px) {
 .site-header { gap:12px; padding:0 18px; } .site-header .brand { font-size:20px; }
 .hero { padding-left:18px; padding-right:18px; } .hero h1 { font-size:47px; }
 .hero-copy .eyebrow { font-size:6.5px; }
 .scene-topline { padding:14px 12px 0; } .scene-topline .micro { font-size:6px; }
 .scene-indicator { font-size:5px; } .scene-indicator i { width:4px; height:4px; }
 .scene-language { padding:9px; } .scene-language p { font-size:20px; }
 .scene-card-label { font-size:5px; } .scene-card-note { font-size:5px; }
 .scene-residues { font-size:7px; } .scene-center-label { display:none; }
 .scene-provenance { flex-wrap:wrap; font-size:7px; }
 .scene-controls button { font-size:8px; } .path-caption { font-size:18px; }
 .tour-step-number { display:none; } .dual-toolbar .segmented button { font-size:8px; }
 .section-heading h2 { font-size:40px; } .recorded-demo-heading p { font-size:22px; }
 .scene-language .language-spectrum { display:none; }
}
@media (prefers-reduced-motion:reduce) {
 .hero-scene *, .hero-atlas-points i { animation:none!important; }
 .scroll-reveal .atlas-intro { opacity:1; transform:none; }
 .atlas-case:hover,.atlas-case:hover img,.model-node { transform:none!important; }
}
/* Freeze ambient movement without hiding data or interrupting content arrival. */
html[data-motion=paused] .section .bar-track>span,html[data-motion=paused] .section .scale-bar-space i,html[data-motion=paused] .dual-explanation>div:first-child { animation:none; }
html[data-motion=paused] .section.is-visible .section-heading,html[data-motion=paused] .section.is-visible .atlas-intro { transition:none; }
.dual-tour { flex-direction:row; align-items:center; }
.scene-center-label { top:83%; left:6%; font-size:7px; letter-spacing:.8px; }
@media (min-width:1201px) { .hero-scene { max-width:620px; justify-self:end; } }
@media (max-width:780px) {
 .scene-language .language-spectrum { display:none; }
 .scene-language { top:34%; }
 .scene-language p { font-size:clamp(20px,5.2cqw,27px); }
 .describe-caption { left:29%; bottom:4%; }
 .scene-center-label { display:none; }
 .scene-sequence { top:65%; }
 .motion-control { min-width:36px; min-height:40px; }
}
.atlas-page-header .motion-control { margin-left:18px; }
.atlas-page-header>a:nth-child(2) { margin-left:auto; }
@media (max-width:780px) {
 .atlas-page-header { flex-wrap:wrap; gap:12px; }
 .atlas-page-header .motion-control { margin-left:0; }
 .atlas-page-header>a:nth-child(2) { font-size:10px; }
}