/* transitions.dev — motion tokens + Egida dark theme (egida.fun) */

:root {
  --duration-fast: 250ms;
  --duration-quick: 150ms;
  --duration-slow: 400ms;
  --duration-enter: 180ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;

  --tabs-dur: var(--duration-fast);
  --tabs-ease: var(--ease-smooth-out);
  --tabs-text-muted: #9aa0ad;
  --tabs-text-active: #f4f5f7;
  --tabs-bar-bg: rgba(255, 255, 255, 0.06);
  --tabs-pill-bg: rgba(87, 196, 166, 0.22);

  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: var(--ease-smooth-out);
  --tilt-follow: 400ms;
  --tilt-follow-ease: var(--ease-smooth-out);
  --tilt-glare-opacity: 0.28;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: var(--ease-smooth-out);

  --acc-expand: var(--duration-fast);
  --acc-collapse: var(--duration-fast);
  --acc-chevron: var(--duration-fast);
  --acc-ease: var(--ease-smooth-out);

  --panel-open-dur: var(--duration-slow);
  --panel-close-dur: 350ms;
  --panel-translate-y: 100%;
  --panel-blur: 2px;
  --panel-ease: var(--ease-smooth-out);

  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: var(--ease-smooth-out);
}

/* ── Tabs sliding (buy page tier switch) ── */

.t-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--tabs-bar-bg);
  margin-bottom: 1.25rem;
}

.t-tabs .t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 999px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

.t-tab {
  position: relative;
  flex: 1;
  z-index: 1;
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  color: var(--tabs-text-muted);
  cursor: pointer;
  transition: color var(--tabs-dur) var(--tabs-ease);
}

.t-tab[aria-selected="true"],
.t-tab.is-active {
  color: var(--tabs-text-active);
}

.t-tabs.auth-tabs {
  gap: 3px;
}

.t-tabs .auth-tab {
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
}

.t-tabs .auth-tab.is-active {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tabs-text-active);
}

/* ── Card hover tilt (pricing) ── */

.t-tilt {
  touch-action: none;
}

.t-tilt-card {
  position: relative;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}

.t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}

.t-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.06) 52%,
      rgba(255, 255, 255, 0) 84%
    ),
    radial-gradient(
      circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(49, 59, 238, 0.18),
      rgba(255, 255, 255, 0) 78%
    );
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}

.t-tilt.is-hover .t-tilt-glare {
  opacity: var(--tilt-glare-opacity);
}

.page-network-landing .lp-plan.t-tilt {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  border-radius: 18px;
}

.page-network-landing .lp-plan.t-tilt .t-tilt-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 1.5rem 1.35rem 1.5rem;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
}

.page-network-landing .lp-plan.t-tilt.lp-plan--hero .t-tilt-card,
.page-network-landing .lp-plan.t-tilt.lp-spotlight .t-tilt-card {
  border-color: rgba(255, 205, 110, 0.5);
  background: linear-gradient(
    165deg,
    rgba(255, 210, 110, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(0, 0, 0, 0.15) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 210, 110, 0.1),
    0 24px 48px rgba(0, 0, 0, 0.35);
}

.page-network-landing .lp-plan.t-tilt.lp-spotlight .t-tilt-card {
  border-color: rgba(255, 224, 138, 0.35);
  background: linear-gradient(
    165deg,
    rgba(255, 210, 110, 0.1) 0%,
    rgba(255, 255, 255, 0.02) 45%,
    rgba(0, 0, 0, 0.18) 100%
  );
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.page-network-landing .lp-plan.t-tilt .t-tilt-glare {
  border-radius: inherit;
}

.page-network-landing .lp-pricing-grid {
  padding-top: 0.75rem;
}

.page-network-landing .lp-plan.t-tilt .lp-plan-btn {
  margin-top: auto;
}

.page-network-landing .lp-plan.t-tilt .lp-plan-guarantee {
  margin-bottom: 0;
}

/* ── FAQ accordion (native details) ── */

.lp-faq-item > p {
  overflow: hidden;
}

.lp-faq-item:not([open]) > p {
  opacity: 0.85;
}

.lp-faq-item[open] > p {
  animation: egida-faq-open var(--acc-expand) var(--acc-ease) both;
}

@keyframes egida-faq-open {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--distance-micro, 4px)));
    filter: blur(var(--panel-blur));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.lp-faq-item summary {
  transition: color var(--duration-quick) var(--ease-smooth-out);
}

.lp-faq-item summary::after {
  transition: transform var(--acc-chevron) var(--acc-ease);
}

.lp-faq-item[open] summary::after {
  transform: rotate(180deg);
}

/* ── Sticky CTA panel reveal (inner slide; outer bar stays put) ── */

.lp-premium .lp-sticky {
  transform: none !important;
  transition: none !important;
}

.lp-sticky .lp-sticky-inner {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
}

.lp-sticky.is-visible .lp-sticky-inner {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease);
}

/* ── Buy form error shake ── */

.t-input-wrap.is-error input,
.t-input-wrap.is-error .field input,
.t-input-wrap.is-error textarea {
  animation: egida-shake-a var(--shake-dur-a) var(--shake-ease),
    egida-shake-b var(--shake-dur-b) var(--shake-ease) var(--shake-dur-a),
    egida-shake-c var(--shake-dur-b) var(--shake-ease) calc(var(--shake-dur-a) + var(--shake-dur-b));
  border-color: rgba(239, 68, 68, 0.65) !important;
}

