/* GENESIS SHOWCASE — ADVANCED ANIMATIONS & GRAPHICS */
/* Include this in addition to styles.css for cinematic effects */

/* === BREATHING ANIMATIONS === */
@keyframes breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.05);opacity:1}}
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.4)}50%{box-shadow:0 0 30px 10px rgba(201,168,76,0)}}
@keyframes flowGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes neuralPulse{0%{stroke-dashoffset:1000}100%{stroke-dashoffset:0}}
@keyframes orbitSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{left:-100%}100%{left:100%}}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes ripple{0%{transform:scale(1);opacity:.4}100%{transform:scale(2.5);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 5px rgba(26,188,156,.3))}50%{filter:drop-shadow(0 0 20px rgba(26,188,156,.6))}}

/* === SCROLL REVEAL === */
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* === ANIMATED COUNTER === */
.counter-num{font-family:'Cormorant Garamond',serif;font-weight:700;color:var(--gold,#c9a84c);display:inline-block;animation:countUp .6s ease forwards}

/* === NEURAL NETWORK SVG === */
.neural-bg{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;opacity:.15}
.neural-bg svg{width:100%;height:100%}
.neural-line{stroke:rgba(26,188,156,.4);stroke-width:1;fill:none;stroke-dasharray:8 4;animation:neuralPulse 3s linear infinite}
.neural-dot{fill:rgba(201,168,76,.6);animation:pulseGold 2s ease-in-out infinite}

/* === ORGANISM DIAGRAM === */
.organism-ring{position:relative;width:500px;height:500px;margin:60px auto;border-radius:50%;border:1px solid rgba(201,168,76,.1)}
.organism-ring::before{content:'';position:absolute;inset:30px;border-radius:50%;border:1px solid rgba(26,188,156,.15);animation:orbitSlow 30s linear infinite}
.organism-ring::after{content:'';position:absolute;inset:60px;border-radius:50%;border:1px solid rgba(201,168,76,.1);animation:orbitSlow 45s linear infinite reverse}
.organism-node{position:absolute;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:rgba(10,22,40,.8);border:2px solid rgba(201,168,76,.3);animation:float 4s ease-in-out infinite;cursor:default;transition:all .3s}
.organism-node:hover{border-color:var(--teal,#1abc9c);transform:scale(1.2);box-shadow:0 0 30px rgba(26,188,156,.3)}
.organism-node .on-label{position:absolute;top:110%;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.organism-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(26,188,156,.2),transparent);display:flex;align-items:center;justify-content:center;animation:breathe 4s ease-in-out infinite}
.organism-center span{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;color:var(--teal,#1abc9c)}

/* === DATA FLOW ANIMATION === */
.dataflow{position:relative;height:400px;max-width:800px;margin:40px auto;overflow:hidden}
.dataflow-track{position:absolute;top:0;left:50%;width:2px;height:100%;background:linear-gradient(180deg,rgba(201,168,76,.3),rgba(26,188,156,.3),rgba(201,168,76,.3))}
.dataflow-node{position:absolute;left:50%;transform:translateX(-50%);background:rgba(10,22,40,.9);border:1px solid rgba(201,168,76,.3);border-radius:10px;padding:16px 24px;text-align:center;opacity:0;animation:slideUp .6s ease forwards}
.dataflow-node .dfn-label{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold,#c9a84c)}
.dataflow-node .dfn-title{font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;color:#fff;margin-top:4px}
.dataflow-particle{position:absolute;left:50%;width:8px;height:8px;border-radius:50%;background:var(--teal,#1abc9c);transform:translateX(-50%);animation:flowDown 3s linear infinite;box-shadow:0 0 10px rgba(26,188,156,.6)}
@keyframes flowDown{0%{top:-10px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

/* === COMPARISON BARS (animated) === */
.anim-bar{height:36px;border-radius:6px;position:relative;overflow:hidden;margin-bottom:12px}
.anim-bar .bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 16px;font-size:.78rem;font-weight:600;color:#fff;width:0;transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.anim-bar.visible .bar-fill{width:var(--w)}
.anim-bar .bar-fill.genesis{background:linear-gradient(90deg,#1a5276,#1abc9c)}
.anim-bar .bar-fill.competitor{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.anim-bar .bar-shimmer{position:absolute;top:0;left:-100%;width:200%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 3s infinite}

/* === STAT CARDS (premium) === */
.stat-card-premium{background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(201,168,76,.12);border-radius:16px;padding:36px 28px;text-align:center;position:relative;overflow:hidden;transition:all .4s}
.stat-card-premium:hover{border-color:rgba(26,188,156,.4);transform:translateY(-4px);box-shadow:0 20px 60px rgba(26,188,156,.08)}
.stat-card-premium::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(26,188,156,.03),transparent 70%);opacity:0;transition:opacity .4s}
.stat-card-premium:hover::before{opacity:1}
.stat-card-premium .scp-num{font-family:'Cormorant Garamond',serif;font-size:3.2rem;font-weight:700;background:linear-gradient(135deg,var(--gold,#c9a84c),#1abc9c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.stat-card-premium .scp-label{font-size:.88rem;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.4}
.stat-card-premium .scp-detail{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:rgba(255,255,255,.3);margin-top:8px;letter-spacing:.5px}

/* === TIMELINE (vertical animated) === */
.timeline-v{position:relative;padding-left:40px;max-width:700px;margin:40px auto}
.timeline-v::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold,#c9a84c),#1abc9c,var(--gold,#c9a84c));border-radius:2px}
.timeline-v .tv-item{position:relative;margin-bottom:40px;opacity:0;transform:translateX(-20px);transition:all .6s ease}
.timeline-v .tv-item.visible{opacity:1;transform:translateX(0)}
.timeline-v .tv-dot{position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--gold,#c9a84c);border:3px solid var(--navy,#0a1628);animation:pulseGold 2s ease-in-out infinite}
.timeline-v .tv-date{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:2px;color:var(--gold,#c9a84c);margin-bottom:4px}
.timeline-v .tv-title{font-family:'Playfair Display',serif;font-weight:800;font-size:1.1rem;color:#fff;margin-bottom:6px}
.timeline-v .tv-desc{font-size:.92rem;color:rgba(255,255,255,.6);line-height:1.65}

/* === INTERACTIVE TABS === */
.tab-nav{display:flex;gap:0;border-bottom:1px solid rgba(201,168,76,.2);margin-bottom:32px}
.tab-btn{font-family:'Source Sans 3',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.5px;color:rgba(255,255,255,.5);padding:14px 24px;border:none;background:none;cursor:pointer;position:relative;transition:color .3s}
.tab-btn.active{color:var(--gold,#c9a84c)}
.tab-btn.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--gold,#c9a84c)}
.tab-content{display:none;animation:fadeInScale .4s ease}
.tab-content.active{display:block}

/* === RIPPLE EFFECT ON CLICK === */
.ripple-container{position:relative;overflow:hidden}
.ripple-container::after{content:'';position:absolute;border-radius:50%;background:rgba(201,168,76,.2);width:100px;height:100px;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);animation:ripple .8s ease-out}

/* === GLASSMORPHISM CARDS === */
.glass-card{background:rgba(255,255,255,.03);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:32px;transition:all .3s}
.glass-card:hover{background:rgba(255,255,255,.05);border-color:rgba(201,168,76,.2)}

/* === PAGE TRANSITION === */
.page-enter{animation:fadeInScale .6s ease forwards}

/* === RESPONSIVE === */
@media(max-width:768px){
.organism-ring{width:300px;height:300px}
.organism-node{width:44px;height:44px;font-size:1rem}
.stat-card-premium .scp-num{font-size:2.4rem}
}
</style>