/* =========================================================================
   IBSS - motion.css
   Premium interaction layer on top of the existing theme. Adds nothing to the
   layout or colours: only easing, hover physics, button shine and entrance
   choreography. Everything that moves uses
   transform/opacity only and collapses under prefers-reduced-motion.
   ========================================================================= */

:root{
  --m-ease:cubic-bezier(.16,1,.3,1);          /* soft "expo out" for reveals */
  --m-heavy:cubic-bezier(.32,.72,0,1);        /* weighty, spring-like settle */
  --m-spring:cubic-bezier(.34,1.56,.64,1);    /* slight overshoot for pops */
}

/* a tighter dot that lags behind the cursor and expands over interactive elements */

/* ---------- buttons: weighty motion, shine sweep, arrow nudge ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .6s var(--m-heavy), box-shadow .6s var(--m-heavy), background .35s var(--m-ease), border-color .35s var(--m-ease) !important;
}
.btn::after{
  content:""; position:absolute; inset:-40% -60%; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
  transform:translateX(-70%) skewX(-12deg); opacity:0;
  transition:transform .9s var(--m-ease), opacity .3s;
}
.btn:hover::after{transform:translateX(70%) skewX(-12deg); opacity:1;}
.btn-ghost::after, .btn-dark::after{background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%);}
.btn:active{transition-duration:.12s !important;}

/* ---------- nav links: underline draws in from the left ---------- */
nav.links a > span{position:relative;}
nav.links a > span::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; opacity:.55;
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--m-ease);
}
nav.links a:hover > span::after{transform:scaleX(1);}
.lang-btn{transition:background .35s var(--m-ease), color .35s var(--m-ease), transform .4s var(--m-spring);}
.lang-btn:active{transform:scale(.94);}

/* ---------- cards: smoother settle ---------- */
.freedom-card, .role-pill, .console-mod, .scorecard, .founder-card,
.picker-chip, .reporting-strip, .flow-mod, .flow-hub, .flow-ceo, .flow-output-node,
.engine-diagram, .flow-diagram, .contact-card, .picker-summary{
  transition:transform .75s var(--m-heavy), box-shadow .6s var(--m-ease), border-color .5s var(--m-ease), background .4s var(--m-ease) !important;
}
/* while the tilt script drives transform it wants an immediate response */
.freedom-card[data-tilt-bound]:hover, .role-pill[data-tilt-bound]:hover,
.console-mod[data-tilt-bound]:hover, .scorecard[data-tilt-bound]:hover, .founder-card[data-tilt-bound]:hover,
.picker-chip[data-tilt-bound]:hover, .reporting-strip[data-tilt-bound]:hover, .flow-mod[data-tilt-bound]:hover,
.flow-hub[data-tilt-bound]:hover, .flow-ceo[data-tilt-bound]:hover, .flow-output-node[data-tilt-bound]:hover{
  transition-duration:.18s !important;
}

/* icons lift a touch more than their card */
.p-icon, .freedom-icon, .mod-icon, .founder-badge, .flow-ceo-icon{
  transition:transform .7s var(--m-spring), box-shadow .5s var(--m-ease);
}
.freedom-card:hover .freedom-icon, .console-mod:hover .mod-icon, .founder-card:hover .founder-badge{
  transform:translateZ(28px) translateY(-3px) scale(1.06);
}
.mod-more{transition:transform .5s var(--m-ease), color .3s;}
.console-mod:hover .mod-more{transform:translateX(4px); text-decoration:none !important;}
.sol-check{transition:transform .5s var(--m-spring);}
.sol-list li:hover .sol-check{transform:scale(1.18) rotate(-8deg);}
.role-pill .dot{transition:transform .5s var(--m-spring), box-shadow .4s;}
.role-pill:hover .dot{transform:scale(1.35); box-shadow:0 0 0 5px rgba(255,153,0,0.18);}

