/* ============================================================ AintDumb V2 — Dynamik-/Star-Trek-Ebene (LOKAL, nicht deployen) Laedt NACH styles.css. Additiv, nur bestehende Tokens. Bewegung hinter html.v2-motion (von v2.js gesetzt). Nativer Scroll (kein Lenis) -> butterweich. ============================================================ */ /* ===== WARP-STARFIELD ===== */ /* Canvas bei z-index -1, UNTER dem Inhalt. Damit er nicht vom opaken body-Hintergrund verdeckt wird, machen wir body-Background transparent — die Grundfarbe bleibt auf (gleiche Farbe), die Aurora-Bilder und body::before/::after-Glows bleiben (halbtransparent) erhalten und liegen ueber den Sternen. Nur aktiv bei v2-motion. */ html.v2-motion{background-color:var(--bg)} html.v2-motion body{background-color:transparent} #v2-warp{ position:fixed;inset:0;z-index:-1;pointer-events:none;display:block; background:transparent; } /* ===== ANKUNFTS-LICHTWELLE (Echo der Intro-Boot-Welle, einmalig bei Landung) ===== */ .v2-arrive-sweep{ position:fixed;inset:0;z-index:60;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(94,226,255,.10) 50%,transparent 62%); background-size:260% 100%;background-position:130% 0; animation:v2Arrive 1.5s cubic-bezier(.4,0,.2,1) both; } @keyframes v2Arrive{0%{background-position:130% 0;opacity:0}12%{opacity:1}100%{background-position:-130% 0;opacity:0}} @media (prefers-reduced-motion:reduce){.v2-arrive-sweep{display:none}} /* ===== HERO-ENTRANCE (laeuft einmal; Endzustand = normales Layout) ===== */ /* TEXT: steigt + entblurrt, gestaffelt. */ html.v2-motion .hero-text>*, html.v2-motion .ph-text>*{ opacity:0;transform:translateY(22px);filter:blur(6px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .6s ease; transition-delay:calc(var(--v2-i,0)*80ms); } html.v2-motion.v2-lit .hero-text>*, html.v2-motion.v2-lit .ph-text>*{ opacity:1;transform:none;filter:blur(0); } /* VISUAL-KARTE: nur Opacity/Blur beim Auftakt — KEIN transform-Uebergang, damit das Parallax-transform pro Frame ruckelfrei bleibt. */ html.v2-motion .hero-tree .pt-card, html.v2-motion .ph-vis .hv-card{ opacity:0;filter:blur(8px); transition:opacity 1s ease .15s,filter .8s ease .15s; transform:translate3d(0,var(--v2-par,0px),0); /* Parallax, ohne Transition */ will-change:transform; } html.v2-motion.v2-lit .hero-tree .pt-card, html.v2-motion.v2-lit .ph-vis .hv-card{ opacity:1;filter:blur(0); } /* ===== REVEAL-WELLE (erweitert Live-.reveal, deutlich spuerbarer) ===== */ html.v2-motion .js-anim .reveal{transform:translateY(40px) scale(.965)} html.v2-motion .js-anim .reveal.in{transform:none} /* ===== PARALLAX-BANDS (nur wenn Sektion bg-image hat; sonst no-op) ===== */ html.v2-motion .story,html.v2-motion .apps,html.v2-motion .sec, html.v2-motion .pain,html.v2-motion .demo2{ background-position:center calc(var(--v2-par,0px)*.6); } /* ===== SEKTIONS-POWER-ON-SWEEP (Cyan, einmalig pro Sektion) ===== */ html.v2-motion .js-anim .reveal-sec{position:relative} html.v2-motion .js-anim .reveal-sec::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; background:linear-gradient(180deg,transparent,rgba(94,226,255,.14),transparent); background-size:100% 220%;background-position:0 -120%;opacity:0; } html.v2-motion .js-anim .reveal-sec.in::after{ animation:v2Sweep .8s cubic-bezier(.4,0,.2,1) .04s both; } @keyframes v2Sweep{ 0%{opacity:0;background-position:0 -120%} 20%{opacity:.16} 100%{opacity:0;background-position:0 120%} } html.v2-motion .js-anim .trust.reveal-sec::after{display:none} /* ===== WARP-PROGRESS auf dem bestehenden Nav-Rand ===== */ /* Nav bleibt sticky (Live-Stil); sticky ist selbst Bezugssystem für den ::after-Balken */ html.v2-motion nav.top::after{ content:"";position:absolute;left:0;bottom:-1px;height:2px; width:calc(var(--v2-prog,0)*100%); background:linear-gradient(90deg in oklch,var(--blue),var(--cyan)); box-shadow:0 0 10px var(--blue-glow);transition:width .1s linear; } /* Eyebrow-Strich gluht auf, wenn seine Sektion zentriert ist */ html.v2-motion .reveal-sec.in .eyebrow::before{ box-shadow:0 0 16px var(--blue-glow),0 0 4px var(--cyan); } /* ===== MAGNETISCHE CTA + SANFTES CARD-TILT (nur Fein-Pointer) ===== */ @media (hover:hover) and (pointer:fine){ html.v2-motion .btn.primary{ transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .3s; } html.v2-motion .pillar,html.v2-motion .acard,html.v2-motion .pain-card, html.v2-motion .price-card,html.v2-motion .wf-card{ transition:transform .16s cubic-bezier(.2,.7,.2,1),border-color .25s,background .25s; } html.v2-motion .is-tilt{ transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-4px); will-change:transform; } html.v2-motion .acard.is-tilt::after,html.v2-motion .pillar.is-tilt::after{ opacity:1; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(94,226,255,.16),transparent 55%); } } /* ===== COUNT-UP-PARITAET ===== */ html.v2-motion [data-count]{font-variant-numeric:tabular-nums} /* ===== HARTE REDUCED-MOTION-GARANTIE ===== */ @media (prefers-reduced-motion:reduce){ html.v2-motion .hero-text>*,html.v2-motion .ph-text>*, html.v2-motion .hero-tree .pt-card,html.v2-motion .ph-vis .hv-card{ opacity:1!important;transform:none!important;filter:none!important;transition:none!important; } html.v2-motion .story,html.v2-motion .apps,html.v2-motion .sec, html.v2-motion .pain,html.v2-motion .demo2{background-position:center!important} html.v2-motion .js-anim .reveal-sec::after{display:none!important} html.v2-motion .js-anim .reveal{transform:none!important} html.v2-motion nav.top::after{transition:none} html.v2-motion .is-tilt{transform:none!important} }