/* =====================================================================
   Socivio — motion layer (entrances, hover micro-interactions, tilt)
   ===================================================================== */
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); } }
@keyframes pageIn { from { opacity: 0; } }
@keyframes icoPop { 0% { transform: scale(1); } 35% { transform: scale(1.2) rotate(-9deg); } 65% { transform: scale(1.08) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ctaGlow { 0%, 100% { box-shadow: 0 12px 28px rgba(99, 102, 241, .38); } 50% { box-shadow: 0 18px 44px rgba(217, 70, 239, .55); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(.4em); filter: blur(6px); } }
@keyframes wordOut { to { opacity: 0; transform: translateY(-.4em); filter: blur(6px); } }

body.landing { animation: pageIn .5s ease both; }

/* ---------- hero entrance (staggered) ---------- */
.l-hero .col-lg-6:first-child > *, .page-hero .col-lg-6:first-child > *, .page-hero .col-lg-7 > * { animation: riseIn .85s cubic-bezier(.2, .8, .2, 1) both; }
.l-hero .col-lg-6:first-child > :nth-child(1), .page-hero .col-lg-6:first-child > :nth-child(1), .page-hero .col-lg-7 > :nth-child(1) { animation-delay: .05s; }
.l-hero .col-lg-6:first-child > :nth-child(2), .page-hero .col-lg-6:first-child > :nth-child(2), .page-hero .col-lg-7 > :nth-child(2) { animation-delay: .17s; }
.l-hero .col-lg-6:first-child > :nth-child(3), .page-hero .col-lg-6:first-child > :nth-child(3), .page-hero .col-lg-7 > :nth-child(3) { animation-delay: .3s; }
.l-hero .col-lg-6:first-child > :nth-child(4), .page-hero .col-lg-6:first-child > :nth-child(4), .page-hero .col-lg-7 > :nth-child(4) { animation-delay: .42s; }
.l-hero .col-lg-6:first-child > :nth-child(5), .page-hero .col-lg-6:first-child > :nth-child(5), .page-hero .col-lg-7 > :nth-child(5) { animation-delay: .54s; }
.l-hero .hero-visual { animation: riseIn 1s cubic-bezier(.2, .8, .2, 1) .25s both; }
.page-hero .page-art, .page-hero .chat-card, .page-hero .img-frame { animation: riseIn 1s cubic-bezier(.2, .8, .2, 1) .2s both; }

/* ---------- rotating headline word ---------- */
.rotator { display: inline-block; white-space: nowrap; }
.rotator.out { animation: wordOut .35s ease-in both; }
.rotator.in { animation: wordIn .5s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- buttons: shine sweep + soft pulse on the hero call to action ---------- */
.btn-gradient { position: relative; overflow: hidden; isolation: isolate; }
.btn-gradient::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -80%; width: 55%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-22deg); transition: left .75s ease; pointer-events: none; }
.btn-gradient:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(.97); }
.l-hero .btn-gradient.btn-lg { animation: ctaGlow 3s ease-in-out infinite; }

/* ---------- card micro-interactions ---------- */
.feature:hover .f-ico, .hs-card:hover .f-ico, .mod-card:hover .mod-ico, .mega-item:hover i { animation: icoPop .6s ease; }
.tilt { transform-style: preserve-3d; }
.tilt.tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) !important; }
.tilt.tilting { transition: transform .08s linear, box-shadow .3s, border-color .3s !important; }

/* ---------- section headings: gradient underline draws itself ---------- */
.section-head h2::after { content: ''; display: block; width: 0; height: 4px; margin: 16px auto 0; border-radius: 4px; background: linear-gradient(90deg, #22d3ee, #6366f1, #d946ef); transition: width .9s cubic-bezier(.2, .8, .2, 1) .15s; }
.section-head.drawn h2::after { width: 72px; }

/* ---------- header links: underline grows on hover ---------- */
.l-links > a { position: relative; }
.l-links > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--acc1), var(--acc2)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.l-links > a:hover::after, .l-links > a.active::after { transform: scaleX(1); }

/* ---------- call-to-action band: drifting light ---------- */
.l-cta::after { content: ''; position: absolute; left: -140px; top: -180px; width: 440px; height: 440px; border-radius: 50%; background: rgba(34, 211, 238, .3); filter: blur(80px); pointer-events: none; animation: drift 16s ease-in-out infinite; }
.l-cta .container { z-index: 1; }

/* ---------- footer app card gentle float ---------- */
.sf-app-ico { animation: floaty 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    body.landing, .l-hero .col-lg-6:first-child > *, .page-hero .col-lg-6:first-child > *, .page-hero .col-lg-7 > *, .l-hero .hero-visual, .page-hero .page-art, .page-hero .chat-card, .page-hero .img-frame,
    .l-hero .btn-gradient.btn-lg, .l-cta::after, .sf-app-ico, .rotator.in, .rotator.out { animation: none !important; }
    .btn-gradient::after { display: none; }
    .tilt.tilt:hover { transform: translateY(-4px) !important; }
    .section-head h2::after { width: 72px; transition: none; }
}

/* keep the headline gradient shimmering while the word swaps */
.l-hero .grad.rotator.in { animation: wordIn .5s cubic-bezier(.2, .8, .2, 1) both, sheen 6s linear infinite; }
.l-hero .grad.rotator.out { animation: wordOut .35s ease-in both, sheen 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .l-hero .grad.rotator.in, .l-hero .grad.rotator.out { animation: none !important; } }