/* Adds animation + image blocks only. Colours/backgrounds come from marketing.css */

/* Hero entrance */
.hero-inner>div:first-child>*{opacity:0;transform:translateY(18px);animation:hRise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-inner>div:first-child>*:nth-child(1){animation-delay:.05s}.hero-inner>div:first-child>*:nth-child(2){animation-delay:.15s}
.hero-inner>div:first-child>*:nth-child(3){animation-delay:.27s}.hero-inner>div:first-child>*:nth-child(4){animation-delay:.38s}
.hero-inner>div:first-child>*:nth-child(5){animation-delay:.5s}
@keyframes hRise{to{opacity:1;transform:none}}
.hero-glow{animation:glow 9s ease-in-out infinite alternate}
@keyframes glow{to{transform:translate(60px,40px) scale(1.15)}}

/* Email preview: messages appear one by one, card floats */
.email-preview{position:relative;animation:hRise 1s .25s both,bob 7s 1.3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.ep-msg{opacity:0;transform:translateY(12px);animation:hRise .6s forwards}
.ep-msg:nth-child(1){animation-delay:.8s}.ep-msg:nth-child(2){animation-delay:1.6s}.ep-msg:nth-child(3){animation-delay:2.4s}.ep-msg:nth-child(4){animation-delay:3.2s}
.hero-visual{position:relative}
.fchip{position:absolute;z-index:3;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;animation:bob 6s ease-in-out infinite}
.fchip b{font:600 12.5px 'Space Grotesk',sans-serif;display:block}.fchip small{color:var(--muted);font-size:11px}
.fchip.c1{left:-26px;top:22%}.fchip.c2{right:-14px;bottom:-18px;animation-delay:-3s}

/* Buttons: soft shine */
.btn-primary{position:relative;overflow:hidden}
.btn-primary:after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 4s 2s infinite}
@keyframes shine{0%{left:-70%}30%,100%{left:130%}}

/* Scroll reveal (classes added by JS) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* Card hover */
.feature-card,.wf-card,.use-card,.channel-card,.stat-card{transition:transform .3s,box-shadow .3s,border-color .3s}
.feature-card:hover,.wf-card:hover,.use-card:hover,.channel-card:hover,.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(13,148,136,.4)}
.feature-icon,.wf-icon,.channel-icon{transition:transform .35s}
.feature-card:hover .feature-icon,.wf-card:hover .wf-icon,.channel-card:hover .channel-icon{transform:scale(1.18) rotate(-6deg)}

/* Illustrations */
.illus{margin:0 0 40px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px;overflow:hidden}
.illus svg{display:block;width:100%;height:auto}
.flow-line{stroke-dasharray:6 6;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.node-pulse{transform-origin:center;transform-box:fill-box;animation:np 2.4s ease-in-out infinite}
@keyframes np{50%{transform:scale(1.08)}}
.show{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:34px}
.show .illus{margin:0}
.show h3{font-size:24px;margin:0 0 10px;letter-spacing:-.02em}
.show p{color:var(--muted);margin:0 0 14px}
.q-row{transition:transform .3s}.q-row:hover{transform:translateX(4px)}
.q-bar{transform-origin:left;animation:qb 3s ease-in-out infinite alternate}
@keyframes qb{from{transform:scaleX(.6)}to{transform:scaleX(1)}}

/* Ticker pauses on hover */
.ticker-section:hover .ticker-track{animation-play-state:paused}

@media(max-width:960px){.show{grid-template-columns:1fr}.fchip{display:none}}
@media(prefers-reduced-motion:reduce){.hero-inner>div:first-child>*,.ep-msg,.rv,.email-preview{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.fchip,.flow-line,.node-pulse,.q-bar,.hero-glow,.btn-primary:after{animation:none!important}}