/* ---------- hero: parallax layers and staggered entrance ---------- */
/* driven per frame by motion.js (lerped), so no CSS transition on top */
.hero-3d{will-change:transform;}
.scorecard-wrap{will-change:transform;}
.hero .eyebrow, .hero h1, .hero p.lead, .hero-ctas, .hero-tagline{
  opacity:0; transform:translateY(26px);
  animation:mRise 1.1s var(--m-ease) forwards;
}
.hero .eyebrow{animation-delay:.05s;}
.hero h1{animation-delay:.15s;}
.hero p.lead{animation-delay:.28s;}
.hero-ctas{animation-delay:.4s;}
.hero-tagline{animation-delay:.52s;}
@keyframes mRise{to{opacity:1; transform:none;}}
.metric-fill{transition:transform 1.8s var(--m-ease) !important;}
.metric-value{display:inline-block;}

/* ---------- reveals: heavier, blurred fade-up ---------- */
/* Further and slower than an ordinary fade-up: the arrival should register,
   not merely be over by the time the eye gets there. will-change rides on .pre,
   so the hint is dropped the moment the element has landed. */
.reveal{
  transition:opacity 1.05s var(--m-ease), transform 1.15s var(--m-ease), filter .95s var(--m-ease) !important;
  transition-delay:var(--reveal-delay, 0ms) !important;
}
.reveal.pre{
  opacity:0; transform:translateY(40px); filter:blur(7px);
  will-change:opacity, transform, filter;
}
.reveal.in{opacity:1; transform:none; filter:blur(0);}

/* ---------- modal: settles with weight ---------- */
.module-modal{transition:transform .8s var(--m-heavy) !important;}
.module-modal-overlay{transition:opacity .45s var(--m-ease), visibility 0s linear .45s !important;}
.module-modal-overlay.open{transition:opacity .45s var(--m-ease), visibility 0s !important;}
.module-modal-close{transition:background .3s var(--m-ease), transform .6s var(--m-heavy) !important;}
.module-modal-close:hover{transform:rotate(90deg);}
.module-modal ul li{opacity:0; transform:translateY(10px); transition:opacity .6s var(--m-ease), transform .7s var(--m-ease);}
.module-modal-overlay.open .module-modal ul li{opacity:1; transform:none;}
.module-modal-overlay.open .module-modal ul li:nth-child(1){transition-delay:.12s;}
.module-modal-overlay.open .module-modal ul li:nth-child(2){transition-delay:.17s;}
.module-modal-overlay.open .module-modal ul li:nth-child(3){transition-delay:.22s;}
.module-modal-overlay.open .module-modal ul li:nth-child(4){transition-delay:.27s;}
.module-modal-overlay.open .module-modal ul li:nth-child(5){transition-delay:.32s;}
.module-modal-overlay.open .module-modal ul li:nth-child(6){transition-delay:.37s;}
.module-modal-overlay.open .module-modal ul li:nth-child(7){transition-delay:.42s;}
.module-modal-overlay.open .module-modal ul li:nth-child(n+8){transition-delay:.47s;}

/* ---------- side rail + nav needle: softer settle ---------- */
.rail-tick{transition:width .6s var(--m-spring), background .35s var(--m-ease), box-shadow .35s var(--m-ease) !important;}
.rail-label{transition:max-width .6s var(--m-ease), opacity .4s var(--m-ease), color .3s !important;}

/* ---------- statement line: draws in ---------- */
.statement::before{transform:translate(-50%,-50%) scaleX(0); transition:transform 1.4s var(--m-ease) .2s;}
.statement.line-in::before{transform:translate(-50%,-50%) scaleX(1);}

/* ---------- touch / reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .btn::after{display:none;}
  .hero .eyebrow, .hero h1, .hero p.lead, .hero-ctas, .hero-tagline{animation:none; opacity:1; transform:none;}
  .reveal{transition:opacity .2s ease !important; filter:none;}
  .reveal.pre{transform:none; filter:none;}
  .module-modal ul li{opacity:1; transform:none; transition:none;}
  .statement::before{transform:translate(-50%,-50%) scaleX(1); transition:none;}
}