/* ==========================================================================
   Influity.ai — shared stylesheet
   Behaviour layer only: reset, keyframes and the .ik-* helper classes that
   the prototypes defined in their <style> blocks. All page/section colours
   live inline on the markup (faithful to the Claude Design source); the only
   theme-specific rules here are the hover/border/field deltas, scoped under
   `.theme-light` (added to <body> on the light pages).
   ========================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{margin:0;background:#0A1430;}
body.theme-light{background:#FFFFFF;}

img{max-width:100%;display:block;}

/* toggled by the contact form to swap the form / success states */
.ik-hidden{display:none !important;}

/* ---- keyframes (union of every prototype page) ---------------------------- */
@keyframes ik-float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-18px) rotate(1deg);}}
@keyframes ik-reveal{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes ik-spin{to{transform:rotate(360deg);}}
@keyframes ik-sheen{0%{transform:translateX(-120%) skewX(-18deg);}60%,100%{transform:translateX(320%) skewX(-18deg);}}
@keyframes ik-loadfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes ik-flow{to{stroke-dashoffset:-200;}}
@keyframes ik-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes ik-draw{to{stroke-dashoffset:0;}}
@keyframes ik-ringpulse{0%{transform:scale(.7);opacity:.5;}100%{transform:scale(1.5);opacity:0;}}
@keyframes ik-pop{from{transform:scale(.96);}to{transform:scale(1);}}

/* ---- scroll-reveal -------------------------------------------------------- */
/* The prototype used `animation-timeline:view()` (Chromium-only). We drive the
   same fade-up with IntersectionObserver so it works everywhere. Gated on
   `html.js` so content is never hidden when JavaScript is unavailable. */
html.js .ik-rev{opacity:0;transform:translateY(28px);will-change:opacity,transform;}
html.js .ik-rev.ik-in{animation:ik-reveal .7s cubic-bezier(.22,.7,.2,1) both;}

/* ---- cards / buttons / links --------------------------------------------- */
.ik-card{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s;}
.ik-card:hover{transform:translateY(-6px);border-color:#3A2E73 !important;box-shadow:0 22px 50px rgba(0,0,0,.4);}
.theme-light .ik-card:hover{border-color:#C9BEF0 !important;box-shadow:0 22px 50px rgba(20,16,60,0.12);}

.ik-btn{transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;}
.ik-btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 18px 40px rgba(108,71,255,.4);}

.ik-link{transition:color .15s ease;}
.ik-link:hover{color:#fff !important;}
.theme-light .ik-link:hover{color:#101B3A !important;}

/* ---- form fields (Contact pages) ----------------------------------------- */
.ik-field{background:#0A1430;border:1px solid #243056;border-radius:11px;padding:14px 16px;font-family:'Space Grotesk',sans-serif;font-size:15px;color:#E6EAF6;width:100%;outline:none;transition:border-color .15s;}
.ik-field::placeholder{color:#5E6B94;}
.ik-field:focus{border-color:#6C47FF;}
.theme-light .ik-field{background:#FFFFFF;border-color:#D9D2F5;color:#16213F;}
.theme-light .ik-field::placeholder{color:#9097AE;}

/* "Send another" ghost button on the contact success state */
.ik-resend{transition:border-color .15s ease;}
.ik-resend:hover{border-color:#6C47FF !important;}

/* ---- accessibility -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.js .ik-rev{opacity:1 !important;transform:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
}
