/* =========================================================================
   WALYSER — CONNECT
   -------------------------------------------------------------------------
   Eigenes Stylesheet nur für connect.html. Baut auf base.css / site.css auf
   und ergänzt: die bewegte Hintergrundbühne (Higgsfield-Platten + Canvas),
   das Glas-Panel mit der Wallet-Auswahl und die Verbindungs-Sequenz.
   Alle Bewegungen werden bei prefers-reduced-motion abgeschaltet.
   ========================================================================= */

:root{
  --cxGlass:rgba(255,255,255,.045);
  --cxGlassLine:rgba(255,255,255,.10);
  --cxRadius:24px;
}

/* ---------- Bühne ---------- */
.cx{position:relative;padding:0 0 90px}
.cxStage{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%,#140a2e 0%,transparent 60%),
    radial-gradient(90% 70% at 50% 120%,#06121a 0%,transparent 62%),
    var(--bg)}

/* Higgsfield-Platten. Jede Ebene driftet mit eigener Dauer und Richtung,
   dadurch entsteht Tiefe statt eines flachen Standbilds. */
.cxPlate{position:absolute;top:50%;left:50%;width:132%;height:132%;
  --tx:0px;--ty:0px;transform:translate(-50%,-50%);object-fit:cover;
  will-change:transform,opacity}
.cxPlate1{opacity:.62;mix-blend-mode:screen;filter:saturate(1.15) contrast(1.05);
  animation:cxDrift1 46s ease-in-out infinite alternate}
.cxPlate2{opacity:.30;mix-blend-mode:screen;filter:blur(.4px) saturate(1.3);
  animation:cxDrift2 62s ease-in-out infinite alternate}
/* Die Parallaxe liefert nur --tx / --ty. Weil die Keyframes diese Variablen
   mitrechnen, bleiben Drift und Mausbewegung gleichzeitig aktiv. */
@keyframes cxDrift1{
  0%{transform:translate(calc(-51% + var(--tx)),calc(-50% + var(--ty))) scale(1.00) rotate(0deg)}
  100%{transform:translate(calc(-49% + var(--tx)),calc(-52% + var(--ty))) scale(1.09) rotate(1.2deg)}
}
@keyframes cxDrift2{
  0%{transform:translate(calc(-49% + var(--tx)),calc(-51% + var(--ty))) scale(1.10) rotate(-1deg)}
  100%{transform:translate(calc(-52% + var(--tx)),calc(-49% + var(--ty))) scale(1.00) rotate(.8deg)}
}

/* Partikel-Netz (js/connect.js zeichnet hier) */
.cxCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}

