/* sinolega v2 — animations layer */

@media (prefers-reduced-motion: no-preference) {

  /* Scroll-reveal: fade + small translate-up */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease-out, transform .7s ease-out;
    will-change: opacity, transform;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  [data-reveal][data-reveal-delay="100"] { transition-delay: .1s }
  [data-reveal][data-reveal-delay="200"] { transition-delay: .2s }
  [data-reveal][data-reveal-delay="300"] { transition-delay: .3s }
  [data-reveal][data-reveal-delay="400"] { transition-delay: .4s }

  /* Word cascade (replaces letter cascade) */
  [data-word-cascade] { display: inline; }
  [data-word-cascade] .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    will-change: opacity, transform;
  }
  [data-word-cascade].is-cascading .word {
    animation: wordIn .55s cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes wordIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* 3D tilt cards: only enabled when JS adds .has-tilt */
  .has-tilt {
    transform-style: preserve-3d;
    transition: transform .25s ease-out, box-shadow .25s ease-out;
    will-change: transform;
  }
  .has-tilt:hover { box-shadow: 0 18px 36px rgba(15,27,51,.10) }

  /* Magnetic CTA */
  .has-magnetic {
    transition: transform .15s ease-out;
    will-change: transform;
  }

  /* Cursor spotlight inside .hero (added by JS) */
  .hero { position: relative; overflow: hidden }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 30%),
                                rgba(26,61,124,.07), transparent 65%);
    opacity: 0;
    transition: opacity .4s ease-out;
    z-index: 0;
  }
  .hero.has-spotlight::before { opacity: 1 }
  .hero > .container { position: relative; z-index: 1 }

  /* Header blur on scroll */
  .site-header { transition: background .25s ease-out, border-color .25s ease-out, backdrop-filter .25s ease-out }
  .site-header.is-scrolled {
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom-color: rgba(214,220,231,.6);
  }

  /* Burger morph */
  .site-burger span { transition: transform .2s ease, opacity .2s ease }
  .site-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg) }
  .site-burger.is-open span:nth-child(2) { opacity: 0 }
  .site-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }
}

/* Marquee — works regardless of reduced-motion preference; we slow + pause on hover */
.marquee {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  gap: 3rem;
  padding-block: .75rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  animation: marquee 50s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused }
.marquee__track span { display: inline-block }
.marquee__track span::before {
  content: "·";
  margin-right: 3rem;
  color: var(--color-border);
}
.marquee__track span:first-child::before { content: ""; margin: 0 }
@keyframes marquee {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: translateX(0) }
}

/* Mobile sticky bottom CTA */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--color-primary);
  color: #fff;
  padding: .75rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: .9rem;
  z-index: 60;
  transform: translateY(100%);
  transition: transform .3s ease-out;
  box-shadow: 0 -2px 12px rgba(15,27,51,.12);
}
.sticky-cta.is-visible { transform: translateY(0) }
.sticky-cta a { color: #fff; display: block; padding: 4px 0 }
@media (min-width: 769px) { .sticky-cta { display: none !important } }
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none }
}

/* Effect 1 — Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-primary);
  z-index: 100;
  transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { transition: none }
}

/* Effect 2 — Animated section dividers */
@media (prefers-reduced-motion: no-preference) {
  .section-head { position: relative }
  .section-head::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 64px;
    height: 1px;
    background: var(--color-primary);
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .section-head.is-visible::after { transform: translateX(-50%) scaleX(1) }
}

/* Effect 3 — Document-stack hover on case-cards */
@media (prefers-reduced-motion: no-preference) {
  .case-card {
    position: relative;
  }
  .case-card::before,
  .case-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    z-index: -1;
    transform: translate(0, 0) rotate(0);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
    opacity: 0;
  }
  .case-card:hover::before {
    transform: translate(6px, 6px) rotate(1.5deg);
    opacity: 1;
  }
  .case-card:hover::after {
    transform: translate(12px, 12px) rotate(3deg);
    opacity: 0.6;
  }
}

/* Effect 5 — Pulse glow on primary CTA */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26,61,124,0) }
    50%      { box-shadow: 0 0 0 8px rgba(26,61,124,0.08) }
  }
  .hero .btn--primary,
  .final-cta a.btn--primary {
    animation: ctaPulse 2.6s ease-in-out infinite;
  }
  .hero .btn--primary:hover,
  .final-cta a.btn--primary:hover {
    animation: none;
  }
}

