/* Homepage #methode: one project window carried through the four steps.
   home-process.js sets the progress variables below on the section. Playing it like a video needs
   .is-player (html.ox-js). The defaults show the finished state for no-JS and reduced motion. */

.op{
  --at:3;--nodes:1;--wire:1;--bad:1;--pick:1;--grow:1;--fill:1;--fold:1;--paper:1;--tick:1;--stamp:1;--go:1;--tools:1;--toast:1;
  --op-node:#0d2a4f;--op-edge:#44adfe38;--op-red:#ff7a7a;--op-green:#14a86b;--op-ink:#d7e9f8;
}

/* The night sky is shared with the AI chapter (ai-chapter.css) and sits on the section. */
.op{position:relative;isolation:isolate;overflow:clip}

/* Steps */
.op-wrap{display:grid;gap:2.5rem}
.op .op-heading{margin-bottom:0}
.op-steps{position:relative;display:grid;gap:1.4rem;margin:2.4rem 0 0;padding:0;list-style:none}
.op-step{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:1rem;transition:opacity .35s ease}
.op-step:not(:last-child)::before,.op-step:not(:last-child)::after{content:'';position:absolute;left:calc(1.2rem - 1px);top:2.75rem;width:2px;height:calc(100% - 1.7rem);border-radius:2px;background:#80b8e138}
.op-step:not(:last-child)::after{background:var(--ai-sky);box-shadow:0 0 .5rem #44adfe99;transform-origin:top;transform:scaleY(clamp(0,calc(var(--at) - var(--i)),1))}
.op-num{position:relative;display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid #62aee572;border-radius:.5rem;background:#0a3156;color:#c5e7ff;font:600 .78rem/1 var(--ai-mono);transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.op-num span{transition:opacity .2s ease}
.op-num svg{position:absolute;width:1.05rem;height:1.05rem;opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
.op-step.is-done .op-num{border-color:#44adfe9c;background:#104b7b;color:#d9f1ff}
.op-step.is-done .op-num span{opacity:0}
.op-step.is-done .op-num svg{opacity:1;transform:none}
.op-step.is-active .op-num{border-color:#a8e0ff;background:var(--ai-sky);color:#042953;box-shadow:0 0 0 .25rem #44adfe24,0 0 1.25rem #44adfe80}
.op-step h3{margin:.3rem 0 .3rem;font-size:clamp(1.08rem,1.5vw,1.3rem);letter-spacing:-.03em;color:#fff}
.op-step-btn{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;cursor:pointer}
.op-step-btn::after{content:'';position:absolute;inset:-.45rem -.6rem}
.op-step-btn:focus-visible{outline:none}
.op-step:has(.op-step-btn:focus-visible){outline:2px solid #8bd0ff;outline-offset:.45rem;border-radius:.35rem}
.op-step p{margin:0;max-width:30rem;color:#b8cee1;font-size:.96rem;line-height:1.5}
.op.is-ready .op-step{opacity:.48}
.op.is-ready .op-step.is-done{opacity:.78}
.op.is-ready .op-step.is-active,.op.is-ready .op-step:hover{opacity:1}

/* Window */
.op-win{position:relative;display:flex;flex-direction:column;min-width:0;aspect-ratio:1/1.08;border:1px solid #44adfe38;border-radius:1rem;background:radial-gradient(circle,#44adfe17 1px,transparent 1.3px) 0 0/1.25rem 1.25rem,linear-gradient(180deg,#0a2242,#051631);box-shadow:0 2.4rem 4.5rem -2rem #000000d9,0 0 0 1px #00000026,inset 0 1px 0 #ffffff12;overflow:hidden}
.op-bar{display:flex;flex:none;align-items:center;gap:.4rem;height:2.25rem;padding:0 .9rem;border-bottom:1px solid #44adfe26;background:#0b2446e6}
.op-bar>i{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:#ffffff26}
.op-title{min-width:0;margin-left:.55rem;overflow:hidden;font:500 .66rem/1 var(--ai-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;color:var(--ai-mute)}
.op-title>span{display:none}
.op:not([data-step]) .op-title>[data-at="3"],
.op[data-step="0"] .op-title>[data-at="0"],
.op[data-step="1"] .op-title>[data-at="1"],
.op[data-step="2"] .op-title>[data-at="2"],
.op[data-step="3"] .op-title>[data-at="3"]{display:inline}
.op-scene{position:relative;flex:1;min-height:0;container-type:size}
.op-canvas{position:absolute;inset:0;font-size:clamp(11px,3.4cqi,15px);line-height:1.25}
.op-canvas svg{display:block}
.op-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.op-lines *{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* 01 · the workflow map */
.op-node{position:absolute;display:grid;justify-items:center;gap:.45em;width:40%;padding:.85em .4em .8em;border:1px solid var(--op-edge);border-radius:.8em;background:var(--op-node);color:var(--op-ink);font-size:.86em;font-weight:600;text-align:center;
  left:calc(6% + var(--c)*48%);top:calc(17% + var(--r)*33%);
  opacity:calc(clamp(0,var(--nodes)*4 - var(--i),1)*(1 - var(--pick)*.7)*(1 - var(--grow)));
  transform:scale(calc(.82 + .18*clamp(0,var(--nodes)*4 - var(--i),1)));
  transition:border-color .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease}
.op-node>svg{width:1.75em;height:1.75em;color:var(--ai-sky);transition:color .3s ease}
.op .op-node--chosen{opacity:calc(clamp(0,var(--nodes)*4 - 2,1)*(1 - clamp(0,var(--grow)*2.5,1)))}
.op.is-bad .op-node--chosen{border-color:var(--op-red);background:#3a1426;color:#ffe1e1;box-shadow:0 0 0 .3em #ff7a7a1f,0 0 1.6em #ff7a7a59}
.op.is-bad .op-node--chosen>svg{color:var(--op-red)}
.op-flag{position:absolute;left:50%;top:calc(100% + .75em);display:inline-flex;align-items:center;gap:.4em;padding:.35em .65em;border:1px solid #ff7a7a8c;border-radius:.45em;background:#ff7a7a1f;color:#ffc9c9;font:500 .82em/1.1 var(--ai-mono);letter-spacing:.02em;white-space:nowrap;opacity:calc(var(--bad)*(1 - var(--pick)));transform:translate(-50%,calc((1 - var(--bad))*.6em))}
.op-flag svg{width:1.05em;height:1.05em}
.op-wire{stroke:#44adfe80;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--wire));opacity:calc((1 - var(--pick)*.6)*(1 - var(--grow)))}
.op-ring{position:absolute;left:0;top:0;width:var(--ring-w,0);height:var(--ring-h,0);border:2px solid var(--ai-sky);border-radius:1.1em;box-shadow:0 0 1.2em #44adfe80,inset 0 0 1em #44adfe40;opacity:var(--ring-o,0);transform:translate(var(--ring-x,0),var(--ring-y,0)) translate(-50%,-50%);transition:border-color .3s ease,box-shadow .3s ease;pointer-events:none}
.op.is-bad .op-ring{border-color:var(--op-red);box-shadow:0 0 1.2em #ff7a7a80,inset 0 0 1em #ff7a7a33}
.op-cap{position:absolute;left:6%;right:6%;bottom:5%;font:500 .72em/1.3 var(--ai-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ai-mute);opacity:calc(clamp(0,var(--nodes)*2 - 1,1)*(1 - var(--pick)))}

/* 02 · the demo */
.op-tag{position:absolute;left:50%;top:4.5%;display:inline-flex;align-items:center;gap:.5em;max-width:92%;padding:.45em .85em;border:1px solid #44adfe80;border-radius:2em;background:#44adfe1f;color:#cdeaff;font:500 .74em/1.1 var(--ai-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:calc(var(--pick)*(1 - var(--fold)));transform:translate(-50%,calc((1 - var(--pick))*-.7em))}
.op-tag svg{flex:none;width:1.2em;height:1.2em;color:var(--ai-sky)}
.op-app{position:absolute;left:5%;right:5%;top:13%;bottom:3%;height:fit-content;margin-block:auto;display:flex;flex-direction:column;border:1px solid #44adfe73;border-radius:.9em;background:#0b2a50;box-shadow:0 1.6em 3em -1.2em #000000cc,0 0 0 .3em #44adfe12;overflow:hidden;transform-origin:50% 50%;opacity:clamp(0,var(--grow)*4,1);transform:var(--app-t,translateY(-10%) scale(.62))}
.op-app-bar{display:flex;flex:none;align-items:center;justify-content:space-between;gap:.6em;padding:.6em .9em;border-bottom:1px solid #44adfe2e;background:#0e3460;color:#bfe3ff;font:500 .72em/1.1 var(--ai-mono);letter-spacing:.07em;text-transform:uppercase}
.op-badge{display:grid;flex:none}
.op-badge>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.3em .6em;border-radius:1em;font-weight:600}
.op-badge-demo{background:#44adfe26;color:var(--ai-sky);opacity:calc(1 - clamp(0,(var(--go) - .5)*4,1))}
.op-badge-live{background:#2fd38e26;color:#5fe3a8;opacity:clamp(0,(var(--go) - .5)*4,1)}
.op-badge-live::before{content:'';width:.5em;height:.5em;border-radius:50%;background:currentColor;box-shadow:0 0 .5em currentColor}
.op-app-body{flex:1;display:grid;grid-template-rows:auto auto auto;align-content:center;gap:.5em;padding:.9em 1.1em}
.op-notes,.op-quote{display:grid;min-width:0}
.op-notes small,.op-quote small{margin-bottom:.35em;font:500 .66em/1.2 var(--ai-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ai-mute)}
.op-notes{padding-left:.8em;border-left:2px solid #44adfe40}
.op-ink{display:block;font:italic 1.22em/1.35 'Instrument Serif',Georgia,serif;color:#eef6ff;clip-path:inset(-.2em calc(100% - clamp(0,var(--fill)*6 - var(--i),1)*100%) -.2em 0)}
.op-spark{display:flex;align-items:center;justify-content:center;gap:.2em;color:var(--ai-sky);opacity:clamp(0,var(--fill)*8 - 3.5,1);transform:rotate(90deg)}
.op-spark svg{width:1.2em;height:1.2em;filter:drop-shadow(0 0 .35em #44adfeb3)}
.op-ql{display:flex;align-items:center;justify-content:space-between;gap:.7em;padding:.42em 0;border-bottom:1px dashed #44adfe2e;color:var(--op-ink);font-size:.82em;
  opacity:clamp(0,var(--fill)*8 - 4 - var(--i),1);transform:translateX(calc((1 - clamp(0,var(--fill)*8 - 4 - var(--i),1))*.8em))}
.op-ql s{flex:none;width:3.4em;height:.55em;border-radius:.3em;background:#44adfe4d}
.op-ql--total{border-bottom:0;font-weight:700;color:#fff}
.op-ql--total s{width:4.2em;background:#44adfe99}
.op-send{justify-self:start;display:inline-flex;align-items:center;gap:.45em;margin-top:.7em;padding:.45em .95em;border-radius:.45em;background:var(--ai-sky);color:#042953;font-size:.78em;font-weight:700;opacity:clamp(0,var(--fill)*10 - 9,1);transition:background-color .3s ease,color .3s ease}
.op-send svg{display:none;width:1.1em;height:1.1em}
.op.is-sent .op-send{background:#2fd38e;color:#03291a}
.op.is-sent .op-send svg{display:block}

/* 03 · the proposal */
.op-paper{position:absolute;left:7%;right:7%;top:22%;bottom:3%;height:fit-content;margin-block:auto;padding:1.05em 1.2em;border-radius:.7em;background:#f4f8fd;color:#0a2242;box-shadow:0 1.6em 3em -1em #000000d9;
  opacity:calc(clamp(0,var(--paper)*3,1)*(1 - var(--go)));transform:translateY(calc((1 - var(--paper))*55% + var(--go)*45%)) rotate(calc(var(--go)*4deg))}
.op-paper h4{margin:0 0 .55em;font:800 1.3em/1 Manrope,sans-serif;letter-spacing:-.03em;color:#042953}
.op-row{display:grid;grid-template-columns:1.5em minmax(0,1fr);gap:.65em;align-items:start;padding:.55em 0;border-top:1px solid #0a22421a;font-size:.86em;opacity:calc(.3 + .7*clamp(0,var(--tick)*3 - var(--i),1))}
.op-row b{display:block;font-weight:700;line-height:1.25}
.op-row small{display:block;margin-top:.1em;color:#5b708a;font-size:.88em;line-height:1.3}
.op-check{position:relative;display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#dde8f3;color:#fff}
.op-check::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--op-green);transform:scale(clamp(0,var(--tick)*3 - var(--i),1))}
.op-check svg{position:relative;width:.9em;height:.9em;opacity:clamp(0,var(--tick)*3 - var(--i),1)}
.op-mask{display:inline-block;width:4.6em;height:.7em;margin-right:.15em;border-radius:.3em;background:repeating-linear-gradient(-45deg,#0a224233 0 .25em,#0a22421a .25em .5em);vertical-align:-.05em}
.op-approve{display:inline-flex;margin-top:.75em;padding:.5em 1.05em;border-radius:.45em;background:#0062D6;color:#fff;font-size:.8em;font-weight:700;transition:background-color .3s ease,transform .25s ease}
.op.is-approved .op-approve{background:var(--op-green);transform:scale(.95)}
.op-stamp{position:absolute;right:1.1em;bottom:1em;padding:.35em .7em;border:.16em solid var(--op-green);border-radius:.4em;background:#f4f8fdd9;color:var(--op-green);font:700 1.05em/1 var(--ai-mono);letter-spacing:.14em;text-transform:uppercase;opacity:clamp(0,var(--stamp)*2.5,1);transform:rotate(-11deg) scale(calc(1.9 - .9*var(--stamp)))}

/* 04 · plugged into the tools */
.op-tool{position:absolute;display:grid;justify-items:center;gap:.4em;width:27%;padding:.75em .3em;border:1px solid var(--op-edge);border-radius:.8em;background:var(--op-node);color:var(--op-ink);font-size:.78em;font-weight:600;text-align:center;
  left:calc(4% + var(--c)*65%);top:calc(5% + var(--r)*90%);translate:0 calc(var(--r)*-100%);
  opacity:clamp(0,var(--tools)*4 - var(--i),1);transform:scale(calc(.7 + .3*clamp(0,var(--tools)*4 - var(--i),1)))}
.op-tool svg{width:1.7em;height:1.7em;color:var(--ai-sky)}
.op-link{stroke:#44adfe8c;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--tools)*4.4 - var(--i) - .4,1))}
.op-pulse{stroke:#c8ecff;stroke-width:3;stroke-dasharray:.07 .93;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 4px #44adfe)}
.op.is-wired.is-near .op-pulse{opacity:1;animation:op-pulse 1.9s linear infinite;animation-delay:calc(var(--i)*-.47s)}
@keyframes op-pulse{to{stroke-dashoffset:0}}
.op-toast{position:absolute;left:50%;top:70%;display:inline-flex;align-items:center;gap:.5em;padding:.55em .9em;border:1px solid #2fd38e73;border-radius:.6em;background:#0d3a2bf2;color:#c9f7e2;font-size:.8em;font-weight:600;white-space:nowrap;box-shadow:0 1em 2em -1em #000000cc;opacity:var(--toast);transform:translate(-50%,calc((1 - var(--toast))*1.1em))}
.op-toast svg{flex:none;width:1.15em;height:1.15em;color:#5fe3a8}

/* A wide window: nodes in a row, notes beside the quote, the proposal on the right. */
@container (min-width:30rem){
  .op-canvas{font-size:clamp(11px,2.25cqi,15px)}
  .op-node{left:calc(4.5% + var(--i)*24%);top:31%;width:19%}
  .op-node{font-size:.95em}
  .op-app{left:6%;right:6%;bottom:4%}
  .op-app-body{grid-template-columns:minmax(0,1fr) 2.6em minmax(0,1.15fr);grid-template-rows:none;align-items:center;gap:.6em;padding:1.1em 1.3em;font-size:1.25em}
  .op-spark{flex-direction:column;transform:none}
  .op-paper{left:35%;right:6%;top:4%;bottom:4%;font-size:1.12em}
  .op-tool{left:calc(4% + var(--c)*75%);top:calc(8% + var(--r)*84%);width:17%}
  .op-toast{top:auto;bottom:4.5%}
}

@media (min-width:64rem){
  .op-wrap{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,5vw,5rem);align-items:center}
  .op-win{aspect-ratio:4/3.2}
}

/* Player mode: the story plays on its own in the window, like a short video, while at least half of the
   window is on screen. The window carries its own controls: play/pause, one bar per step, the time. */
.op-player{display:none}
.op-scene{transition:opacity .45s ease}
.op.is-rewinding .op-scene{opacity:0}
.op.is-player .op-player{display:flex;flex:none;align-items:center;gap:.7rem;height:2.6rem;padding:0 .9rem 0 .4rem;border-top:1px solid #44adfe26;background:#0b2446e6}
.op-play{display:grid;flex:none;place-items:center;width:2.1rem;height:2.1rem;padding:0;border:0;border-radius:.45rem;background:none;color:#d7e9f8;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.op-play:hover{background:#44adfe24;color:#fff}
.op-play svg{width:1.05rem;height:1.05rem}
.op-play-play,.op.is-paused .op-play-pause{display:none}
.op.is-paused .op-play-play{display:block}
.op-chapters{display:grid;flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;min-width:0}
.op-chap{position:relative;height:2.1rem;padding:0;border:0;background:none;cursor:pointer}
.op-chap i{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#ffffff24;overflow:hidden;transition:background-color .2s ease}
.op-chap i::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--ai-sky);box-shadow:0 0 .4rem var(--ai-sky);transform-origin:left;transform:scaleX(var(--cp,0))}
.op-chap:hover i{background:#ffffff40}
.op-play:focus-visible,.op-chap:focus-visible{outline:2px solid #8bd0ff;outline-offset:1px}
.op-time{flex:none;font:500 .68rem/1 var(--ai-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ai-mute)}

/* Small screens: only the playing step shows, as a caption above the window. */
.op.is-player .op-wrap{gap:1.6rem}
.op.is-player .op-steps{margin-top:1.8rem}
.op.is-player .op-step{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s}
.op.is-player .op-step.is-active{visibility:visible;opacity:1;transition-delay:0s}
.op.is-player .op-step::before,.op.is-player .op-step::after{display:none}
.op.is-player .op-win{aspect-ratio:1/1.3}

@media (min-width:48rem){
  /* Clear the glass rail on the right edge. */
  .op.is-player .op-wrap{width:min(calc(100% - 10.5rem),var(--wrap))}
  .op.is-player .op-win{aspect-ratio:4/3.6}
}

@media (min-width:64rem){
  .op.is-player .op-wrap{gap:clamp(2.5rem,5vw,5rem)}
  .op.is-player .op-steps{margin-top:2.4rem}
  .op.is-player .op-step{grid-area:auto;visibility:visible;opacity:.45;transition:opacity .35s ease}
  .op.is-player .op-step.is-done{opacity:.78}
  .op.is-player .op-step.is-active,.op.is-player .op-step:hover{opacity:1}
  .op.is-player .op-step:not(:last-child)::before,.op.is-player .op-step:not(:last-child)::after{display:block}
  .op.is-player .op-win{aspect-ratio:auto;height:min(78svh,40rem)}
}

@media (prefers-reduced-motion:reduce){
  .op *,.op *::before,.op *::after{transition:none!important;animation:none!important}
}