/* ============================================================ ALCHEMY OBJECTS CSS — скопировано из замороженного референса research/alchemy-reference-8/alchemy-objects.68607a4196b4.css (снято 14 сентября 2026, релиз alchemy-hourglass-and-key-8, см. SOURCE.md там же). Копия дословная: стили .artifact-control/.artifact-float/ .artifact-pivot/.artifact-shine (песочные часы и ключ) и .project-invitation/.invitation-art/.invitation-copy (карточка- приглашение в сетке работ). Подключается в ПОСЛЕ home-alchemy.css и ДО alchemy-tune.css (см. buildHome() в build.mjs) — иначе .silver-services теряет новую ширину/отступ из этого файла обратно на старые значения темы. Руками не редактировать. ============================================================ */ /* Two objects, two gestures: turning time and opening a possibility. */ .artifact-control{display:block;position:relative;width:100%;aspect-ratio:1;padding:0;border:0;background:none;border-radius:26%;cursor:pointer;pointer-events:auto;touch-action:manipulation;perspective:800px;-webkit-user-select:none;user-select:none} .artifact-control:focus-visible{outline:2px solid #d0b584;outline-offset:5px} .artifact-float,.artifact-pivot{position:absolute;inset:0;display:block;transform-origin:50% 50%} .artifact-float{animation:artifact-sway 7s ease-in-out infinite;animation-play-state:paused} .artifact-pivot{inset:7%;filter:drop-shadow(0 16px 17px #0004);transition:filter .4s} .artifact-control img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none} .artifact-control .artifact-shine{filter:brightness(1.8);opacity:.4;clip-path:polygon(-45% 0,-25% 0,-60% 100%,-80% 100%);animation:artifact-reflection 7s ease-in-out infinite;animation-play-state:paused} .artifact-control.is-visible:not(.is-paused) .artifact-float,.artifact-control.is-visible:not(.is-paused) .artifact-shine{animation-play-state:running} .artifact-control:hover .artifact-pivot,.artifact-control:focus-visible .artifact-pivot{filter:drop-shadow(0 18px 19px #0004) drop-shadow(0 0 15px #cdb5d43d)} .silver-services{width:clamp(200px,20vw,285px);margin:20px 0 0 20px;--silver-angle:0deg} .artifact-key .artifact-float{animation-name:key-drift;animation-duration:6s} .artifact-key .artifact-shine{animation-delay:-3s} .project-invitation{grid-column:span 3;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #84618f75;border-radius:20px;padding:24px 30px 30px;background:radial-gradient(ellipse at 70% 18%,#78578330,transparent 65%),#392147;color:#f1e7f1;box-shadow:inset 0 1px 1px #fff1,0 12px 28px #0003} .invitation-art{display:flex;justify-content:center;align-items:center;flex:1;min-height:200px} .invitation-art .artifact-control{width:clamp(200px,21vw,280px);max-width:100%} .invitation-copy{position:relative} .invitation-copy .project-kicker{color:#c7acd1;font-size:12px;margin-bottom:10px} .invitation-copy h3{font-size:clamp(32px,3.2vw,48px);line-height:1.12;letter-spacing:-.045em} .invitation-copy h3 em{color:#d0b584;font-style:normal;font-weight:500} .invitation-copy>p:not(.project-kicker){margin-top:14px;color:#d8c9de;font-size:16px;line-height:1.6} .invitation-copy .button{margin-top:21px;background:linear-gradient(145deg,#d5bc91,#bba079);border-color:#e1cba8;color:#302137;box-shadow:inset 0 1px 1px #eee0c2,0 6px 18px #170d2040} .invitation-copy .button:hover{background:#dfc9a6} .invitation-copy .button:focus-visible{outline-color:#dcc596} @keyframes artifact-sway{0%,100%{transform:translateY(3px) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}} @keyframes key-drift{0%,100%{transform:translate3d(-4px,5px,0) rotate(-5deg)}50%{transform:translate3d(5px,-8px,0) rotate(5deg)}} @keyframes artifact-reflection{0%,58%{clip-path:polygon(-45% 0,-25% 0,-60% 100%,-80% 100%)}88%,100%{clip-path:polygon(170% 0,190% 0,155% 100%,135% 100%)}} @media(max-width:760px){ .services-section>.section-head{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:18px 8px;padding-right:0;margin-bottom:36px} .services-section>.section-head>div:first-child{grid-column:1/-1} .services-section .section-aside{grid-column:1;margin:0;font-size:14px} .silver-services{position:relative;grid-column:2;grid-row:2;align-self:center;right:auto;top:auto;width:128px;margin:0;opacity:1} .project-invitation{padding:20px 22px 26px} .invitation-art{min-height:170px} .invitation-art .artifact-control{width:210px} .invitation-copy .button{padding:15px 18px;gap:18px} } @media(max-width:540px){ .project-invitation{grid-column:span 6;border-radius:18px;padding:24px} .invitation-art{min-height:220px} .invitation-art .artifact-control{width:240px} .invitation-copy h3{font-size:clamp(32px,9vw,42px)} } @media(prefers-reduced-motion:reduce){ .artifact-float,.artifact-control .artifact-shine{animation:none!important} .artifact-control .artifact-shine{display:none} .artifact-pivot{transition:none} }