/*
 * Poletis voice crystal — copied with the same values from
 * poletis-marketing/design/reviews/2026-10-02-site-structure/assets/site.css
 * (itself carried over from crystal-experience.module.css).
 * Added here: a .leaf variant for the green homeowner views. Brand variant unchanged.
 */
@property --poletis-crystal-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.crystal { position: relative; display: block; aspect-ratio: 1; container-type: size; flex-shrink: 0; }
.crystal .halo { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, #75c9ff55, #3088ff18 35%, transparent 68%); animation: c-glow 4s ease-in-out infinite; }
.crystal .core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffffffc9, transparent 40%), conic-gradient(from var(--poletis-crystal-spin), #4796e5, #d9efff, #133e88, #469de9 62%, #d9efff, #4796e5); box-shadow: inset 0 -12cqi 24cqi #00133370, inset 0 8cqi 17cqi #ffffff4d, 0 12cqi 30cqi #0c428f66; animation: c-spin 20s linear infinite, c-breathe 4.4s ease-in-out infinite; }
.crystal .facets { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(118deg, transparent 38%, #ffffff38 39% 46%, transparent 47%), linear-gradient(28deg, transparent 54%, #ffffff29 55% 59%, transparent 60%), linear-gradient(-40deg, transparent 62%, #00183d30 63% 70%, transparent 71%); mix-blend-mode: screen; animation: c-facets 9s ease-in-out infinite alternate; }
.crystal .ripple { position: absolute; inset: -7%; border-radius: 50%; border: 1px solid #a5d8ff; animation: c-ripple 4s ease-out infinite; }
.crystal .speech { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3cqi; }
.crystal .speech i { display: block; width: 3cqi; height: 10cqi; background: #ffffffdf; border-radius: 20px; animation: c-voice 1.8s ease-in-out infinite; }
.crystal .speech i:nth-child(2), .crystal .speech i:nth-child(4) { height: 18cqi; animation-delay: -.25s; }
.crystal .speech i:nth-child(3) { height: 26cqi; animation-delay: -.6s; }
.crystal .speech i:nth-child(4) { animation-delay: -.9s; }
.crystal .speech i:nth-child(5) { animation-delay: -.4s; }
@keyframes c-spin { to { --poletis-crystal-spin: 360deg; } }
@keyframes c-breathe { 50% { transform: scale(1.035); } }
@keyframes c-facets { to { transform: rotate(18deg); } }
@keyframes c-glow { 50% { opacity: .65; transform: scale(1.12); } }
@keyframes c-ripple { 0% { transform: scale(1); opacity: .3; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes c-voice { 50% { transform: scaleY(.4); opacity: .65; } }
.crystal.brand .core { background: radial-gradient(circle at 34% 28%, #ffffff9c, transparent 43%), conic-gradient(from var(--poletis-crystal-spin), #2ba0d6, #fff, #0a1f2c, #2ba0d6 62%, #fff, #2ba0d6); box-shadow: inset 0 -12cqi 24cqi #0a1f2c70, inset 0 8cqi 17cqi #ffffff4d, 0 12cqi 30cqi #2ba0d624; }
.crystal.brand .halo { background: radial-gradient(circle, #2ba0d620, transparent 65%); }
.crystal.brand .ripple { border-color: #2ba0d660; }
.crystal.leaf .core { background: radial-gradient(circle at 34% 28%, #ffffffb0, transparent 42%), conic-gradient(from var(--poletis-crystal-spin), #5f9a4a, #eef6d8, #1d4a33, #7fb35a 62%, #eef6d8, #5f9a4a); box-shadow: inset 0 -12cqi 24cqi #12301f70, inset 0 8cqi 17cqi #ffffff4d, 0 12cqi 30cqi #2e5b3a33; }
.crystal.leaf .halo { background: radial-gradient(circle, #9cc36a30, transparent 65%); }
.crystal.leaf .ripple { border-color: #7fb35a66; }
.crystal.quiet .speech i { animation-play-state: paused; transform: scaleY(.55); }
@media (prefers-reduced-motion: reduce) {
  .crystal * { animation: none !important; }
  .crystal .ripple { opacity: .16; }
}