.t-input-wrap.is-error .error-msg:not([hidden]) {
  animation: egida-error-in var(--duration-quick) var(--ease-smooth-out);
}

@keyframes egida-shake-a {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--shake-distance)));
  }
}

@keyframes egida-shake-b {
  from {
    transform: translateX(calc(-1 * var(--shake-distance)));
  }
  to {
    transform: translateX(var(--shake-overshoot));
  }
}

@keyframes egida-shake-c {
  from {
    transform: translateX(var(--shake-overshoot));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes egida-error-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.plan-chip {
  transition:
    transform var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out),
    background var(--duration-quick) var(--ease-smooth-out);
}

.plan-chip.is-selected {
  transform: scale(1.02);
}

.plan-option {
  transition:
    transform var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out),
    background var(--duration-quick) var(--ease-smooth-out),
    box-shadow var(--duration-quick) var(--ease-smooth-out);
}

.plan-option.is-active {
  transform: scale(1.02);
}

/* ── Page card entrance ── */

@keyframes egida-card-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.page-network .network-card.t-enter,
.page-network-login .network-login-card.t-enter,
.page-pay-wait .pay-wait-card.t-enter,
.page-legal .legal-doc.t-enter,
.page-admin .admin-kpi-grid.t-enter {
  animation: egida-card-in var(--duration-enter) var(--ease-smooth-out) both;
}

.page-network-login .network-login-card.t-enter-soft,
.page-network .network-card.t-enter-soft {
  animation: egida-fade-in var(--duration-enter) var(--ease-smooth-out) both;
}

@keyframes egida-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.auth-captcha {
  position: relative;
  z-index: 3;
  isolation: isolate;
}

.network-card.is-error .auth-captcha,
.network-login-card.is-error .auth-captcha {
  pointer-events: auto;
}

.page-network .profile-hero.t-enter {
  animation: egida-card-in var(--duration-enter) var(--ease-smooth-out) both;
}

.payment-success-banner.t-enter-in {
  animation: egida-card-in var(--duration-enter) var(--ease-smooth-out) both;
}

/* ── Profile / legal details accordion ── */

.t-details .purchase-body,
.t-details .setup-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}

.t-details[open] .purchase-body,
.t-details[open] .setup-body {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}

.t-details .purchase-body > *,
.t-details .setup-body > * {
  min-height: 0;
  overflow: hidden;
}

.t-details .purchase-chevron,
.t-details .setup-details .purchase-chevron {
  transition: transform var(--acc-chevron) var(--acc-ease);
}

.t-details[open] .purchase-chevron {
  transform: rotate(-135deg);
}

.t-details.purchase-details > summary,
.t-details.setup-details > summary {
  transition: color var(--duration-quick) var(--ease-smooth-out);
}

/* ── Pay wait steps ── */

.pay-wait-step {
  transition:
    color var(--duration-quick) var(--ease-smooth-out),
    opacity var(--duration-quick) var(--ease-smooth-out);
}

.pay-wait-step.is-active {
  animation: egida-step-in var(--duration-fast) var(--ease-smooth-out);
}

.pay-wait-step.is-done::before {
  transition: background var(--duration-quick) var(--ease-smooth-out);
}

@keyframes egida-step-in {
  from {
    opacity: 0.6;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pay-wait-card--ok .pay-wait-icon--ok {
  animation: egida-ok-pop var(--duration-slow) var(--ease-smooth-out);
}

@keyframes egida-ok-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Compare cards hover ── */

.tier-compare-card {
  transition:
    transform var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out),
    box-shadow var(--duration-quick) var(--ease-smooth-out);
}

/* ── Admin KPI ── */

.admin-kpi-card {
  transition:
    transform var(--duration-quick) var(--ease-smooth-out),
    border-color var(--duration-quick) var(--ease-smooth-out);
}

@media (hover: hover) and (pointer: fine) {
  .tier-compare-card:hover {
    transform: translateY(-2px);
  }

  .admin-kpi-card:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill,
  .t-tab,
  .t-tilt-card,
  .t-tilt-glare,
  .lp-faq-item > p,
  .lp-sticky .lp-sticky-inner,
  .plan-chip,
  .plan-option,
  .tier-compare-card,
  .admin-kpi-card,
  .page-network .network-card.t-enter,
  .page-network-login .network-login-card.t-enter,
  .page-network .network-card.t-enter-soft,
  .page-network-login .network-login-card.t-enter-soft,
  .page-pay-wait .pay-wait-card.t-enter,
  .pay-wait-step.is-active,
  .pay-wait-card--ok .pay-wait-icon--ok {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .t-tab,
  .lp-faq-item > p,
  .plan-chip,
  .plan-option,
  .tier-compare-card,
  .admin-kpi-card,
  .pay-wait-step {
    transition-property: color, background-color, border-color, opacity !important;
    transition-duration: 120ms !important;
    transition-timing-function: ease-out !important;
  }

  .t-tabs-pill,
  .t-tilt-card,
  .lp-sticky .lp-sticky-inner,
  .t-details .purchase-body,
  .t-details .setup-body,
  .t-details .purchase-chevron {
    transition: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .t-tilt-card,
  .plan-chip,
  .plan-option,
  .tier-compare-card:hover,
  .admin-kpi-card:hover {
    transform: none !important;
  }
}