/* =========================================================================================
   Light theme (white with purple touches) and the sun / moon toggle.
   html[data-theme="light"] is set by a small script at the top of the page (no flash) and by the toggle (fx.js).
   Every light rule starts with  html[data-theme="light"]:not(#a):not(#b)  so it wins over the dark rules in fx.css.
   ========================================================================================= */

/* ---------- the toggle ---------- */
.thm{position:relative;flex:none;width:64px;height:32px;margin-inline-start:12px;padding:0;border:0;border-radius:99px;cursor:pointer;background:none;-webkit-tap-highlight-color:transparent}
.thm:focus-visible{outline:2px solid #ffd23f;outline-offset:3px}
.thm-track{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(135deg,#1b0d44,#3a1a7a);box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18);transition:background .6s ease}
.thm-track::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#bfe3ff,#e9d9ff);opacity:0;transition:opacity .6s ease}
.thm-star{position:absolute;z-index:1;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff;transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .4s;animation:thmTw 2.4s ease-in-out infinite}
.thm-star.s1{left:12px;top:8px}.thm-star.s2{left:22px;top:19px;width:2px;height:2px;animation-delay:.6s}.thm-star.s3{left:31px;top:9px;width:2px;height:2px;animation-delay:1.2s}.thm-star.s4{left:8px;top:21px;width:2px;height:2px;animation-delay:1.8s}
@keyframes thmTw{50%{opacity:.35}}
.thm-cloud{position:absolute;z-index:1;height:9px;border-radius:9px;background:#fff;box-shadow:6px -4px 0 1px #fff,-5px -2px 0 0 #fff;opacity:0;transform:translateX(26px);transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .4s}
.thm-cloud.c1{right:12px;top:16px;width:16px}.thm-cloud.c2{right:26px;top:8px;width:10px;height:6px;box-shadow:4px -2px 0 0 #fff}
/* the knob: the moon with craters, sliding over and turning into the sun */
.thm-knob{position:absolute;z-index:2;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:#e9e4f7;box-shadow:inset -3px -3px 0 rgba(150,130,200,.45),0 2px 6px rgba(0,0,0,.35);transition:right .6s cubic-bezier(.5,0,.2,1),transform .6s cubic-bezier(.5,0,.2,1),background .5s,box-shadow .5s}
.thm-crater{position:absolute;border-radius:50%;background:rgba(150,130,200,.55);transition:opacity .35s}
.thm-crater.k1{width:7px;height:7px;left:5px;top:6px}.thm-crater.k2{width:4px;height:4px;left:13px;top:13px}.thm-crater.k3{width:3px;height:3px;left:7px;top:15px}
.thm-knob::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,200,40,.9) 0 8deg,transparent 8deg 30deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 72%,transparent 74%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 72%,transparent 74%);opacity:0;transform:scale(.6) rotate(0);transition:opacity .4s,transform .8s cubic-bezier(.2,.8,.2,1)}
.thm:hover .thm-knob{transform:scale(1.06)}
html:not([data-theme="light"]) .thm-track::after{opacity:1}
html:not([data-theme="light"]) .thm-star{opacity:0;transform:translateY(-14px)}
html:not([data-theme="light"]) .thm-cloud{opacity:1;transform:none}
html:not([data-theme="light"]) .thm-knob{right:36px;transform:rotate(-200deg);background:radial-gradient(circle at 40% 38%,#fff6b0,#ffd23f 55%,#f7a90c);box-shadow:0 0 12px rgba(255,190,40,.8),0 2px 6px rgba(150,90,0,.35)}
html:not([data-theme="light"]) .thm-crater{opacity:0}
html:not([data-theme="light"]) .thm-knob::before{opacity:1;transform:scale(1) rotate(90deg)}
html:not([data-theme="light"]) .thm:hover .thm-knob{transform:rotate(-200deg) scale(1.06)}
@media(max-width:900px){.thm{width:56px;height:28px;margin-inline-start:8px}.thm-knob{width:20px;height:20px}html:not([data-theme="light"]) .thm-knob{right:32px}}

/* the switch opens as a circle from the toggle (browsers with view transitions) */
html.thm-vt::view-transition-old(root),html.thm-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.thm-vt::view-transition-new(root){animation:thmReveal .75s cubic-bezier(.6,0,.2,1)}
@keyframes thmReveal{from{clip-path:circle(0 at var(--thm-x,50%) var(--thm-y,0))}to{clip-path:circle(150vmax at var(--thm-x,50%) var(--thm-y,0))}}

/* ---------- light theme: base ---------- */
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"]:not(#a):not(#b) body{--ink:#1d1238;--muted:rgba(29,18,56,.68);--line:rgba(80,40,160,.14);--card:rgba(120,80,220,.06);color:#1d1238;
  background:radial-gradient(60% 45% at 88% 4%,rgba(201,166,255,.38),rgba(201,166,255,0) 70%),radial-gradient(50% 40% at 6% 40%,rgba(255,122,217,.16),rgba(255,122,217,0) 70%),radial-gradient(55% 45% at 90% 85%,rgba(160,120,255,.18),rgba(160,120,255,0) 70%),#fbf8ff!important;background-attachment:fixed!important}


/* ---------- light theme: home page sections ---------- */
html[data-theme="light"]:not(#a):not(#b) .hero-img::after,html[data-theme="light"]:not(#a):not(#b) .hero-img::before{display:none!important}
html[data-theme="light"]:not(#a):not(#b) .hero-desat{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-theme="light"]:not(#a):not(#b) #story::after,html[data-theme="light"]:not(#a):not(#b) #services::before,html[data-theme="light"]:not(#a):not(#b) #process.proc::before{display:none!important}
html[data-theme="light"]:not(#a):not(#b) #services.svs,html[data-theme="light"]:not(#a):not(#b) #process.proc,html[data-theme="light"]:not(#a):not(#b) .sec-title{background:transparent!important}
html[data-theme="light"]:not(#a):not(#b) #projects.cfp{background:linear-gradient(180deg,rgba(201,166,255,0),rgba(201,166,255,.22) 260px,rgba(201,166,255,.22) calc(100% - 300px),rgba(201,166,255,0))!important}
/* text that was white on the dark page */
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] :is(.story,.extra-head,#contact,footer){color:#1d1238}
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] :is(.story-t,.story h2,.story h3,.story p){color:#1d1238!important;-webkit-text-fill-color:currentColor}
/* the dark veil over the whole page and the grain */
html[data-theme="light"]:not(#a):not(#b) body::before{display:none!important}
html[data-theme="light"]:not(#a):not(#b) body::after{opacity:.035!important}

/* ---------- light theme: header, buttons, bubble, about, process, footer ---------- */
html[data-theme="light"]:not(#a):not(#b) header .glass-nav{background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(246,240,255,.82))!important;border-color:rgba(138,43,226,.14)!important;box-shadow:0 12px 34px -18px rgba(80,40,160,.35),inset 0 0 0 1px rgba(138,43,226,.1)!important}
html[data-theme="light"]:not(#a):not(#b) header nav a,html[data-theme="light"]:not(#a):not(#b) header nav .mega-trigger{color:#2a1a4d!important}
html[data-theme="light"]:not(#a):not(#b) header nav a:hover{color:#8a2be2!important}
html[data-theme="light"]:not(#a):not(#b) .brand-txt.brand-svg{background-image:url(logo-name-dark.svg)!important}
html[data-theme="light"]:not(#a):not(#b) .burger .bl i{background:#2a1a4d!important}
html[data-theme="light"]:not(#a):not(#b) .burger .bt{color:#2a1a4d!important}
/* the outline button */
html[data-theme="light"]:not(#a):not(#b) .btn.ghost:not(.hero *){color:#5a1fa8!important;border-color:rgba(138,43,226,.45)!important;background:rgba(255,255,255,.55)!important}
html[data-theme="light"]:not(#a):not(#b) .btn.ghost:not(.hero *) svg{color:#5a1fa8;stroke:currentColor}
/* the running words at the bottom of the hero */
html[data-theme="light"]:not(#a):not(#b) .hero-marq{opacity:.75}
/* the avatar's bubble */
html[data-theme="light"]:not(#a):not(#b) .sav-bubble{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,236,255,.92))!important;border-color:rgba(138,43,226,.18)!important;color:#2a1a4d!important;box-shadow:0 24px 50px -24px rgba(80,40,160,.45)!important}
html[data-theme="light"]:not(#a):not(#b) .sav-bubble span{color:#2a1a4d!important}
html[data-theme="light"]:not(#a):not(#b) .sav-bubble::before{background:rgba(255,255,255,.95)!important}
html[data-theme="light"]:not(#a):not(#b) .sav-bubble::after{background:rgba(138,43,226,.18)!important}
/* about and process text */
/* footer */
html[data-theme="light"]:not(#a):not(#b) footer,html[data-theme="light"]:not(#a):not(#b) footer :is(p,a,li,span,small,h4,h5,b,div){color:#3b2d5c!important;-webkit-text-fill-color:#3b2d5c!important}
html[data-theme="light"]:not(#a):not(#b) footer a:hover{color:#8a2be2!important;-webkit-text-fill-color:#8a2be2!important}
html[data-theme="light"]:not(#a):not(#b) footer :is(h4,h5){color:#1d1238!important;-webkit-text-fill-color:#1d1238!important}
html[data-theme="light"]:not(#a):not(#b) footer{border-color:rgba(138,43,226,.14)!important}
/* the toggle sits at the top left, beside the call button */
html:not(#a) header .glass-nav{position:relative}
html:not(#a) header .glass-nav>.thm{position:absolute;left:84px;top:50%;translate:0 -50%;margin:0}
@media(max-width:900px){html:not(#a) header .glass-nav>.thm{left:auto;right:auto;inset-inline-end:auto}}
@media(max-width:900px){html:not(#a) header .glass-nav>.thm{left:62px!important}}

/* ---------- light theme: the hero keeps the moving background, lifted to a medium purple ---------- */
html[data-theme="light"]:not(#a):not(#b) body.gl #moltenBg{filter:brightness(2.25) saturate(.95) hue-rotate(18deg)!important}
html[data-theme="light"]:not(#a):not(#b) .hero-marq{opacity:1}
/* the hero melts into the light page at its bottom */
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] .hero-aura{display:block!important;z-index:-1;background:linear-gradient(180deg,rgba(251,248,255,0) 0,rgba(251,248,255,0) 62%,rgba(251,248,255,.85) 88%,#fbf8ff 100%)!important;contain:none}
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] .hero-aura b{display:none}
/* toggle, day: a see-through sky blue glass under the sun */
.thm-track::after{background:linear-gradient(135deg,rgba(86,170,255,.55),rgba(150,205,255,.38))}
html:not([data-theme="light"]) .thm-track{background:transparent;-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(86,170,255,.45),0 4px 12px -4px rgba(60,140,230,.45)}

/* ---------- light theme: purple sections (hero, services, about) and light sections ---------- */
/* light sections are opaque, so the moving background shows only through the purple ones */
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] :is(#story,#zoorix,#contact,footer){background-color:#fbf8ff!important}
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] .sec-title{background:#fbf8ff!important}
html[data-theme="light"]:not(#a):not(#b) #projects.cfp{background:linear-gradient(180deg,#fbf8ff 0,#efe6ff 260px,#efe6ff calc(100% - 300px),#fbf8ff 100%)!important}
/* services: the dark purple of the mega menu, fading into the light page above and below; the cards keep their dark glass */
html[data-theme="light"]:not(#a):not(#b) #services.svs{background:linear-gradient(180deg,#fbf8ff 0,rgba(251,248,255,0) 220px,rgba(251,248,255,0) calc(100% - 220px),#fbf8ff 100%),linear-gradient(135deg,#2e1d66,#1c1047)!important}
html[data-theme="light"]:not(#a):not(#b) #services .svs-h1{color:#fff!important;-webkit-text-fill-color:#fff!important}
/* about: the moving purple, with soft edges into the light sections around it */
html[data-theme="light"]:not(#a):not(#b) #about::before,html[data-theme="light"]:not(#a):not(#b) #about::after{content:"";position:absolute;left:0;right:0;height:180px;z-index:-1;pointer-events:none}
html[data-theme="light"]:not(#a):not(#b) #about::before{top:0;background:linear-gradient(180deg,#fbf8ff,rgba(251,248,255,0))}
html[data-theme="light"]:not(#a):not(#b) #about::after{bottom:0;background:linear-gradient(0deg,#fbf8ff,rgba(251,248,255,0))}

/* ---------- light theme: slow light purple circles moving behind the avatar section ---------- */
.st-blobs{display:none}
html[data-theme="light"]:not(#a):not(#b) .st-blobs{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
html[data-theme="light"] .st-blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;will-change:transform}
html[data-theme="light"] .st-blobs i:nth-child(1){width:34vw;height:34vw;left:-8vw;top:4%;background:#d9c2ff;animation:blobA 22s ease-in-out infinite alternate}
html[data-theme="light"] .st-blobs i:nth-child(2){width:28vw;height:28vw;right:-6vw;top:10%;background:#f6c6ec;animation:blobB 26s ease-in-out infinite alternate}
html[data-theme="light"] .st-blobs i:nth-child(3){width:26vw;height:26vw;left:34vw;top:40%;background:#e6d4ff;animation:blobC 24s ease-in-out infinite alternate}
html[data-theme="light"] .st-blobs i:nth-child(4){width:24vw;height:24vw;right:18vw;top:58%;background:#cdb4ff;animation:blobD 20s ease-in-out infinite alternate}
html[data-theme="light"] .st-blobs i:nth-child(5){width:30vw;height:30vw;left:-6vw;top:62%;background:#f3d1f0;animation:blobB 28s ease-in-out infinite alternate}
html[data-theme="light"] .st-blobs i:nth-child(6){width:22vw;height:22vw;right:-4vw;bottom:-6%;background:#dcc8ff;animation:blobA 23s ease-in-out infinite alternate}
html[data-theme="light"] .st-blobs i:nth-child(7){width:20vw;height:20vw;left:20vw;top:-6%;background:#efe0ff;animation:blobC 30s ease-in-out infinite alternate}
@media(max-width:900px){html[data-theme="light"] .st-blobs i{filter:blur(40px)}html[data-theme="light"] .st-blobs i:nth-child(n){width:70vw;height:70vw}}
@media(prefers-reduced-motion:reduce){.st-blobs i{animation:none!important}}
/* the Zoorix band: one even light lilac, soft only at its top and bottom edges */
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] #zoorix{background:linear-gradient(180deg,#fbf8ff 0,#efe6ff 120px,#efe6ff calc(100% - 120px),#fbf8ff 100%)!important}
html[data-theme="light"]:not(#a):not(#b) #zoorix.zx-band::before,html[data-theme="light"]:not(#a):not(#b) #zoorix.zx-band::after{display:none!important}
/* the hero fades into lilac (not white), and the avatar section starts in that lilac */
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] .hero-aura{background:linear-gradient(180deg,rgba(226,210,255,0) 0,rgba(226,210,255,0) 55%,rgba(226,210,255,.8) 84%,#e2d2ff 100%)!important}
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] #story{background:linear-gradient(180deg,#e2d2ff 0,#fbf8ff 420px)!important}
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] #story{background:#fbf8ff!important}
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] #zoorix{background:linear-gradient(180deg,#e2d2ff 0,#efe6ff 160px,#efe6ff calc(100% - 140px),#fbf8ff 100%)!important}
html[data-theme="light"]:not(#a):not(#b) body[data-page="home"] .hero-aura{bottom:-3px!important}
/* the toggle shows the mode it switches to (day in the dark theme, night in the light one); its name shows in a tooltip */
.thm::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 4px;white-space:nowrap;padding:6px 12px;border-radius:10px;font:600 13px/1.2 'Assistant',Arial,sans-serif;color:#fff;background:rgba(30,16,68,.92);box-shadow:0 10px 24px -10px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,translate .25s}
.thm::before{content:"";position:absolute;top:calc(100% + 4px);left:50%;translate:-50% 4px;border:6px solid transparent;border-bottom-color:rgba(30,16,68,.92);border-top:0;opacity:0;pointer-events:none;transition:opacity .2s,translate .25s}
.thm:hover::after,.thm:focus-visible::after,.thm:hover::before,.thm:focus-visible::before{opacity:1;translate:-50% 0}
html[data-theme="light"] .thm::after{background:rgba(255,255,255,.96);color:#2a1a4d;box-shadow:0 10px 24px -10px rgba(80,40,160,.45)}
html[data-theme="light"] .thm::before{border-bottom-color:rgba(255,255,255,.96)}
/* the process: the mega menu's dark purple. About runs straight into it, and it fades into the light page at its end */
html[data-theme="light"]:not(#a):not(#b) #process.proc{background:linear-gradient(180deg,rgba(251,248,255,0) 0,rgba(251,248,255,0) calc(100% - 220px),#fbf8ff 100%),linear-gradient(135deg,#2e1d66,#1c1047)!important}
html[data-theme="light"]:not(#a):not(#b) #about::after{background:linear-gradient(0deg,#2a1a5e,rgba(42,26,94,0))!important}
/* a light grid over the soft circles behind the avatar, fading toward the edges */
html[data-theme="light"]:not(#a):not(#b) .st-blobs::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(138,43,226,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(138,43,226,.17) 1px,transparent 1px);background-size:56px 56px;background-position:center center;-webkit-mask-image:radial-gradient(70% 65% at 50% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(70% 65% at 50% 50%,#000 30%,transparent 85%)}
@media(max-width:900px){html[data-theme="light"]:not(#a):not(#b) .st-blobs::after{background-size:40px 40px}}
/* project cards keep their own colours, so their text stays white as in the dark theme (the light Trigo card keeps its dark text) */
html[data-theme="light"]:not(#a):not(#b) .cfp-card:not(.plight) .pinfo{color:#fff}
html[data-theme="light"]:not(#a):not(#b) .cfp-card:not(.plight) .pinfo :is(p,.tag,ul li){color:rgba(255,255,255,.9)!important;-webkit-text-fill-color:rgba(255,255,255,.9)!important}
html[data-theme="light"]:not(#a):not(#b) .cfp-card:not(.plight) .pinfo ul li{border-color:rgba(255,255,255,.4)!important}
/* phones and tablets: the toggle stands upright under the bar, at the left edge, clear of the logo */
@media(max-width:900px){
  html:not(#a) header .glass-nav>.thm{left:-4px!important;top:calc(100% + 26px)!important;translate:none!important;rotate:90deg;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);border-radius:99px}
  .thm::before,.thm::after{display:none}
}