/* ========================================================= Chamber War – Animationen (Enhanced) Grundsatz: Inhalte sind IMMER sichtbar, auch ohne JavaScript. Das Ein-/Ausblenden beim Scrollen wird nur aktiv, wenn die Klasse "js" (via main.js) am -Element gesetzt wurde. ========================================================= */ /* ---- Reveal / Scroll-In ---- */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0s); } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } html.js .reveal--left { transform: translateX(-32px); } html.js .reveal--left.is-visible { transform: translateX(0); } html.js .reveal--right { transform: translateX(32px); } html.js .reveal--right.is-visible { transform: translateX(0); } html.js .reveal--scale { transform: scale(0.92); } html.js .reveal--scale.is-visible { transform: scale(1); } .reveal--delay { --reveal-delay: 0.15s; } /* ---- Badge Dot Pulse ---- */ .badge-pill__dot { animation: dotPulse 2.4s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--teal); } 50% { opacity: 0.55; transform: scale(0.75); box-shadow: 0 0 4px var(--teal); } } /* ---- Ambient Background Drift ---- */ .ambient__glow { animation: glowDrift 14s ease-in-out infinite; } .ambient__glow--copper { animation-delay: -4s; } .ambient__glow--purple { animation-delay: -9s; } @keyframes glowDrift { 0%, 100% { opacity: 0.28; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: 0.42; transform: translate3d(0, -18px, 0) scale(1.06); } } /* ---- Floating / Levitate ---- */ .float { animation: float 5s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---- Shimmer Sweep (auf Cards) ---- */ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255, 255, 255, 0.045) 50%, transparent 60% ); background-size: 200% 100%; animation: shimmerSweep 3.5s ease-in-out infinite; pointer-events: none; } @keyframes shimmerSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---- Glow Pulse (Teal) ---- */ @keyframes glowPulseTeal { 0%, 100% { box-shadow: 0 0 18px var(--teal-glow), 0 0 0 0 transparent; } 50% { box-shadow: 0 0 40px var(--teal-glow), 0 0 10px rgba(61, 214, 200, 0.2); } } /* ---- Glow Pulse (Copper) ---- */ @keyframes glowPulseCopper { 0%, 100% { box-shadow: 0 0 16px rgba(200, 121, 65, 0.25); } 50% { box-shadow: 0 0 38px rgba(200, 121, 65, 0.5); } } /* ---- Border Glow Rotate ---- */ .border-glow-rotate { position: relative; } .border-glow-rotate::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient( from var(--border-angle, 0deg), var(--teal) 0deg, transparent 60deg, transparent 300deg, var(--copper) 360deg ); animation: borderRotate 4s linear infinite; z-index: -1; opacity: 0; transition: opacity 0.35s ease; } .border-glow-rotate:hover::before { opacity: 1; } @property --border-angle { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes borderRotate { to { --border-angle: 360deg; } } /* ---- Counter Number Roll ---- */ .counter-roll { display: inline-block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Typewriter Cursor ---- */ .typewriter-cursor { display: inline-block; width: 3px; height: 1em; background: var(--teal); margin-left: 4px; vertical-align: text-bottom; animation: blink 0.9s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ---- Hero Title Word Slide-In ---- */ @keyframes heroWordIn { from { opacity: 0; transform: translateY(40px) rotateX(-20deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } } .hero-title__line { display: block; animation: heroWordIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-title__line:nth-child(1) { animation-delay: 0.1s; } .hero-title__line:nth-child(2) { animation-delay: 0.25s; } /* ---- Badge Pill Slide-In ---- */ @keyframes badgeFadeIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .badge-pill { animation: badgeFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; } /* ---- Stat Value Count-Up (CSS side) ---- */ @keyframes statIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .hero-stat { animation: statIn 0.5s ease both; } .hero-stat:nth-child(1) { animation-delay: 0.4s; } .hero-stat:nth-child(2) { animation-delay: 0.5s; } .hero-stat:nth-child(3) { animation-delay: 0.6s; } /* ---- Section Divider Icon Spin-In ---- */ @keyframes iconSpinIn { from { opacity: 0; transform: rotate(-90deg) scale(0.5); } to { opacity: 1; transform: rotate(0deg) scale(1); } } .section-divider__icon { animation: iconSpinIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* ---- CTA Band Pulse Border ---- */ .cta-band__inner { animation: ctaBorderPulse 4s ease-in-out infinite; } @keyframes ctaBorderPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent, var(--shadow-md); } 50% { box-shadow: 0 0 40px var(--teal-glow), var(--shadow-md); } } /* ---- Roadmap In-Progress: Border-Puls ---- */ .roadmap-item--in_progress, .roadmap-timeline .roadmap-item--in_progress .roadmap-item__body { animation: progressBorderPulse 2.8s ease-in-out infinite; } @keyframes progressBorderPulse { 0%, 100% { border-color: rgba(212, 138, 58, 0.40); } 50% { border-color: rgba(212, 138, 58, 0.75); } } /* ---- Particle Canvas (JS-generated) ---- */ #hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* ---- Tilt Card (JS-enhanced) ---- */ .tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform 0.08s ease-out; } /* ---- Hover Lift – nur für Karten MIT Tilt-Effekt ---- */ .goal-card, .feature-card, .timeline-step { /* Basis-Transition – JS überschreibt sie beim Tilt per inline style */ transition: border-color 0.35s ease, box-shadow 0.35s ease; } /* Roadmap: kein transform – nur Border & Glow */ .roadmap-item, .roadmap-item__body { transition: border-color 0.35s ease, box-shadow 0.35s ease; } /* News-Card: dezentes Slide + Glow */ .news-card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; } /* ---- Vault Frame Corner Blink ---- */ @keyframes cornerBlink { 0%, 80%, 100% { opacity: 1; } 90% { opacity: 0.2; } } .vault-frame__corner { animation: cornerBlink 3.5s ease-in-out infinite; } .vault-frame__corner--tr { animation-delay: 0.4s; } .vault-frame__corner--bl { animation-delay: 0.8s; } .vault-frame__corner--br { animation-delay: 1.2s; } /* ---- Section Kicker Underline Slide ---- */ @keyframes kickerLine { from { width: 0; } to { width: 100%; } } /* ---- Scroll Progress Bar ---- */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--teal), var(--copper-light)); z-index: 9999; transition: width 0.1s linear; pointer-events: none; } /* ---- Icon Badge Glow on Hover ---- */ .icon-badge { transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .goal-card:hover .icon-badge, .feature-card:hover .icon-badge { box-shadow: 0 0 18px var(--teal-glow); transform: scale(1.1) rotate(-4deg); } /* ---- Reduced Motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html.js .reveal { opacity: 1; transform: none; } .hero-title__line, .badge-pill, .hero-stat { animation: none; opacity: 1; transform: none; } }