/* FileFi v70 (Amar): the website intro, exactly like Stuziu's: a MacBook Air, live folder-TVs on its screen and big ones bursting out into the air. Then just "Enter". */
html,body.intro{background:#F8F7FB!important;color:#16161D!important;margin:0}
body.intro::before,body.intro::after{display:none!important}
body.intro{font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
body.intro .gfoot{background:#F8F7FB!important;color:#7C7C8A!important;border:0!important}
body.intro .gfoot a,body.intro .gfoot .copy{color:#7C7C8A!important}
.in{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;box-sizing:border-box;
  padding:calc(20px + env(safe-area-inset-top,0px)) 14px calc(28px + env(safe-area-inset-bottom,0px))}
.in *{box-sizing:border-box}
.in-bl{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;pointer-events:none}
.in-lg{position:relative;height:28px;width:auto;margin-top:4px;z-index:9}
/* the stage: one unit (U, set by a few lines of script) keeps the scene's shape on every screen; the scene is centered in it */
.in-stage{position:relative;flex:1 1 auto;width:100%;max-width:1300px;min-height:280px;margin:14px 0 18px;--U:4px;--cx:49;--cy:22.75}
.in-stage::before{content:"";position:absolute;left:50%;top:50%;width:calc(96 * var(--U));height:calc(60 * var(--U));transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,214,160,.55),rgba(201,196,255,.4) 50%,rgba(255,255,255,0) 76%);filter:blur(12px);animation:inGlow 4s ease-in-out infinite;pointer-events:none}
@keyframes inGlow{0%,100%{opacity:.7}50%{opacity:1}}
/* the MacBook Air (a real picture) with a live, soft screen */
.in-mac{position:absolute;left:calc(50% + (50 - var(--cx)) * var(--U));top:calc(50% + (0 - var(--cy)) * var(--U));width:calc(80 * var(--U));transform:translateX(-50%);z-index:1}
.in-mac img{display:block;width:100%;height:auto}
.in-scr{position:absolute;left:11.49%;top:5.33%;width:76.9%;height:80.22%;background:#F6F5FA;overflow:hidden;border-radius:2px}
.in-scr i{position:absolute;border-radius:50%;filter:blur(calc(4 * var(--U)));opacity:.6}
.in-s1{width:55%;height:80%;left:-12%;top:-10%;background:#FFD9B0}.in-s2{width:55%;height:80%;right:-14%;top:-20%;background:#D6D1FF}.in-s3{width:60%;height:70%;left:22%;bottom:-40%;background:#CDEFF9}
.in-notch{position:absolute;left:45.8%;top:5.2%;width:8.3%;height:2.3%;background:#0b0b0d;border-radius:0 0 calc(.5 * var(--U)) calc(.5 * var(--U))}
/* the folder-TVs: the classic folder, the video filling its front */
.in-f{--X:var(--x);--Y:var(--y);--W:var(--w);position:absolute;left:calc(50% + (var(--X) - var(--cx)) * var(--U));top:calc(50% + (var(--Y) - var(--cy)) * var(--U));width:calc(var(--W) * var(--U));transform:translate(-50%,-50%)}
.in-pop{animation:inOut 1.2s cubic-bezier(.2,.9,.25,1.18) var(--d) both}
@keyframes inOut{from{opacity:0;transform:translate(calc((50 - var(--X)) * var(--U)), calc((22 - var(--Y)) * var(--U))) scale(.12)}55%{opacity:1}to{opacity:1;transform:none}}
.in-fl{transform:rotate(var(--r));animation:inFloat 6s ease-in-out infinite}
.in-f:nth-child(4) .in-fl{animation-delay:-1s}.in-f:nth-child(5) .in-fl{animation-delay:-2s}.in-f:nth-child(6) .in-fl{animation-delay:-3s}.in-f:nth-child(7) .in-fl{animation-delay:-4s}.in-f:nth-child(8) .in-fl{animation-delay:-5s}
@keyframes inFloat{0%,100%{translate:0 0}50%{translate:0 calc(-1.1 * var(--U))}}
.in-fo{position:relative;aspect-ratio:1.3;margin-top:9%;--q:calc(var(--W) * var(--U))}
.in-fo i{position:absolute;display:block;font-style:normal}
.in-fo .t{left:0;top:-9%;width:44%;height:40%;border-radius:calc(.08 * var(--q)) calc(.08 * var(--q)) 0 0;background:var(--b)}
.in-fo .k{left:0;right:0;top:0;height:82%;border-radius:calc(.09 * var(--q));background:var(--b)}
.in-fo .f{left:0;right:0;bottom:0;top:16%;border-radius:calc(.1 * var(--q));background:linear-gradient(160deg,var(--f1),var(--f2));padding:calc(.045 * var(--q));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 calc(.14 * var(--q)) calc(.2 * var(--q)) calc(-.06 * var(--q)) var(--glow),0 6px 12px -8px var(--glow)}
.in-f.big .in-fo .f{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 calc(.16 * var(--q)) calc(.26 * var(--q)) calc(-.06 * var(--q)) var(--glow),0 calc(.06 * var(--q)) calc(.14 * var(--q)) rgba(30,20,60,.22)}
.in-tv{position:relative;display:block;width:100%;height:100%;border-radius:calc(.065 * var(--q));overflow:hidden;background:#111;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.in-tv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@keyframes inWord{0%{color:#FFE600;transform:scale(1.14)}33.3%{color:#fff;transform:scale(1)}100%{color:#fff;transform:scale(1)}}
@keyframes inSpin{to{transform:rotate(360deg)}}
/* the bottom: the title and one button (the part Amar loves, unchanged) */
.in-tt{position:relative;text-align:center;width:min(100%,460px);z-index:9;animation:inUp .9s ease 1.4s both}
@keyframes inUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.in-tt h1{font-family:Questrial,Poppins,sans-serif!important;font-weight:400!important;font-size:clamp(26px,7vw,44px);line-height:1.12;letter-spacing:.03em;margin:0 0 18px;color:#16161D!important}
.in-tt h1 span{display:block}
.in-go{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:62px;border-radius:20px;background:#16161D;color:#fff!important;font:600 20px Poppins,system-ui,sans-serif;text-decoration:none;box-shadow:0 18px 30px -14px rgba(20,20,40,.55);letter-spacing:.02em;position:relative;overflow:hidden}
.in-go::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));animation:inShine 3.2s ease-in-out 2.6s infinite}
@keyframes inShine{0%{left:-60%}55%,100%{left:120%}}
.in-go:active{transform:scale(.98)}
.in-go svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){.in-tt{width:min(100%,420px)}.in-tt h1{font-size:clamp(30px,3.2vw,46px)}}
@media (prefers-reduced-motion:reduce){.in-pop,.in-fl,.in-stage::before,.in-tt,.in-go::after{animation:none!important}}
html[lang="ar"] body.intro,html[lang="ar"] .in-go{font-family:Cairo,Poppins,system-ui,sans-serif}
/* phones: the big folders burst out above and below the MacBook, so nothing is cut off and the tall screen is used */
@media (max-width:599px){.in-stage{--cx:50;--cy:22.5}.in-f{--X:var(--x2);--Y:var(--y2);--W:var(--w2)}}
/* the motion engine places the folders itself (left/top 0, moved by transform) */
.in-stage.js .in-f{left:0;top:0;transform:none;width:calc(var(--W) * var(--U));will-change:transform}
.in-stage.js .in-pop{animation:none}
.in-stage.js .in-fl{animation:none;transform:rotate(var(--r))}
/* v17.4: big screens (iMac): the page is already enlarged to fit, so the intro is one screen tall there too (not 1.5 screens) */
html.stz-big .in{min-height:var(--vh100,100svh)}
/* v17.5: a folder's video shows only while it's really playing; until then (or if the computer falls behind) its photo shows, never black */
.in-tv video{opacity:0;transition:opacity .25s ease}
.in-tv video.on{opacity:1}
/* v17.5: a folder flies out showing its photo; its video comes alive the moment it lands */
.in-stage.js .in-f:not(.live) .in-tv video{opacity:0!important}

/* FileFi: every folder-TV plays a little live scene of its tools at work (a file goes in, the result comes out) */
.in-sc{position:absolute;inset:0;overflow:hidden;--q2:var(--q);background:radial-gradient(90% 120% at 15% 10%,#fff 0,var(--t1) 70%),var(--t1);color:#16161D;font-family:Poppins,system-ui,sans-serif}
.in-sc .ic{position:absolute;left:9%;top:16%;width:30%;aspect-ratio:1;border-radius:24%;display:grid;place-items:center;background:linear-gradient(160deg,var(--f1),var(--f2));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 calc(.04*var(--q)) calc(.07*var(--q)) calc(-.03*var(--q)) var(--glow)}
.in-sc .ic svg{width:62%;height:auto}
.in-sc .tx{position:absolute;left:45%;right:6%;top:18%}
.in-sc b{display:block;font-weight:600;font-size:calc(.074*var(--q));line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;transition:opacity .25s}
.in-sc small{display:block;font-size:calc(.05*var(--q));color:#6A6A78;margin-top:calc(.012*var(--q));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.in-sc .bar{position:absolute;left:9%;right:9%;bottom:17%;height:calc(.03*var(--q));min-height:3px;border-radius:99px;background:rgba(22,22,29,.1);overflow:hidden}
.in-sc .bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--f1),var(--f2))}
.in-sc.go .bar i{animation:scBar 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes scBar{to{width:100%}}
.in-sc .ok{position:absolute;right:9%;bottom:calc(17% + .05*var(--q));display:inline-flex;align-items:center;gap:.3em;font-size:calc(.05*var(--q));font-weight:600;color:#157A4B;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.in-sc .ok svg{width:1.15em;height:1.15em}
.in-sc.done .ok{opacity:1;transform:none}
.in-sc.swap b,.in-sc.swap small{opacity:0}
/* the QR folder: a real QR code (it opens filefi.com) drawing itself */
.in-qr{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(90% 120% at 15% 10%,#fff 0,#E4F6E1 70%),#E4F6E1}
.in-qr .card{width:56%;aspect-ratio:1;background:#fff;border-radius:12%;display:grid;place-items:center;box-shadow:0 calc(.03*var(--q)) calc(.08*var(--q)) rgba(40,110,60,.25)}
.in-qr svg{width:80%;height:80%}
.in-qr path{fill:#16161D}
.in-qr .scan{position:absolute;left:22%;right:22%;height:2px;top:24%;background:linear-gradient(90deg,transparent,#68B577,transparent);animation:qrScan 2.4s ease-in-out infinite;box-shadow:0 0 10px #98D8A3}
@keyframes qrScan{0%,100%{top:24%}50%{top:74%}}
@media (prefers-reduced-motion:reduce){.in-sc.go .bar i{animation:none;width:100%}.in-qr .scan{animation:none;display:none}}
/* the title in FileFi words */
.in-tt h1 span{display:block}
/* big screens (an iMac): the whole intro is enlarged once, keeping the laptop balance (as Stuziu does) */
html.stz-big body>main{zoom:var(--hz,1)}