refine heart breathing ripple rhythm
This commit is contained in:
leefer
+57
-46
@@ -10392,7 +10392,7 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
box-shadow: 0 0 14px 4px rgba(255, 180, 90, 0.35);
|
||||
}
|
||||
|
||||
.heart-incense i.is-burning { animation: heart-incense-burn 40s linear forwards; }
|
||||
.heart-incense i.is-burning { animation: heart-incense-burn 45s linear forwards; }
|
||||
|
||||
#heavenHeartPanel #beginCastingButton {
|
||||
opacity: 0.35;
|
||||
@@ -10788,7 +10788,10 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
transition-duration: 1ms !important;
|
||||
}
|
||||
|
||||
#heavenHeartPanel .heart-breath-enso,
|
||||
#heavenHeartPanel .heart-breath-ripple span {
|
||||
animation-name: heart-breath-ripple-soft !important;
|
||||
}
|
||||
|
||||
#heavenHeartPanel .breathing-phase { transition: none !important; }
|
||||
}
|
||||
|
||||
@@ -10982,68 +10985,71 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
/* Fixed ink enso: breath is expressed through tone and light, never geometry. */
|
||||
#heavenHeartPanel .heart-breath-enso {
|
||||
width: 176px;
|
||||
height: 176px;
|
||||
/* One nine-second breath: gather, suspend, then release as concentric ripples. */
|
||||
#heavenHeartPanel .heart-breath-ripple {
|
||||
width: 236px;
|
||||
height: 236px;
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
color: rgba(111, 76, 54, 0.7);
|
||||
opacity: 0.74;
|
||||
filter: drop-shadow(0 0 5px rgba(154, 91, 69, 0.06));
|
||||
transform: translate(-50%, -50%);
|
||||
transition: color 3.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 3.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 3.8s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
}
|
||||
|
||||
#heavenHeartPanel .heart-breath-enso::before {
|
||||
content: "";
|
||||
#heavenHeartPanel .heart-breath-ripple span {
|
||||
position: absolute;
|
||||
inset: 12px;
|
||||
border: 7px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: rgba(111, 76, 54, 0.28);
|
||||
border-radius: 49% 51% 47% 53% / 52% 48% 54% 46%;
|
||||
box-shadow: inset 0 0 0 1px rgba(253, 252, 248, 0.76);
|
||||
transform: rotate(-26deg);
|
||||
}
|
||||
|
||||
#heavenHeartPanel .heart-breath-enso::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 31px;
|
||||
border: 1px solid rgba(139, 112, 77, 0.13);
|
||||
border: 1px solid rgba(126, 77, 52, 0.5);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 18px rgba(194, 159, 90, 0.06);
|
||||
animation: heart-breath-ripple 9s cubic-bezier(0.37, 0.01, 0.22, 1) infinite;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
#heavenHeartPanel .heart-breath-enso > i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
#heavenHeartPanel .heart-breath-ripple span:nth-child(1) {
|
||||
inset: 76px;
|
||||
border-color: rgba(126, 77, 52, 0.66);
|
||||
}
|
||||
|
||||
#heavenHeartPanel .heart-breath-ripple span:nth-child(2) {
|
||||
inset: 45px;
|
||||
border-color: rgba(139, 112, 77, 0.38);
|
||||
}
|
||||
|
||||
#heavenHeartPanel .heart-breath-ripple span:nth-child(3) {
|
||||
inset: 13px;
|
||||
border-color: rgba(91, 99, 91, 0.24);
|
||||
}
|
||||
|
||||
#heavenHeartPanel .heart-breath-ripple > i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 31px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 1px solid rgba(126, 77, 52, 0.38);
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
box-shadow: 0 0 11px rgba(154, 91, 69, 0.18);
|
||||
background: rgba(253, 252, 248, 0.92);
|
||||
box-shadow: 0 0 0 6px rgba(194, 159, 90, 0.06), 0 0 20px rgba(154, 91, 69, 0.12);
|
||||
transform: translate(-50%, -50%);
|
||||
animation: heart-breath-ripple-core 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
#heavenHeartPanel .breathing-scene[data-phase="inhale"] .heart-breath-enso {
|
||||
color: rgba(126, 77, 52, 0.86);
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 0 13px rgba(194, 159, 90, 0.2));
|
||||
@keyframes heart-breath-ripple {
|
||||
0% { opacity: 0.12; transform: scale(0.7); }
|
||||
33.333% { opacity: 0.82; transform: scale(0.94); }
|
||||
55.556% { opacity: 0.82; transform: scale(0.94); }
|
||||
100% { opacity: 0; transform: scale(1.22); }
|
||||
}
|
||||
|
||||
#heavenHeartPanel .breathing-scene[data-phase="exhale"] .heart-breath-enso {
|
||||
color: rgba(91, 99, 91, 0.48);
|
||||
opacity: 0.5;
|
||||
filter: drop-shadow(0 0 3px rgba(91, 99, 91, 0.04));
|
||||
@keyframes heart-breath-ripple-core {
|
||||
0% { opacity: 0.38; box-shadow: 0 0 0 3px rgba(194, 159, 90, 0.04), 0 0 8px rgba(154, 91, 69, 0.06); }
|
||||
33.333%, 55.556% { opacity: 1; box-shadow: 0 0 0 9px rgba(194, 159, 90, 0.09), 0 0 26px rgba(154, 91, 69, 0.18); }
|
||||
100% { opacity: 0.3; box-shadow: 0 0 0 14px rgba(194, 159, 90, 0), 0 0 5px rgba(154, 91, 69, 0.03); }
|
||||
}
|
||||
|
||||
#heavenHeartPanel .breathing-scene[data-phase="settled"] .heart-breath-enso {
|
||||
color: rgba(111, 76, 54, 0.64);
|
||||
opacity: 0.72;
|
||||
filter: none;
|
||||
@keyframes heart-breath-ripple-soft {
|
||||
0%, 100% { opacity: 0.24; transform: scale(0.94); }
|
||||
33.333%, 55.556% { opacity: 0.68; transform: scale(0.94); }
|
||||
}
|
||||
|
||||
#heavenHeartPanel .breathing-phase {
|
||||
@@ -11055,7 +11061,12 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
transform: translateY(-50%);
|
||||
transition: color 3.8s ease, opacity 3.8s ease;
|
||||
transition: color 480ms ease, opacity 480ms ease;
|
||||
}
|
||||
|
||||
#heavenHeartPanel .breathing-scene[data-phase="hold"] .breathing-phase {
|
||||
color: #8a6b3e;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#heavenHeartPanel .breathing-scene[data-phase="exhale"] .breathing-phase {
|
||||
|
||||
Reference in New Issue
Block a user