/* ============================================================
   MOTION LAYER - Terminal Premium
   Progressive enhancement only: base content remains visible.
   ============================================================ */

:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 0.35s;
  --motion-med: 0.72s;
  --motion-slow: 1.05s;
  --ambient-core: rgba(232, 174, 23, 0.22);
  --ambient-halo: rgba(209, 153, 0, 0.12);
  --ambient-edge: rgba(114, 78, 0, 0.06);
}

.motion-ambient {
  position: fixed;
  top: 0;
  left: 0;
  width: min(74vw, 900px);
  height: min(74vw, 900px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  filter: blur(92px);
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 44% 42%, var(--ambient-core) 0%, transparent 24%),
    radial-gradient(circle at 55% 58%, var(--ambient-halo) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, var(--ambient-edge) 0%, transparent 72%);
  transform: translate3d(58vw, 6vh, 0);
  will-change: width, height, transform, opacity, background;
}

[data-theme="light"] .motion-ambient {
  mix-blend-mode: multiply;
  filter: blur(100px);
}

.motion-cursor {
  --cursor-size: 0.82;
  position: fixed;
  top: 50vh;
  left: 50vw;
  width: 320px;
  height: 320px;
  margin-left: -160px;
  margin-top: -160px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  background:
    radial-gradient(circle at center,
      rgba(232, 174, 23, 0.16) 0%,
      rgba(209, 153, 0, 0.06) 34%,
      transparent 70%);
  mix-blend-mode: screen;
  transform: scale(var(--cursor-size));
  transition: transform 0.34s var(--motion-ease);
  will-change: top, left, transform, opacity;
}

[data-theme="light"] .motion-cursor {
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at center,
      rgba(167, 120, 0, 0.16) 0%,
      rgba(167, 120, 0, 0.06) 34%,
      transparent 70%);
}

.scramble-char {
  display: inline-block;
  font-variant-ligatures: none;
}

.scramble-char.is-scrambling {
  color: var(--accent);
  opacity: 0.86;
  text-shadow: 0 0 14px rgba(209, 153, 0, 0.28);
}

.reveal,
.cp-reveal,
.motion-item,
.flow__node,
.faq__item,
.glossary__item,
.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__cta {
  opacity: 1;
  visibility: visible;
  clip-path: none;
  filter: none;
}

.motion-item {
  --motion-order: 0;
  --motion-y: 18px;
  --motion-blur: 4px;
  --motion-scale: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 56%;
  will-change: transform, opacity, filter;
}

.motion-fallback .motion-item:not(.in),
.motion-fallback .reveal:not(.in),
.motion-fallback .cp-reveal:not(.in),
.motion-fallback .flow__node:not(.in),
.motion-fallback .faq__item:not(.in),
.motion-fallback .glossary__item:not(.in) {
  opacity: 0.82;
  transform: translate3d(0, min(var(--motion-y), 12px), 0) scale(1);
  filter: blur(1px);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-ease),
    filter var(--motion-med) var(--motion-ease);
  transition-delay: calc(var(--motion-order) * 42ms);
}

.motion-fallback .motion-item.in,
.motion-fallback .reveal.in,
.motion-fallback .cp-reveal.in,
.motion-fallback .flow__node.in,
.motion-fallback .faq__item.in,
.motion-fallback .glossary__item.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.motion-enhanced .hero__eyebrow,
.motion-enhanced .hero__title,
.motion-enhanced .hero__subtitle,
.motion-enhanced .hero__cta,
.motion-enhanced .motion-item,
.motion-enhanced .graph-viz svg line,
.motion-enhanced .graph-viz svg circle {
  will-change: transform, opacity, filter;
}

.motion-enhanced .hero__title {
  --hero-title-y: 0px;
  --hero-title-size: 1;
  transform: translate3d(0, var(--hero-title-y), 0) scale(var(--hero-title-size));
  transform-origin: 50% 60%;
}

.motion-enhanced .sidebar__link {
  position: relative;
  transition:
    color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    text-shadow var(--motion-fast) ease;
}

.motion-enhanced .sidebar__link::before {
  box-shadow: 0 0 12px rgba(209, 153, 0, 0.36);
}

.motion-enhanced .sidebar__link:hover,
.motion-enhanced .sidebar__link.active {
  color: var(--accent-hi);
  text-shadow: 0 0 18px rgba(209, 153, 0, 0.18);
}

.motion-enhanced .sidebar__link:hover {
  transform: translate3d(4px, 0, 0);
}

.motion-enhanced .hero__cta,
.motion-enhanced .closing__discord-btn,
.motion-enhanced .closing__social-btn,
.motion-enhanced .step__link,
.motion-enhanced .codeblock__copy,
.motion-enhanced .codeblock__expand,
.motion-enhanced .theme-toggle {
  transform: translate3d(0, 0, 0);
  transition:
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
  will-change: transform;
}

.motion-enhanced .hero__cta:hover,
.motion-enhanced .step__link:hover,
.motion-enhanced .closing__social-btn:hover,
.motion-enhanced .codeblock__copy:hover,
.motion-enhanced .codeblock__expand:hover {
  color: var(--accent-hi);
  border-color: var(--accent);
  text-shadow: 0 0 18px rgba(209, 153, 0, 0.22);
}

