/* Motion and polish — Sslash */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

.solar-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn .solar-icon { transition: transform .25s ease; }
.btn:hover .solar-icon { transform: translateX(-2px); }

.icon-chip {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--primary-soft), #fff);
  color: var(--primary);
  border: 1px solid rgba(30,136,229,.12);
  box-shadow: 0 8px 20px rgba(30,136,229,.08);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, color .2s;
}
.icon-chip.accent {
  background: linear-gradient(145deg, var(--accent-soft), #fff);
  color: var(--accent-dark);
  border-color: rgba(245,166,35,.18);
  box-shadow: 0 8px 20px rgba(245,166,35,.1);
}
.icon-chip.lg { width: 64px; height: 64px; border-radius: 20px; }
.card-hover:hover .icon-chip {
  transform: translateY(-3px) scale(1.04);
}

.float-y {
  animation: floatY 5.5s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.pulse-soft {
  animation: pulseSoft 3.2s ease-in-out infinite;
}
@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,136,229,.25); }
  50% { box-shadow: 0 0 0 12px rgba(30,136,229,0); }
}

.gradient-text {
  background: linear-gradient(120deg, var(--primary) 10%, var(--cyan) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .42;
  pointer-events: none;
  animation: orbDrift 12s ease-in-out infinite alternate;
}
@keyframes orbDrift {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(30px,-20px) scale(1.08); }
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1), padding .35s ease;
  padding: 0 1.2rem;
}
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  padding-bottom: 1.1rem;
}
.faq-q .chev {
  transition: transform .3s ease;
  color: var(--muted);
}
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--primary); }

.side-nav a .solar-icon {
  opacity: .85;
  transition: transform .25s ease, opacity .2s;
}
.side-nav a:hover .solar-icon,
.side-nav a.active .solar-icon {
  opacity: 1;
  transform: scale(1.08);
}

.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  opacity: .7;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.stat-card .stat-icon {
  position: absolute;
  left: 1rem; top: 1rem;
  opacity: .18;
  color: var(--primary);
}

.plan-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11,31,51,.1);
}
.plan-card.featured:hover { transform: translateY(-6px) scale(1.02); }

.domain-chip {
  transition: transform .3s ease, border-color .25s, box-shadow .3s;
}
.domain-chip:hover { transform: translateY(-4px) scale(1.03); }

.contact-link {
  will-change: transform;
}
.contact-social-pill {
  will-change: transform;
}

.software-item {
  transition: transform .3s ease, border-color .25s, background .25s;
}
.software-item:hover {
  transform: translateY(-4px);
  border-color: rgba(30,136,229,.35);
  background: linear-gradient(180deg, #fff, var(--primary-soft));
}

.client-card {
  transition: transform .3s ease, box-shadow .3s;
}
.client-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.toast {
  animation: toastIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-16px) scale(.96); }
  to { opacity: 1; transform: none; }
}

.login-card {
  animation: cardPop .55s cubic-bezier(.22,1,.36,1);
}
@keyframes cardPop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.admin-content > * {
  animation: fadePage .45s ease;
}
@keyframes fadePage {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
