:root{
    --cxq-pink:#ff2d8d;
    --cxq-cyan:#00e5ff;
    --cxq-dark:#0b0f14;
  }

  /* ===== Modal shell ===== */
  .cxq-modal{position:fixed;inset:0;z-index:9999;display:none;opacity:0;pointer-events:none}
  .cxq-modal.cxq-open{display:block;opacity:1;pointer-events:auto}
  html.cxq-no-scroll, body.cxq-no-scroll{overflow:hidden}

  /* ===== Stage (background) ===== */
  .cxq-stage{
    position:fixed;inset:0;width:100dvw;height:100dvh;overflow:hidden;
    background:radial-gradient(120vw 100vh at 50% 50%, #0f1318 0%, var(--cxq-dark) 60%, #080b10 100%);
  }
  #cxq-canvas{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(120vmax 120vmax at 50% 50%, rgba(255,45,141,.10), rgba(0,229,255,.06) 25%, rgba(0,0,0,0) 55%);
  }
  .cxq-aurora{
    position:absolute;inset:-18vmin;z-index:1;pointer-events:none;opacity:.6;
    filter:blur(42px) saturate(1.2);mix-blend-mode:screen;
    background:
      radial-gradient(40vmax 40vmax at 22% 38%, rgba(255,45,141,.18), transparent 60%),
      radial-gradient(50vmax 50vmax at 78% 62%, rgba(0,229,255,.18), transparent 60%),
      radial-gradient(30vmax 30vmax at 50% 50%, rgba(255,255,255,.06), transparent 60%);
    animation: cxq-aurora 8s ease-in-out infinite alternate
  }
  @keyframes cxq-aurora{to{transform:translate3d(0,-2%,0) scale(1.02)}}

  /* ===== Center (parallax via CSS vars) ===== */
  .cxq-center{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%) translate3d(var(--cxq-parx,0),var(--cxq-pary,0),0);
    display:flex;align-items:center;gap:28px;z-index:3;will-change:transform
  }
  @media (max-width:740px){.cxq-center{flex-direction:column;gap:14px}}

  /* ===== Logo (fixed wrapper to keep contour) ===== */
  .cxq-logo-wrap{
    width:124px;height:124px;border-radius:20px;position:relative;overflow:hidden;opacity:0;
    box-shadow:0 14px 30px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  @media (min-width:1025px){.cxq-logo-wrap{width:138px;height:138px}}
  @media (max-width:740px){.cxq-logo-wrap{width:92px;height:92px;border-radius:16px}}

  .cxq-logo{
    width:100%;height:100%;object-fit:cover;display:block;
    transform-origin:50% 50%;
    /* внутренняя пульсация без “дерганья” контура: масштабируем контент внутри фикс. враппера */
    animation: cxq-logo-pulse 0.8s ease-in-out 0s infinite;
    will-change: transform, filter;
  }
  @keyframes cxq-logo-pulse{
    0%   {transform:scale(1);    filter:brightness(1) saturate(1);}
    50%  {transform:scale(1.055);filter:brightness(1.08) saturate(1.06);}
    100% {transform:scale(1);    filter:brightness(1) saturate(1);}
  }

  /* ===== Brand (container) ===== */
  .cxq-brand{
    position:relative;display:inline-block;white-space:nowrap;opacity:0;
    font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Inter,"SF Pro Display",Arial,sans-serif;
    font-weight:900;font-size:clamp(36px,9.2vw,118px);letter-spacing:.01em;line-height:.92;
    perspective:1000px;transform-style:preserve-3d;
    filter:drop-shadow(0 0 14px rgba(255,45,141,.24)) drop-shadow(0 0 8px rgba(0,229,255,.18));
  }

  /* ===== Letters wrapper ===== */
  .cxq-text{
    display:inline-block;white-space:nowrap;line-height:1.55;
    transform-style:preserve-3d;will-change:transform;
  }

  /* ===== LETTERS: Pixar-like bounce + cyan/pink shimmer per-letter ===== */
  .cxq-letter{
    display:inline-block;position:relative;transform-origin:50% 70%;
    backface-visibility:hidden;will-change:transform,filter,background-position;
    /* индивидуальный перелив только между #00e5ff и #ff2d8d */
    background:linear-gradient(135deg, var(--cxq-cyan) 0%, var(--cxq-pink) 50%, var(--cxq-cyan) 100%);
    background-size:220% 220%;
    -webkit-background-clip:text;background-clip:text;color:transparent;

    /* стартовое состояние для прыжка */
    opacity:0; transform:translateY(42px) rotateX(55deg) scale(.86);
    animation:
        cxq-letter-in 1100ms cubic-bezier(.20,.80,.20,1.00) var(--d,0ms) forwards,
        cxq-holo-shift 3.0s ease-in-out calc(var(--d,0ms) + 1000ms) infinite alternate,
        cxq-idle-bounce 2000ms ease-in-out calc(var(--d,0ms) + 1200ms) infinite;
        animation-fill-mode: forwards, both, both;
    text-shadow:
      0 1px 0 rgba(0,0,0,.22),
      0 12px 22px rgba(0,0,0,.28),
      0 34px 54px rgba(0,0,0,.18);
  }
  .cxq-letter.is-shown { opacity: 1 !important; }
  /* вход с “сквиш/стретч” как у Pixar */
  @keyframes cxq-letter-in{
    0%   {opacity:0; transform:translateY(42px) rotateX(55deg) scale(.86,.86)}
    40%  {opacity:1; transform:translateY(-14px) rotateX(-8deg) scale(1.10,1.10)}
    62%  {transform:translateY(0) rotateX(0) scale(1.08,.92)}  /* касание — squash */
    78%  {transform:translateY(-6px) rotateX(-2deg) scale(1.02,1.02)}
    100% {transform:translateY(0) rotateX(0) scale(1,1)}
  }
  /* лёгкий вечный перелив только между #00e5ff и #ff2d8d */
  @keyframes cxq-holo-shift{
    0%   {background-position:0% 50%;}
    100% {background-position:100% 50%;}
  }
  /* тихая “дыхалка” букв после приземления (без сдвига по оси X — чтобы не разъезжались) */
  @keyframes cxq-idle-bounce{
    0%   {transform:translateY(0)   scale(1,1);}
    50%  {transform:translateY(-3px) scale(1.02,.98);}
    100% {transform:translateY(0)   scale(1,1);}
  }

  /* ===== Subtitle ===== */
  .cxq-sub{
    display:block;margin-top:.34em;font-weight:700;
    font-size:clamp(12px,2.4vw,22px);letter-spacing:.18em;color:#fff;opacity:.18;
  }

  /* ===== Burst & sparks ===== */
  .cxq-burst{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;z-index:2;pointer-events:none;opacity:0}
  .cxq-sparks{position:absolute;inset:0;z-index:2;pointer-events:none}
  .cxq-spark{position:absolute;width:6px;height:6px;border-radius:50%;filter:blur(1px);opacity:0.0;pointer-events:none}

  /* ===== Skip ===== */
  .cxq-skip{
    position:absolute;right:18px;bottom:18px;z-index:5;padding:10px 14px;border-radius:12px;
    border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
    font:600 13px/1.2 system-ui;letter-spacing:.04em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    cursor:pointer;opacity:0;transform:translateY(8px);
    transition:opacity .3s ease,transform .3s ease,background .2s ease,border-color .2s ease
  }
  .cxq-skip.cxq-show{opacity:1;transform:translateY(0)}
  .cxq-skip:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26)}