/* Effect 6 — Subtle parallax in hero */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lead {
    will-change: transform;
    transition: transform .12s linear;
  }
}

/* ===== Hero 3D background ===== */

.hero { position: relative; overflow: hidden }
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}

/* Soft vignette over the canvas to protect text readability */
.hero {
  background-image:
    radial-gradient(ellipse 65% 55% at center,
                    rgba(244,246,250,0.85) 0%,
                    rgba(244,246,250,0.55) 45%,
                    rgba(244,246,250,0.20) 70%,
                    transparent 100%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg));
}

/* Stacking: canvas at 0, spotlight at 1, content at 2 */
.hero > .container { position: relative; z-index: 2 }

/* Adjust existing spotlight z-index so it sits above canvas, below content */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { z-index: 1 }
  .hero.has-spotlight::before { opacity: 1 }
}

/* Ensure hero has enough height to show the scene */
.hero {
  min-height: 540px;
}
@media (max-width: 700px) {
  .hero { min-height: 460px }
  #hero-canvas { opacity: .8 }
}

@media (prefers-reduced-motion: reduce) {
  #hero-canvas { display: none }
}

/* ===== Effect 3 — Steps connector SVG ===== */
.steps-section { position: relative; }
.steps-wrap { position: relative; }
.steps-connector {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 0;
}
.steps-connector path {
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.4s cubic-bezier(.2,.7,.2,1);
}
.steps-wrap.is-drawn .steps-connector path {
  stroke-dashoffset: 0;
}
.steps-grid { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .steps-connector { display: none }
}
@media (prefers-reduced-motion: reduce) {
  .steps-connector path { stroke-dashoffset: 0; transition: none }
}

/* ===== Effect 4 — Comparison section wireframe lattice ===== */
.cmp-section { position: relative; overflow: hidden; }
#cmp-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}
.cmp-section > .container { position: relative; z-index: 1 }
.cmp-section {
  background-image: radial-gradient(ellipse 70% 60% at center, rgba(244,246,250,0.92) 0%, rgba(244,246,250,0.5) 60%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  #cmp-canvas { display: none }
}

/* ===== Effect 5 — 3D scroll depth on case cards ===== */
@media (prefers-reduced-motion: no-preference) {
  .case-grid { perspective: 1400px }
  .case-card[data-scroll-depth] {
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
  }
}

/* ===== Wow Effect 1 — Paper-plane Three.js in final CTA ===== */
.final-cta-3d { position: relative; overflow: hidden; isolation: isolate; }
#cta-canvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; display: block; width: 100%; height: 100%;
  opacity: 0.85;
}
.final-cta-3d > .container { position: relative; z-index: 1 }
@media (prefers-reduced-motion: reduce) { #cta-canvas { display: none } }

/* ===== Wow Effect 2 — Handwritten signature in hero ===== */
.hero-signature {
  margin: 24px auto 0;
  max-width: 320px;
  opacity: 0;
}
.hero-signature svg { width: 100%; height: auto }
.hero-signature path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-signature.is-drawn { opacity: 1; transition: opacity .4s ease }
  .hero-signature.is-drawn path {
    animation: signatureDraw 2.6s cubic-bezier(.4,.2,.2,1) forwards;
  }
  @keyframes signatureDraw { to { stroke-dashoffset: 0 } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-signature { opacity: 1 }
  .hero-signature path { stroke-dashoffset: 0 }
}

/* ===== Wow Effect 3 — Animated seal stamp in trust-bar ===== */
.trust-bar { position: relative; }
.seal-stamp {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) scale(0) rotate(-25deg);
  width: 100px;
  height: 100px;
  opacity: 0;
  transition: transform .8s cubic-bezier(.16,1.2,.5,1), opacity .4s ease;
}
.seal-stamp svg { width: 100%; height: 100% }
.trust-bar.is-stamped .seal-stamp {
  transform: translateY(-50%) scale(1) rotate(-12deg);
  opacity: .65;
}
@media (max-width: 1100px) { .seal-stamp { display: none } }
@media (prefers-reduced-motion: reduce) {
  .seal-stamp { transition: none; transform: translateY(-50%) scale(1) rotate(-12deg); opacity: .65 }
}

