/* Inkavi: a living feature showcase, with motion attached to the content. */
#features{isolation:isolate;background:radial-gradient(ellipse at 16% 25%,#722ea11c,transparent 48%),radial-gradient(ellipse at 90% 65%,#3344d718,transparent 45%)}
#features .features-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;perspective:1400px}
#features .feature-card{--accent:#bd80ff;--fx:0deg;--fy:0deg;padding:30px;min-width:0;isolation:isolate;border-radius:22px;background:linear-gradient(145deg,#20162f,#110e1a 75%);transform:perspective(1100px) rotateX(var(--fx)) rotateY(var(--fy));transition:transform .5s var(--ease),border-color .4s,box-shadow .4s;overflow:hidden;border:1px solid #b688e635}
#features .feature-card::before{inset:0;width:auto;height:auto;opacity:1;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#cf9bff1a 48%,transparent 65%);transform:translateX(-110%);animation:feature-reflection 9s ease-in-out infinite;animation-delay:var(--delay,0s);pointer-events:none;box-shadow:none;z-index:-1}
#features .feature-card::after{background:radial-gradient(350px circle at var(--mx,50%) var(--my,10%),#b47dff1c,transparent 75%)}
#features .feature-card:hover{border-color:#b782ef99;box-shadow:0 22px 50px #0005,0 0 30px #9b4bf51a}
#features .feature-title{position:relative;z-index:2;font-size:1.2rem;line-height:1.4}
#features .feature-description{position:relative;z-index:2;line-height:1.8;font-size:1rem;color:#bdb5cf}
#features .feature-stage{position:relative;display:grid;place-items:center;width:100%;height:115px;margin-bottom:20px;isolation:isolate}
#features .feature-stage::before{content:'';position:absolute;width:115px;height:90px;background:radial-gradient(ellipse,#a75af337,transparent 65%);animation:feature-breathe 4s ease-in-out infinite;animation-delay:var(--delay,0s)}
#features .feature-icon{position:relative;width:64px;height:64px;margin:0;border-radius:18px;z-index:2;color:var(--accent);background:linear-gradient(135deg,#6c3c982b,#20162e)!important;border:1px solid #ba8ce34d;box-shadow:0 8px 20px #0004;animation:feature-levitate 5s ease-in-out infinite;animation-delay:var(--delay,0s)}
#features .feature-icon svg{width:32px;height:32px;stroke-width:1.6;overflow:visible}
#features .feature-icon img{display:block;width:48px;height:48px;object-fit:contain;border-radius:50%}
#features .stage-orbit{position:absolute;width:108px;height:108px;border:1px solid #b988f425;border-radius:50%;transform:rotateX(55deg);animation:feature-orbit 10s linear infinite}
#features .stage-orbit::after{content:'';position:absolute;width:5px;height:5px;left:50%;top:-3px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px var(--accent)}
#features .stage-spark{position:absolute;width:100px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.25;bottom:5px;animation:feature-breathe 4s ease-in-out infinite}
#features .feature-library{grid-column:span 2;order:-2;min-height:350px;padding:40px 45% 40px 35px}
#features .feature-library .feature-stage{width:95px;height:90px;margin-bottom:20px}
#features .feature-library .feature-title{font-size:1.7rem;letter-spacing:-.035em}
#features .feature-connect{order:-1}
#features .feature-library-preview{position:absolute;right:10px;bottom:-95px;width:43%;height:400px;perspective:1100px;pointer-events:none}
#features .feature-library-preview img{position:absolute;display:block;width:64%;height:auto;border:5px solid #534065;border-radius:19px;box-shadow:0 15px 35px #0009;animation:library-drift 7s ease-in-out infinite}
#features .library-preview-back{right:33%;top:25px;transform:rotate(-12deg);opacity:.7;animation-delay:-3s!important}
#features .library-preview-front{right:1%;top:0;transform:rotate(8deg)}
#features .feature-library::after{background:linear-gradient(0deg,#110e1a 0%,transparent 25%);pointer-events:none;z-index:1}
#features .feature-stats{--accent:#81c9ff}
#features .feature-stats .feature-icon svg path{transform-box:fill-box;transform-origin:center bottom;animation:feature-bars 3s ease-in-out infinite}
#features .feature-stats .feature-icon svg path:nth-child(2){animation-delay:-.4s}
#features .feature-stats .feature-icon svg path:nth-child(3){animation-delay:-.8s}
#features .feature-sync .feature-icon svg{animation:feature-sync 6s ease-in-out infinite}
#features .feature-speed{--accent:#e89fef}
#features .feature-speed .feature-icon svg{animation:feature-zap 3.5s ease-in-out infinite;filter:drop-shadow(0 0 7px #d58afa55)}
#features .feature-design .feature-icon{animation:feature-color 8s ease-in-out infinite}
#features .feature-connect .feature-icon svg{animation:feature-link 4s ease-in-out infinite}
#features .feature-widget .feature-icon svg{animation:feature-widget 5s ease-in-out infinite}
#features .feature-mobile .feature-icon{animation:feature-phone 6s ease-in-out infinite}
#features .feature-kavita{grid-column:1/-1;display:grid;grid-template-columns:110px 210px 1fr;gap:25px;align-items:center;padding:24px 35px;background:radial-gradient(ellipse at 0% 50%,#449d8320,transparent 55%),#120f1b;--accent:#81d7b0}
#features .feature-kavita .feature-stage{margin:0;height:100px}
#features .feature-kavita .feature-title{margin:0}
@keyframes feature-reflection{0%,35%{transform:translateX(-110%)}70%,100%{transform:translateX(110%)}}
@keyframes feature-levitate{0%,100%{translate:0 2px;rotate:-3deg}50%{translate:0 -7px;rotate:3deg}}
@keyframes feature-breathe{0%,100%{opacity:.3;scale:.9}50%{opacity:.85;scale:1.13}}
@keyframes feature-orbit{from{transform:rotateX(55deg) rotateZ(0)}to{transform:rotateX(55deg) rotateZ(360deg)}}
@keyframes library-drift{0%,100%{translate:0 5px}50%{translate:0 -15px}}
@keyframes feature-bars{0%,100%{scale:1 .55;opacity:.6}50%{scale:1 1;opacity:1}}
@keyframes feature-sync{0%,15%{rotate:0deg}70%,100%{rotate:360deg}}
@keyframes feature-zap{0%,100%{scale:.92;opacity:.65}35%{scale:1.12;opacity:1}60%{scale:1;opacity:1}}
@keyframes feature-color{0%,100%{color:#c79af5;box-shadow:0 0 20px #ad63ef20}33%{color:#70bdff;box-shadow:0 0 24px #488eec30}66%{color:#f5a2d5;box-shadow:0 0 24px #dc58a830}}
@keyframes feature-link{0%,100%{scale:1;rotate:0deg}50%{scale:1.15;rotate:-12deg}}
@keyframes feature-widget{0%,100%{transform:perspective(200px) rotateY(-14deg)}50%{transform:perspective(200px) rotateY(14deg)}}
@keyframes feature-phone{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-7px)}}
/* Animation work stops outside the viewport; text is never hidden. */
#features .feature-card:not(.feature-in-view) *,#features .feature-card:not(.feature-in-view)::before{animation-play-state:paused}
#features .feature-card:nth-child(2n){--delay:-2s}#features .feature-card:nth-child(3n){--delay:-4s}
@media(max-width:900px){#features .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#features .feature-library{grid-column:1/-1}#features .feature-kavita{grid-template-columns:90px 1fr;gap:18px}#features .feature-kavita .feature-description{grid-column:1/-1}#features .feature-card{padding:26px}#features .feature-library{padding:35px 45% 35px 30px}}
@media(max-width:550px){#features .features-grid{grid-template-columns:minmax(0,1fr);gap:20px}#features .feature-library{padding:28px 28px 240px;min-height:0}#features .feature-library .feature-stage{width:100%;height:95px}#features .feature-library-preview{width:230px;height:270px;right:calc(50% - 115px);bottom:-70px}#features .feature-card{transform:none!important}#features .feature-stage{height:105px;margin-bottom:15px}#features .feature-kavita{grid-template-columns:80px 1fr;padding:24px}#features .feature-library .feature-title{font-size:1.5rem}}
.motion-paused #features .feature-card{transform:none!important}
@media(prefers-reduced-motion:reduce){#features .feature-card{transform:none!important}#features *,#features *::before,#features *::after{animation:none!important;transition:none!important}}
#features .feature-card:not(.feature-in-view) *::before,#features .feature-card:not(.feature-in-view) *::after{animation-play-state:paused}