/* Perspektivischer Bodenraster */
.cxFloor{position:absolute;left:-25%;right:-25%;bottom:-14%;height:58%;opacity:.16;--tx:0px;--ty:0px;
  background-image:
    repeating-linear-gradient(90deg,#7c5cff33 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,#00d9ff2b 0 1px,transparent 1px 92px);
  transform:perspective(560px) rotateX(74deg) translateX(var(--tx));transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent,#000 45%,transparent 92%);
  animation:cxFloorRun 22s linear infinite}
@keyframes cxFloorRun{to{background-position:0 92px,0 92px}}

/* Langsam durchziehender Lichtschein */
.cxSweep{position:absolute;top:-60%;left:-40%;width:60%;height:220%;
  background:linear-gradient(100deg,transparent,#ffffff0e 42%,#7c5cff1f 50%,#ffffff0e 58%,transparent);
  filter:blur(28px);animation:cxSweep 17s ease-in-out infinite}
@keyframes cxSweep{
  0%{transform:translateX(-30%) rotate(8deg);opacity:0}
  18%{opacity:1}
  70%{opacity:1}
  100%{transform:translateX(300%) rotate(8deg);opacity:0}
}

/* Vignette hält die Mitte lesbar */
.cxVignette{position:absolute;inset:0;
  background:radial-gradient(78% 62% at 50% 46%,transparent 0%,#05060acc 72%,#05060a 100%)}

/* Parallaxe: connect.js setzt --mx / --my (jeweils -1 … 1) */
.cxPar{transition:transform .5s cubic-bezier(.2,.7,.3,1)}

/* ---------- Kopfbereich ---------- */
.cxHead{position:relative;z-index:1;padding:66px 0 6px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:start}
.cxHeadTxt{max-width:70ch}
.cxLead + .cxLead{margin-top:14px}
.cxHead .eyebrow{font-size:12.5px;letter-spacing:.14em}
.cxTitle{font-size:56px;line-height:1.02;letter-spacing:-.046em;margin:18px 0 0;max-width:14ch}
.cxTitle .grad{background:linear-gradient(112deg,#b9a4ff,var(--cyan) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cxLead{color:var(--muted);font-size:16.5px;line-height:1.72;max-width:62ch;margin:18px 0 0}
.cxLead b{color:#e8ebf3;font-weight:650}

/* ---------- Knopf oben rechts ----------
   Reine Gestaltung: er füllt die freie Fläche neben der Überschrift und
   hat bewusst keine Funktion. ------------------------------------------- */
.cxHeadCta{display:flex;flex-direction:column;align-items:flex-end;gap:11px;
  padding-top:52px;text-align:right}
.cxCta{position:relative;overflow:hidden;border:0;cursor:pointer;white-space:nowrap;
  border-radius:15px;padding:19px 30px;font-size:15.5px;font-weight:750;letter-spacing:.005em;
  color:#06070b;background:linear-gradient(120deg,var(--violet),var(--cyan));
  box-shadow:0 22px 48px -18px #7c5cffcc;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.cxCta:hover{transform:translateY(-3px);box-shadow:0 30px 60px -18px #7c5cffee}
.cxCta:active{transform:translateY(-1px)}
.cxCta:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,#ffffff70,transparent);
  animation:cxShine 4.4s ease-in-out infinite}
@keyframes cxShine{0%{left:-60%}55%,100%{left:130%}}
.cxCtaSub{display:block;color:#6f7789;font-size:11.5px;line-height:1.55;max-width:24ch}

/* ---------- Ablauf: vier Glaskarten ---------- */
.cxFlow{list-style:none;margin:52px 0 0;padding:0;position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cxF{position:relative;overflow:hidden;padding:26px 22px 24px;border-radius:20px;
  background:linear-gradient(180deg,rgba(19,23,36,.72),rgba(10,13,21,.72));
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--cxGlassLine);
  box-shadow:0 40px 80px -44px #000,0 1px 0 #ffffff0d inset;
  opacity:0;transform:translateY(14px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s}
.cxF.in{animation:cxRise .7s cubic-bezier(.2,.8,.3,1) forwards}
.cxF.in:nth-child(2){animation-delay:.09s}
.cxF.in:nth-child(3){animation-delay:.18s}
.cxF.in:nth-child(4){animation-delay:.27s}
@keyframes cxRise{to{opacity:1;transform:none}}

/* Lichtkante oben, die beim Ueberfahren aufleuchtet */
.cxF:before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,#7c5cffb0,#00d9ffb0,transparent);
  opacity:.35;transition:opacity .3s,left .4s,right .4s}
.cxF:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);
  box-shadow:0 48px 90px -40px #000,0 0 34px -20px #7c5cff}
.cxF:hover:before{opacity:1;left:4%;right:4%}

.cxF .n{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;margin-bottom:15px;
  font:12px ui-monospace,monospace;font-weight:700;color:#06070b;
  background:linear-gradient(125deg,var(--violet),var(--cyan));
  box-shadow:0 12px 26px -12px #7c5cffcc}
.cxF b{display:block;font-size:15.5px;letter-spacing:-.015em;margin-bottom:7px;color:#fff}
.cxF span:not(.n){display:block;color:var(--muted);font-size:13px;line-height:1.65}

/* ---------- Sicherheitsnotiz ---------- */
.cxSafe{position:relative;z-index:1;margin-top:16px;padding:19px 22px;border-radius:18px;
  border:1px solid #27e7a42a;background:linear-gradient(180deg,#27e7a40e,#27e7a403);
  display:flex;gap:15px;align-items:flex-start}
.cxSafe .ic{font-size:20px;line-height:1.2}
.cxSafe p{margin:0;color:#bfe9d8;font-size:13px;line-height:1.7;max-width:96ch}
.cxSafe p b{color:#e6fff5}

/* ---------- Vertrauensleiste ---------- */
.cxTrust{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1}
.cxTrust span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;color:#cbd0dc;
  border:1px solid #27e7a42a;background:#27e7a409;
  transition:border-color .2s,background .2s}
.cxTrust span:hover{border-color:#27e7a455;background:#27e7a412}
.cxTrust i{font-style:normal;color:var(--green);font-weight:800;font-size:11px}

/* ---------- Was danach passiert ---------- */
.cxAfter{position:relative;z-index:1;margin-top:64px}
.cxAfterGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.cxCard{padding:20px 18px;border-radius:17px;position:relative;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,#0d1019cc,#0a0d15cc);
  transition:transform .2s,border-color .2s}
.cxCard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18)}
.cxCard:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#7c5cff80,transparent);opacity:0;transition:opacity .25s}
.cxCard:hover:before{opacity:1}
.cxCard .ic{font-size:20px;display:block;margin-bottom:11px}
.cxCard h3{margin:0 0 6px;font-size:14.5px;letter-spacing:-.01em}
.cxCard p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}

/* ---------- Responsiv ---------- */
@media(max-width:1020px){
  .cxHead{grid-template-columns:1fr;gap:26px}
  .cxHeadCta{align-items:flex-start;text-align:left;padding-top:0}
  .cxCtaSub{max-width:none}
  .cxTitle{font-size:42px;max-width:none}
  .cxFlow{grid-template-columns:1fr 1fr}
  .cxAfterGrid{grid-template-columns:1fr 1fr}
  .cxRing{width:min(900px,125vw);top:30%}
}
@media(max-width:620px){
  .cxHead{padding:34px 0 22px}
  .cxTitle{font-size:33px}
  .cxLead{font-size:14.5px}
  .cx{padding-bottom:60px}
  .cxCta{width:100%;padding:17px 20px;font-size:15px}
  .cxFlow{grid-template-columns:1fr;gap:11px;margin-top:36px}
  .cxF{padding:21px 18px 19px}
  .cxSafe{padding:16px 17px;gap:12px}
  .cxSafe p{font-size:12.5px}
  .cxAfterGrid{grid-template-columns:1fr}
  .cxFloor{display:none}
}

/* ---------- Bewegung aus ---------- */
@media(prefers-reduced-motion:reduce){
  .cxPlate1,.cxPlate2,.cxFloor,.cxSweep,.cxRing,.cxCta:after{animation:none!important}
  .cxF{opacity:1;transform:none;animation:none!important}
  .cxPar{transition:none}
  .cxCanvas{display:none}
}