.motion-enhanced .closing__discord-btn:hover {
  box-shadow:
    0 0 0 1px rgba(232, 174, 23, 0.28),
    0 18px 44px rgba(209, 153, 0, 0.18);
}

.motion-enhanced .chip {
  transform: translate3d(0, 0, 0);
  transition:
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.motion-enhanced .chip:hover,
.motion-enhanced .chip.active {
  border-color: var(--accent);
  background: rgba(209, 153, 0, 0.14);
  box-shadow:
    0 0 0 1px rgba(209, 153, 0, 0.12),
    0 0 28px rgba(209, 153, 0, 0.18);
}

.motion-enhanced .flow__node,
.motion-enhanced .na-pratica__card,
.motion-enhanced .step,
.motion-enhanced .callout,
.motion-enhanced .graph-viz,
.motion-enhanced .codeblock,
.motion-enhanced .skill-block,
.motion-enhanced .faq__item,
.motion-enhanced .glossary__item {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
}

.motion-enhanced .flow__node:hover,
.motion-enhanced .na-pratica__card:hover,
.motion-enhanced .step:hover,
.motion-enhanced .callout:hover,
.motion-enhanced .graph-viz:hover,
.motion-enhanced .codeblock:hover,
.motion-enhanced .skill-block:hover,
.motion-enhanced .faq__item:hover,
.motion-enhanced .glossary__item:hover {
  border-color: rgba(209, 153, 0, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(209, 153, 0, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.22),
    0 0 42px rgba(209, 153, 0, 0.08);
}

.motion-enhanced .step.is-active {
  border-color: rgba(232, 174, 23, 0.28);
  background:
    linear-gradient(90deg, rgba(209, 153, 0, 0.1), transparent 54%),
    var(--bg-raised);
}

.motion-enhanced .graph-viz.is-active {
  border-color: rgba(232, 174, 23, 0.34);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 56px rgba(209, 153, 0, 0.1);
}

.motion-enhanced .chapter__head {
  transform-style: preserve-3d;
}

@media (min-width: 980px) {
  .motion-enhanced .chapter__head--sticky {
    position: sticky;
    top: 74px;
    z-index: 4;
    padding: 18px 0 24px;
    margin-bottom: 12px;
    background:
      linear-gradient(180deg, var(--bg) 72%, rgba(15, 15, 16, 0));
    backdrop-filter: blur(12px);
  }

  [data-theme="light"] .motion-enhanced .chapter__head--sticky {
    background:
      linear-gradient(180deg, var(--bg) 72%, rgba(245, 243, 238, 0));
  }

  .motion-enhanced .chapter__head--sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: 0;
    transition: opacity var(--motion-fast) ease;
  }

  .motion-enhanced .chapter--sticky.is-pinned .chapter__head--sticky::after {
    opacity: 0.6;
  }

  .motion-enhanced .steps-rail {
    position: relative;
    left: 50%;
    width: min(82vw, 920px);
    overflow: hidden;
    margin: 52px 0 44px;
    transform: translateX(-50%);
  }

  .motion-enhanced .steps--horizontal {
    display: flex;
    flex-direction: row;
    gap: 28px;
    width: max-content;
    margin: 0;
    border: none;
    border-radius: 0;
    will-change: transform;
  }

  .motion-enhanced .steps--horizontal .step {
    min-width: min(68vw, 760px);
    max-width: min(68vw, 760px);
    min-height: 360px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent),
      var(--bg-raised);
    flex-direction: column;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
  }

  .motion-enhanced .steps--horizontal .step:last-child {
    border-bottom: 1px solid var(--line);
  }

  .motion-enhanced .steps--horizontal .step__num {
    min-width: 0;
    padding: 28px 28px 10px;
  }

  .motion-enhanced .steps--horizontal .step__body {
    padding: 0 28px 30px;
  }

  .motion-enhanced .closing--horizontal {
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
    display: block;
  }

  .motion-enhanced .closing__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-height: 100vh;
    will-change: transform;
  }

  .motion-enhanced .closing__panel {
    width: calc(100vw - var(--sidebar-w));
    min-height: 100vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .motion-enhanced .closing__panel--intro {
    justify-content: flex-end;
    padding: 120px 80px 90px;
  }

  .motion-enhanced .closing__panel--social {
    justify-content: center;
    padding: 120px 80px 90px 40px;
  }

  .motion-enhanced .closing__panel .closing__inner,
  .motion-enhanced .closing__panel .closing__social {
    width: 100%;
    padding: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .motion-cursor {
    display: none !important;
  }

  .motion-enhanced .flow__node:hover,
  .motion-enhanced .na-pratica__card:hover,
  .motion-enhanced .step:hover,
  .motion-enhanced .callout:hover,
  .motion-enhanced .graph-viz:hover,
  .motion-enhanced .codeblock:hover,
  .motion-enhanced .skill-block:hover,
  .motion-enhanced .faq__item:hover,
  .motion-enhanced .glossary__item:hover {
    box-shadow: none;
  }
}

@media (max-width: 979px) {
  .motion-ambient {
    width: 110vw;
    height: 110vw;
    filter: blur(80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ambient,
  .motion-cursor {
    display: none !important;
  }

  .reveal,
  .cp-reveal,
  .motion-item,
  .flow__node,
  .faq__item,
  .glossary__item,
  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__cta,
  .graph-viz svg line,
  .graph-viz svg circle {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
}