/* Homepage "La prochaine étape": a business problem is typed, goes through the Onyx diamond, and a fix comes out.
   home-next.js plays it on a loop while the section is on screen (no scroll pinning) and adds .is-live.
   Without .is-live (no JS) the first example shows resolved. The night sky comes from ai-chapter.css. */

.ai-next{
  --ain-red:#ff7a7a;
  --ain-green:#2fd38e;
  --ain-gem:4.25rem;
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding-block:clamp(4.5rem,9vw,7.5rem);
  color:#fff;
}
.ai-next :focus-visible{outline:3px solid var(--ai-sky);outline-offset:3px}
.ai-next-wrap{display:grid;gap:clamp(2.75rem,6vw,4rem);align-items:center}
.ai-next-copy h2{max-width:14ch;margin:.85rem 0 1rem;color:#fff;font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.04}
.ai-next-copy p{max-width:30rem;margin:0 0 1.8rem;color:#b8cee1;font-size:1.03rem;line-height:1.6}
.ai-next-cta svg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ai-next-cta:hover svg{transform:translateY(3px)}
.ai-next.is-yours .ai-next-cta{animation:ain-call 1.6s ease-in-out infinite}

/* Stage: problem card, diamond, fix card, on a diagonal. */
.ain{position:relative;width:100%;max-width:40rem;min-width:0}
.ain-stage{position:relative;display:grid;grid-template-rows:auto 10.5rem auto;align-items:center}
.ain-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ain-wires path{fill:none;stroke-linecap:round;stroke-linejoin:round}

.ain-card{position:relative;z-index:1;width:min(86%,25rem);padding:1rem 1.15rem 1.15rem;border:1px solid #44adfe2e;border-radius:1rem;background:linear-gradient(180deg,#0c2747f2,#071a33f2);box-shadow:0 1.6rem 3rem -1.6rem #000000e6,inset 0 1px 0 #ffffff0f}
.ain-card--problem{justify-self:start}
.ain-card--fix{justify-self:end;border-color:#44adfe5c;box-shadow:0 1.6rem 3rem -1.6rem #000000e6,0 0 2.6rem -1rem #44adfe59,inset 0 1px 0 #ffffff14}
.ain-label{display:flex;align-items:center;gap:.5rem;margin:0 0 .55rem;font:500 .64rem/1.2 var(--ai-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ai-mute)}
.ain-label i{flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--ain-red);box-shadow:0 0 .55rem var(--ain-red)}
.ain-card--fix .ain-label i{background:var(--ain-green);box-shadow:0 0 .55rem var(--ain-green)}
/* Every example is stacked invisibly in the same cell, so the cards keep one size for the whole loop. */
.ain-text{display:grid;margin:0}
.ain-text>*{grid-area:1/1}
.ain-sizer{visibility:hidden}
.ain-q{font:italic 400 clamp(1.3rem,2.3vw,1.55rem)/1.22 'Instrument Serif',Georgia,serif;color:#eef6ff}
.ain-a{font:700 clamp(.98rem,1.4vw,1.08rem)/1.45 Manrope,sans-serif;letter-spacing:-.01em;color:#fff}
.ain-typed{text-decoration:underline wavy transparent;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-skip-ink:none;transition:text-decoration-color .35s ease}
.ain-rest{visibility:hidden}
.ain-caret{position:relative;display:inline-block;width:0;opacity:0}
.ain-caret::after{content:'';position:absolute;left:2px;bottom:-.12em;width:2px;height:1em;border-radius:1px;background:var(--ai-sky)}
.ain-w{display:inline-block}

/* The diamond */
.ain-core{position:relative;justify-self:center;display:grid;place-items:center;width:14rem;height:100%}
.ain-orbits{position:absolute;left:50%;top:50%;width:14rem;height:auto;overflow:visible;transform:translate(-50%,-50%)}
.ain-orbit{fill:none;stroke:#44adfe2e;stroke-width:1}
.ain-orbit-dot{fill:none;stroke:#cdeaff;stroke-width:3;stroke-linecap:round;stroke-dasharray:.001 .999;filter:drop-shadow(0 0 3px #44adfe);animation:ain-orbit 7s linear infinite}
.ain-orbit-dot--b{stroke-width:2.4;animation-duration:10s;animation-direction:reverse}
.ain-gem{position:relative;z-index:1;display:grid;place-items:center;width:var(--ain-gem);height:var(--ain-gem);border:1.5px solid transparent;border-radius:.85rem;background:radial-gradient(circle at 35% 30%,#1d5f9f,#0a2547 62%,#061630) padding-box,linear-gradient(135deg,#a6dcff,var(--ai-sky) 45%,var(--ox-blue)) border-box;box-shadow:0 0 0 .35rem #44adfe0f,0 0 2.2rem #44adfe4d,inset 0 0 1.1rem #44adfe33;overflow:hidden;transform:rotate(45deg);transition:box-shadow .45s ease,transform .5s cubic-bezier(.3,1.5,.5,1)}
.ain-gem::before{content:'';position:absolute;inset:-35%;background:conic-gradient(from 0deg,transparent 0 68%,#7fd0ff66 86%,transparent);opacity:0;transition:opacity .3s ease}
.ain-icon{position:relative;grid-area:1/1;width:1.55rem;height:1.55rem;color:#cfeaff;transform:rotate(-45deg);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.ain-icon--ok{color:#6ff0b5;opacity:0;transform:rotate(-45deg) scale(.4)}
.ain-ripple{position:absolute;left:50%;top:50%;width:var(--ain-gem);height:var(--ain-gem);margin:calc(var(--ain-gem) / -2) 0 0 calc(var(--ain-gem) / -2);pointer-events:none}
.ain-ripple::before,.ain-ripple::after{content:'';position:absolute;inset:0;border:1px solid var(--ai-sky);border-radius:.85rem;opacity:0;transform:rotate(45deg)}
.ain-status{position:absolute;left:50%;top:calc(50% + 3.85rem);display:grid;font:500 .64rem/1 var(--ai-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%)}
.ain-st{grid-area:1/1;justify-self:center;display:inline-flex;align-items:center;gap:.45rem;opacity:0;transform:translateY(.3rem);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.ain-st--think{color:#a9d8ff}
.ain-st--think::after{content:'';width:1.4em;height:.3em;background:radial-gradient(circle,currentColor .13em,transparent .15em) 0 50%/.47em .3em repeat-x;-webkit-mask:linear-gradient(90deg,#000 0 var(--dots,100%),transparent 0);mask:linear-gradient(90deg,#000 0 var(--dots,100%),transparent 0)}
.ain-st--ok{color:#6ff0b5}
.ain-st--you{color:#8fd0ff}
.ain-st--ok::before,.ain-st--you::before{content:'';width:.42rem;height:.42rem;transform:rotate(45deg);background:currentColor;box-shadow:0 0 .5rem currentColor}

/* Resolved state: the default without JS, and the verdict while live. */
.is-done .ain-gem{box-shadow:0 0 0 .35rem #2fd38e14,0 0 2.4rem #2fd38e4d,inset 0 0 1.1rem #2fd38e33}
.is-done:not(.is-you) .ain-icon--ai{opacity:0;transform:rotate(-45deg) scale(.4)}
.is-done:not(.is-you) .ain-icon--ok{opacity:1;transform:rotate(-45deg)}
.is-done:not(.is-you) .ain-st--ok,.is-done.is-you .ain-st--you{opacity:1;transform:none}
.is-done.is-you .ain-gem{box-shadow:0 0 0 .35rem #44adfe1f,0 0 2.8rem #44adfe80,inset 0 0 1.1rem #44adfe4d}

/* Pause / play */
.ain-toggle{position:absolute;top:0;right:0;z-index:2;display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid #44adfe3d;border-radius:50%;background:#0a2242cc;color:#cfeaff;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.ain-toggle:hover{border-color:var(--ai-sky);background:#0f3563;color:#fff}
.ain-toggle svg{width:.85rem;height:.85rem}
.ain-toggle .ain-play,.ain:not(.is-playing) .ain-toggle .ain-pause{display:none}
.ain:not(.is-playing) .ain-toggle .ain-play{display:block}

/* ---------- Live: driven by home-next.js ---------- */
.is-live .ain-card--problem{opacity:calc(var(--enter,0) * (1 - var(--exit,0)));transform:translateY(calc((1 - var(--enter,0)) * .9rem - var(--exit,0) * .5rem))}
.is-live .ain-card--fix{opacity:calc(var(--fix,0) * (1 - var(--exit,0)));transform:translateY(calc((1 - var(--fix,0)) * .9rem + var(--exit,0) * .5rem))}
.is-live .ain-wires{opacity:calc(1 - var(--exit,0))}
.is-live .ain-wire{stroke-width:1.6;stroke-dasharray:1;transition:stroke .5s ease}
.is-live .ain-wire--in{stroke:#ff8a7ab3;stroke-dashoffset:calc(1 - var(--win,0))}
.is-live.is-done .ain-wire--in{stroke:#44adfeb3}
.is-live .ain-wire--out{stroke:#44adfecc;stroke-dashoffset:calc(1 - var(--wout,0))}
.is-live .ain-flow{stroke-width:2.6;stroke-dasharray:.06 .94;stroke-dashoffset:1;opacity:0;transition:opacity .3s ease}
.is-live .ain-flow--in{stroke:#ffc2b8;filter:drop-shadow(0 0 3px var(--ain-red))}
.is-live .ain-flow--out{stroke:#e2f4ff;filter:drop-shadow(0 0 4px var(--ai-sky))}
.is-live.is-think .ain-flow--in{opacity:1;animation:ain-flow .9s linear infinite}
.is-live.is-out .ain-flow--out{opacity:1;animation:ain-flow 1.5s linear infinite}
.is-live.is-flag .ain-typed{text-decoration-color:var(--ain-red)}
.is-live.is-caret .ain-caret{opacity:1;animation:ain-blink 1s steps(1) infinite}
.is-live.is-typing .ain-caret{animation:none}
.is-live .ain-w{opacity:0;filter:blur(6px);transform:translateY(.35em)}
.is-live .ain-w.is-on{opacity:1;filter:blur(0);transform:none;transition:opacity .45s ease,filter .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.is-live.is-think .ain-gem{transform:rotate(45deg) scale(1.08);box-shadow:0 0 0 .45rem #44adfe1f,0 0 3rem #44adfe8c,inset 0 0 1.3rem #44adfe59}
.is-live.is-think .ain-gem::before{opacity:1;animation:ain-spin 1.1s linear infinite}
.is-live.is-think .ain-st--think{opacity:1;transform:none;animation:ain-dots 1.2s steps(1) infinite}
.is-live.is-think .ain-ripple::before,.is-live.is-think .ain-ripple::after{animation:ain-ripple 1.2s cubic-bezier(.2,.6,.3,1) infinite}
.is-live.is-think .ain-ripple::after{animation-delay:.6s}
.is-live.is-done .ain-ripple::before{border-color:var(--ain-green);animation:ain-flash .8s cubic-bezier(.2,.6,.3,1) 1}
.is-live.is-done.is-you .ain-ripple::before{border-color:var(--ai-sky)}
/* Everything that loops stops while the section is off screen or paused. */
.ain.is-paused *,.ain.is-paused *::before,.ain.is-paused *::after,.ai-next.is-paused .ai-next-cta{animation-play-state:paused!important}

@keyframes ain-orbit{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ain-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ain-spin{to{transform:rotate(360deg)}}
@keyframes ain-blink{50%{opacity:0}}
@keyframes ain-dots{0%{--dots:0%}25%{--dots:34%}50%{--dots:67%}75%{--dots:100%}}
@keyframes ain-ripple{0%{opacity:.75;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(45deg) scale(2.1)}}
@keyframes ain-flash{0%{opacity:.9;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(45deg) scale(2.6)}}
@keyframes ain-call{0%,100%{box-shadow:0 0 0 0 #44adfe00,0 .9rem 2.2rem -.7rem #44adfe80}50%{box-shadow:0 0 0 .45rem #44adfe33,0 .9rem 2.2rem -.7rem #44adfe80}}

@media (min-width:48rem){
  /* Clear the glass rail on the right edge. */
  .ai-next-wrap{width:min(calc(100% - 10.5rem),var(--wrap))}
  .ain-stage{grid-template-rows:auto 11.5rem auto}
  .ain-toggle{width:2.5rem;height:2.5rem}
}
@media (min-width:64rem){
  .ai-next-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .ain{justify-self:end}
}
@media (prefers-reduced-motion:reduce){
  .ai-next *,.ai-next *::before,.ai-next *::after{transition:none!important;animation:none!important}
}