/* Light travels through the question, then settles beside the answer. */
.webdesign-faq details.faq-motion {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  margin: 10px 0;
  background: rgba(255,255,255,.018);
  transition: border-color .35s ease, background .35s ease, box-shadow .45s ease;
}
.webdesign-faq .faq-motion.is-expanded {
  background: linear-gradient(120deg,rgba(134,223,210,.15),rgba(255,255,255,.035) 58%,rgba(207,183,141,.11));
  border-color: rgba(164,234,218,.72);
  box-shadow: 0 10px 35px -14px rgba(112,221,204,.35),inset 0 1px rgba(255,255,255,.2);
}
.webdesign-faq .faq-motion summary {
  padding: 22px 72px 22px 24px;
  min-height: 76px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
  transition: color .25s ease;
}
.webdesign-faq details.faq-motion summary::after { content:none; }
.webdesign-faq .faq-motion summary:focus-visible { outline-offset:3px; }
.webdesign-faq .faq-motion .faq-question-label {
  display: block;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1),color .3s ease;
}
.webdesign-faq .faq-motion.is-expanded .faq-question-label {
  transform: translateX(4px);
  color:#e3fff8;
}
.faq-motion .faq-orbit {
  position:absolute;right:21px;top:50%;width:32px;height:32px;
  transform:translateY(-50%) rotate(0deg);
  border:1px solid rgba(255,255,255,.24);border-radius:50%;
  transition:transform .65s cubic-bezier(.2,.85,.2,1),border-color .3s,background .3s,box-shadow .3s;
  pointer-events:none;
}
.faq-motion .faq-orbit::before,.faq-motion .faq-orbit::after {
  content:'';position:absolute;background:#e7eeec;border-radius:2px;
  width:12px;height:1px;left:9px;top:14px;
}
.faq-motion .faq-orbit::after { transform:rotate(90deg); }
.faq-motion.is-expanded .faq-orbit {
  transform:translateY(-50%) rotate(225deg);
  border-color:rgba(165,234,218,.8);
  background:rgba(146,226,208,.09);
  box-shadow:0 0 18px rgba(146,226,208,.18);
}
.webdesign-faq .faq-motion .webdesign-faq-answer {
  position:relative;padding:0 30px 27px 38px;
  transform-origin:top center;
}
.webdesign-faq .faq-motion .webdesign-faq-answer::before {
  content:'';position:absolute;left:24px;top:4px;bottom:29px;width:2px;
  background:linear-gradient(#a4eada,rgba(164,234,218,.04));
  transform-origin:top;transform:scaleY(0);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
}
.webdesign-faq .faq-motion.is-expanded .webdesign-faq-answer::before { transform:scaleY(1); }
.webdesign-faq .faq-motion .webdesign-faq-answer::after {
  content:'';position:absolute;left:21px;top:4px;width:8px;height:8px;border-radius:50%;
  background:#f0fff9;box-shadow:0 0 12px 3px rgba(151,245,220,.8);opacity:0;pointer-events:none;
}
.webdesign-faq .faq-motion.is-opening .webdesign-faq-answer::after {animation:faq-rail 1100ms 120ms cubic-bezier(.25,.6,.3,1) both}
.faq-motion .faq-scan {position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}
.faq-motion .faq-scan::before {
  content:'';position:absolute;inset:-20% auto -20% 0;width:45%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(167,241,224,.12) 30%,rgba(242,255,250,.28) 52%,rgba(231,204,159,.2) 65%,transparent);
  transform:translateX(-140%) skewX(-18deg);
}
.faq-motion.is-opening .faq-scan::before {animation:faq-scan-pass 1250ms cubic-bezier(.18,.55,.25,1) both}
@keyframes faq-scan-pass {0%{transform:translateX(-140%) skewX(-18deg);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateX(360%) skewX(-18deg);opacity:0}}
@keyframes faq-rail {0%{top:4px;opacity:0}15%{opacity:1}75%{opacity:1}100%{top:calc(100% - 33px);opacity:0}}
.webdesign-faq .faq-motion .webdesign-faq-answer p { color:#d1d9d7; }
.faq-motion .faq-light {
  position:absolute;z-index:2;inset:0;border-radius:inherit;overflow:hidden;
  pointer-events:none;
}
.faq-motion .faq-light::before {
  content:'';position:absolute;top:0;left:0;width:44%;height:2px;
  opacity:0;transform:translateX(-110%);
  background:linear-gradient(90deg,transparent,#a4eada 42%,#fff 55%,#dfc491 70%,transparent);
  filter:drop-shadow(0 0 5px rgba(164,234,218,.8));
}
.faq-motion .faq-light::after {
  content:'';position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse at var(--faq-x,50%) 0%,rgba(164,234,218,.24),transparent 65%);
}
.faq-motion.is-opening .faq-light::before { animation:faq-light-travel 950ms cubic-bezier(.22,.6,.3,1) both; }
.faq-motion.is-opening .faq-light::after { animation:faq-light-bloom 850ms ease-out both; }
@keyframes faq-light-travel {
  0%{opacity:0;transform:translateX(-110%)}
  15%{opacity:1}
  75%{opacity:1}
  100%{opacity:0;transform:translateX(250%)}
}
@keyframes faq-light-bloom { 0%{opacity:0} 22%{opacity:1} 100%{opacity:0} }
@media(hover:hover) {
  .webdesign-faq .faq-motion:not(.is-expanded):hover {border-color:rgba(164,222,212,.35);background:rgba(255,255,255,.035)}
}
@media(max-width:820px) {
  .webdesign-faq .faq-motion summary {padding:20px 62px 20px 18px;min-height:76px}
  .faq-motion .faq-orbit {right:16px;width:30px;height:30px}
  .faq-motion .faq-orbit::before,.faq-motion .faq-orbit::after {left:8px;top:13px}
  .webdesign-faq .faq-motion .webdesign-faq-answer {padding:0 20px 24px 30px}
  .webdesign-faq .faq-motion .webdesign-faq-answer::before {left:18px;bottom:26px}
  .webdesign-faq .faq-motion .webdesign-faq-answer::after {left:15px}
  .webdesign-faq .faq-motion.is-expanded .faq-question-label {transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce) {
  .webdesign-faq .faq-motion,.webdesign-faq .faq-motion *,.webdesign-faq .faq-motion *::before,.webdesign-faq .faq-motion *::after {animation:none!important;transition:none!important}
}