/* File-first Florence: softly feathered pigment, fine grain and a floating neural mesh. */
/* Every size shares an idle cycle; interaction classes add the stronger reactions. */
.florence-orb{--idle-lift:-8px;--idle-scale:1.025;animation:florence-idle 6s ease-in-out infinite}
.florence-orb.small{--idle-lift:-2px;--idle-scale:1.035;animation:florence-idle 5s ease-in-out infinite}
.focus-shell{overflow-x:clip}
.focus-intake{padding-top:8px;padding-bottom:28px}
.focus-main .orb-intake{padding-top:4px;padding-bottom:10px;min-height:calc(100svh - 130px)}
.focus-intake .stepper{margin-bottom:clamp(14px,2.5vh,28px)}
.focus-intake .orb-intake-form{max-width:860px;width:100%;margin:0;text-align:center;animation:none}
.focus-intake .orb-wrap{padding:12px 0 28px}
.orb-drop{--orb-size:clamp(290px,42vh,460px);position:relative;display:block;width:var(--orb-size);height:var(--orb-size);margin:auto;cursor:pointer;isolation:isolate;border-radius:50%;-webkit-tap-highlight-color:transparent}
.orb-drop>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:5;border-radius:50%;padding:0}
.orb-drop:has(input:focus-visible){outline:2px solid #705883;outline-offset:16px}
.focus-intake .living-orb,.focus-processing .living-orb{width:100%;height:100%;pointer-events:none}
:is(.orb-zone,.portfolio-hero) .orb-colour{filter:blur(9px)}
:is(.orb-zone,.portfolio-hero) .colour-fold{filter:blur(2px)}
.living-orb .orb-aura{position:absolute;inset:-6%;border-radius:46% 54% 59% 41%/53% 42% 58% 47%;background:radial-gradient(ellipse at 27% 34%,#b7d7a899,transparent 52%),radial-gradient(ellipse at 73% 62%,#b58fd577,transparent 55%),radial-gradient(ellipse at 43% 76%,#e4a3ba66,transparent 50%);filter:blur(16px);opacity:.55;animation:florence-aura 19s ease-in-out infinite}
.orb-surface{position:absolute;inset:-4%;border-radius:47% 53% 44% 56%/55% 43% 57% 45%;overflow:hidden;background:#b9cfe4;isolation:isolate;mask-image:radial-gradient(ellipse closest-side at 49% 50%,#000 77%,#000f 83%,#000d 88%,#0007 93%,#0002 97%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side at 49% 50%,#000 77%,#000f 83%,#000d 88%,#0007 93%,#0002 97%,transparent 100%);animation:florence-morph 11s ease-in-out infinite}
.orb-colour{position:absolute;inset:-25%;border-radius:45%;filter:blur(22px);will-change:transform}
.colour-one{background:conic-gradient(from 30deg at 46% 45%,#a4e4c8,#81c6e6 17%,#7060cf 37%,#ba8de5 54%,#f0a7c3 68%,#f1d3a4 82%,#a4e4c8);animation:florence-current 8s linear infinite}
.colour-two{inset:-12%;background:radial-gradient(ellipse at 23% 65%,#2679bd 0%,#528bcc 24%,transparent 53%),radial-gradient(ellipse at 76% 28%,#e8edc0 0%,#a6e3cf 22%,transparent 54%);mix-blend-mode:multiply;opacity:.78;animation:florence-tide 10s -2s ease-in-out infinite}
.colour-three{inset:-15%;background:radial-gradient(ellipse at 66% 70%,#ffe2dd 0%,#efb7d2 20%,transparent 48%),radial-gradient(ellipse at 25% 28%,#e7f5e4 0%,transparent 39%);mix-blend-mode:screen;animation:florence-tide 12s -8s ease-in-out infinite reverse}
/* A moving pigment fold introduces a clearer meeting of colours among the soft washes. */
.colour-fold{inset:-8%;background:radial-gradient(ellipse at 20% 78%,#357d9e 0%,#6761b9 38%,#9f86c9 43%,#cba4d37d 45%,transparent 48%);filter:blur(3px);mix-blend-mode:multiply;opacity:.64;animation:florence-fold 7s -3s ease-in-out infinite alternate}
.orb-edge{position:absolute;inset:0;background:conic-gradient(from 25deg,#b4c67d,#68bdb0 20%,#87a7ce 36%,#a183c5 53%,#d997af 70%,#dbb98b 86%,#b4c67d);mask-image:radial-gradient(ellipse closest-side at 49% 50%,transparent 64%,#0009 83%,#000 95%);-webkit-mask-image:radial-gradient(ellipse closest-side at 49% 50%,transparent 64%,#0009 83%,#000 95%);filter:blur(5px);opacity:.66;animation:florence-current 18s linear infinite}
.orb-glaze{position:absolute;inset:0;background:radial-gradient(ellipse at 28% 23%,#fff4de24,transparent 56%),radial-gradient(ellipse at 71% 81%,#63537e20,transparent 58%);filter:blur(9px)}
.orb-grain{position:absolute;inset:0;background:url('../assets/florence-grain.svg') repeat;background-size:180px 180px;mix-blend-mode:overlay;opacity:.46;filter:contrast(3);pointer-events:none}
.orb-grain:after{content:'';position:absolute;inset:0;background:inherit;background-size:235px 235px;background-position:67px 113px;mix-blend-mode:multiply;opacity:.34}
.brain-constellation{position:absolute;inset:25% 24% 23%;display:grid;place-items:center;animation:neural-drift 9s ease-in-out infinite;filter:none}
.brain-constellation img{width:100%;height:100%;object-fit:contain;opacity:.74;user-select:none}
.brain-signal{position:absolute;inset:15% 4% 25%;border-radius:50%;background:linear-gradient(115deg,transparent 30%,#f5fbff70 48%,transparent 64%);filter:blur(12px);mix-blend-mode:screen;animation:neural-signal 6s ease-in-out infinite;pointer-events:none}
/* Scale the texture, pigment softness and mesh movement for compact inline orbs. */
.living-orb.small .orb-aura{filter:blur(3px);opacity:.5}
.living-orb.small .orb-colour{filter:blur(2px)}
.living-orb.small .colour-fold{filter:blur(.55px)}
.living-orb.small .orb-edge{filter:blur(1px)}
.living-orb.small .orb-glaze,.living-orb.small .brain-signal{filter:blur(2px)}
.living-orb.small .orb-grain{background-size:60px 60px;opacity:.32}
.living-orb.small .brain-constellation{inset:19% 17% 18%;animation:neural-small-drift 7s ease-in-out infinite}
.living-orb.small .brain-constellation img{opacity:.85}
@keyframes neural-small-drift{0%,100%{transform:translate(-.7px,.7px) rotate(-3deg)}50%{transform:translate(.7px,-1px) rotate(3deg)}}
.orb-particle{display:none}
.particle-one{left:30%;top:35%}.particle-two{left:65%;top:43%;animation-delay:-1.8s}.particle-three{left:48%;top:65%;animation-delay:-3s}
.orb-drop-cue{position:absolute;bottom:-7px;left:calc(50% - 20px);width:40px;height:40px;display:grid;place-items:center;background:#fbf2f4d9;border:1px solid #fff9;border-radius:50%;color:#5e4667;box-shadow:0 5px 20px #624b7612;transition:transform .4s,opacity .3s;pointer-events:none}
.orb-drop-hover{position:absolute;inset:0;display:grid;place-items:center;color:#39364e;font-size:17px;font-weight:500;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none}
.orb-drop .brain-constellation{transition:opacity .35s}
.orb-drop .living-orb{translate:var(--pull-x,0) var(--pull-y,0);transition:translate .22s ease-out,scale .5s cubic-bezier(.2,.8,.2,1),filter .4s}
.orb-drop:hover .living-orb,.orb-drop:focus-within .living-orb{scale:1.035;filter:saturate(1.15)}
.orb-drop.dragover .living-orb{scale:1.12;filter:saturate(1.3) brightness(1.06)}
.orb-drop.dragover .orb-aura{scale:1.16;filter:blur(12px)}
.orb-drop.dragover .orb-edge{opacity:.95}
.orb-drop.dragover .orb-surface{border-radius:44% 56% 46% 54%/53% 43% 57% 47%}
.orb-drop.dragover .brain-constellation{opacity:.2}
.orb-drop.dragover .orb-drop-hover{opacity:1;transform:translateY(0)}
.orb-drop.dragover .orb-drop-cue{transform:rotate(90deg) scale(.8);opacity:0}
.orb-drop.dragover .orb-colour{animation-duration:3s}
.orb-drop.receiving .living-orb{scale:1;translate:0 0;animation:florence-receive 1.4s cubic-bezier(.2,.7,.2,1) both}
.orb-drop.receiving .brain-constellation{opacity:.3}
.orb-drop.receiving .orb-drop-hover{opacity:0}
.orb-drop.receiving .orb-drop-cue{opacity:0;transform:translateY(-120px) scale(0)}
.orb-drop.receiving .orb-colour{animation-duration:2s}
.focus-intake .intake-copy{animation:focus-rise 800ms 250ms cubic-bezier(.16,1,.3,1) both}
.focus-intake .intake-copy>.eyebrow{font-size:10px;letter-spacing:.18em}
.focus-intake h1{font-size:clamp(48px,5.3vw,76px);line-height:.94;margin:18px 0 15px;animation:none}
.intake-copy>p{color:var(--muted);font-size:13px;line-height:1.75;margin:0 auto;max-width:540px}
.orb-intake-form .file-chips{justify-content:center;margin:16px auto 0;max-width:600px}
.orb-intake-form .file-chips:empty,.orb-intake-form .error:empty{display:none}
.orb-intake-form .error{margin:14px auto;max-width:600px}
#intake-continue{margin-top:20px}
.focus-processing .processing-orb-wrap{width:clamp(280px,40vh,420px);height:clamp(280px,40vh,420px);margin:18px auto 30px}
.focus-processing h1{font-size:clamp(48px,6vw,76px)}
@keyframes florence-idle{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(var(--idle-lift)) rotate(2deg) scale(var(--idle-scale))}}
@keyframes florence-morph{0%,100%{border-radius:48% 52% 47% 53%/53% 46% 54% 47%}50%{border-radius:53% 47% 55% 45%/47% 54% 46% 53%}}
@keyframes florence-current{to{transform:rotate(360deg)}}
@keyframes florence-fold{0%{transform:translate(-12%,10%) rotate(-35deg) scale(1.08,1.02)}100%{transform:translate(14%,-10%) rotate(48deg) scale(1.18,1.08)}}
/* Offset, opposing currents keep the colour moving through the orb rather than as one surface. */
@keyframes florence-tide{0%,100%{transform:translate(-10%,5%) rotate(-25deg) scale(1.08)}25%{transform:translate(8%,-12%) rotate(30deg) scale(1.18,1.08)}50%{transform:translate(13%,6%) rotate(85deg) scale(1.08,1.18)}75%{transform:translate(-8%,12%) rotate(35deg) scale(1.16)}}
@keyframes florence-aura{0%,100%{transform:rotate(-12deg) scale(.98);opacity:.65}50%{transform:rotate(16deg) scale(1.07,.96);opacity:.85}}
@keyframes neural-drift{0%,100%{transform:perspective(700px) translate(-3px,3px) rotateY(-10deg) rotateZ(-3deg)}50%{transform:perspective(700px) translate(3px,-5px) rotateY(12deg) rotateZ(3deg)}}
@keyframes neural-signal{0%,100%{opacity:.1;transform:translateX(-18%)}50%{opacity:.65;transform:translateX(18%)}}
@keyframes neural-pulse{0%,100%{opacity:.2;scale:.7}50%{opacity:1;scale:1.25}}
@keyframes florence-receive{0%{transform:scale(1.08)}30%{transform:scale(1.15);filter:saturate(1.4) brightness(1.08)}58%{transform:scale(.91);filter:saturate(1.3) brightness(1.16)}78%{transform:scale(1.045)}100%{transform:scale(1);filter:saturate(1.1)}}
.motion-paused .living-orb,.motion-paused .living-orb *,.tab-hidden .living-orb,.tab-hidden .living-orb *{animation-play-state:paused!important}
@media(min-height:1000px){.orb-drop{--orb-size:clamp(390px,43vh,540px)}}
@media(max-width:600px){.focus-intake .orb-wrap{padding:15px 0 25px}.orb-drop{--orb-size:min(76vw,350px)}.focus-intake .stepper{margin-bottom:30px}.focus-intake h1{font-size:clamp(46px,11vw,64px);margin:18px 0 16px}.intake-copy>p{font-size:12px;max-width:310px}.intake-copy .file-help{font-size:9px;max-width:250px}.focus-intake .intake-copy>.eyebrow{font-size:9px}.orb-drop-hover{font-size:14px}.focus-processing .processing-orb-wrap{width:min(76vw,350px);height:min(76vw,350px)}}
@media(max-width:380px){.focus-intake .stepper{gap:5px}.focus-intake .stepper span{gap:4px;font-size:8px}.focus-intake .stepper i{width:7px}.focus-intake h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){.living-orb,.living-orb *{animation:none!important;transition:none!important}.orb-drop .living-orb,.orb-drop-cue,.orb-drop-hover{transition:none!important}.orb-drop.receiving .living-orb{transform:none}.orb-colour{will-change:auto}}

/* File tokens converge on the centre; a soft inward wave marks the moment of capture. */
.orb-capture-wave{position:absolute;inset:-9%;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(ellipse,transparent 54%,#c4e6dc55 62%,#fff5e5aa 65%,#b8a5d83d 70%,transparent 76%);filter:blur(5px)}
.orb-drop.dragover .orb-capture-wave{animation:orb-invitation 1.8s ease-in-out infinite}
.orb-drop.receiving .orb-capture-wave{animation:orb-capture 1.2s ease-out both}
.orb-file-flight{position:absolute;inset:0;pointer-events:none;z-index:6}
.absorbed-file{position:absolute;left:50%;top:50%;width:98px;min-height:66px;margin:-33px 0 0 -49px;padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:12px;background:#fff7f0e8;border:1px solid #ffffffc2;box-shadow:0 8px 26px #514f7726;color:#66516e;animation:orb-file-absorb 950ms var(--file-delay) cubic-bezier(.45,0,.25,1) both}
.absorbed-file-symbol{width:17px;height:21px;display:block;border:1px solid #9a82a4;border-radius:3px;background:linear-gradient(#9a82a4,#9a82a4) 3px 10px/9px 1px no-repeat,linear-gradient(#9a82a4,#9a82a4) 3px 14px/6px 1px no-repeat}
.absorbed-file-name{display:block;max-width:100%;font-size:9px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes orb-invitation{0%,100%{opacity:.15;transform:scale(1.02)}50%{opacity:.65;transform:scale(.95)}}
@keyframes orb-capture{0%{opacity:0;transform:scale(1.17)}20%{opacity:.8}75%{opacity:.55;transform:scale(.35)}100%{opacity:0;transform:scale(.08)}}
@keyframes orb-file-absorb{0%{opacity:0;transform:translate(var(--file-x),var(--file-y)) rotate(var(--file-angle)) scale(.85)}15%{opacity:1;transform:translate(var(--file-x),var(--file-y)) rotate(var(--file-angle)) scale(1)}55%{opacity:.9;transform:translate(calc(var(--file-x) * .4),calc(var(--file-y) * .4)) rotate(-8deg) scale(.72);filter:blur(0)}100%{opacity:0;transform:translate(0,0) rotate(16deg) scale(.04);filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.orb-drop .living-orb{translate:0 0!important}.orb-capture-wave,.orb-file-flight{display:none}.orb-drop.dragover .living-orb{scale:1.03}}

#intake-continue .btn:disabled{opacity:.55;cursor:wait}

/* Revisit the brief without discarding the files or edits already collected. */
.step-button{display:flex;align-items:center;gap:8px;min-height:43px;padding:8px 14px;border:1px solid #a7879d55;border-radius:999px;background:#fff6f54d;color:#705668;text-align:left;cursor:pointer;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.step-button.current{border-color:#946e875e;background:#e3cad8;box-shadow:0 2px 8px #79546b08}
.step-button span{font-size:10px}
.step-button b{flex-shrink:0}
.step-button:not(:disabled):hover{color:#513747;background:#fff4f7bf;border-color:#946e8799;box-shadow:0 3px 10px #79546b12}
.step-button:focus-visible{outline:2px solid #79546b;outline-offset:4px}
.step-button:disabled{opacity:.42;cursor:not-allowed}
.file-chip{display:inline-flex;align-items:center;gap:6px}
.file-chip>svg{flex-shrink:0;width:16px;height:16px}
.file-chip-name{min-width:0;overflow-wrap:anywhere}
.file-remove{display:flex;align-items:center;justify-content:center;gap:4px;flex-shrink:0;min-width:70px;min-height:32px;padding:4px 7px;font-size:10px;border-radius:8px;color:#76526b;margin:-3px -4px -3px 0;transition:background .2s}
.file-remove svg{width:14px;height:14px}
.file-remove:hover{background:#dcbaca80}
.file-remove:focus-visible{outline:2px solid #79546b;outline-offset:2px}
/* Small documents circulate inside the colour before the first-look screen opens. */
.orb-digestion{position:absolute;inset:12%;border-radius:50%;overflow:hidden;pointer-events:none}
.digesting .brain-constellation{opacity:.32}
.digest-path{position:absolute;left:50%;top:50%;width:0;height:0;animation:document-digest 2.7s var(--doc-delay) ease-in-out infinite}
.digest-document{position:absolute;display:grid;place-items:center;width:36px;height:44px;margin:-22px 0 0 -18px;border:1px solid #ffffffa6;border-radius:7px;background:#fff8f0b0;box-shadow:0 4px 14px #4c42651a;color:#655779;backdrop-filter:blur(2px);transform:rotate(calc(-1 * var(--doc-angle)));animation:document-breathe 2.7s var(--doc-delay) ease-in-out infinite}
.digest-document svg{width:23px;height:27px}
@keyframes document-digest{0%{transform:rotate(var(--doc-angle)) translateX(78px) rotate(-12deg)}50%{transform:rotate(calc(var(--doc-angle) + 180deg)) translateX(43px) rotate(14deg)}100%{transform:rotate(calc(var(--doc-angle) + 360deg)) translateX(78px) rotate(-12deg)}}
@keyframes document-breathe{0%,100%{opacity:.85;scale:1;filter:blur(0)}50%{opacity:.55;scale:.66;filter:blur(.5px)}}
@media(max-width:600px){.focus-main .stepper{width:100%;gap:6px;max-width:450px}.focus-main .stepper i{width:12px;flex-shrink:0}.step-button{flex:1;min-width:0;gap:5px;padding:7px 8px;min-height:49px}.step-button span{font-size:9px}.digest-document{width:29px;height:36px;margin:-18px 0 0 -14px}.digest-document svg{width:19px;height:23px}}
@media(prefers-reduced-motion:reduce){.digest-path,.digest-document{animation:none!important}.digest-path{transform:rotate(var(--doc-angle)) translateX(65px)}}

/* A quieter starting point: one instruction, one upload target, one next step. */
.focus-intake .orb-intake-form{max-width:680px}
.focus-intake .intake-copy h1{font-size:clamp(34px,4vw,48px);line-height:1.05;margin:10px 0 13px}
.focus-intake .orb-wrap{padding:32px 0 20px}
.focus-intake .orb-drop{--orb-size:clamp(220px,32vh,320px)}
.focus-intake .intake-files{margin-top:0}
.focus-intake #intake-continue{margin-top:16px}
.focus-intake .intake-help{margin:22px auto 0;color:var(--muted);font-size:10px;max-width:360px}
.intake-help>summary{cursor:pointer;width:max-content;margin:auto;list-style:none;padding:6px 10px;border-radius:999px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ccc}
.intake-help>summary::-webkit-details-marker{display:none}
.intake-help>summary:focus-visible{outline:2px solid #79546b;outline-offset:3px}
.intake-help p{padding:9px 12px;font-size:10px;line-height:1.7}
@media(max-width:600px){.focus-intake .intake-copy h1{font-size:34px}.focus-intake .orb-drop{--orb-size:min(62vw,270px)}.focus-intake .orb-wrap{padding:30px 0 18px}.focus-intake .intake-copy>p{max-width:280px;font-size:12px}.focus-intake .stepper{margin-bottom:18px}}
/* Four brief steps: on phones only the current step keeps its label; the others show their number. */
@media(max-width:500px){.focus-main .stepper .step-button:not(.current){flex:0 0 auto;padding:7px}.focus-main .stepper .step-button:not(.current) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.focus-main .stepper .step-button.current{flex:1 1 auto}.focus-main .stepper .step-button.current span{white-space:nowrap}}