/* Приложение Арии. Разметка экранов перенесена с холста «Экраны бота Арии» (ширина 390 px, как в макетах). */ @font-face { font-family: "KONSTRUKT"; src: url("/fonts/KONSTRUKT-Regular.otf") format("opentype"); font-display: swap; } @font-face { font-family: "SN Pro"; src: url("/fonts/SNPro-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; } @font-face { font-family: "SN Pro"; src: url("/fonts/SNPro-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "SN Pro"; src: url("/fonts/SNPro-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } * { box-sizing: border-box; } html, body { margin: 0; background: #EFEFEE; } body { font-family: "SN Pro", system-ui, sans-serif; color: #2F2D2D; -webkit-text-size-adjust: 100%; } a { color: #8A6F2F; } button, input { font-family: "SN Pro", sans-serif; } .screen { position: relative; width: 390px; min-height: 100vh; margin: 0 auto; background: #EFEFEE; display: flex; flex-direction: column; overflow-x: clip; } /* clip, а не hidden: иначе лента глав разбора не липнет к верху */ .content { display: flex; flex-direction: column; gap: 12px; padding: 22px 17px 24px; } h1, h2, h3 { font-weight: inherit; } .tag { height: 22px; padding: 0 9px; border-radius: 11px; box-sizing: border-box; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; background: #F7F6F3; } .tag--притяжение { background: #8E6262; color: #FFFFFF; } .tag--опора { background: #BF9F59; color: #2B2541; } .tag--трение { background: #FFFFFF; color: #8E6262; border: 1px solid #A87D7D; } .tag--зеркало { background: #FFFFFF; color: #8A6F2F; border: 1px solid #BF9F59; } .tag--дополняете { background: #2B2541; color: #F2E3C1; } .tag--сила { background: #BF9F59; color: #FFFFFF; } .tag--мечта { background: #2B2541; color: #F2E3C1; } .tag--урок { background: #FFFFFF; color: #8E6262; border: 1px solid #A87D7D; } .field input { width: 100%; height: 46px; border: 1px solid #D9D2C2; border-radius: 15px; padding: 0 14px; font-size: 16px; color: #2F2D2D; background: #FFFFFF; } .err { font-size: 12px; color: #C0504D; line-height: 16px; } .suggest[hidden] { display: none; } .suggest { display: flex; flex-direction: column; border: 1px solid #D9D2C2; border-radius: 15px; overflow: hidden; } .suggest button { border: none; border-bottom: 1px solid #EFEFEE; background: #FFFFFF; text-align: left; padding: 10px 14px; font-size: 14px; cursor: pointer; } .suggest button small { display: block; color: #797190; font-size: 11px; } details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } details[open] .when-closed, details:not([open]) .when-open { display: none; } details[open] .chev { transform: rotate(180deg); } .ic-svg { display: inline-block; vertical-align: middle; } /* сообщение после действия: появляется сверху и само уходит */ .flash { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50; width: 356px; box-sizing: border-box; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 15px; background: #2B2541; color: #F2E3C1; border: 1px solid #BF9F59; font-size: 14px; line-height: 18px; box-shadow: 0 8px 24px rgba(43,37,65,0.35); animation: flash-in .25s ease-out, flash-out .4s ease-in 3.6s forwards; } .flash--bad { border-color: #C0504D; } @keyframes flash-in { from { opacity: 0; transform: translate(-50%, -12px); } } @keyframes flash-out { to { opacity: 0; transform: translate(-50%, -12px); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .flash { animation: flash-out 0s 4s forwards; } } /* фокус с клавиатуры виден всегда (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, label:focus-within { outline: 2px solid #FFAE00; outline-offset: 2px; border-radius: 6px; } /* мелкие ссылки и значки: видимый размер прежний, область нажатия — не меньше 44×44 */ .hit { position: relative; } .hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } button[disabled] { opacity: .6; cursor: progress; } .suggest [aria-selected="true"] { background: #F7F6F3; } /* ============ Анимации (холст «Экраны бота Арии», ряд «Анимации»; правила — брендбук, «Анимации») ============ Двигаем только transform и opacity (и прорисовку линий), без тяжёлых теней и размытия в движении. При «Уменьшить движение» в системе всё происходит мгновенно. */ :root { --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.3,1.4,.5,1); } /* каждое нажатие отвечает: кнопки и ссылки-блоки чуть сжимаются (на строчные ссылки transform не действует) */ a, button, summary { -webkit-tap-highlight-color: transparent; } a, button { transition: transform 120ms ease-out, color 200ms, background-color 200ms; } button:not([disabled]):active, a:active { transform: scale(.96); } /* главная кнопка: по ней пробегает золотой блик */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(242,227,193,0.3), transparent); transform: translateX(-150%) skewX(-20deg); animation: a-shine 3.2s ease-in-out 1s infinite; } @keyframes a-shine { 0% { transform: translateX(-150%) skewX(-20deg); } 45%, 100% { transform: translateX(350%) skewX(-20deg); } } /* появление экрана: блоки выезжают снизу по очереди */ .stagger > * { animation: a-up 450ms var(--ease) backwards; } .stagger > *:nth-child(1) { animation-delay: 40ms; } .stagger > *:nth-child(2) { animation-delay: 90ms; } .stagger > *:nth-child(3) { animation-delay: 140ms; } .stagger > *:nth-child(4) { animation-delay: 190ms; } .stagger > *:nth-child(5) { animation-delay: 240ms; } .stagger > *:nth-child(6) { animation-delay: 290ms; } .stagger > *:nth-child(7) { animation-delay: 340ms; } .stagger > *:nth-child(n+8) { animation-delay: 380ms; } @keyframes a-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } /* звёзды в шапках мерцают */ .twinkle circle { animation: a-twinkle 3.2s ease-in-out infinite; } .twinkle circle:nth-child(2n) { animation-delay: 1.1s; } .twinkle circle:nth-child(3n) { animation-delay: 2s; } @keyframes a-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* поля: золотое свечение в фокусе, встряска и подсказка при ошибке */ input[type="text"], input[type="email"] { transition: border-color 200ms, box-shadow 250ms; } input[type="text"]:focus, input[type="email"]:focus { outline: none; border-color: #BF9F59 !important; box-shadow: 0 0 0 4px rgba(191,159,89,0.2); } input[aria-invalid="true"] { animation: a-shake 420ms ease-in-out 200ms; } @keyframes a-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } .err { animation: a-errin 250ms ease-out 300ms backwards; } @keyframes a-errin { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } } /* «Секунду…»: три точки по очереди */ .dots i { font-style: normal; animation: a-dot 1s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; } @keyframes a-dot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } } button.firing svg { animation: a-fire 600ms var(--spring) both; } @keyframes a-fire { to { transform: rotate(144deg) scale(1.45); } } /* раскрывающиеся блоки: содержимое выезжает, стрелка поворачивается с отскоком */ .chev { transition: transform 300ms var(--spring); } details[open] > *:not(summary) { animation: a-up 320ms var(--ease) backwards; } /* переключатели: кружок пружинит, дорожка вспыхивает */ [role="switch"] > span:last-child { transition: background-color 250ms; } [role="switch"] > span:last-child > span { transition: left 380ms var(--spring); } [role="switch"].sparked > span:last-child::after { content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 2px solid #FFC300; animation: a-spark 450ms ease-out both; pointer-events: none; } @keyframes a-spark { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.25); opacity: 0; } } /* колокольчик: качнулся, точка вспыхнула (раз за сессию, если есть новые) */ .bell-ring svg { transform-origin: 50% 10%; animation: a-wiggle 900ms ease-in-out 400ms; } .bell-ring > span { animation: a-pop 500ms var(--spring) 600ms backwards; } @keyframes a-wiggle { 0%, 100% { transform: none; } 15% { transform: rotate(18deg); } 30% { transform: rotate(-15deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } } @keyframes a-pop { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: none; } } /* меню, вкладки, фильтры, неделя: подсветка переезжает от прошлого выбора (app.js) */ .pill-ghost { position: absolute; pointer-events: none; z-index: -1; transition: transform 420ms var(--spring); } .pill-bounce svg { animation: a-bounce 500ms var(--spring) 250ms; } @keyframes a-bounce { 0%, 100% { transform: none; } 35% { transform: translateY(-7px) scale(1.12); } 70% { transform: translateY(1px); } } /* --- отметка дня --- */ .roll { display: block; height: 28px; overflow: hidden; } .roll > span { display: block; animation: a-roll 600ms var(--spring) 350ms both; } .roll > span > span { display: block; height: 28px; } @keyframes a-roll { to { transform: translateY(-28px); } } .bar-grow { animation: a-bar 900ms var(--ease) 200ms backwards; } @keyframes a-bar { from { width: var(--from); } } .star-burst { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none; } .star-burst .core { position: absolute; inset: 3px; width: 18px; height: 18px; animation: a-ignite 900ms cubic-bezier(.2,.9,.2,1) 700ms both; } .star-burst .rays { position: absolute; left: -10px; top: -10px; width: 44px; height: 44px; animation: a-rays 900ms ease-out 700ms both; } @keyframes a-ignite { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2.2); opacity: 1; } 70% { transform: scale(.85); } 100% { transform: scale(1); opacity: 1; } } @keyframes a-rays { 0% { transform: scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.7) rotate(25deg); opacity: 0; } } .unblur { animation: a-unblur 800ms ease-out 450ms backwards; } @keyframes a-unblur { from { filter: blur(5px); opacity: .4; } to { filter: none; opacity: 1; } } .pop-in { animation: a-popin 420ms var(--spring) 150ms backwards; } @keyframes a-popin { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } } .glow-once::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 10px rgba(255,195,0,0.25); animation: a-glow 900ms ease-out 400ms both; } .glow-once { position: relative; } @keyframes a-glow { from { opacity: 0; transform: scale(.96); } 40% { opacity: 1; } to { opacity: 0; transform: scale(1.04); } } /* --- окно подарка --- */ .gift-backdrop { animation: a-fade 300ms ease-out both; } .gift-sheet { animation: a-sheet 520ms cubic-bezier(.2,.9,.3,1) both; } .gift-medal { animation: a-medal 700ms cubic-bezier(.2,.9,.3,1.2) 200ms backwards; } .gift-rays { animation: a-spin 14s linear infinite; } .gift-conf { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: 0; animation: a-burst 1100ms cubic-bezier(.15,.8,.3,1) both; pointer-events: none; } .gift-rise { animation: a-up 400ms ease-out backwards; } .closing .gift-sheet { animation: a-sheet-out 280ms ease-in both; } .closing .gift-backdrop { animation: a-fade-out 280ms ease-in both; } @keyframes a-fade { from { opacity: 0; } } @keyframes a-fade-out { to { opacity: 0; } } @keyframes a-sheet { 0% { transform: translateY(100%); } 70% { transform: translateY(-3%); } 100% { transform: none; } } @keyframes a-sheet-out { to { transform: translateY(100%); } } @keyframes a-medal { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } } @keyframes a-spin { to { transform: rotate(360deg); } } @keyframes a-burst { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(160deg); opacity: 0; } } /* --- круг карты и созвездие --- */ .wheel-ring { stroke-dasharray: 604; animation: a-ring 1100ms cubic-bezier(.4,0,.2,1) 150ms backwards; } @keyframes a-ring { from { stroke-dashoffset: 604; } to { stroke-dashoffset: 0; } } .fade-late { animation: a-fade 500ms ease-out 800ms backwards; } .svg-pop { transform-box: fill-box; transform-origin: center; animation: a-planet 450ms var(--spring) backwards; } @keyframes a-planet { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.6); opacity: 1; } 100% { transform: none; } } .const-draw { stroke-dasharray: 1200; animation: a-const 1400ms var(--ease) 200ms backwards; } @keyframes a-const { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } } .star-new { animation-name: a-ignite; animation-duration: 900ms; } .next-star { transform-box: fill-box; transform-origin: center; animation: a-next 1.6s ease-in-out infinite; } @keyframes a-next { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } } /* --- Небо: свечение Луны дышит, Луна и текст проявляются, выбранный день выпрыгивает --- */ .moon-glow { animation: a-breathe 5s ease-in-out infinite; will-change: transform, opacity; } @keyframes a-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: .9; } } .moon-in { animation: a-moonin 420ms cubic-bezier(.25,.9,.3,1) backwards; } @keyframes a-moonin { from { transform: scale(.94); opacity: .35; } to { transform: none; opacity: 1; } } .stagger > .slide-in, .slide-in { animation: a-slide 340ms cubic-bezier(.25,.9,.3,1) backwards; } @keyframes a-slide { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } } .sel-pop { animation: a-popin 320ms var(--spring) backwards; } /* --- Совместимость: медальоны съезжаются, сердце выпрыгивает и бьётся --- */ .medal-left { animation: a-from-left 600ms var(--spring) 100ms backwards; } .medal-right { animation: a-from-right 600ms var(--spring) 100ms backwards; } @keyframes a-from-left { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes a-from-right { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } } .heart-beat { animation: a-pop 500ms var(--spring) 550ms backwards, a-beat 1.6s ease-in-out 1.2s infinite; } @keyframes a-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } } /* --- первый расчёт: планеты на орбитах, пока сервер считает небо --- */ .loader { position: fixed; inset: 0; z-index: 60; background: #2B2541; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; animation: a-fade 250ms ease-out both; } .loader .orbits { position: relative; width: 200px; height: 200px; } .loader .orbit { position: absolute; inset: 0; animation: a-spin 2.4s linear infinite; } .loader .orbit:nth-child(3) { animation-duration: 3.8s; animation-direction: reverse; } .loader .orbit:nth-child(4) { animation-duration: 5.6s; } .loader .say { font-size: 15px; color: #F2E3C1; } @media (hover: hover) { a[style*="box-shadow"] { transition: transform 200ms var(--ease), box-shadow 200ms; } a[style*="box-shadow"]:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .loader .orbit { animation: none !important; } } /* --- Таро (холст, ряд «Анимации» → «Карта дня Таро»): веер, подъём, переворот --- */ .fan-card { animation: a-fan 600ms var(--spring) backwards; } @keyframes a-fan { from { transform: rotate(0deg) translateY(30px); opacity: 0; } } .tcard { position: absolute; left: 140px; top: 290px; width: 110px; height: 182px; padding: 0; border: none; background: none; cursor: pointer; transform: var(--t); transform-origin: 50% 100%; transition: transform 560ms var(--ease), opacity 400ms ease-out; } button.tcard:not([disabled]):active { transform: var(--t); } /* общее «сжатие» не сбивает положение карты */ .tcard-free:hover { transform: var(--t) translateY(-14px); } .tcard:active .tflip { transform: scale(.97); } .tshuf, .tflip { display: block; width: 100%; height: 100%; transition: transform 200ms ease-out; } .tcard.opening .tflip { animation: a-opening 500ms var(--spring) both; } @keyframes a-opening { 40% { transform: scale(1.08); } 100% { transform: scale(.96) rotateY(70deg); opacity: .6; } } .shuffle-a .tshuf { animation: a-gather-a 650ms cubic-bezier(.4,0,.2,1) both; } .shuffle-b .tshuf { animation: a-gather-b 650ms cubic-bezier(.4,0,.2,1) both; } @keyframes a-gather-a { 0%, 100% { transform: none; } 45% { transform: translate(var(--gx), -30px) rotate(var(--gr)); } } @keyframes a-gather-b { 0%, 100% { transform: none; } 45% { transform: translate(var(--gx), -30px) rotate(var(--gr)); } } .halo { animation: a-halo 2.4s ease-in-out infinite; } .halo[hidden] { display: none; } @keyframes a-halo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } .halo-once { animation: a-fade-out 1.6s ease-out 900ms both; } .btn-ghost { height: 44px; padding: 0 18px; border-radius: 15px; border: 1px solid #BF9F59; background: transparent; color: #F2E3C1; font-size: 14px; font-weight: 500; cursor: pointer; } .btn-ghost:hover { background: rgba(191,159,89,0.15); } /* открытая карта: переворот рубашкой к лицу */ .flip-in { transform-style: preserve-3d; animation: a-flip 800ms cubic-bezier(.3,.7,.2,1) 250ms backwards; } .flip-in > span { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .flip-back { position: absolute; inset: 0; transform: rotateY(180deg); } @keyframes a-flip { from { transform: rotateY(-180deg) scale(1.1); } to { transform: none; } } /* ============ Купленные разборы: у каждого свой дизайн (холст, блок «Купленные разборы») ============ Анимация шапки идёт, пока у неё класс .play; кнопка ↻ снимает и ставит его заново (app.js, [data-replay]). */ .r-replay { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(242,227,193,0.5); background: rgba(242,227,193,0.08); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .r-hero.play .r-replay svg { animation: r-spin 600ms var(--ease) both; } @keyframes r-spin { from { transform: rotate(-360deg); } } @keyframes r-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes r-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes r-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } /* «Атлас» (полный разбор): круг прорисовывается, планеты садятся по одной */ .r-hero.play .at-draw { animation: r-draw 1100ms var(--ease) both; } .r-hero.play .at-fade { animation: r-fade 500ms var(--ease) both; } .at-sit { transform-box: fill-box; transform-origin: center; } .r-hero.play .at-sit { animation: r-sit 560ms var(--spring) both; } @keyframes r-sit { 0% { transform: translateY(-18px) scale(1.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } } .el-bar { transform-origin: left; animation: r-grow 700ms var(--ease) both; } @keyframes r-grow { from { transform: scaleX(0); } } .toc-pill { transition: transform 320ms var(--spring); } .toc a .toc-num { color: #8A6F2F; } .toc a .toc-label { color: #2F2D2D; } .toc a[aria-current="true"] .toc-num { color: #E6D7B9; } .toc a[aria-current="true"] .toc-label { color: #F2E3C1; } .toc a .toc-num, .toc a .toc-label { transition: color 240ms; } .h-tile { background: #FFFFFF; color: #8A6F2F; transition: transform 120ms ease-out, background-color 240ms ease-out; font-family: inherit; } .h-tile .h-num { color: #2F2D2D; } .h-tile .h-sub { color: #6A6380; } .h-tile[aria-pressed="true"] { background: #2B2541; color: #F2E3C1; } .h-tile[aria-pressed="true"] .h-num { color: #F2E3C1; } .h-tile[aria-pressed="true"] .h-sub { color: #E6D7B9; } .h-caret { transition: left 300ms var(--spring); } .h-panel:not([hidden]) { animation: r-rise 420ms var(--ease) both; } /* «Отношения»: орбиты Венеры и Марса сходятся, вспыхивает сердце; пункты — письма */ .love-orbits .lv-orb, .love-orbits .lv-flash, .love-orbits .lv-heart, .lv-beat { transform-box: fill-box; transform-origin: center; } .lv-venus { transform-origin: 160px 150px; } .lv-mars { transform-origin: 230px 150px; } .r-hero.play .lv-orb { animation: r-orbin 700ms var(--ease) both; } .r-hero.play .lv-venus { animation: r-orbv 1300ms cubic-bezier(.25,.9,.25,1) 250ms both; } .r-hero.play .lv-mars { animation: r-orbm 1300ms cubic-bezier(.25,.9,.25,1) 250ms both; } .r-hero.play .lv-rays { animation: r-rayout 900ms var(--ease) 1450ms both; } .r-hero.play .lv-flash { animation: r-flash 900ms var(--ease) 1400ms both; } .r-hero.play .lv-heart { animation: r-heart 900ms var(--spring) 1400ms both; } .lv-beat { animation: r-beat 3.2s ease-in-out 2.6s infinite; } .r-hero.play .lv-rise { animation: r-rise 500ms var(--ease) both; } @keyframes r-orbin { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes r-orbv { from { transform: rotate(-260deg); } to { transform: none; } } @keyframes r-orbm { from { transform: rotate(240deg); } to { transform: none; } } @keyframes r-rayout { 0% { stroke-dashoffset: 100; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes r-flash { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes r-heart { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.7); opacity: 1; } 70% { transform: scale(.9); } 100% { transform: none; opacity: 1; } } @keyframes r-beat { 0%, 100% { transform: none; } 12% { transform: scale(1.1); } 24% { transform: none; } 36% { transform: scale(1.06); } 48% { transform: none; } } .lv-rays line { stroke-dashoffset: 100; } .letter { animation: r-mail 520ms var(--ease) both; } @keyframes r-mail { from { transform: translateX(28px) rotate(2.5deg); opacity: 0; } to { transform: none; opacity: 1; } } .letter summary::-webkit-details-marker { display: none; } .lt-flap { transform-origin: 50% 0; transition: transform 420ms var(--spring); } .letter[open] .lt-flap { transform: scaleY(-1); } .lt-chev { transition: transform 300ms var(--spring); } .letter[open] .lt-chev { transform: rotate(180deg); } .letter[open] .lt-in { animation: r-letter 460ms var(--ease) both; } @keyframes r-letter { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lv-beat { animation: none !important; } } /* ---------- Десктоп и планшет (холст: «Десктоп · правила адаптации»; брендбук «Визуальный стиль» → «Десктоп») ---------- до 600 px — мобильная версия как есть; 600–1023 — узкая полоса меню со значками; от 1024 — левая колонка 260 px, верхняя строка 76 px, карточки 356 px раскладываются колонками. Шаблоны экранов уточняют раскладку сами (свои