/* SecureLine Premium Motion — visual layer only */

:root {
  --sl-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --sl-motion-duration: 650ms;
}

/* Consistent, restrained transitions */
.sl-home a,
.sl-home button,
.sl-home .sl-benefit,
.sl-home .sl-plan,
.sl-home .telegram-card,
.account .panel,
.account .order-row,
.history-page .history-panel,
.history-page .order-card {
  transition:
    transform 260ms var(--sl-motion-ease),
    border-color 260ms ease,
    box-shadow 300ms ease,
    background-color 260ms ease;
}

/* Scroll reveals activate only when JavaScript is ready */
.sl-motion-ready .sl-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--sl-motion-duration) var(--sl-motion-ease),
    transform var(--sl-motion-duration) var(--sl-motion-ease);
  transition-delay: var(--sl-reveal-delay, 0ms);
}

.sl-motion-ready .sl-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Premium card hover */
.sl-home .sl-benefit:hover,
.sl-home .sl-plan:hover {
  transform: translateY(-5px);
  border-color: rgba(177, 144, 255, .4);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .22),
    0 0 28px rgba(139, 92, 246, .08);
}

.sl-home .sl-plan-featured {
  box-shadow:
    0 18px 55px rgba(95, 61, 190, .13),
    inset 0 1px rgba(255, 255, 255, .045);
}

.sl-home .sl-plan-featured:hover {
  box-shadow:
    0 22px 60px rgba(95, 61, 190, .22),
    0 0 35px rgba(139, 92, 246, .12);
}

.sl-home .sl-bottom-cta {
  position: relative;
  isolation: isolate;
}

.sl-home .sl-bottom-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(156, 119, 255, .09),
    transparent 70%
  );
}

/* Inner pages */
.account .panel:hover,
.history-page .history-panel:hover {
  border-color: rgba(165, 137, 255, .25);
}

.account .order-row:hover {
  transform: translateY(-2px);
  border-color: rgba(165, 137, 255, .32);
}

.history-page .order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

/* Respect accessibility and touch devices */
@media (hover: none) {
  .sl-home .sl-benefit:hover,
  .sl-home .sl-plan:hover,
  .account .order-row:hover,
  .history-page .order-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-motion-ready .sl-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sl-home *,
  .account *,
  .history-page * {
    scroll-behavior: auto !important;
    animation-duration: 1.8s;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* SECURELINE_MOTION_GLOBAL_V2 */

/* Мягкая стеклянная шапка без изменения её положения на странице. */
.topbar,
.connect-top,
.account-topbar {
  position: relative;
  isolation: isolate;
  background: linear-gradient(
    180deg,
    rgba(17, 13, 34, .76) 0%,
    rgba(15, 12, 29, .54) 38%,
    rgba(12, 10, 24, .24) 72%,
    rgba(10, 9, 20, 0) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
    90deg,
    transparent,
    rgba(166, 127, 255, .13) 22%,
    rgba(166, 127, 255, .18) 50%,
    rgba(166, 127, 255, .13) 78%,
    transparent
  ) 1;
  box-shadow: 0 14px 38px rgba(76, 45, 145, .045);
  transition: background 300ms ease, box-shadow 300ms ease;
}

/* Дополнительное свечение растворяется ниже шапки. */
.topbar::after,
.connect-top::after,
.account-topbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 46px);
  background: linear-gradient(
    180deg,
    rgba(102, 67, 190, .10) 0%,
    rgba(86, 55, 158, .055) 42%,
    rgba(58, 39, 108, .018) 72%,
    transparent 100%
  );
  filter: blur(12px);
}

.topbar.sl-motion-scrolled,
.connect-top.sl-motion-scrolled,
.account-topbar.sl-motion-scrolled {
  background: linear-gradient(
    180deg,
    rgba(17, 13, 34, .84) 0%,
    rgba(15, 12, 29, .57) 42%,
    rgba(12, 10, 24, .22) 76%,
    transparent 100%
  );
  box-shadow: 0 12px 34px rgba(0, 0, 0, .10);
}

/* Единый мягкий переход для интерактивных элементов. */
.btn,
button,
.topbar a,
.sl-nav a,
.app-guide summary,
.order-detail-button {
  -webkit-tap-highlight-color: transparent;
}

.btn,
button,
.topbar a,
.sl-nav a,
.order-detail-button {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 260ms ease,
    transform 220ms var(--sl-motion-ease);
}

.btn:active,
button:active,
.order-detail-button:active {
  transform: scale(.985);
}

