:root { color-scheme: light; }
* { box-sizing: border-box; }
html,body { margin:0; width:100%; min-height:100%; overflow:hidden; }
body { min-height:100vh; min-height:100svh; position:relative; isolation:isolate; background:radial-gradient(ellipse at 50% 44%,#fff 0%,#f3f9ff 54%,#e4f2ff 100%); }
.ambient { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.background-cloud { position:absolute; display:block; width:var(--w); max-width:none; height:auto; top:var(--top); opacity:var(--opacity); filter:var(--tint); -webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.88) 44%,rgba(0,0,0,.60) 75%,rgba(0,0,0,.20) 100%); mask-image:linear-gradient(105deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.88) 44%,rgba(0,0,0,.60) 75%,rgba(0,0,0,.20) 100%); pointer-events:none; user-select:none; will-change:transform; animation:travel var(--duration) linear infinite; animation-delay:var(--delay); }
/* One oversized watermark cloud fills the negative space, without competing with the logo. */
.cloud-giant { --w:clamp(680px,98vw,1700px); --top:13%; --opacity:.048; --tint:saturate(.30) hue-rotate(9deg) brightness(1.18); --duration:210s; --delay:-110s; --from:-82vw; --to:32vw; -webkit-mask-image:linear-gradient(110deg,transparent 0%,rgba(0,0,0,.7) 27%,rgba(0,0,0,.92) 56%,transparent 100%); mask-image:linear-gradient(110deg,transparent 0%,rgba(0,0,0,.7) 27%,rgba(0,0,0,.92) 56%,transparent 100%); }
/* Each cloud uses the exact cloud mark extracted from the NEFO logo. 
   Alternating direction with negative animation delays makes the sky feel organic. */
.cloud-a { --w:clamp(150px,22vw,340px); --top:8%;  --opacity:0.153; --tint:saturate(.67) hue-rotate(-7deg);  --duration:86s; --delay:-27s; --from:-32vw; --to:112vw; }
.cloud-b { --w:clamp(120px,17vw,260px); --top:18%; --opacity:0.119; --tint:saturate(.46) hue-rotate(10deg); --duration:97s; --delay:-64s; --from:112vw; --to:-32vw; }
.cloud-c { --w:clamp(170px,25vw,370px); --top:70%; --opacity:0.128; --tint:saturate(.6) hue-rotate(17deg);  --duration:104s;--delay:-47s; --from:112vw; --to:-32vw; }
.cloud-d { --w:clamp(145px,20vw,290px); --top:78%; --opacity:0.111; --tint:saturate(.5) hue-rotate(-14deg); --duration:92s; --delay:-70s; --from:-32vw; --to:112vw; }
.cloud-e { --w:clamp(90px,12vw,175px);  --top:56%; --opacity:0.102; --tint:saturate(.45); --duration:80s; --delay:-19s; --from:112vw; --to:-32vw; }
.cloud-f { --w:clamp(110px,15vw,225px); --top:36%; --opacity:0.119; --tint:saturate(.57) hue-rotate(-5deg); --duration:112s;--delay:-83s; --from:-32vw; --to:112vw; }
.cloud-g { --w:clamp(120px,17vw,245px); --top:47%; --opacity:0.119; --tint:saturate(.6) hue-rotate(12deg); --duration:98s; --delay:-34s; --from:112vw; --to:-32vw; }
.cloud-h { --w:clamp(135px,19vw,275px); --top:4%;  --opacity:0.093; --tint:saturate(.6) hue-rotate(-10deg); --duration:106s;--delay:-76s; --from:-32vw; --to:112vw; }
.cloud-i { --w:clamp(95px,14vw,195px);  --top:82%; --opacity:0.111; --tint:saturate(.55) hue-rotate(5deg); --duration:115s;--delay:-38s; --from:112vw; --to:-32vw; }
.cloud-j { --w:clamp(105px,16vw,225px); --top:31%; --opacity:0.093; --tint:saturate(.45) hue-rotate(16deg); --duration:123s;--delay:-102s;--from:-32vw; --to:112vw; }

/* Five additional brand-cloud silhouettes, staggered through the sky. */
.cloud-k { --w:clamp(115px,18vw,265px); --top:62%; --opacity:.115; --tint:saturate(.43) hue-rotate(-15deg) brightness(1.09); --duration:119s; --delay:-52s; --from:-32vw; --to:112vw; }
.cloud-l { --w:clamp(80px,11vw,160px); --top:12%; --opacity:.108; --tint:saturate(.38) hue-rotate(23deg) brightness(1.12); --duration:129s; --delay:-93s; --from:112vw; --to:-32vw; }
.cloud-m { --w:clamp(165px,23vw,345px); --top:83%; --opacity:.102; --tint:saturate(.50) hue-rotate(-21deg) brightness(1.10); --duration:137s; --delay:-31s; --from:-32vw; --to:112vw; }
.cloud-n { --w:clamp(100px,13vw,205px); --top:42%; --opacity:.095; --tint:saturate(.36) hue-rotate(19deg) brightness(1.14); --duration:109s; --delay:-11s; --from:112vw; --to:-32vw; }
.cloud-o { --w:clamp(135px,19vw,280px); --top:24%; --opacity:.105; --tint:saturate(.45) hue-rotate(7deg) brightness(1.09); --duration:143s; --delay:-111s; --from:-32vw; --to:112vw; }
/* Individual fades give subtle varied luminosity rather than flat-color stamps. */
.cloud-b,.cloud-f,.cloud-l,.cloud-o { -webkit-mask-image:linear-gradient(125deg,rgba(0,0,0,.14),rgba(0,0,0,.92) 58%,rgba(0,0,0,.27)); mask-image:linear-gradient(125deg,rgba(0,0,0,.14),rgba(0,0,0,.92) 58%,rgba(0,0,0,.27)); }
.cloud-c,.cloud-h,.cloud-k,.cloud-m { -webkit-mask-image:linear-gradient(70deg,rgba(0,0,0,.7),rgba(0,0,0,.95) 27%,rgba(0,0,0,.13)); mask-image:linear-gradient(70deg,rgba(0,0,0,.7),rgba(0,0,0,.95) 27%,rgba(0,0,0,.13)); }

@keyframes travel { from { transform:translate3d(var(--from),0,0); } to { transform:translate3d(var(--to),0,0); } }
.center { position:relative; z-index:2; min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:clamp(16px,4vw,36px); }
.logo { display:block; width:min(57vw,580px,76vh); max-width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 22px 32px rgba(30,105,190,.07)); animation:appear 1.3s ease-out both, logo-float 10s ease-in-out 1.3s infinite; user-select:none; -webkit-user-drag:none; }
@keyframes appear { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
@keyframes logo-float { 0%,100% { translate:0 0 } 50% { translate:0 -8px } }
@media(max-width:650px) { .logo { width:min(88vw,410px); } .background-cloud { opacity:calc(var(--opacity) * .85); } }
@media(max-height:480px) and (orientation:landscape) { .logo { width:min(50vw,78vh); } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important;transition:none!important } .background-cloud { transform:translate3d(35vw,0,0); } }