/* ===== Wow Effect 4 — Drawing checkmarks in comparison ===== */
.cmp-check {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 4px;
}
.cmp-check path {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  transition: stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1);
}
.cmp-table.is-drawn .cmp-check path { stroke-dashoffset: 0 }
@media (prefers-reduced-motion: reduce) {
  .cmp-check path { stroke-dashoffset: 0; transition: none }
}

/* ===== Wow Effect 5 — Section-rail on right edge ===== */
.section-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 40;
}
.section-rail__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: width .25s ease, height .25s ease, background .25s;
}
.section-rail__dot:hover { background: var(--color-primary) }
.section-rail__dot.is-active {
  background: var(--color-primary);
  width: 10px; height: 10px;
}
.section-rail__dot::after {
  content: attr(title);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text);
  color: #fff;
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  letter-spacing: 0.04em;
}
.section-rail__dot:hover::after { opacity: 1 }
@media (max-width: 980px) { .section-rail { display: none } }

/* ===== Wow Effect 6 — Knowledge graph in why-free ===== */
.why-free-graph { position: relative; overflow: hidden; isolation: isolate; }
#graph-canvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; display: block; width: 100%; height: 100%;
  opacity: 0.55;
}
.why-free-graph .container { position: relative; z-index: 1 }
.why-free-graph::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 65% 60% at center, rgba(244,246,250,0.85) 0%, transparent 75%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #graph-canvas { display: none } }

/* ===== Wow Effect 7 — Tooltips for TR regulation numbers ===== */
.tr-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--color-primary);
  color: var(--color-text);
  transition: color .15s;
}
.tr-tip:hover { color: var(--color-primary) }
.tr-tip::after {
  content: attr(data-def);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text);
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  border-radius: 2px;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
  letter-spacing: 0.01em;
}
.tr-tip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 768px) {
  .tr-tip::after { display: none }
}

/* ===== Wow Effect 8 — 3D book-reveal on cap-cards ===== */
@media (prefers-reduced-motion: no-preference) {
  .cap-card { perspective: 1200px }
  .cap-example {
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    transform-origin: left center;
  }
  .cap-card:hover .cap-example {
    transform: rotateY(-4deg) translateX(4px) translateZ(20px);
    box-shadow: -8px 12px 24px rgba(15,27,51,.08);
  }
}

/* ===== Wow Effect 9 — Magnetic title-anchor on section H2s ===== */
@media (prefers-reduced-motion: no-preference) {
  [data-magnetic-title] {
    will-change: transform;
    transition: transform .25s ease-out;
  }
}

/* ===== Wow Effect 10 — Ink-ripple on buttons ===== */
.ink-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  pointer-events: none;
  transform: scale(0);
  animation: inkSpread .65s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes inkSpread {
  to { transform: scale(1); opacity: 0; }
}

/* Effect 11 (custom hero cursor) removed — мешал кликам */

/* ===== Wow Effect 12 — Page-fold preview on blog cards ===== */
@media (prefers-reduced-motion: no-preference) {
  .blog-item {
    position: relative;
    transition: transform .3s ease;
  }
  .blog-item::before {
    content: "";
    position: absolute;
    right: 0; top: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 32px 32px;
    border-color: transparent transparent var(--color-border) transparent;
    transition: border-width .35s cubic-bezier(.2,.7,.2,1);
    z-index: 1;
  }
  .blog-item:hover::before {
    border-width: 0 0 56px 56px;
    border-color: transparent transparent var(--color-primary) transparent;
  }
}

/* Effect 15 (gradient sweep on H1) removed — конфликтовал с word-cascade .word inline-block, делая H1 невидимым */

/* ===== Effect 7 — 3D rotating chevron on FAQ ===== */
@media (prefers-reduced-motion: no-preference) {
  .faq-question::after {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), color .2s;
    transform-origin: center;
    transform-style: preserve-3d;
    display: inline-block;
  }
  .faq-item[open] .faq-question::after {
    transform: rotateX(180deg) rotateY(180deg);
    color: var(--color-accent);
  }
}