/* Стеклянные карточки с тонкой фиолетовой подсветкой. */
.feature-card,
.sl-home .sl-benefit,
.sl-home .sl-plan,
.sl-home .telegram-card,
.app-guide,
.history-page .order-card,
.account .panel,
.history-page .history-panel,
.checkout-pay {
  border-color: rgba(178, 151, 255, .17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 10px 30px rgba(0, 0, 0, .10);
}

.feature-card,
.sl-home .sl-benefit,
.sl-home .sl-plan,
.sl-home .telegram-card,
.app-guide,
.history-page .order-card,
.account .panel,
.history-page .history-panel {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .app-guide:hover,
  .sl-home .telegram-card:hover {
    border-color: rgba(178, 151, 255, .34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      0 14px 34px rgba(0, 0, 0, .18),
      0 0 24px rgba(139, 92, 246, .07);
  }

  .btn-primary:hover,
  .checkout-pay:hover {
    filter: brightness(1.06);
    box-shadow:
      0 12px 32px rgba(112, 70, 218, .28),
      inset 0 1px 0 rgba(255, 255, 255, .22);
  }
}

/* Плавное раскрытие содержимого существующих инструкций и FAQ. */
.app-guide .guide-content {
  animation: sl-guide-reveal 260ms var(--sl-motion-ease) both;
}

details[open] > :not(summary) {
  animation: sl-guide-reveal 260ms var(--sl-motion-ease) both;
}

.app-guide summary,
details > summary {
  cursor: pointer;
}

.app-guide .summary-arrow {
  transition: transform 260ms var(--sl-motion-ease), color 220ms ease;
}

@keyframes sl-guide-reveal {
  from { opacity: .35; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal: скрытие включается только после подготовки JS. */
.sl-global-motion-ready .sl-global-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 520ms var(--sl-motion-ease),
    transform 520ms var(--sl-motion-ease);
}

.sl-global-motion-ready .sl-global-reveal.sl-global-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (hover: none), (max-width: 700px) {
  .topbar,
  .connect-top,
  .account-topbar {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .feature-card,
  .sl-home .sl-benefit,
  .sl-home .sl-plan,
  .sl-home .telegram-card,
  .app-guide,
  .history-page .order-card,
  .account .panel,
  .history-page .history-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-global-motion-ready .sl-global-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .topbar,
  .connect-top,
  .account-topbar,
  .btn,
  button,
  .app-guide .guide-content,
  details[open] > :not(summary) {
    animation: none !important;
    transition: none !important;
  }
}

/* SECURELINE_HEADER_GRADIENT_V1 */

@media (max-width: 700px) {
  .topbar::after,
  .connect-top::after,
  .account-topbar::after {
    filter: none;
    opacity: .7;
  }
}


/* SECURELINE_UNIFIED_SVG_ICONS_V1 */
.sl-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sl-trust-icon .sl-icon { width: 16px; height: 16px; }
.sl-status-mark .sl-icon { width: 19px; height: 19px; }
.sl-benefit-icon .sl-icon { width: 21px; height: 21px; }
.sl-plan-symbol .sl-icon { width: 20px; height: 20px; }
.sl-custom-plan-icon .sl-icon { width: 25px; height: 25px; }
.checkout-dialog-icon .sl-icon { width: 25px; height: 25px; }
.checkout-check .sl-icon { width: 16px; height: 16px; }
.connect-icon .sl-icon, .os-icon .sl-icon { width: 30px; height: 30px; }
.profile-menu-icon .sl-icon { width: 16px; height: 16px; }
.detail-icon .sl-icon { width: 19px; height: 19px; }
.account-note-icon .sl-icon { width: 20px; height: 20px; }
.empty-icon .sl-icon { width: 25px; height: 25px; }
.feature-icon .sl-icon { width: 23px; height: 23px; }
.sl-main-btn > .sl-icon { width: 18px; height: 18px; }
.sl-plan-link .sl-icon, .sl-text-link .sl-icon { width: 14px; height: 14px; }
.connect-page h2 > .sl-icon { width: 18px; height: 18px; margin-right: 5px; color: #bba2ff; }
.connect-page .btn .sl-icon { width: 17px; height: 17px; margin-right: 5px; }
.pricing-grid h2 .sl-icon { width: 21px; height: 21px; margin-right: 7px; color: #c3adff; }
.order-detail-button .sl-icon { width: 14px; height: 14px; }

.sl-icon-heading { display:inline-flex; align-items:center; color:#bba2ff; }
.sl-icon-heading .sl-icon { width:19px; height:19px; margin-right:5px; }



/* SECURELINE_ORBIT_SCROLL_SWAP_V1 */
.sl-visual.sl-orbit-enhanced {
  --sl-orbit-progress: 0;
}

.sl-visual.sl-orbit-enhanced .sl-emblem-inner {
  animation: none !important;
  will-change: box-shadow;
}

@keyframes sl-emblem-pulse {
  0%, 100%, 50% {
    box-shadow:
      0 28px 70px rgba(77, 38, 156, .38),
      0 0 30px rgba(153, 103, 255, .22),
      0 0 54px rgba(120, 75, 235, .12),
      inset 0 2px 2px rgba(255, 255, 255, .68),
      inset 0 -12px 25px rgba(38, 15, 84, .33);
  }
}

.sl-visual.sl-orbit-enhanced .sl-orbit-one {
  transform: rotate(var(--sl-orbit-one-angle, -24deg)) scaleY(.72);
}

.sl-visual.sl-orbit-enhanced .sl-orbit-two {
  transform: rotate(var(--sl-orbit-two-angle, 28deg)) scaleY(.72);
}

.sl-visual.sl-orbit-enhanced .sl-emblem-ring {
  transform: scaleX(.74) rotate(var(--sl-ring-one-angle, 35deg));
}

.sl-visual.sl-orbit-enhanced .sl-emblem-ring-two {
  transform: scaleX(.74) rotate(var(--sl-ring-two-angle, -35deg));
}

.sl-visual.sl-orbit-enhanced .sl-floating-top,
.sl-visual.sl-orbit-enhanced .sl-floating-bottom {
  will-change: transform;
  backface-visibility: hidden;
}

.sl-visual.sl-orbit-enhanced .sl-floating-top {
  transform: translate3d(
    var(--sl-top-x, 0px),
    var(--sl-top-y, 0px),
    0
  ) scale(var(--sl-top-scale, 1));
}

.sl-visual.sl-orbit-enhanced .sl-floating-bottom {
  transform: translate3d(
    var(--sl-bottom-x, 0px),
    var(--sl-bottom-y, 0px),
    0
  ) scale(var(--sl-bottom-scale, 1));
}

@media (max-width: 700px) {
  .sl-visual.sl-orbit-enhanced .sl-emblem-inner {
    animation-duration: 1.8s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-visual.sl-orbit-enhanced .sl-emblem-inner {
    animation: none !important;
    will-change: auto;
  }

  .sl-visual.sl-orbit-enhanced .sl-floating-top,
  .sl-visual.sl-orbit-enhanced .sl-floating-bottom {
    transform: none !important;
    will-change: auto;
  }
}

/* SECURELINE_HERO_SHINE_VT_V1 */

/* 1. Последовательное появление hero при загрузке (вместо общего fade) */
.sl-hero-copy { --sl-hero-shift: 18px; }
.sl-motion-ready .sl-hero-copy.sl-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.sl-hero-copy > * {
  animation: sl-hero-in 720ms var(--sl-motion-ease, cubic-bezier(.22, 1, .36, 1)) backwards;
}
.sl-hero-copy > :nth-child(1) { animation-delay: 40ms; }
.sl-hero-copy > :nth-child(2) { animation-delay: 120ms; }
.sl-hero-copy > :nth-child(3) { animation-delay: 200ms; }
.sl-hero-copy > :nth-child(4) { animation-delay: 280ms; }
.sl-hero-copy > :nth-child(n+5) { animation-delay: 360ms; }
@keyframes sl-hero-in {
  from { opacity: 0; transform: translate3d(0, var(--sl-hero-shift, 18px), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (max-width: 700px) {
  .sl-hero-copy { --sl-hero-shift: 10px; }
  .sl-hero-copy > * { animation-duration: 520ms; }
}

/* 2. Блик по главным кнопкам: только мышь, только главная */
@media (hover: hover) and (pointer: fine) {
  .sl-home .btn-primary,
  .sl-home .sl-main-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .sl-home .btn-primary::after,
  .sl-home .sl-main-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .26) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 700ms var(--sl-motion-ease, cubic-bezier(.22, 1, .36, 1));
  }
  .sl-home .btn-primary:hover::after,
  .sl-home .sl-main-btn:hover::after,
  .sl-home .btn-primary:focus-visible::after,
  .sl-home .sl-main-btn:focus-visible::after {
    transform: translateX(120%);
  }
}

/* 3. Мягкий переход между страницами (кросс-фейд) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 240ms; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-hero-copy > * { animation: none; }
  .sl-home .btn-primary::after,
  .sl-home .sl-main-btn::after { display: none; }
}