*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #07090b;
      --surface: #0e1114;
      --s2:      #161a1e;
      --s3:      #1e242a;
      --border:  #1e242a;
      --accent:  #c8ff00;
      --cyan:    #78e8ff;
      --text:    #e9edf1;
      --muted:   #868f9b;
      --muted2:  #5a626c;
      --radius:  10px;
      --font:    'Space Grotesk', system-ui, sans-serif;
      --mono:    'DM Mono', ui-monospace, monospace;
      --sidebar: 280px;
    }

    [data-lang="en"] .ru,
    [data-lang="ru"] .en { display: none !important; }

    html { height: 100%; }
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--font); overflow: hidden; height: 100%;
      cursor: none;
    }

    /* ── CURSOR ── */
    .cursor {
      width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
      position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
      transform: translate(-50%,-50%); mix-blend-mode: difference;
    }
    .cursor-ring {
      width: 32px; height: 32px; border: 1px solid rgba(200,255,0,0.5); border-radius: 50%;
      position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
      transform: translate(-50%,-50%); transition: width .18s, height .18s, opacity .18s; opacity: .4;
    }
    body:has(button:hover) .cursor-ring,
    body:has(a:hover) .cursor-ring { width: 48px; height: 48px; opacity: .75; }

    /* ── LAYOUT ── */
    .app {
      display: grid;
      grid-template-rows: 52px 1fr;
      grid-template-columns: var(--sidebar) 1fr;
      grid-template-areas:
        "topbar topbar"
        "sidebar main";
      height: 100vh;
    }

    /* ── TOPBAR ── */
    .topbar {
      grid-area: topbar;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 1.5rem;
      background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom: 1px solid var(--border);
      backdrop-filter: blur(10px);
      z-index: 10;
    }
    .topbar-left { display: flex; align-items: center; gap: 1rem; }
    .tb-back {
      font-family: var(--mono); font-size: 0.7rem; color: var(--muted);
      text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
      border: 1px solid var(--border); padding: 0.26rem 0.65rem; border-radius: 100px;
      transition: color .2s, border-color .2s; cursor: none;
    }
    .tb-back:hover { color: var(--accent); border-color: rgba(200,255,0,.35); background: rgba(200,255,0,.04); }
    .tb-title {
      font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
      display: flex; align-items: center; gap: 0.5rem;
    }
    .tb-title span { color: var(--text); font-weight: 400; }
    .tb-title h1 { color: var(--text); font: inherit; font-weight: 500; letter-spacing: .02em; }
    .tb-breadcrumb { color: var(--muted2); }

    .topbar-right { display: flex; align-items: center; gap: 0.75rem; }
    .tb-count {
      font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
      background: var(--s2); border: 1px solid var(--border);
      padding: 0.22rem 0.6rem; border-radius: 7px;
    }
    .tb-count b { color: var(--accent); }
    .lang-toggle {
      font-family: var(--mono); font-size: 0.68rem;
      background: var(--s2); border: 1px solid var(--border);
      color: var(--text); padding: 0.22rem 0.6rem; border-radius: 7px;
      cursor: none; transition: background .2s, border-color .2s;
    }
    .lang-toggle:hover { background: var(--accent); color: #000; border-color: var(--accent); }

    /* ── SIDEBAR ── */
    .sidebar {
      grid-area: sidebar;
      background: color-mix(in srgb, var(--surface) 88%, var(--bg)); border-right: 1px solid var(--border);
      overflow-y: auto; padding: 1rem 0;
      scrollbar-width: thin; scrollbar-color: var(--muted2) transparent;
    }
    .sidebar::-webkit-scrollbar { width: 4px; }
    .sidebar::-webkit-scrollbar-track { background: transparent; }
    .sidebar::-webkit-scrollbar-thumb { background: var(--muted2); border-radius: 4px; }

    .sidebar-search {
      margin: 0 0.75rem 0.75rem;
      position: relative;
    }
    .sidebar-search input {
      width: 100%; background: var(--s2); border: 1px solid var(--border);
      color: var(--text); font-family: var(--mono); font-size: 0.73rem;
      padding: 0.5rem 0.75rem 0.5rem 2rem; border-radius: 8px; outline: none;
      transition: border-color .2s;
    }
    .sidebar-search input:focus { border-color: rgba(200,255,0,.3); }
    .sidebar-search input::placeholder { color: var(--muted); }
    .sidebar-search i {
      position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
      color: var(--muted); font-size: 0.68rem; pointer-events: none;
    }

    .cat-label {
      font-family: var(--mono); font-size: 0.6rem; color: var(--muted);
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 0.9rem 1rem 0.4rem; display: flex; align-items: center; gap: 0.5rem;
    }
    .cat-label i { font-size: 0.65rem; }

    .anim-item {
      display: flex; align-items: center; gap: 0.65rem;
      padding: 0.52rem 1rem; cursor: none;
      font-size: 0.82rem; font-weight: 500;
      color: var(--muted); transition: background .15s, color .15s;
      border-left: 2px solid transparent; position: relative;
    }
    .anim-item:hover { background: rgba(255,255,255,.03); color: var(--text); }
    .anim-item.active {
      background: rgba(200,255,0,.05);
      color: var(--accent);
      border-left-color: var(--accent);
    }
    .anim-item i { width: 1rem; text-align: center; font-size: 0.8rem; flex-shrink: 0; }
    .anim-item .item-new {
      font-family: var(--mono); font-size: 0.55rem; color: var(--cyan);
      background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.2);
      padding: 0.1rem 0.35rem; border-radius: 3px; margin-left: auto;
    }

    /* ── MAIN AREA ── */
    .main {
      grid-area: main;
      display: grid;
      grid-template-columns: 1fr 380px;
      overflow: hidden;
    }

    /* ── PREVIEW PANEL ── */
    .preview-panel {
      display: flex; flex-direction: column;
      border-right: 1px solid var(--border);
      overflow: hidden;
    }
    .panel-header {
      padding: 0.85rem 1.5rem;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      background: color-mix(in srgb, var(--surface) 86%, var(--bg)); flex-shrink: 0;
    }
    .panel-title {
      font-size: 0.82rem; font-weight: 700;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .panel-title i { color: var(--accent); font-size: 0.75rem; }
    .panel-actions { display: flex; gap: 0.5rem; align-items: center; }
    .panel-btn {
      font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
      background: var(--s2); border: 1px solid var(--border);
      padding: 0.3rem 0.7rem; border-radius: 6px; cursor: none;
      transition: all .2s; display: inline-flex; align-items: center; gap: 0.35rem;
    }
    .panel-btn:hover { color: var(--text); border-color: rgba(255,255,255,.15); }
    .panel-btn.active-bg { border-color: rgba(200,255,0,.3); color: var(--accent); }

    .preview-stage {
      flex: 1; display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      background: var(--bg);
    }
    /* bg variants */
    .preview-stage.bg-grid {
      background-image:
        linear-gradient(rgba(200,255,0,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,255,0,.055) 1px, transparent 1px);
      background-size: 46px 46px;
    }
    .preview-stage.bg-dots {
      background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .preview-stage.bg-solid { background: var(--s2); }

    .preview-label {
      position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
      font-family: var(--mono); font-size: 0.62rem; color: var(--muted);
      white-space: nowrap;
    }

    /* ── CODE PANEL ── */
    .code-panel {
      display: flex; flex-direction: column; background: var(--s2); overflow: hidden;
    }
    .code-header {
      padding: 0.85rem 1.2rem;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      background: color-mix(in srgb, var(--surface) 86%, var(--bg)); flex-shrink: 0;
    }
    .code-tabs { display: flex; gap: 0.3rem; }
    .code-tab {
      font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
      padding: 0.28rem 0.65rem; border-radius: 5px; cursor: none;
      transition: all .15s; background: transparent; border: 1px solid transparent;
    }
    .code-tab.active { background: var(--s3); color: var(--accent); border-color: rgba(200,255,0,.15); }
    .code-tab:hover:not(.active) { color: var(--text); background: var(--s3); }

    .copy-btn {
      font-family: var(--mono); font-size: 0.68rem;
      background: var(--accent); color: #000; font-weight: 700;
      border: none; padding: 0.32rem 0.75rem; border-radius: 6px; cursor: none;
      transition: opacity .2s, transform .2s;
      display: inline-flex; align-items: center; gap: 0.35rem;
    }
    .copy-btn:hover { opacity: .88; transform: translateY(-1px); }
    .copy-btn.copied { background: #4cff91; }

    .code-body {
      flex: 1; overflow-y: auto; padding: 1.2rem;
      scrollbar-width: thin; scrollbar-color: var(--muted2) transparent;
    }
    .code-body::-webkit-scrollbar { width: 4px; }
    .code-body::-webkit-scrollbar-thumb { background: var(--muted2); border-radius: 4px; }

    pre {
      font-family: var(--mono); font-size: 0.73rem; line-height: 1.9;
      color: #9aa4b2; white-space: pre-wrap; word-break: break-word;
    }
    .ck  { color: #c792ea; } /* keyword / property */
    .cv  { color: var(--accent); } /* value */
    .cc  { color: #3d4a5c; font-style: italic; } /* comment */
    .cs  { color: var(--cyan); } /* selector */
    .cn  { color: #f78c6c; } /* number */

    .code-info {
      padding: 0.75rem 1.2rem; border-top: 1px solid var(--border);
      font-family: var(--mono); font-size: 0.65rem; color: var(--muted);
      display: flex; gap: 1rem; flex-shrink: 0;
    }
    .code-info span { display: flex; align-items: center; gap: 0.35rem; }
    .code-info i { color: var(--accent); font-size: 0.6rem; }

    /* ── MOBILE ── */
    @media (max-width: 900px) {
      body { overflow: auto; cursor: auto; }
      .cursor, .cursor-ring { display: none; }
      a, button { cursor: pointer; }
      .app { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
      .topbar { position: sticky; top: 0; z-index: 100; }
      .sidebar { border-right: none; border-bottom: 1px solid var(--border); overflow-y: visible; padding: 0.5rem 0; }
      .sidebar-search { display: none; }
      .cat-label { display: none; }
      .sidebar .anim-list { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem 0.75rem; }
      .anim-item { border-left: none; border-radius: 8px; border: 1px solid var(--border); padding: 0.35rem 0.75rem; font-size: 0.75rem; }
      .anim-item.active { border-color: var(--accent); }
      .anim-item .item-new { display: none; }
      .main { grid-template-columns: 1fr; grid-template-rows: auto auto; }
      .preview-panel { height: 360px; border-right: none; border-bottom: 1px solid var(--border); }
      .code-panel { height: 420px; }
      :root { --sidebar: 100%; }
    }

    /* ══════════════════════════════════════
       ANIMATION DEMOS
    ══════════════════════════════════════ */

    /* — Buttons — */
    .demo-btn {
      font-family: var(--font); font-weight: 700; font-size: 0.95rem;
      padding: 0.85rem 2.2rem; border-radius: 100px; border: none;
      cursor: none; display: inline-flex; align-items: center; gap: 0.5rem;
    }

    @media (hover:none), (pointer:coarse) {
      body { cursor: auto; }
      .cursor, .cursor-ring { display: none; }
      a, button, .anim-item { cursor: pointer; }
    }

    /* Magnetic */
    .demo-magnetic {
      background: var(--accent); color: #000;
      transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s;
    }
    .demo-magnetic:hover { box-shadow: 0 12px 32px rgba(200,255,0,.35); }

    /* Ripple */
    .demo-ripple-wrap { position: relative; overflow: hidden; border-radius: 100px; display: inline-flex; }
    .demo-ripple {
      background: transparent; color: var(--accent);
      border: 1.5px solid var(--accent);
      position: relative; overflow: hidden;
    }
    .demo-ripple .ripple {
      position: absolute; border-radius: 50%;
      background: rgba(200,255,0,0.25);
      transform: scale(0); animation: ripple-anim .6s linear;
      pointer-events: none;
    }
    @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

    /* Shimmer */
    .demo-shimmer {
      background: linear-gradient(90deg, #1a1a26, var(--accent), #1a1a26);
      background-size: 200% 100%; color: #000;
      animation: shimmer 2.2s linear infinite;
    }
    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* Fill */
    .demo-fill {
      background: transparent; color: var(--text);
      border: 1.5px solid var(--border); position: relative; overflow: hidden; z-index:0;
    }
    .demo-fill::before {
      content:''; position:absolute; inset:0;
      background: var(--accent);
      transform: scaleX(0); transform-origin: left;
      transition: transform .35s cubic-bezier(.23,1,.32,1); z-index:-1;
    }
    .demo-fill:hover::before { transform: scaleX(1); }
    .demo-fill:hover { color: #000; border-color: var(--accent); }

    /* Bounce */
    .demo-bounce {
      background: var(--accent); color: #000;
      transition: transform .15s;
    }
    .demo-bounce:hover { animation: bounce-btn .4s cubic-bezier(.36,.07,.19,.97); }
    @keyframes bounce-btn {
      0%,100%{transform:translateY(0)}
      30%{transform:translateY(-8px)}
      60%{transform:translateY(-3px)}
    }

    /* — Cards — */
    .demo-card-base {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.8rem 1.5rem; width: 220px;
      font-family: var(--mono); font-size: 0.8rem; color: var(--muted);
    }
    .demo-card-base .card-icon { font-size: 1.6rem; margin-bottom: 0.8rem; display: block; }
    .demo-card-base .card-title { color: var(--text); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }

    /* Lift */
    .demo-lift { transition: transform .25s, box-shadow .25s, border-color .25s; }
    .demo-lift:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,.5); border-color: rgba(200,255,0,.3); }

    /* Glow border — JS-driven, cross-browser */
    .demo-glow-card { position: relative; isolation:isolate; overflow:hidden; border-color:transparent; }
    .demo-glow-card .glow-border-el {
      position:absolute; inset:0; border-radius: var(--radius);
      z-index:0; opacity:.9; padding:1px;
      background: conic-gradient(from var(--glow-angle, 0deg), #c8ff00, #00e5ff, #ff4ecd, #c8ff00);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      animation: glow-border-spin 2.6s linear infinite;
    }
    .demo-glow-card:hover .glow-border-el { opacity: 1; animation-duration:1.2s; }
    .demo-glow-card > :not(.glow-border-el){position:relative; z-index:1}
    @property --glow-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
    @keyframes glow-border-spin { to { --glow-angle: 360deg; } }

    /* Flip */
    .demo-flip-wrap { perspective: 600px; width: 220px; height: 140px; cursor: none; }
    .demo-flip-inner {
      width:100%; height:100%; position:relative;
      transform-style: preserve-3d; transition: transform .55s cubic-bezier(.23,1,.32,1);
    }
    .demo-flip-wrap:hover .demo-flip-inner { transform: rotateY(180deg); }
    .demo-flip-front, .demo-flip-back {
      position:absolute; inset:0; backface-visibility:hidden; border-radius: var(--radius);
      display: flex; flex-direction:column; align-items:center; justify-content:center;
      font-family: var(--mono); padding: 1.5rem;
    }
    .demo-flip-front {
      background: var(--surface); border: 1px solid var(--border); color: var(--muted);
    }
    .demo-flip-front i { font-size:1.8rem; color: var(--accent); margin-bottom: 0.5rem; }
    .demo-flip-front span { font-size: 0.75rem; }
    .demo-flip-back {
      background: linear-gradient(135deg, #0d1a10, #1f3020);
      border: 1px solid rgba(200,255,0,.2); color: var(--accent);
      transform: rotateY(180deg); font-size: 0.75rem; text-align:center;
    }
    .demo-flip-back .back-title { font-weight:700; font-size:0.9rem; margin-bottom:0.3rem; color:var(--text); }

    /* — Loaders — */
    /* Pulse ring */
    .demo-pulse-ring {
      width: 56px; height: 56px; border-radius: 50%;
      border: 3px solid var(--accent);
      animation: pulse-ring 1.4s ease-in-out infinite;
    }
    @keyframes pulse-ring {
      0%  { transform: scale(0.9); opacity: 1; }
      50% { transform: scale(1);   opacity: 0.6; box-shadow: 0 0 0 12px rgba(200,255,0,.1); }
      100%{ transform: scale(0.9); opacity: 1; }
    }

    /* Dots */
    .demo-dots { display: flex; gap: 8px; }
    .demo-dots span {
      width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
      animation: dot-bounce 1.2s ease-in-out infinite;
    }
    .demo-dots span:nth-child(2) { animation-delay: .2s; background: var(--cyan); }
    .demo-dots span:nth-child(3) { animation-delay: .4s; background: #a8ff78; }
    @keyframes dot-bounce { 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(-14px);opacity:1} }

    /* Arc spinner */
    .demo-arc {
      width: 52px; height: 52px; border-radius: 50%;
      border: 3px solid var(--s3);
      border-top-color: var(--accent);
      border-right-color: var(--cyan);
      animation: arc-spin .9s linear infinite;
    }
    @keyframes arc-spin { to { transform: rotate(360deg); } }

    /* Skeleton */
    .demo-skeleton { width: 220px; }
    .sk-line {
      height: 10px; border-radius: 5px; margin-bottom: 8px;
      background: linear-gradient(90deg, var(--s3) 25%, var(--s2) 50%, var(--s3) 75%);
      background-size: 200% 100%;
      animation: skeleton-wave 1.5s ease-in-out infinite;
    }
    .sk-line:last-child { width: 60%; margin-bottom: 0; }
    .sk-circle { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 12px; }
    @keyframes skeleton-wave { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* Bar loader */
    .demo-bar { width: 180px; height: 4px; background: var(--s3); border-radius: 2px; overflow:hidden; }
    .demo-bar::after {
      content:''; display:block; height:100%;
      background: linear-gradient(90deg, var(--accent), var(--cyan));
      animation: bar-load 1.6s ease-in-out infinite;
    }
    @keyframes bar-load {
      0%   { width:0%;   margin-left:0%   }
      50%  { width:75%;  margin-left:10%  }
      100% { width:0%;   margin-left:100% }
    }

    /* — Text — */
    /* Typewriter */
    .demo-typewriter {
      font-family: var(--mono); font-size: 1.1rem; color: var(--accent);
      border-right: 2px solid var(--accent);
      white-space: nowrap; overflow: hidden;
      animation: typing 2.8s steps(22,end) infinite, blink-caret .75s step-end infinite;
      width: 22ch;
    }
    @keyframes typing { 0%,100%{width:0} 40%,70%{width:22ch} }
    @keyframes blink-caret { 50%{border-color:transparent} }

    /* Glitch */
    .demo-glitch {
      font-size: 2.2rem; font-weight: 800; position: relative;
      color: var(--text); letter-spacing: -0.03em;
      animation: glitch-skew 4s infinite;
    }
    .demo-glitch::before, .demo-glitch::after {
      content: attr(data-text); position: absolute; left: 0; top: 0;
    }
    .demo-glitch::before {
      color: var(--cyan);
      animation: glitch-a 4s infinite;
      clip-path: polygon(0 0,100% 0,100% 35%,0 35%);
    }
    .demo-glitch::after {
      color: #ff4ecd;
      animation: glitch-b 4s infinite;
      clip-path: polygon(0 65%,100% 65%,100% 100%,0 100%);
    }
    @keyframes glitch-skew  { 0%,10%,90%,100%{transform:none} 5%{transform:skewX(-3deg)} }
    @keyframes glitch-a { 0%,8%,12%,90%,100%{transform:none;opacity:0} 10%{transform:translate(-3px,0);opacity:.8} }
    @keyframes glitch-b { 0%,8%,12%,90%,100%{transform:none;opacity:0} 10%{transform:translate(3px,0);opacity:.8} }

    /* Word reveal */
    .demo-reveal { font-size: 1.5rem; font-weight: 800; display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .demo-reveal span {
      display: inline-block;
      animation: word-reveal 3s ease infinite;
      opacity: 0;
    }
    .demo-reveal span:nth-child(1) { animation-delay: 0s; color: var(--accent); }
    .demo-reveal span:nth-child(2) { animation-delay: .25s; }
    .demo-reveal span:nth-child(3) { animation-delay: .5s; }
    .demo-reveal span:nth-child(4) { animation-delay: .75s; color: var(--cyan); }
    @keyframes word-reveal {
      0%,90%,100%{opacity:0;transform:translateY(12px)}
      15%,75%{opacity:1;transform:translateY(0)}
    }

    /* Gradient text */
    .demo-gradient-text {
      font-size: 2rem; font-weight: 800; letter-spacing: -0.04em;
      background: linear-gradient(90deg, var(--accent), var(--cyan), #ff4ecd, var(--accent));
      background-size: 300% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-shift 3s linear infinite;
    }
    @keyframes gradient-shift { 0%{background-position:0%} 100%{background-position:300%} }

    /* — Backgrounds — */
    /* Particle canvas — drawn via JS */
    .demo-particle-canvas { width: 100%; height: 100%; position: absolute; inset:0; }

    /* Wave */
    .demo-wave-wrap { width: 100%; height: 100%; position: absolute; inset:0; overflow:hidden; }
    .demo-wave {
      position: absolute; bottom: 0; left: 0; width: 200%;
      height: 80px; opacity: 0.35;
    }
    .wave-1 { animation: wave-move 6s linear infinite; fill: var(--accent); }
    .wave-2 { animation: wave-move 9s linear infinite reverse; fill: var(--cyan); bottom: 15px; opacity:.2; }
    @keyframes wave-move { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* Aurora */
    .demo-aurora {
      width: 100%; height: 100%; position: absolute; inset:0;
      background: var(--bg);
    }
    .aurora-blob {
      position: absolute; border-radius: 50%; filter: blur(60px);
    }
    .aurora-blob:nth-child(1) {
      width: 280px; height: 280px; background: rgba(200,255,0,.12);
      top:-60px; left:-40px; animation: aurora-drift 7s ease-in-out infinite;
    }
    .aurora-blob:nth-child(2) {
      width: 220px; height: 220px; background: rgba(0,229,255,.1);
      bottom:-40px; right:-30px; animation: aurora-drift 9s ease-in-out infinite reverse;
    }
    .aurora-blob:nth-child(3) {
      width: 160px; height: 160px; background: rgba(255,78,205,.08);
      top:40%; left:40%; animation: aurora-drift 11s ease-in-out 1s infinite;
    }
    @keyframes aurora-drift {
      0%,100%{transform:translate(0,0) scale(1)}
      33%{transform:translate(20px,-15px) scale(1.05)}
      66%{transform:translate(-10px,20px) scale(.95)}
    }

    /* Glitch bg */
    .demo-glitch-bg {
      width:100%; height:100%; position:absolute; inset:0;
      background: var(--s2);
    }
    .glitch-line {
      position: absolute; left:0; right:0; height: 2px;
      background: var(--accent); opacity: 0;
      animation: glitch-line-anim 3s ease-in-out infinite;
    }
    @keyframes glitch-line-anim {
      0%,90%,100%{opacity:0;transform:translateX(0)}
      92%{opacity:.6;transform:translateX(-8px)}
      94%{opacity:.3;transform:translateX(12px)}
      96%{opacity:.5;transform:translateX(-4px)}
    }

    /* — Transitions — */
    .demo-transition-wrap { display: flex; gap: 1.5rem; align-items: center; flex-direction: column; }
    .demo-transition-item {
      width: 100px; height: 100px; border-radius: 12px;
      background: var(--surface); border: 1px solid var(--border);
      display: flex; align-items:center; justify-content:center;
      font-family: var(--mono); font-size: 0.65rem; color: var(--muted);
      flex-direction: column; gap:0.4rem; cursor: none;
    }
    .demo-transition-item i { font-size: 1.3rem; color: var(--accent); }

    .demo-elastic {
      transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s;
    }
    .demo-elastic:hover { transform: scale(1.12); background: rgba(200,255,0,.08); border-color: rgba(200,255,0,.3); }

    .demo-spring {
      transition: transform .4s cubic-bezier(.175,.885,.32,1.275), background .3s;
    }
    .demo-spring:hover { transform: rotate(15deg) scale(1.08); background: rgba(0,229,255,.08); border-color: rgba(0,229,255,.3); }

    .demo-morph {
      transition: border-radius .5s, background .4s, transform .4s;
    }
    .demo-morph:hover { border-radius: 50%; background: rgba(168,255,120,.1); border-color: rgba(168,255,120,.3); transform: scale(1.05); }

/* Extra Animation Lab demos */
.demo-neon-button{position:relative;overflow:hidden;color:var(--accent);background:transparent;border:1px solid var(--accent);box-shadow:0 0 18px rgba(200,255,0,.1)}
.demo-neon-button::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(200,255,0,.35),transparent);transform:translateX(-120%);transition:transform .5s}
.demo-neon-button:hover::before{transform:translateX(120%)}
.demo-neon-button:hover{box-shadow:0 0 30px rgba(200,255,0,.32)}
.demo-tilt-card{transition:transform .16s ease,border-color .2s;transform-style:preserve-3d}
.demo-tilt-card:hover{border-color:rgba(200,255,0,.35);box-shadow:0 22px 60px rgba(0,0,0,.28)}
.demo-orbit-loader{width:64px;height:64px;border:1px solid rgba(200,255,0,.28);border-radius:50%;position:relative;animation:orbit-spin 1.2s linear infinite}
.demo-orbit-loader span{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.demo-link-underline{color:var(--text);text-decoration:none;font-weight:700;font-size:1.05rem;background-image:linear-gradient(var(--accent),var(--accent));background-position:0 100%;background-size:0% 2px;background-repeat:no-repeat;transition:background-size .25s ease,color .25s;padding-bottom:3px}
.demo-link-underline:hover{color:var(--accent);background-size:100% 2px}
.demo-blur-reveal{font-size:2.5rem;font-weight:800;color:var(--text);animation:blur-reveal 2.4s ease-in-out infinite}
@keyframes blur-reveal{0%,100%{opacity:.25;filter:blur(10px);transform:translateY(8px)}45%,70%{opacity:1;filter:blur(0);transform:translateY(0)}}
.demo-scanline-card{position:relative;overflow:hidden;text-align:left}
.demo-scanline-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0 45%,rgba(200,255,0,.18) 50%,transparent 55%);background-size:100% 32px;animation:scanline 1.2s linear infinite}
@keyframes scanline{to{background-position:0 32px}}
.demo-toast-slide{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;min-width:220px;border:1px solid rgba(200,255,0,.25);border-radius:10px;background:var(--surface);font-family:var(--mono);color:var(--text);box-shadow:0 18px 40px rgba(0,0,0,.35);animation:toast-slide 2.8s ease-in-out infinite}
.demo-toast-slide i{color:var(--accent)}
@keyframes toast-slide{0%,100%{opacity:0;transform:translateY(18px) scale(.96)}18%,72%{opacity:1;transform:translateY(0) scale(1)}}
.demo-check-wrap{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);color:var(--text)}
.demo-check-box{width:36px;height:36px;border:1px solid rgba(200,255,0,.3);border-radius:9px;display:grid;place-items:center;background:rgba(200,255,0,.06)}
.demo-check-box svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.demo-check-box path{stroke-dasharray:18;stroke-dashoffset:18;animation:check-draw 1.8s ease infinite}
@keyframes check-draw{35%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:18}}